View | Details | Raw Unified | Return to bug 35633
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css (-267 / +1 lines)
Lines 1-267 Link Here
1
.chocolat-zoomable.chocolat-zoomed {
1
:root{--chocolat-icon-left:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22M15.3 20.7 10.7 16l4.6-4.7m7.4 4.7h-12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-right:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22m16.7 11.3 4.6 4.7-4.6 4.7M9.3 16h12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-close:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22m12 12 8 8m0-8-8 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-loader:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2238%22 height%3D%2238%22%3E %3Cg transform%3D%22translate(1 1)%22 stroke-width%3D%222%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle stroke-opacity%3D%22.2%22 stroke%3D%22%23000%22 cx%3D%2218%22 cy%3D%2218%22 r%3D%2218%22%2F%3E %3Cpath d%3D%22M36 18C36 8 28 0 18 0%22 stroke%3D%22%23fff%22%3E %3CanimateTransform attributeName%3D%22transform%22 type%3D%22rotate%22 from%3D%220 18 18%22 to%3D%22360 18 18%22 dur%3D%221s%22 repeatCount%3D%22indefinite%22%2F%3E %3C%2Fpath%3E %3C%2Fg%3E%3C%2Fsvg%3E");--chocolat-icon-fullscreen:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16 16%22%3E %3Cg stroke%3D%22%23fff%22 fill%3D%22none%22%3E %3Cpath d%3D%22M.5 2.5h15v11H.5z%22%2F%3E %3Cpath d%3D%22M7.5 7.5h8v6h-8z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E")}.chocolat-zoomable.chocolat-zoomed{cursor:zoom-out}.chocolat-open{overflow:hidden}.chocolat-overlay{transition:opacity 0.4s ease, visibility 0s 0.4s ease;height:100%;width:100%;position:fixed;left:0;top:0;z-index:10;background-color:#fff;visibility:hidden;opacity:0}.chocolat-overlay.chocolat-visible{transition:opacity 0.4s, visibility 0s;visibility:visible;opacity:0.8}.chocolat-wrapper{transition:opacity 0.4s ease, visibility 0s 0.4s ease;width:100%;height:100%;position:fixed;opacity:0;left:0;top:0;z-index:16;color:#fff;visibility:hidden}.chocolat-wrapper.chocolat-visible{transition:opacity 0.4s, visibility 0s;opacity:1;visibility:visible}.chocolat-zoomable .chocolat-img{cursor:zoom-in}.chocolat-loader{transition:opacity 0.3s;height:38px;width:38px;position:absolute;left:50%;top:50%;margin-left:-19px;margin-top:-19px;z-index:11;background:var(--chocolat-icon-loader);opacity:0}.chocolat-loader.chocolat-visible{opacity:1}.chocolat-image-wrapper{position:fixed;width:0;height:0;left:50%;top:50%;z-index:14;text-align:left;transform:translate(-50%, -50%)}.chocolat-image-wrapper .chocolat-img{position:absolute;width:100%;height:100%}.chocolat-wrapper .chocolat-left{width:50px;height:100px;cursor:pointer;background:var(--chocolat-icon-left) 50% 50% / 2rem auto no-repeat;z-index:17;visibility:hidden}.chocolat-layout{display:flex;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0}.chocolat-image-canvas{transition:opacity 0.2s;opacity:0;flex-grow:1;align-self:stretch}.chocolat-image-canvas.chocolat-visible{opacity:1}.chocolat-center{flex-grow:1;display:flex;justify-content:center;align-items:center;user-select:none}.chocolat-wrapper .chocolat-right{width:50px;height:100px;cursor:pointer;background:var(--chocolat-icon-right) 50% 50% / 2rem auto no-repeat;z-index:17;visibility:hidden}.chocolat-wrapper .chocolat-right.active{visibility:visible}.chocolat-wrapper .chocolat-left.active{visibility:visible}.chocolat-wrapper .chocolat-top{height:50px;overflow:hidden;z-index:17;flex-shrink:0}.chocolat-wrapper .chocolat-close{width:50px;height:50px;cursor:pointer;position:absolute;top:0;right:0;background:var(--chocolat-icon-close) 50% 50% / 2rem auto no-repeat}.chocolat-wrapper .chocolat-bottom{height:40px;font-size:12px;z-index:17;padding-left:15px;padding-right:15px;background:rgba(0, 0, 0, 0.2);flex-shrink:0;display:flex;align-items:center}.chocolat-wrapper .chocolat-set-title{display:inline-block;padding-right:15px;line-height:1;border-right:1px solid rgba(255, 255, 255, 0.3)}.chocolat-wrapper .chocolat-pagination{float:right;display:inline-block;padding-left:15px;padding-right:15px;margin-right:15px}.chocolat-wrapper .chocolat-fullscreen{width:16px;height:40px;background:var(--chocolat-icon-fullscreen) 50% 50% / 1rem auto no-repeat;display:block;cursor:pointer;float:right}.chocolat-wrapper .chocolat-description{display:inline-block;flex-grow:1;text-align:left}body.chocolat-open > .chocolat-overlay{z-index:15}body.chocolat-open > .chocolat-loader{z-index:15}body.chocolat-open > .chocolat-image-wrapper{z-index:17}.chocolat-in-container .chocolat-image-wrapper,.chocolat-in-container .chocolat-overlay,.chocolat-in-container .chocolat-wrapper{position:absolute}.chocolat-in-container{position:relative}.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper{transition:width 0.2s ease, height 0.2s ease}.chocolat-zoomable.chocolat-zooming-in .chocolat-img,.chocolat-zoomable.chocolat-zooming-out .chocolat-img{transition:margin 0.2s ease}
2
    cursor: zoom-out;
3
}
4
.chocolat-open {
5
    overflow: hidden;
6
}
7
.chocolat-overlay {
8
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
9
    height: 100%;
10
    width: 100%;
11
    position: fixed;
12
    left: 0;
13
    top: 0;
14
    z-index: 10;
15
    background-color: #fff;
16
    visibility: hidden;
17
    opacity: 0;
18
}
19
.chocolat-overlay.chocolat-visible {
20
    transition: opacity 0.4s, visibility 0s;
21
    visibility: visible;
22
    opacity: 0.8;
23
}
24
25
.chocolat-wrapper {
26
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
27
    width: 100%;
28
    height: 100%;
29
    position: fixed;
30
    opacity: 0;
31
    left: 0;
32
    top: 0;
33
    z-index: 16;
34
    color: #fff;
35
    visibility: hidden;
36
}
37
.chocolat-wrapper.chocolat-visible {
38
    transition: opacity 0.4s, visibility 0s;
39
    opacity: 1;
40
    visibility: visible;
41
}
42
43
.chocolat-zoomable .chocolat-img {
44
    cursor: zoom-in;
45
}
46
.chocolat-loader {
47
    transition: opacity 0.3s;
48
    height: 32px;
49
    width: 32px;
50
    position: absolute;
51
    left: 50%;
52
    top: 50%;
53
    margin-left: -16px;
54
    margin-top: -16px;
55
    z-index: 11;
56
    background: url(../images/loader.gif);
57
    opacity: 0;
58
}
59
.chocolat-loader.chocolat-visible {
60
    opacity: 1;
61
}
62
63
.chocolat-image-wrapper {
64
    position: fixed;
65
    width: 0px;
66
    height: 0px;
67
    left: 50%;
68
    top: 50%;
69
    z-index: 14;
70
    text-align: left;
71
    transform: translate(-50%, -50%);
72
}
73
74
.chocolat-image-wrapper .chocolat-img {
75
    position: absolute;
76
    width: 100%;
77
    height: 100%;
78
}
79
.chocolat-wrapper .chocolat-left {
80
    width: 50px;
81
    height: 100px;
82
    cursor: pointer;
83
    background: url(../images/left.png) 50% 50% no-repeat;
84
    z-index: 17;
85
    visibility: hidden;
86
}
87
88
.chocolat-layout {
89
    display: flex;
90
    flex-direction: column;
91
    position: absolute;
92
    top: 0;
93
    bottom: 0;
94
    left: 0;
95
    right: 0;
96
}
97
.chocolat-image-canvas {
98
    transition: opacity .2s;
99
    opacity: 0;
100
    flex-grow: 1;
101
    align-self: stretch;
102
}
103
.chocolat-image-canvas.chocolat-visible {
104
    opacity: 1;
105
}
106
.chocolat-center {
107
    flex-grow: 1;
108
    display: flex;
109
    justify-content: center;
110
    align-items: center;
111
    user-select: none;
112
}
113
114
.chocolat-wrapper .chocolat-right {
115
    width: 50px;
116
    height: 100px;
117
    cursor: pointer;
118
    background: url(../images/right.png) 50% 50% no-repeat;
119
    z-index: 17;
120
    visibility: hidden;
121
}
122
.chocolat-wrapper .chocolat-right.active {
123
    visibility: visible;
124
}
125
.chocolat-wrapper .chocolat-left.active {
126
    visibility: visible;
127
}
128
.chocolat-wrapper .chocolat-top {
129
    height: 50px;
130
    overflow: hidden;
131
    z-index: 17;
132
    flex-shrink: 0;
133
}
134
.chocolat-wrapper .chocolat-close {
135
    width: 50px;
136
    height: 50px;
137
    cursor: pointer;
138
    position: absolute;
139
    top: 0;
140
    right: 0;
141
    background: url(../images/close.png) 50% 50% no-repeat;
142
}
143
.chocolat-wrapper .chocolat-bottom {
144
    height: 40px;
145
    font-size: 12px;
146
    z-index: 17;
147
    padding-left: 15px;
148
    padding-right: 15px;
149
    background: rgba(0, 0, 0, 0.2);
150
    flex-shrink: 0;
151
    display: flex;
152
    align-items: center;
153
154
}
155
.chocolat-wrapper .chocolat-set-title {
156
    display: inline-block;
157
    padding-right: 15px;
158
    line-height: 1;
159
    border-right: 1px solid rgba(255, 255, 255, 0.3);
160
}
161
.chocolat-wrapper .chocolat-pagination {
162
    float: right;
163
    display: inline-block;
164
    padding-left: 15px;
165
    padding-right: 15px;
166
    margin-right: 15px;
167
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
168
}
169
.chocolat-wrapper .chocolat-fullscreen {
170
    width: 16px;
171
    height: 40px;
172
    background: url(../images/fullscreen.png) 50% 50% no-repeat;
173
    display: block;
174
    cursor: pointer;
175
    float: right;
176
}
177
.chocolat-wrapper .chocolat-description {
178
    display: inline-block;
179
    flex-grow: 1;
180
    text-align: left;
181
}
182
183
/* no container mode*/
184
body.chocolat-open > .chocolat-overlay {
185
    z-index: 15;
186
}
187
body.chocolat-open > .chocolat-loader {
188
    z-index: 15;
189
}
190
body.chocolat-open > .chocolat-image-wrapper {
191
    z-index: 17;
192
}
193
194
/* container mode*/
195
.chocolat-in-container .chocolat-wrapper,
196
.chocolat-in-container .chocolat-image-wrapper,
197
.chocolat-in-container .chocolat-overlay {
198
    position: absolute;
199
}
200
.chocolat-in-container {
201
    position: relative;
202
}
203
204
.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,
205
.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper {
206
    transition: width .2s ease, height .2s ease;
207
}
208
.chocolat-zoomable.chocolat-zooming-in .chocolat-img,
209
.chocolat-zoomable.chocolat-zooming-out .chocolat-img {
210
    transition: margin .2s ease;
211
}
212
213
/* uncomment to hide controls when zoomed-in*/
214
/*
215
.chocolat-zoomable .chocolat-top,
216
.chocolat-zoomable .chocolat-bottom,
217
.chocolat-zoomable .chocolat-right,
218
.chocolat-zoomable .chocolat-left {
219
    transition: opacity .3s ease, visibility 0s .3s;
220
   opacity: 1;
221
}
222
223
.chocolat-zoomable.chocolat-zoomed .chocolat-top,
224
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
225
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
226
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
227
    visibility: hidden;
228
    opacity: 0;
229
}
230
*/
231
232
/* Local chnages for Koha */
233
.chocolat-wrapper {
234
    z-index: 1035;
235
}
236
237
.chocolat-wrapper .chocolat-left {
238
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
239
    background-size: 35px;
240
}
241
.chocolat-wrapper .chocolat-right {
242
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
243
    background-size: 35px;
244
}
245
246
.chocolat-wrapper .chocolat-close {
247
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
248
    background-size: 35px;
249
}
250
251
.chocolat-wrapper .chocolat-bottom {
252
    background: rgba(0, 0, 0, 0.8);
253
}
254
255
.chocolat-wrapper .chocolat-bottom a {
256
    color: #FFF;
257
    text-decoration: underline;
258
}
259
260
.chocolat-wrapper .chocolat-fullscreen {
261
    width: 40px;
262
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' class='bi bi-arrow-down-left-square' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14.357 3.656a.692.692 0 00-.691-.692H2.263a.692.692 0 00-.691.692v8.303c0 .382.31.692.691.692h11.403c.382 0 .691-.31.691-.692zm-13.477 0c0-.764.62-1.383 1.383-1.383h11.403c.764 0 1.383.62 1.383 1.383v8.303c0 .764-.62 1.383-1.383 1.383H2.263C1.5 13.342.88 12.723.88 11.96z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' d='M14.357 8.151a.692.692 0 00-.691-.692h-5.88a.692.692 0 00-.69.692v3.808c0 .382.309.692.69.692h5.88c.382 0 .691-.31.691-.692zm-7.954 0c0-.764.62-1.384 1.384-1.384h5.879c.764 0 1.383.62 1.383 1.384v3.808c0 .764-.62 1.383-1.383 1.383h-5.88c-.763 0-1.383-.619-1.383-1.383z' fill='%23fff'/%3E%3C/svg%3E");
263
    background-position: 50% 50%;
264
    background-repeat: no-repeat;
265
    background-size: 25px;
266
}
267
/* End local changes for Koha */
(-)a/koha-tmpl/intranet-tmpl/lib/Chocolat/js/chocolat.js (-707 / +1 lines)
Lines 1-707 Link Here
1
(function () {
1
!function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function t(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function s(e,t){return e(t={exports:{}},t.exports),t.exports}var r,o,a=function(e){return e&&e.Math==Math&&e},c=a("object"==typeof globalThis&&globalThis)||a("object"==typeof window&&window)||a("object"==typeof self&&self)||a("object"==typeof i&&i)||function(){return this}()||Function("return this")(),l={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0},u=function(e){return"function"==typeof e},h=function(e){return"object"==typeof e?null!==e:u(e)},m=c.document,f=h(m)&&h(m.createElement),p=function(e){return f?m.createElement(e):{}},g=p("span").classList,d=g&&g.constructor&&g.constructor.prototype,v=d===Object.prototype?void 0:d,y=function(e){try{return!!e()}catch(e){return!0}},b={}.toString,w="".split,S=y((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==function(e){return b.call(e).slice(8,-1)}(e)?w.call(e,""):Object(e)}:Object,O=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e},I=function(e){return S(O(e))},L=function(e,t){try{Object.defineProperty(c,e,{value:t,configurable:!0,writable:!0})}catch(n){c[e]=t}return t},k="__core-js_shared__",C=c[k]||L(k,{}),E=s((function(e){(e.exports=function(e,t){return C[e]||(C[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.18.3",mode:"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})})),A=function(e){return Object(O(e))},T={}.hasOwnProperty,j=Object.hasOwn||function(e,t){return T.call(A(e),t)},z=0,x=Math.random(),P=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++z+x).toString(36)},W=function(e,t){return arguments.length<2?(n=c[e],u(n)?n:void 0):c[e]&&c[e][t];var n},F=W("navigator","userAgent")||"",H=c.process,M=c.Deno,_=H&&H.versions||M&&M.version,R=_&&_.v8;R?o=(r=R.split("."))[0]<4?1:r[0]+r[1]:F&&(!(r=F.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=F.match(/Chrome\/(\d+)/))&&(o=r[1]);var N,G=o&&+o,D=!!Object.getOwnPropertySymbols&&!y((function(){var e=Symbol();return!String(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&G&&G<41})),q=D&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,B=E("wks"),Z=c.Symbol,V=q?Z:Z&&Z.withoutSetter||P,Y=function(e){return j(B,e)&&(D||"string"==typeof B[e])||(D&&j(Z,e)?B[e]=Z[e]:B[e]=V("Symbol."+e)),B[e]},U=function(e){if(h(e))return e;throw TypeError(String(e)+" is not an object")},X=!y((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),$=!X&&!y((function(){return 7!=Object.defineProperty(p("div"),"a",{get:function(){return 7}}).a})),K=q?function(e){return"symbol"==typeof e}:function(e){var t=W("Symbol");return u(t)&&Object(e)instanceof t},J=function(e){if(u(e))return e;throw TypeError(function(e){try{return String(e)}catch(e){return"Object"}}(e)+" is not a function")},Q=Y("toPrimitive"),ee=function(e,t){if(!h(e)||K(e))return e;var n,i,s=null==(n=e[Q])?void 0:J(n);if(s){if(void 0===t&&(t="default"),i=s.call(e,t),!h(i)||K(i))return i;throw TypeError("Can't convert object to primitive value")}return void 0===t&&(t="number"),function(e,t){var n,i;if("string"===t&&u(n=e.toString)&&!h(i=n.call(e)))return i;if(u(n=e.valueOf)&&!h(i=n.call(e)))return i;if("string"!==t&&u(n=e.toString)&&!h(i=n.call(e)))return i;throw TypeError("Can't convert object to primitive value")}(e,t)},te=function(e){var t=ee(e,"string");return K(t)?t:String(t)},ne=Object.defineProperty,ie={f:X?ne:function(e,t,n){if(U(e),t=te(t),U(n),$)try{return ne(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},se=Math.ceil,re=Math.floor,oe=function(e){var t=+e;return t!=t||0===t?0:(t>0?re:se)(t)},ae=Math.max,ce=Math.min,le=Math.min,ue=function(e){return(t=e.length)>0?le(oe(t),9007199254740991):0;var t},he=function(e){return function(t,n,i){var s,r=I(t),o=ue(r),a=function(e,t){var n=oe(e);return n<0?ae(n+t,0):ce(n,t)}(i,o);if(e&&n!=n){for(;o>a;)if((s=r[a++])!=s)return!0}else for(;o>a;a++)if((e||a in r)&&r[a]===n)return e||a||0;return!e&&-1}},me={includes:he(!0),indexOf:he(!1)},fe={},pe=me.indexOf,ge=function(e,t){var n,i=I(e),s=0,r=[];for(n in i)!j(fe,n)&&j(i,n)&&r.push(n);for(;t.length>s;)j(i,n=t[s++])&&(~pe(r,n)||r.push(n));return r},de=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"],ve=Object.keys||function(e){return ge(e,de)},ye=X?Object.defineProperties:function(e,t){U(e);for(var n,i=ve(t),s=i.length,r=0;s>r;)ie.f(e,n=i[r++],t[n]);return e},be=W("document","documentElement"),we=E("keys"),Se=function(e){return we[e]||(we[e]=P(e))},Oe="prototype",Ie="script",Le=Se("IE_PROTO"),ke=function(){},Ce=function(e){return"<"+Ie+">"+e+"</"+Ie+">"},Ee=function(e){e.write(Ce("")),e.close();var t=e.parentWindow.Object;return e=null,t},Ae=function(){try{N=new ActiveXObject("htmlfile")}catch(e){}var e,t,n;Ae="undefined"!=typeof document?document.domain&&N?Ee(N):(t=p("iframe"),n="java"+Ie+":",t.style.display="none",be.appendChild(t),t.src=String(n),(e=t.contentWindow.document).open(),e.write(Ce("document.F=Object")),e.close(),e.F):Ee(N);for(var i=de.length;i--;)delete Ae[Oe][de[i]];return Ae()};fe[Le]=!0;var Te=Object.create||function(e,t){var n;return null!==e?(ke[Oe]=U(e),n=new ke,ke[Oe]=null,n[Le]=e):n=Ae(),void 0===t?n:ye(n,t)},je=Y("unscopables"),ze=Array.prototype;null==ze[je]&&ie.f(ze,je,{configurable:!0,value:Te(null)});var xe=function(e){ze[je][e]=!0},Pe=Function.toString;u(C.inspectSource)||(C.inspectSource=function(e){return Pe.call(e)});var We,Fe,He,Me=C.inspectSource,_e=c.WeakMap,Re=u(_e)&&/native code/.test(Me(_e)),Ne=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},Ge=X?function(e,t,n){return ie.f(e,t,Ne(1,n))}:function(e,t,n){return e[t]=n,e},De="Object already initialized",qe=c.WeakMap;if(Re||C.state){var Be=C.state||(C.state=new qe),Ze=Be.get,Ve=Be.has,Ye=Be.set;We=function(e,t){if(Ve.call(Be,e))throw new TypeError(De);return t.facade=e,Ye.call(Be,e,t),t},Fe=function(e){return Ze.call(Be,e)||{}},He=function(e){return Ve.call(Be,e)}}else{var Ue=Se("state");fe[Ue]=!0,We=function(e,t){if(j(e,Ue))throw new TypeError(De);return t.facade=e,Ge(e,Ue,t),t},Fe=function(e){return j(e,Ue)?e[Ue]:{}},He=function(e){return j(e,Ue)}}var Xe,$e,Ke,Je={set:We,get:Fe,has:He,enforce:function(e){return He(e)?Fe(e):We(e,{})},getterFor:function(e){return function(t){var n;if(!h(t)||(n=Fe(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}},Qe={}.propertyIsEnumerable,et=Object.getOwnPropertyDescriptor,tt={f:et&&!Qe.call({1:2},1)?function(e){var t=et(this,e);return!!t&&t.enumerable}:Qe},nt=Object.getOwnPropertyDescriptor,it={f:X?nt:function(e,t){if(e=I(e),t=te(t),$)try{return nt(e,t)}catch(e){}if(j(e,t))return Ne(!tt.f.call(e,t),e[t])}},st=Function.prototype,rt=X&&Object.getOwnPropertyDescriptor,ot=j(st,"name"),at={EXISTS:ot,PROPER:ot&&"something"===function(){}.name,CONFIGURABLE:ot&&(!X||X&&rt(st,"name").configurable)},ct=s((function(e){var t=at.CONFIGURABLE,n=Je.get,i=Je.enforce,s=String(String).split("String");(e.exports=function(e,n,r,o){var a,l=!!o&&!!o.unsafe,h=!!o&&!!o.enumerable,m=!!o&&!!o.noTargetGet,f=o&&void 0!==o.name?o.name:n;u(r)&&("Symbol("===String(f).slice(0,7)&&(f="["+String(f).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),(!j(r,"name")||t&&r.name!==f)&&Ge(r,"name",f),(a=i(r)).source||(a.source=s.join("string"==typeof f?f:""))),e!==c?(l?!m&&e[n]&&(h=!0):delete e[n],h?e[n]=r:Ge(e,n,r)):h?e[n]=r:L(n,r)})(Function.prototype,"toString",(function(){return u(this)&&n(this).source||Me(this)}))})),lt=de.concat("length","prototype"),ut={f:Object.getOwnPropertyNames||function(e){return ge(e,lt)}},ht={f:Object.getOwnPropertySymbols},mt=W("Reflect","ownKeys")||function(e){var t=ut.f(U(e)),n=ht.f;return n?t.concat(n(e)):t},ft=function(e,t){for(var n=mt(t),i=ie.f,s=it.f,r=0;r<n.length;r++){var o=n[r];j(e,o)||i(e,o,s(t,o))}},pt=/#|\.prototype\./,gt=function(e,t){var n=vt[dt(e)];return n==bt||n!=yt&&(u(t)?y(t):!!t)},dt=gt.normalize=function(e){return String(e).replace(pt,".").toLowerCase()},vt=gt.data={},yt=gt.NATIVE="N",bt=gt.POLYFILL="P",wt=gt,St=it.f,Ot=!y((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype})),It=Se("IE_PROTO"),Lt=Object.prototype,kt=Ot?Object.getPrototypeOf:function(e){var t=A(e);if(j(t,It))return t[It];var n=t.constructor;return u(n)&&t instanceof n?n.prototype:t instanceof Object?Lt:null},Ct=Y("iterator"),Et=!1;[].keys&&("next"in(Ke=[].keys())?($e=kt(kt(Ke)))!==Object.prototype&&(Xe=$e):Et=!0),(null==Xe||y((function(){var e={};return Xe[Ct].call(e)!==e})))&&(Xe={}),u(Xe[Ct])||ct(Xe,Ct,(function(){return this}));var At={IteratorPrototype:Xe,BUGGY_SAFARI_ITERATORS:Et},Tt=ie.f,jt=Y("toStringTag"),zt=function(e,t,n){e&&!j(e=n?e:e.prototype,jt)&&Tt(e,jt,{configurable:!0,value:t})},xt=At.IteratorPrototype,Pt=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),t=n instanceof Array}catch(e){}return function(n,i){return U(n),function(e){if("object"==typeof e||u(e))return e;throw TypeError("Can't set "+String(e)+" as a prototype")}(i),t?e.call(n,i):n.__proto__=i,n}}():void 0),Wt=at.PROPER,Ft=at.CONFIGURABLE,Ht=At.IteratorPrototype,Mt=At.BUGGY_SAFARI_ITERATORS,_t=Y("iterator"),Rt="keys",Nt="values",Gt="entries",Dt=function(){return this},qt="Array Iterator",Bt=Je.set,Zt=Je.getterFor(qt),Vt=function(e,t,n,i,s,r,o){!function(e,t,n){var i=t+" Iterator";e.prototype=Te(xt,{next:Ne(1,n)}),zt(e,i,!1)}(n,t,i);var a,l,h,m=function(e){if(e===s&&v)return v;if(!Mt&&e in g)return g[e];switch(e){case Rt:case Nt:case Gt:return function(){return new n(this,e)}}return function(){return new n(this)}},f=t+" Iterator",p=!1,g=e.prototype,d=g[_t]||g["@@iterator"]||s&&g[s],v=!Mt&&d||m(s),y="Array"==t&&g.entries||d;if(y&&(a=kt(y.call(new e)))!==Object.prototype&&a.next&&(kt(a)!==Ht&&(Pt?Pt(a,Ht):u(a[_t])||ct(a,_t,Dt)),zt(a,f,!0)),Wt&&s==Nt&&d&&d.name!==Nt&&(Ft?Ge(g,"name",Nt):(p=!0,v=function(){return d.call(this)})),s)if(l={values:m(Nt),keys:r?v:m(Rt),entries:m(Gt)},o)for(h in l)(Mt||p||!(h in g))&&ct(g,h,l[h]);else!function(e,t){var n,i,s,r,o,a=e.target,l=e.global,u=e.stat;if(n=l?c:u?c[a]||L(a,{}):(c[a]||{}).prototype)for(i in t){if(r=t[i],s=e.noTargetGet?(o=St(n,i))&&o.value:n[i],!wt(l?i:a+(u?".":"#")+i,e.forced)&&void 0!==s){if(typeof r==typeof s)continue;ft(r,s)}(e.sham||s&&s.sham)&&Ge(r,"sham",!0),ct(n,i,r,e)}}({target:t,proto:!0,forced:Mt||p},l);return g[_t]!==v&&ct(g,_t,v,{name:s}),l}(Array,"Array",(function(e,t){Bt(this,{type:qt,target:I(e),index:0,kind:t})}),(function(){var e=Zt(this),t=e.target,n=e.kind,i=e.index++;return!t||i>=t.length?(e.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:i,done:!1}:"values"==n?{value:t[i],done:!1}:{value:[i,t[i]],done:!1}}),"values");xe("keys"),xe("values"),xe("entries");var Yt=Y("iterator"),Ut=Y("toStringTag"),Xt=Vt.values,$t=function(e,t){if(e){if(e[Yt]!==Xt)try{Ge(e,Yt,Xt)}catch(t){e[Yt]=Xt}if(e[Ut]||Ge(e,Ut,t),l[t])for(var n in Vt)if(e[n]!==Vt[n])try{Ge(e,n,Vt[n])}catch(t){e[n]=Vt[n]}}};for(var Kt in l)$t(c[Kt]&&c[Kt].prototype,Kt);$t(v,"DOMTokenList");var Jt=void 0;function Qt(e,t){return new Promise((function(n){var i=function e(){t.removeEventListener("transitionend",e),n()};t.addEventListener("transitionend",i);var s=t.getAttribute("class"),r=t.getAttribute("style");e(),s===t.getAttribute("class")&&r===t.getAttribute("style")&&i(),0===parseFloat(getComputedStyle(t).transitionDuration)&&i()}))}function en(e){var t=e.src,n=e.srcset,i=e.sizes,s=new Image;return s.src=t,n&&(s.srcset=n),i&&(s.sizes=i),new Promise("decode"in s?function(e,t){s.decode().then((function(){e(s)})).catch((function(){t(s)}))}:function(e,t){s.onload=e(s),s.onerror=t(s)})}function tn(e){var t,n,i=e.imgHeight,s=e.imgWidth,r=e.containerHeight,o=e.containerWidth,a=e.canvasWidth,c=e.canvasHeight,l=e.imageSize,u=i/s;return"cover"==l?u<r/o?n=(t=r)/u:t=(n=o)*u:"native"==l?(t=i,n=s):(u>c/a?n=(t=c)/u:t=(n=a)*u,"scale-down"===l&&(n>=s||t>=i)&&(n=s,t=i)),{height:t,width:n}}function nn(e){return e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():Promise.reject()}function sn(){return document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen?document.msExitFullscreen():Promise.reject()}var rn={container:document.body,className:void 0,imageSize:"scale-down",fullScreen:!1,loop:!1,linkImages:!0,setIndex:0,firstImageIndex:0,lastImageIndex:!1,currentImageIndex:void 0,allowZoom:!0,closeOnBackgroundClick:!0,imageSourceAttribute:"href",setTitle:function(){return""},description:function(){return this.images[this.settings.currentImageIndex].title},pagination:function(){var e=this.settings.lastImageIndex+1;return this.settings.currentImageIndex+1+"/"+e},afterInitialize:function(){},afterMarkup:function(){},afterImageLoad:function(){},afterClose:function(){},zoomedPaddingX:function(e,t){return 0},zoomedPaddingY:function(e,t){return 0}},on=function(){function n(e,t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.settings=t,this.elems={},this.images=[],this.events=[],this.state={fullScreenOpen:!1,initialZoomState:null,initialized:!1,timer:!1,visible:!1},this._cssClasses=["chocolat-open","chocolat-in-container","chocolat-cover","chocolat-zoomable","chocolat-zoomed","chocolat-zooming-in","chocolat-zooming-out"],NodeList.prototype.isPrototypeOf(e)||HTMLCollection.prototype.isPrototypeOf(e)?e.forEach((function(e,n){i.images.push({title:e.getAttribute("title"),src:e.getAttribute(t.imageSourceAttribute),srcset:e.getAttribute("data-srcset"),sizes:e.getAttribute("data-sizes")}),i.off(e,"click.chocolat"),i.on(e,"click.chocolat",(function(e){i.init(n),e.preventDefault()}))})):this.images=e,this.settings.container instanceof Element||this.settings.container instanceof HTMLElement?this.elems.container=this.settings.container:this.elems.container=document.body,this.api={open:function(e){return e=parseInt(e)||0,i.init(e)},close:function(){return i.close()},next:function(){return i.change(1)},prev:function(){return i.change(-1)},goto:function(e){return i.open(e)},current:function(){return i.settings.currentImageIndex},position:function(){return i.position(i.elems.img)},destroy:function(){return i.destroy()},set:function(e,t){return i.settings[e]=t,t},get:function(e){return i.settings[e]},getElem:function(e){return i.elems[e]}}}var i,s,r;return i=n,(s=[{key:"init",value:function(e){return this.state.initialized||(this.markup(),this.attachListeners(),this.settings.lastImageIndex=this.images.length-1,this.state.initialized=!0),this.settings.afterInitialize.call(this),this.load(e)}},{key:"load",value:function(e){var t=this;if(this.state.visible||(this.state.visible=!0,setTimeout((function(){t.elems.overlay.classList.add("chocolat-visible"),t.elems.wrapper.classList.add("chocolat-visible")}),0),this.elems.container.classList.add("chocolat-open")),this.settings.fullScreen&&nn(this.elems.wrapper),this.settings.currentImageIndex===e)return Promise.resolve();var n,i,s=setTimeout((function(){t.elems.loader.classList.add("chocolat-visible")}),1e3),r=setTimeout((function(){r=void 0,n=Qt((function(){t.elems.imageCanvas.classList.remove("chocolat-visible")}),t.elems.imageCanvas)}),80);return en(this.images[e]).then((function(e){return i=e,r?(clearTimeout(r),Promise.resolve()):n})).then((function(){var n=e+1;return null!=t.images[n]&&en(t.images[n]),t.settings.currentImageIndex=e,t.elems.description.textContent=t.settings.description.call(t),t.elems.pagination.textContent=t.settings.pagination.call(t),t.arrows(),t.position(i).then((function(){return t.elems.loader.classList.remove("chocolat-visible"),clearTimeout(s),t.appear(i)}))})).then((function(){t.elems.container.classList.toggle("chocolat-zoomable",t.zoomable(i,t.elems.wrapper)),t.settings.afterImageLoad.call(t)}))}},{key:"position",value:function(e){var t=this,n=tn({imgHeight:e.naturalHeight,imgWidth:e.naturalWidth,containerHeight:this.elems.container.clientHeight,containerWidth:this.elems.container.clientWidth,canvasWidth:this.elems.imageCanvas.clientWidth,canvasHeight:this.elems.imageCanvas.clientHeight,imageSize:this.settings.imageSize}),i=n.width,s=n.height;return Qt((function(){Object.assign(t.elems.imageWrapper.style,{width:i+"px",height:s+"px"})}),this.elems.imageWrapper)}},{key:"appear",value:function(e){var t=this;return this.elems.imageWrapper.removeChild(this.elems.img),this.elems.img=e,this.elems.img.setAttribute("class","chocolat-img"),this.elems.imageWrapper.appendChild(this.elems.img),Qt((function(){t.elems.imageCanvas.classList.add("chocolat-visible")}),this.elems.imageCanvas)}},{key:"change",value:function(e){if(this.state.visible&&this.settings.linkImages){this.zoomOut();var t=this.settings.currentImageIndex+parseInt(e);if(t>this.settings.lastImageIndex){if(this.settings.loop)return this.load(this.settings.firstImageIndex)}else{if(!(t<this.settings.firstImageIndex))return this.load(t);if(this.settings.loop)return this.load(this.settings.lastImageIndex)}}}},{key:"arrows",value:function(){this.settings.loop?(this.elems.left.classList.add("active"),this.elems.right.classList.add("active")):this.settings.linkImages?(this.elems.right.classList.toggle("active",this.settings.currentImageIndex!==this.settings.lastImageIndex),this.elems.left.classList.toggle("active",this.settings.currentImageIndex!==this.settings.firstImageIndex)):(this.elems.left.classList.remove("active"),this.elems.right.classList.remove("active"))}},{key:"close",value:function(){var e=this;if(!this.state.fullScreenOpen){this.state.visible=!1;var t=Qt((function(){e.elems.overlay.classList.remove("chocolat-visible")}),this.elems.overlay),n=Qt((function(){e.elems.wrapper.classList.remove("chocolat-visible")}),this.elems.wrapper);return Promise.all([t,n]).then((function(){e.elems.container.classList.remove("chocolat-open"),e.settings.afterClose.call(e)}))}sn()}},{key:"destroy",value:function(){for(var e,n=this.events.length-1;n>=0;n--){var i=this.events[n],s=i.element,r=i.eventName;this.off(s,r)}this.state.initialized&&(this.state.fullScreenOpen&&sn(),this.settings.currentImageIndex=void 0,this.state.visible=!1,this.state.initialized=!1,(e=this.elems.container.classList).remove.apply(e,t(this._cssClasses)),this.elems.wrapper.parentNode.removeChild(this.elems.wrapper))}},{key:"markup",value:function(){this.elems.container.classList.add("chocolat-open",this.settings.className),"cover"==this.settings.imageSize&&this.elems.container.classList.add("chocolat-cover"),this.elems.container!==document.body&&this.elems.container.classList.add("chocolat-in-container"),this.elems.wrapper=document.createElement("div"),this.elems.wrapper.setAttribute("id","chocolat-content-"+this.settings.setIndex),this.elems.wrapper.setAttribute("class","chocolat-wrapper"),this.elems.container.appendChild(this.elems.wrapper),this.elems.overlay=document.createElement("div"),this.elems.overlay.setAttribute("class","chocolat-overlay"),this.elems.wrapper.appendChild(this.elems.overlay),this.elems.loader=document.createElement("div"),this.elems.loader.setAttribute("class","chocolat-loader"),this.elems.wrapper.appendChild(this.elems.loader),this.elems.layout=document.createElement("div"),this.elems.layout.setAttribute("class","chocolat-layout"),this.elems.wrapper.appendChild(this.elems.layout),this.elems.top=document.createElement("div"),this.elems.top.setAttribute("class","chocolat-top"),this.elems.layout.appendChild(this.elems.top),this.elems.center=document.createElement("div"),this.elems.center.setAttribute("class","chocolat-center"),this.elems.layout.appendChild(this.elems.center),this.elems.left=document.createElement("div"),this.elems.left.setAttribute("class","chocolat-left"),this.elems.center.appendChild(this.elems.left),this.elems.imageCanvas=document.createElement("div"),this.elems.imageCanvas.setAttribute("class","chocolat-image-canvas"),this.elems.center.appendChild(this.elems.imageCanvas),this.elems.imageWrapper=document.createElement("div"),this.elems.imageWrapper.setAttribute("class","chocolat-image-wrapper"),this.elems.imageCanvas.appendChild(this.elems.imageWrapper),this.elems.img=document.createElement("img"),this.elems.img.setAttribute("class","chocolat-img"),this.elems.imageWrapper.appendChild(this.elems.img),this.elems.right=document.createElement("div"),this.elems.right.setAttribute("class","chocolat-right"),this.elems.center.appendChild(this.elems.right),this.elems.bottom=document.createElement("div"),this.elems.bottom.setAttribute("class","chocolat-bottom"),this.elems.layout.appendChild(this.elems.bottom),this.elems.close=document.createElement("span"),this.elems.close.setAttribute("class","chocolat-close"),this.elems.top.appendChild(this.elems.close),this.elems.description=document.createElement("span"),this.elems.description.setAttribute("class","chocolat-description"),this.elems.bottom.appendChild(this.elems.description),this.elems.pagination=document.createElement("span"),this.elems.pagination.setAttribute("class","chocolat-pagination"),this.elems.bottom.appendChild(this.elems.pagination),this.elems.setTitle=document.createElement("span"),this.elems.setTitle.setAttribute("class","chocolat-set-title"),this.elems.setTitle.textContent=this.settings.setTitle(),this.elems.bottom.appendChild(this.elems.setTitle),this.elems.fullscreen=document.createElement("span"),this.elems.fullscreen.setAttribute("class","chocolat-fullscreen"),this.elems.bottom.appendChild(this.elems.fullscreen),this.settings.afterMarkup.call(this)}},{key:"attachListeners",value:function(){var e=this;this.off(document,"keydown.chocolat"),this.on(document,"keydown.chocolat",(function(t){e.state.initialized&&(37==t.keyCode?e.change(-1):39==t.keyCode?e.change(1):27==t.keyCode&&e.close())}));var t=this.elems.wrapper.querySelector(".chocolat-right");this.off(t,"click.chocolat"),this.on(t,"click.chocolat",(function(){e.change(1)}));var n=this.elems.wrapper.querySelector(".chocolat-left");this.off(n,"click.chocolat"),this.on(n,"click.chocolat",(function(){e.change(-1)})),this.off(this.elems.close,"click.chocolat"),this.on(this.elems.close,"click.chocolat",this.close.bind(this)),this.off(this.elems.fullscreen,"click.chocolat"),this.on(this.elems.fullscreen,"click.chocolat",(function(){e.state.fullScreenOpen?sn():nn(e.elems.wrapper)})),this.off(document,"fullscreenchange.chocolat"),this.on(document,"fullscreenchange.chocolat",(function(){document.fullscreenElement||document.webkitCurrentFullScreenElement||document.webkitFullscreenElement?e.state.fullScreenOpen=!0:e.state.fullScreenOpen=!1})),this.off(document,"webkitfullscreenchange.chocolat"),this.on(document,"webkitfullscreenchange.chocolat",(function(){document.fullscreenElement||document.webkitCurrentFullScreenElement||document.webkitFullscreenElement?e.state.fullScreenOpen=!0:e.state.fullScreenOpen=!1})),this.settings.closeOnBackgroundClick&&(this.off(this.elems.overlay,"click.chocolat"),this.on(this.elems.overlay,"click.chocolat",this.close.bind(this))),this.off(this.elems.wrapper,"click.chocolat"),this.on(this.elems.wrapper,"click.chocolat",(function(){null!==e.state.initialZoomState&&e.state.visible&&(e.elems.container.classList.add("chocolat-zooming-out"),e.zoomOut().then((function(){e.elems.container.classList.remove("chocolat-zoomed"),e.elems.container.classList.remove("chocolat-zooming-out")})))})),this.off(this.elems.imageWrapper,"click.chocolat"),this.on(this.elems.imageWrapper,"click.chocolat",(function(t){null===e.state.initialZoomState&&e.elems.container.classList.contains("chocolat-zoomable")&&(t.stopPropagation(),e.elems.container.classList.add("chocolat-zooming-in"),e.zoomIn(t).then((function(){e.elems.container.classList.add("chocolat-zoomed"),e.elems.container.classList.remove("chocolat-zooming-in")})))})),this.on(this.elems.wrapper,"mousemove.chocolat",(function(t){if(null!==e.state.initialZoomState&&e.state.visible){var n=e.elems.wrapper.getBoundingClientRect(),i=n.top+window.scrollY,s=n.left+window.scrollX,r=e.elems.wrapper.clientHeight,o=e.elems.wrapper.clientWidth,a=e.elems.img.width,c=e.elems.img.height,l=[t.pageX-o/2-s,t.pageY-r/2-i],u=0;if(a>o){var h=e.settings.zoomedPaddingX(a,o);u=l[0]/(o/2),u*=(a-o)/2+h}var m=0;if(c>r){var f=e.settings.zoomedPaddingY(c,r);m=l[1]/(r/2),m*=(c-r)/2+f}e.elems.img.style.marginLeft=-u+"px",e.elems.img.style.marginTop=-m+"px"}})),this.on(window,"resize.chocolat",(function(t){var n,i;e.state.initialized&&e.state.visible&&(n=50,i=function(){tn({imgHeight:e.elems.img.naturalHeight,imgWidth:e.elems.img.naturalWidth,containerHeight:e.elems.wrapper.clientHeight,containerWidth:e.elems.wrapper.clientWidth,canvasWidth:e.elems.imageCanvas.clientWidth,canvasHeight:e.elems.imageCanvas.clientHeight,imageSize:e.settings.imageSize}),e.position(e.elems.img).then((function(){e.elems.container.classList.toggle("chocolat-zoomable",e.zoomable(e.elems.img,e.elems.wrapper))}))},clearTimeout(Jt),Jt=setTimeout((function(){i()}),n))}))}},{key:"zoomable",value:function(e,t){var n=t.clientWidth,i=t.clientHeight,s=!(!this.settings.allowZoom||!(e.naturalWidth>n||e.naturalHeight>i)),r=e.clientWidth>e.naturalWidth||e.clientHeight>e.naturalHeight;return s&&!r}},{key:"zoomIn",value:function(e){return this.state.initialZoomState=this.settings.imageSize,this.settings.imageSize="native",this.position(this.elems.img)}},{key:"zoomOut",value:function(e){return this.settings.imageSize=this.state.initialZoomState||this.settings.imageSize,this.state.initialZoomState=null,this.elems.img.style.margin=0,this.position(this.elems.img)}},{key:"on",value:function(e,t,n){var i=this.events.push({element:e,eventName:t,cb:n});e.addEventListener(t.split(".")[0],this.events[i-1].cb)}},{key:"off",value:function(e,t){var n=this.events.findIndex((function(n){return n.element===e&&n.eventName===t}));this.events[n]&&(e.removeEventListener(t.split(".")[0],this.events[n].cb),this.events.splice(n,1))}}])&&e(i.prototype,s),r&&e(i,r),n}(),an=[];window.Chocolat=function(e,t){var n=Object.assign({},rn,{images:[]},t,{setIndex:an.length}),i=new on(e,n);return an.push(i),i}}();
2
    'use strict';
3
4
    let timerDebounce = undefined;
5
    function debounce(duration, callback) {
6
      clearTimeout(timerDebounce);
7
      timerDebounce = setTimeout(function () {
8
        callback();
9
      }, duration);
10
      return timerDebounce;
11
    }
12
    function transitionAsPromise(triggeringFunc, el) {
13
      return new Promise(resolve => {
14
        const handleTransitionEnd = () => {
15
          el.removeEventListener('transitionend', handleTransitionEnd);
16
          resolve();
17
        };
18
19
        el.addEventListener('transitionend', handleTransitionEnd);
20
        const classesBefore = el.getAttribute('class');
21
        const stylesBefore = el.getAttribute('style');
22
        triggeringFunc();
23
24
        if (classesBefore === el.getAttribute('class') && stylesBefore === el.getAttribute('style')) {
25
          handleTransitionEnd();
26
        }
27
28
        if (parseFloat(getComputedStyle(el)['transitionDuration']) === 0) {
29
          handleTransitionEnd();
30
        }
31
      });
32
    }
33
    function loadImage({
34
      src,
35
      srcset,
36
      sizes
37
    }) {
38
      const image = new Image();
39
      image.src = src;
40
41
      if (srcset) {
42
        image.srcset = srcset;
43
      }
44
45
      if (sizes) {
46
        image.sizes = sizes;
47
      }
48
49
      if ('decode' in image) {
50
        return new Promise((resolve, reject) => {
51
          image.decode().then(() => {
52
            resolve(image);
53
          }).catch(() => {
54
            reject(image);
55
          });
56
        });
57
      } else {
58
        return new Promise((resolve, reject) => {
59
          image.onload = resolve(image);
60
          image.onerror = reject(image);
61
        });
62
      }
63
    }
64
    function fit(options) {
65
      let height;
66
      let width;
67
      const {
68
        imgHeight,
69
        imgWidth,
70
        containerHeight,
71
        containerWidth,
72
        canvasWidth,
73
        canvasHeight,
74
        imageSize
75
      } = options;
76
      const canvasRatio = canvasHeight / canvasWidth;
77
      const containerRatio = containerHeight / containerWidth;
78
      const imgRatio = imgHeight / imgWidth;
79
80
      if (imageSize == 'cover') {
81
        if (imgRatio < containerRatio) {
82
          height = containerHeight;
83
          width = height / imgRatio;
84
        } else {
85
          width = containerWidth;
86
          height = width * imgRatio;
87
        }
88
      } else if (imageSize == 'native') {
89
        height = imgHeight;
90
        width = imgWidth;
91
      } else {
92
        if (imgRatio > canvasRatio) {
93
          height = canvasHeight;
94
          width = height / imgRatio;
95
        } else {
96
          width = canvasWidth;
97
          height = width * imgRatio;
98
        }
99
100
        if (imageSize === 'scale-down' && (width >= imgWidth || height >= imgHeight)) {
101
          width = imgWidth;
102
          height = imgHeight;
103
        }
104
      }
105
106
      return {
107
        height: height,
108
        width: width
109
      };
110
    }
111
    function openFullScreen(wrapper) {
112
      if (wrapper.requestFullscreen) {
113
        return wrapper.requestFullscreen();
114
      } else if (wrapper.webkitRequestFullscreen) {
115
        return wrapper.webkitRequestFullscreen();
116
      } else if (wrapper.msRequestFullscreen) {
117
        return wrapper.msRequestFullscreen();
118
      } else {
119
        return Promise.reject();
120
      }
121
    }
122
    function exitFullScreen() {
123
      if (document.exitFullscreen) {
124
        return document.exitFullscreen();
125
      } else if (document.webkitExitFullscreen) {
126
        return document.webkitExitFullscreen();
127
      } else if (document.msExitFullscreen) {
128
        return document.msExitFullscreen();
129
      } else {
130
        return Promise.reject();
131
      }
132
    }
133
134
    const defaults = {
135
      container: document.body,
136
      // window or element
137
      className: undefined,
138
      imageSize: 'scale-down',
139
      // 'scale-down', 'contain', 'cover' or 'native'
140
      fullScreen: false,
141
      loop: false,
142
      linkImages: true,
143
      setIndex: 0,
144
      firstImageIndex: 0,
145
      lastImageIndex: false,
146
      currentImageIndex: undefined,
147
      allowZoom: true,
148
      closeOnBackgroundClick: true,
149
      setTitle: function () {
150
        return '';
151
      },
152
      description: function () {
153
        return this.images[this.settings.currentImageIndex].title;
154
      },
155
      pagination: function () {
156
        const last = this.settings.lastImageIndex + 1;
157
        const position = this.settings.currentImageIndex + 1;
158
        return position + '/' + last;
159
      },
160
161
      afterInitialize() {},
162
163
      afterMarkup() {},
164
165
      afterImageLoad() {},
166
167
      afterClose() {},
168
169
      zoomedPaddingX: function (canvasWidth, imgWidth) {
170
        return 0;
171
      },
172
      zoomedPaddingY: function (canvasHeight, imgHeight) {
173
        return 0;
174
      }
175
    };
176
    class Chocolat {
177
      constructor(elements, settings) {
178
        this.settings = settings;
179
        this.elems = {};
180
        this.images = [];
181
        this.events = [];
182
        this.state = {
183
          fullScreenOpen: false,
184
          initialZoomState: null,
185
          initialized: false,
186
          timer: false,
187
          visible: false
188
        };
189
        this._cssClasses = ['chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', 'chocolat-zoomed', 'chocolat-zooming-in', 'chocolat-zooming-out'];
190
191
        if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) {
192
          elements.forEach((el, i) => {
193
            this.images.push({
194
              title: el.getAttribute('title'),
195
              src: el.getAttribute('href'),
196
              srcset: el.getAttribute('data-srcset'),
197
              sizes: el.getAttribute('data-sizes')
198
            });
199
            this.off(el, 'click.chocolat');
200
            this.on(el, 'click.chocolat', e => {
201
              this.init(i);
202
              e.preventDefault();
203
            });
204
          });
205
        } else {
206
          this.images = elements;
207
        }
208
209
        if (this.settings.container instanceof Element || this.settings.container instanceof HTMLElement) {
210
          this.elems.container = this.settings.container;
211
        } else {
212
          this.elems.container = document.body;
213
        }
214
215
        this.api = {
216
          open: i => {
217
            i = parseInt(i) || 0;
218
            return this.init(i);
219
          },
220
          close: () => {
221
            return this.close();
222
          },
223
          next: () => {
224
            return this.change(1);
225
          },
226
          prev: () => {
227
            return this.change(-1);
228
          },
229
          goto: i => {
230
            return this.open(i);
231
          },
232
          current: () => {
233
            return this.settings.currentImageIndex;
234
          },
235
          position: () => {
236
            return this.position(this.elems.img);
237
          },
238
          destroy: () => {
239
            return this.destroy();
240
          },
241
          set: (property, value) => {
242
            this.settings[property] = value;
243
            return value;
244
          },
245
          get: property => {
246
            return this.settings[property];
247
          },
248
          getElem: name => {
249
            return this.elems[name];
250
          }
251
        };
252
      }
253
254
      init(i) {
255
        if (!this.state.initialized) {
256
          this.markup();
257
          this.attachListeners();
258
          this.settings.lastImageIndex = this.images.length - 1;
259
          this.state.initialized = true;
260
        }
261
262
        this.settings.afterInitialize.call(this);
263
        return this.load(i);
264
      }
265
266
      load(index) {
267
        if (!this.state.visible) {
268
          this.state.visible = true;
269
          setTimeout(() => {
270
            this.elems.overlay.classList.add('chocolat-visible');
271
            this.elems.wrapper.classList.add('chocolat-visible');
272
          }, 0);
273
          this.elems.container.classList.add('chocolat-open');
274
        }
275
276
        if (this.settings.fullScreen) {
277
          openFullScreen(this.elems.wrapper);
278
        }
279
280
        if (this.settings.currentImageIndex === index) {
281
          return Promise.resolve();
282
        }
283
284
        let loaderTimer = setTimeout(() => {
285
          this.elems.loader.classList.add('chocolat-visible');
286
        }, 1000);
287
        let fadeOutPromise;
288
        let image;
289
        let fadeOutTimer = setTimeout(() => {
290
          fadeOutTimer = undefined;
291
          fadeOutPromise = transitionAsPromise(() => {
292
            this.elems.imageCanvas.classList.remove('chocolat-visible');
293
          }, this.elems.imageCanvas);
294
        }, 80);
295
        return loadImage(this.images[index]).then(loadedImage => {
296
          image = loadedImage;
297
298
          if (fadeOutTimer) {
299
            clearTimeout(fadeOutTimer);
300
            return Promise.resolve();
301
          } else {
302
            return fadeOutPromise;
303
          }
304
        }).then(() => {
305
          const nextIndex = index + 1;
306
307
          if (this.images[nextIndex] != undefined) {
308
            loadImage(this.images[nextIndex]);
309
          }
310
311
          this.settings.currentImageIndex = index;
312
          this.elems.description.innerHTML = this.settings.description.call(this);
313
          this.elems.pagination.textContent = this.settings.pagination.call(this);
314
          this.arrows();
315
          return this.position(image).then(() => {
316
            this.elems.loader.classList.remove('chocolat-visible');
317
            clearTimeout(loaderTimer);
318
            return this.appear(image);
319
          });
320
        }).then(() => {
321
          this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(image, this.elems.wrapper));
322
          this.settings.afterImageLoad.call(this);
323
        });
324
      }
325
326
      position({
327
        naturalHeight,
328
        naturalWidth
329
      }) {
330
        const fitOptions = {
331
          imgHeight: naturalHeight,
332
          imgWidth: naturalWidth,
333
          containerHeight: this.elems.container.clientHeight,
334
          containerWidth: this.elems.container.clientWidth,
335
          canvasWidth: this.elems.imageCanvas.clientWidth,
336
          canvasHeight: this.elems.imageCanvas.clientHeight,
337
          imageSize: this.settings.imageSize
338
        };
339
        const {
340
          width,
341
          height
342
        } = fit(fitOptions);
343
        return transitionAsPromise(() => {
344
          Object.assign(this.elems.imageWrapper.style, {
345
            width: width + 'px',
346
            height: height + 'px'
347
          });
348
        }, this.elems.imageWrapper);
349
      }
350
351
      appear(image) {
352
        this.elems.imageWrapper.removeChild(this.elems.img);
353
        this.elems.img = image;
354
        this.elems.img.setAttribute('class', 'chocolat-img');
355
        this.elems.imageWrapper.appendChild(this.elems.img);
356
        const fadeInPromise = transitionAsPromise(() => {
357
          this.elems.imageCanvas.classList.add('chocolat-visible');
358
        }, this.elems.imageCanvas);
359
        return fadeInPromise;
360
      }
361
362
      change(step) {
363
        if (!this.state.visible) {
364
          return;
365
        }
366
367
        if (!this.settings.linkImages) {
368
          return;
369
        }
370
371
        this.zoomOut();
372
        const requestedImage = this.settings.currentImageIndex + parseInt(step);
373
374
        if (requestedImage > this.settings.lastImageIndex) {
375
          if (this.settings.loop) {
376
            return this.load(this.settings.firstImageIndex);
377
          }
378
        } else if (requestedImage < this.settings.firstImageIndex) {
379
          if (this.settings.loop) {
380
            return this.load(this.settings.lastImageIndex);
381
          }
382
        } else {
383
          return this.load(requestedImage);
384
        }
385
      }
386
387
      arrows() {
388
        if (this.settings.loop) {
389
          this.elems.left.classList.add('active');
390
          this.elems.right.classList.add('active');
391
        } else if (this.settings.linkImages) {
392
          this.elems.right.classList.toggle('active', this.settings.currentImageIndex !== this.settings.lastImageIndex);
393
          this.elems.left.classList.toggle('active', this.settings.currentImageIndex !== this.settings.firstImageIndex);
394
        } else {
395
          this.elems.left.classList.remove('active');
396
          this.elems.right.classList.remove('active');
397
        }
398
      }
399
400
      close() {
401
        if (this.state.fullScreenOpen) {
402
          exitFullScreen();
403
          return;
404
        }
405
406
        this.state.visible = false;
407
        const promiseOverlay = transitionAsPromise(() => {
408
          this.elems.overlay.classList.remove('chocolat-visible');
409
        }, this.elems.overlay);
410
        const promiseWrapper = transitionAsPromise(() => {
411
          this.elems.wrapper.classList.remove('chocolat-visible');
412
        }, this.elems.wrapper);
413
        return Promise.all([promiseOverlay, promiseWrapper]).then(() => {
414
          this.elems.container.classList.remove('chocolat-open');
415
          this.settings.afterClose.call(this);
416
        });
417
      }
418
419
      destroy() {
420
        for (let i = this.events.length - 1; i >= 0; i--) {
421
          const {
422
            element,
423
            eventName
424
          } = this.events[i];
425
          this.off(element, eventName);
426
        }
427
428
        if (!this.state.initialized) {
429
          return;
430
        }
431
432
        if (this.state.fullScreenOpen) {
433
          exitFullScreen();
434
        }
435
436
        this.settings.currentImageIndex = undefined;
437
        this.state.visible = false;
438
        this.state.initialized = false;
439
        this.elems.container.classList.remove(...this._cssClasses);
440
        this.elems.wrapper.parentNode.removeChild(this.elems.wrapper);
441
      }
442
443
      markup() {
444
        this.elems.container.classList.add('chocolat-open', this.settings.className);
445
446
        if (this.settings.imageSize == 'cover') {
447
          this.elems.container.classList.add('chocolat-cover');
448
        }
449
450
        if (this.elems.container !== document.body) {
451
          this.elems.container.classList.add('chocolat-in-container');
452
        }
453
454
        this.elems.wrapper = document.createElement('div');
455
        this.elems.wrapper.setAttribute('id', 'chocolat-content-' + this.settings.setIndex);
456
        this.elems.wrapper.setAttribute('class', 'chocolat-wrapper');
457
        this.elems.container.appendChild(this.elems.wrapper);
458
        this.elems.overlay = document.createElement('div');
459
        this.elems.overlay.setAttribute('class', 'chocolat-overlay');
460
        this.elems.wrapper.appendChild(this.elems.overlay);
461
        this.elems.loader = document.createElement('div');
462
        this.elems.loader.setAttribute('class', 'chocolat-loader');
463
        this.elems.wrapper.appendChild(this.elems.loader);
464
        this.elems.layout = document.createElement('div');
465
        this.elems.layout.setAttribute('class', 'chocolat-layout');
466
        this.elems.wrapper.appendChild(this.elems.layout);
467
        this.elems.top = document.createElement('div');
468
        this.elems.top.setAttribute('class', 'chocolat-top');
469
        this.elems.layout.appendChild(this.elems.top);
470
        this.elems.center = document.createElement('div');
471
        this.elems.center.setAttribute('class', 'chocolat-center');
472
        this.elems.layout.appendChild(this.elems.center);
473
        this.elems.left = document.createElement('div');
474
        this.elems.left.setAttribute('class', 'chocolat-left');
475
        this.elems.center.appendChild(this.elems.left);
476
        this.elems.imageCanvas = document.createElement('div');
477
        this.elems.imageCanvas.setAttribute('class', 'chocolat-image-canvas');
478
        this.elems.center.appendChild(this.elems.imageCanvas);
479
        this.elems.imageWrapper = document.createElement('div');
480
        this.elems.imageWrapper.setAttribute('class', 'chocolat-image-wrapper');
481
        this.elems.imageCanvas.appendChild(this.elems.imageWrapper);
482
        this.elems.img = document.createElement('img');
483
        this.elems.img.setAttribute('class', 'chocolat-img');
484
        this.elems.imageWrapper.appendChild(this.elems.img);
485
        this.elems.right = document.createElement('div');
486
        this.elems.right.setAttribute('class', 'chocolat-right');
487
        this.elems.center.appendChild(this.elems.right);
488
        this.elems.bottom = document.createElement('div');
489
        this.elems.bottom.setAttribute('class', 'chocolat-bottom');
490
        this.elems.layout.appendChild(this.elems.bottom);
491
        this.elems.close = document.createElement('span');
492
        this.elems.close.setAttribute('class', 'chocolat-close');
493
        this.elems.top.appendChild(this.elems.close);
494
        this.elems.description = document.createElement('span');
495
        this.elems.description.setAttribute('class', 'chocolat-description');
496
        this.elems.bottom.appendChild(this.elems.description);
497
        this.elems.pagination = document.createElement('span');
498
        this.elems.pagination.setAttribute('class', 'chocolat-pagination');
499
        this.elems.bottom.appendChild(this.elems.pagination);
500
        this.elems.setTitle = document.createElement('span');
501
        this.elems.setTitle.setAttribute('class', 'chocolat-set-title');
502
        this.elems.setTitle.textContent = this.settings.setTitle();
503
        this.elems.bottom.appendChild(this.elems.setTitle);
504
        this.elems.fullscreen = document.createElement('span');
505
        this.elems.fullscreen.setAttribute('class', 'chocolat-fullscreen');
506
        this.elems.bottom.appendChild(this.elems.fullscreen);
507
        this.settings.afterMarkup.call(this);
508
      }
509
510
      attachListeners() {
511
        this.off(document, 'keydown.chocolat');
512
        this.on(document, 'keydown.chocolat', e => {
513
          if (this.state.initialized) {
514
            if (e.keyCode == 37) {
515
              this.change(-1);
516
            } else if (e.keyCode == 39) {
517
              this.change(1);
518
            } else if (e.keyCode == 27) {
519
              this.close();
520
            }
521
          }
522
        });
523
        const right = this.elems.wrapper.querySelector('.chocolat-right');
524
        this.off(right, 'click.chocolat');
525
        this.on(right, 'click.chocolat', () => {
526
          this.change(+1);
527
        });
528
        const left = this.elems.wrapper.querySelector('.chocolat-left');
529
        this.off(left, 'click.chocolat');
530
        this.on(left, 'click.chocolat', () => {
531
          this.change(-1);
532
        });
533
        this.off(this.elems.close, 'click.chocolat');
534
        this.on(this.elems.close, 'click.chocolat', this.close.bind(this));
535
        this.off(this.elems.fullscreen, 'click.chocolat');
536
        this.on(this.elems.fullscreen, 'click.chocolat', () => {
537
          if (this.state.fullScreenOpen) {
538
            exitFullScreen();
539
            return;
540
          }
541
542
          openFullScreen(this.elems.wrapper);
543
        });
544
        this.off(document, 'fullscreenchange.chocolat');
545
        this.on(document, 'fullscreenchange.chocolat', () => {
546
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
547
            this.state.fullScreenOpen = true;
548
          } else {
549
            this.state.fullScreenOpen = false;
550
          }
551
        });
552
        this.off(document, 'webkitfullscreenchange.chocolat');
553
        this.on(document, 'webkitfullscreenchange.chocolat', () => {
554
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
555
            this.state.fullScreenOpen = true;
556
          } else {
557
            this.state.fullScreenOpen = false;
558
          }
559
        });
560
561
        if (this.settings.closeOnBackgroundClick) {
562
          this.off(this.elems.overlay, 'click.chocolat');
563
          this.on(this.elems.overlay, 'click.chocolat', this.close.bind(this));
564
        }
565
566
        this.off(this.elems.wrapper, 'click.chocolat');
567
        this.on(this.elems.wrapper, 'click.chocolat', () => {
568
          if (this.state.initialZoomState === null || !this.state.visible) {
569
            return;
570
          }
571
572
          this.elems.container.classList.add('chocolat-zooming-out');
573
          this.zoomOut().then(() => {
574
            this.elems.container.classList.remove('chocolat-zoomed');
575
            this.elems.container.classList.remove('chocolat-zooming-out');
576
          });
577
        });
578
        this.off(this.elems.imageWrapper, 'click.chocolat');
579
        this.on(this.elems.imageWrapper, 'click.chocolat', e => {
580
          if (this.state.initialZoomState === null && this.elems.container.classList.contains('chocolat-zoomable')) {
581
            e.stopPropagation();
582
            this.elems.container.classList.add('chocolat-zooming-in');
583
            this.zoomIn(e).then(() => {
584
              this.elems.container.classList.add('chocolat-zoomed');
585
              this.elems.container.classList.remove('chocolat-zooming-in');
586
            });
587
          }
588
        });
589
        this.on(this.elems.wrapper, 'mousemove.chocolat', e => {
590
          if (this.state.initialZoomState === null || !this.state.visible) {
591
            return;
592
          }
593
594
          const rect = this.elems.wrapper.getBoundingClientRect();
595
          const pos = {
596
            top: rect.top + window.scrollY,
597
            left: rect.left + window.scrollX
598
          };
599
          const height = this.elems.wrapper.clientHeight;
600
          const width = this.elems.wrapper.clientWidth;
601
          const imgWidth = this.elems.img.width;
602
          const imgHeight = this.elems.img.height;
603
          const coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top];
604
          let mvtX = 0;
605
606
          if (imgWidth > width) {
607
            const paddingX = this.settings.zoomedPaddingX(imgWidth, width);
608
            mvtX = coord[0] / (width / 2);
609
            mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX;
610
          }
611
612
          let mvtY = 0;
613
614
          if (imgHeight > height) {
615
            const paddingY = this.settings.zoomedPaddingY(imgHeight, height);
616
            mvtY = coord[1] / (height / 2);
617
            mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY;
618
          }
619
620
          this.elems.img.style.marginLeft = -mvtX + 'px';
621
          this.elems.img.style.marginTop = -mvtY + 'px';
622
        });
623
        this.on(window, 'resize.chocolat', e => {
624
          if (!this.state.initialized || !this.state.visible) {
625
            return;
626
          }
627
628
          debounce(50, () => {
629
            const fitOptions = {
630
              imgHeight: this.elems.img.naturalHeight,
631
              imgWidth: this.elems.img.naturalWidth,
632
              containerHeight: this.elems.wrapper.clientHeight,
633
              containerWidth: this.elems.wrapper.clientWidth,
634
              canvasWidth: this.elems.imageCanvas.clientWidth,
635
              canvasHeight: this.elems.imageCanvas.clientHeight,
636
              imageSize: this.settings.imageSize
637
            };
638
            const {
639
              width,
640
              height
641
            } = fit(fitOptions);
642
            this.position(this.elems.img).then(() => {
643
              this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(this.elems.img, this.elems.wrapper));
644
            });
645
          });
646
        });
647
      }
648
649
      zoomable(image, wrapper) {
650
        const wrapperWidth = wrapper.clientWidth;
651
        const wrapperHeight = wrapper.clientHeight;
652
        const isImageZoomable = this.settings.allowZoom && (image.naturalWidth > wrapperWidth || image.naturalHeight > wrapperHeight) ? true : false;
653
        const isImageStretched = image.clientWidth > image.naturalWidth || image.clientHeight > image.naturalHeight;
654
        return isImageZoomable && !isImageStretched;
655
      }
656
657
      zoomIn(e) {
658
        this.state.initialZoomState = this.settings.imageSize;
659
        this.settings.imageSize = 'native';
660
        return this.position(this.elems.img);
661
      }
662
663
      zoomOut(e) {
664
        this.settings.imageSize = this.state.initialZoomState || this.settings.imageSize;
665
        this.state.initialZoomState = null;
666
        this.elems.img.style.margin = 0;
667
        return this.position(this.elems.img);
668
      }
669
670
      on(element, eventName, cb) {
671
        // const eventName = this.settings.setIndex + '-' + eventName
672
        const length = this.events.push({
673
          element,
674
          eventName,
675
          cb
676
        });
677
        element.addEventListener(eventName.split('.')[0], this.events[length - 1].cb);
678
      }
679
680
      off(element, eventName) {
681
        // const eventName = this.settings.setIndex + '-' + eventName
682
        const index = this.events.findIndex(event => {
683
          return event.element === element && event.eventName === eventName;
684
        });
685
686
        if (this.events[index]) {
687
          element.removeEventListener(eventName.split('.')[0], this.events[index].cb);
688
          this.events.splice(index, 1);
689
        }
690
      }
691
692
    }
693
694
    const instances = [];
695
696
    window.Chocolat = function (elements, options) {
697
      const settings = Object.assign({}, defaults, {
698
        images: []
699
      }, options, {
700
        setIndex: instances.length
701
      });
702
      const instance = new Chocolat(elements, settings);
703
      instances.push(instance);
704
      return instance;
705
    };
706
707
}());
(-)a/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css (-269 / +1 lines)
Lines 1-269 Link Here
1
.chocolat-zoomable.chocolat-zoomed {
1
:root{--chocolat-icon-left:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22M15.3 20.7 10.7 16l4.6-4.7m7.4 4.7h-12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-right:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22m16.7 11.3 4.6 4.7-4.6 4.7M9.3 16h12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-close:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22%3E %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E %3Cpath d%3D%22m12 12 8 8m0-8-8 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");--chocolat-icon-loader:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2238%22 height%3D%2238%22%3E %3Cg transform%3D%22translate(1 1)%22 stroke-width%3D%222%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle stroke-opacity%3D%22.2%22 stroke%3D%22%23000%22 cx%3D%2218%22 cy%3D%2218%22 r%3D%2218%22%2F%3E %3Cpath d%3D%22M36 18C36 8 28 0 18 0%22 stroke%3D%22%23fff%22%3E %3CanimateTransform attributeName%3D%22transform%22 type%3D%22rotate%22 from%3D%220 18 18%22 to%3D%22360 18 18%22 dur%3D%221s%22 repeatCount%3D%22indefinite%22%2F%3E %3C%2Fpath%3E %3C%2Fg%3E%3C%2Fsvg%3E");--chocolat-icon-fullscreen:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16 16%22%3E %3Cg stroke%3D%22%23fff%22 fill%3D%22none%22%3E %3Cpath d%3D%22M.5 2.5h15v11H.5z%22%2F%3E %3Cpath d%3D%22M7.5 7.5h8v6h-8z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E")}.chocolat-zoomable.chocolat-zoomed{cursor:zoom-out}.chocolat-open{overflow:hidden}.chocolat-overlay{transition:opacity 0.4s ease, visibility 0s 0.4s ease;height:100%;width:100%;position:fixed;left:0;top:0;z-index:10;background-color:#fff;visibility:hidden;opacity:0}.chocolat-overlay.chocolat-visible{transition:opacity 0.4s, visibility 0s;visibility:visible;opacity:0.8}.chocolat-wrapper{transition:opacity 0.4s ease, visibility 0s 0.4s ease;width:100%;height:100%;position:fixed;opacity:0;left:0;top:0;z-index:16;color:#fff;visibility:hidden}.chocolat-wrapper.chocolat-visible{transition:opacity 0.4s, visibility 0s;opacity:1;visibility:visible}.chocolat-zoomable .chocolat-img{cursor:zoom-in}.chocolat-loader{transition:opacity 0.3s;height:38px;width:38px;position:absolute;left:50%;top:50%;margin-left:-19px;margin-top:-19px;z-index:11;background:var(--chocolat-icon-loader);opacity:0}.chocolat-loader.chocolat-visible{opacity:1}.chocolat-image-wrapper{position:fixed;width:0;height:0;left:50%;top:50%;z-index:14;text-align:left;transform:translate(-50%, -50%)}.chocolat-image-wrapper .chocolat-img{position:absolute;width:100%;height:100%}.chocolat-wrapper .chocolat-left{width:50px;height:100px;cursor:pointer;background:var(--chocolat-icon-left) 50% 50% / 2rem auto no-repeat;z-index:17;visibility:hidden}.chocolat-layout{display:flex;flex-direction:column;position:absolute;top:0;bottom:0;left:0;right:0}.chocolat-image-canvas{transition:opacity 0.2s;opacity:0;flex-grow:1;align-self:stretch}.chocolat-image-canvas.chocolat-visible{opacity:1}.chocolat-center{flex-grow:1;display:flex;justify-content:center;align-items:center;user-select:none}.chocolat-wrapper .chocolat-right{width:50px;height:100px;cursor:pointer;background:var(--chocolat-icon-right) 50% 50% / 2rem auto no-repeat;z-index:17;visibility:hidden}.chocolat-wrapper .chocolat-right.active{visibility:visible}.chocolat-wrapper .chocolat-left.active{visibility:visible}.chocolat-wrapper .chocolat-top{height:50px;overflow:hidden;z-index:17;flex-shrink:0}.chocolat-wrapper .chocolat-close{width:50px;height:50px;cursor:pointer;position:absolute;top:0;right:0;background:var(--chocolat-icon-close) 50% 50% / 2rem auto no-repeat}.chocolat-wrapper .chocolat-bottom{height:40px;font-size:12px;z-index:17;padding-left:15px;padding-right:15px;background:rgba(0, 0, 0, 0.2);flex-shrink:0;display:flex;align-items:center}.chocolat-wrapper .chocolat-set-title{display:inline-block;padding-right:15px;line-height:1;border-right:1px solid rgba(255, 255, 255, 0.3)}.chocolat-wrapper .chocolat-pagination{float:right;display:inline-block;padding-left:15px;padding-right:15px;margin-right:15px}.chocolat-wrapper .chocolat-fullscreen{width:16px;height:40px;background:var(--chocolat-icon-fullscreen) 50% 50% / 1rem auto no-repeat;display:block;cursor:pointer;float:right}.chocolat-wrapper .chocolat-description{display:inline-block;flex-grow:1;text-align:left}body.chocolat-open > .chocolat-overlay{z-index:15}body.chocolat-open > .chocolat-loader{z-index:15}body.chocolat-open > .chocolat-image-wrapper{z-index:17}.chocolat-in-container .chocolat-image-wrapper,.chocolat-in-container .chocolat-overlay,.chocolat-in-container .chocolat-wrapper{position:absolute}.chocolat-in-container{position:relative}.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper{transition:width 0.2s ease, height 0.2s ease}.chocolat-zoomable.chocolat-zooming-in .chocolat-img,.chocolat-zoomable.chocolat-zooming-out .chocolat-img{transition:margin 0.2s ease}
2
    cursor: zoom-out;
3
}
4
.chocolat-open {
5
    overflow: hidden;
6
}
7
.chocolat-overlay {
8
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
9
    height: 100%;
10
    width: 100%;
11
    position: fixed;
12
    left: 0;
13
    top: 0;
14
    z-index: 10;
15
    background-color: #fff;
16
    visibility: hidden;
17
    opacity: 0;
18
}
19
.chocolat-overlay.chocolat-visible {
20
    transition: opacity 0.4s, visibility 0s;
21
    visibility: visible;
22
    opacity: 0.8;
23
}
24
25
.chocolat-wrapper {
26
    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
27
    width: 100%;
28
    height: 100%;
29
    position: fixed;
30
    opacity: 0;
31
    left: 0;
32
    top: 0;
33
    z-index: 16;
34
    color: #fff;
35
    visibility: hidden;
36
}
37
.chocolat-wrapper.chocolat-visible {
38
    transition: opacity 0.4s, visibility 0s;
39
    opacity: 1;
40
    visibility: visible;
41
}
42
43
.chocolat-zoomable .chocolat-img {
44
    cursor: zoom-in;
45
}
46
.chocolat-loader {
47
    transition: opacity 0.3s;
48
    height: 32px;
49
    width: 32px;
50
    position: absolute;
51
    left: 50%;
52
    top: 50%;
53
    margin-left: -16px;
54
    margin-top: -16px;
55
    z-index: 11;
56
    background: url(../images/loader.gif);
57
    opacity: 0;
58
}
59
.chocolat-loader.chocolat-visible {
60
    opacity: 1;
61
}
62
63
.chocolat-image-wrapper {
64
    position: fixed;
65
    width: 0px;
66
    height: 0px;
67
    left: 50%;
68
    top: 50%;
69
    z-index: 14;
70
    text-align: left;
71
    transform: translate(-50%, -50%);
72
}
73
74
.chocolat-image-wrapper .chocolat-img {
75
    position: absolute;
76
    width: 100%;
77
    height: 100%;
78
}
79
.chocolat-wrapper .chocolat-left {
80
    width: 50px;
81
    height: 100px;
82
    cursor: pointer;
83
    background: url(../images/left.png) 50% 50% no-repeat;
84
    z-index: 17;
85
    visibility: hidden;
86
}
87
88
.chocolat-layout {
89
    display: flex;
90
    flex-direction: column;
91
    position: absolute;
92
    top: 0;
93
    bottom: 0;
94
    left: 0;
95
    right: 0;
96
}
97
.chocolat-image-canvas {
98
    transition: opacity .2s;
99
    opacity: 0;
100
    flex-grow: 1;
101
    align-self: stretch;
102
}
103
.chocolat-image-canvas.chocolat-visible {
104
    opacity: 1;
105
}
106
.chocolat-center {
107
    flex-grow: 1;
108
    display: flex;
109
    justify-content: center;
110
    align-items: center;
111
    user-select: none;
112
}
113
114
.chocolat-wrapper .chocolat-right {
115
    width: 50px;
116
    height: 100px;
117
    cursor: pointer;
118
    background: url(../images/right.png) 50% 50% no-repeat;
119
    z-index: 17;
120
    visibility: hidden;
121
}
122
.chocolat-wrapper .chocolat-right.active {
123
    visibility: visible;
124
}
125
.chocolat-wrapper .chocolat-left.active {
126
    visibility: visible;
127
}
128
.chocolat-wrapper .chocolat-top {
129
    height: 50px;
130
    overflow: hidden;
131
    z-index: 17;
132
    flex-shrink: 0;
133
}
134
.chocolat-wrapper .chocolat-close {
135
    width: 50px;
136
    height: 50px;
137
    cursor: pointer;
138
    position: absolute;
139
    top: 0;
140
    right: 0;
141
    background: url(../images/close.png) 50% 50% no-repeat;
142
}
143
.chocolat-wrapper .chocolat-bottom {
144
    height: 40px;
145
    font-size: 12px;
146
    z-index: 17;
147
    padding-left: 15px;
148
    padding-right: 15px;
149
    background: rgba(0, 0, 0, 0.2);
150
    flex-shrink: 0;
151
    display: flex;
152
    align-items: center;
153
154
}
155
.chocolat-wrapper .chocolat-set-title {
156
    display: inline-block;
157
    padding-right: 15px;
158
    line-height: 1;
159
    border-right: 1px solid rgba(255, 255, 255, 0.3);
160
}
161
.chocolat-wrapper .chocolat-pagination {
162
    float: right;
163
    display: inline-block;
164
    padding-left: 15px;
165
    padding-right: 15px;
166
    margin-right: 15px;
167
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
168
}
169
.chocolat-wrapper .chocolat-fullscreen {
170
    width: 16px;
171
    height: 40px;
172
    background: url(../images/fullscreen.png) 50% 50% no-repeat;
173
    display: block;
174
    cursor: pointer;
175
    float: right;
176
}
177
.chocolat-wrapper .chocolat-description {
178
    display: inline-block;
179
    flex-grow: 1;
180
    text-align: left;
181
}
182
183
/* no container mode*/
184
body.chocolat-open > .chocolat-overlay {
185
    z-index: 15;
186
}
187
body.chocolat-open > .chocolat-loader {
188
    z-index: 15;
189
}
190
body.chocolat-open > .chocolat-image-wrapper {
191
    z-index: 17;
192
}
193
194
/* container mode*/
195
.chocolat-in-container .chocolat-wrapper,
196
.chocolat-in-container .chocolat-image-wrapper,
197
.chocolat-in-container .chocolat-overlay {
198
    position: absolute;
199
}
200
.chocolat-in-container {
201
    position: relative;
202
}
203
204
.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,
205
.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper {
206
    transition: width .2s ease, height .2s ease;
207
}
208
.chocolat-zoomable.chocolat-zooming-in .chocolat-img,
209
.chocolat-zoomable.chocolat-zooming-out .chocolat-img {
210
    transition: margin .2s ease;
211
}
212
213
/* uncomment to hide controls when zoomed-in*/
214
/*
215
.chocolat-zoomable .chocolat-top,
216
.chocolat-zoomable .chocolat-bottom,
217
.chocolat-zoomable .chocolat-right,
218
.chocolat-zoomable .chocolat-left {
219
    transition: opacity .3s ease, visibility 0s .3s;
220
   opacity: 1;
221
}
222
223
.chocolat-zoomable.chocolat-zoomed .chocolat-top,
224
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
225
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
226
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
227
    visibility: hidden;
228
    opacity: 0;
229
}
230
*/
231
232
/* Local chnages for Koha */
233
.chocolat-wrapper {
234
    z-index: 1035;
235
}
236
237
.chocolat-wrapper .chocolat-left {
238
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
239
    background-size: 35px;
240
}
241
242
.chocolat-wrapper .chocolat-right {
243
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
244
    background-size: 35px;
245
}
246
247
.chocolat-wrapper .chocolat-close {
248
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
249
    background-size: 35px;
250
}
251
252
.chocolat-wrapper .chocolat-bottom {
253
    background: rgba(0, 0, 0, 0.8);
254
}
255
256
.chocolat-wrapper .chocolat-bottom a {
257
    color: #FFF;
258
    text-decoration: underline;
259
}
260
261
.chocolat-wrapper .chocolat-fullscreen {
262
    width: 40px;
263
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' class='bi bi-arrow-down-left-square' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14.357 3.656a.692.692 0 00-.691-.692H2.263a.692.692 0 00-.691.692v8.303c0 .382.31.692.691.692h11.403c.382 0 .691-.31.691-.692zm-13.477 0c0-.764.62-1.383 1.383-1.383h11.403c.764 0 1.383.62 1.383 1.383v8.303c0 .764-.62 1.383-1.383 1.383H2.263C1.5 13.342.88 12.723.88 11.96z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' d='M14.357 8.151a.692.692 0 00-.691-.692h-5.88a.692.692 0 00-.69.692v3.808c0 .382.309.692.69.692h5.88c.382 0 .691-.31.691-.692zm-7.954 0c0-.764.62-1.384 1.384-1.384h5.879c.764 0 1.383.62 1.383 1.384v3.808c0 .764-.62 1.383-1.383 1.383h-5.88c-.763 0-1.383-.619-1.383-1.383z' fill='%23fff'/%3E%3C/svg%3E");
264
    background-position: 50% 50%;
265
    background-repeat: no-repeat;
266
    background-size: 25px;
267
}
268
269
/* End local changes for Koha */
(-)a/koha-tmpl/opac-tmpl/lib/Chocolat/js/chocolat.js (-708 / +1 lines)
Lines 1-707 Link Here
1
(function () {
1
!function(){"use strict";function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function t(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function s(e,t){return e(t={exports:{}},t.exports),t.exports}var r,o,a=function(e){return e&&e.Math==Math&&e},c=a("object"==typeof globalThis&&globalThis)||a("object"==typeof window&&window)||a("object"==typeof self&&self)||a("object"==typeof i&&i)||function(){return this}()||Function("return this")(),l={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0},u=function(e){return"function"==typeof e},h=function(e){return"object"==typeof e?null!==e:u(e)},m=c.document,f=h(m)&&h(m.createElement),p=function(e){return f?m.createElement(e):{}},g=p("span").classList,d=g&&g.constructor&&g.constructor.prototype,v=d===Object.prototype?void 0:d,y=function(e){try{return!!e()}catch(e){return!0}},b={}.toString,w="".split,S=y((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==function(e){return b.call(e).slice(8,-1)}(e)?w.call(e,""):Object(e)}:Object,O=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e},I=function(e){return S(O(e))},L=function(e,t){try{Object.defineProperty(c,e,{value:t,configurable:!0,writable:!0})}catch(n){c[e]=t}return t},k="__core-js_shared__",C=c[k]||L(k,{}),E=s((function(e){(e.exports=function(e,t){return C[e]||(C[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.18.3",mode:"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})})),A=function(e){return Object(O(e))},T={}.hasOwnProperty,j=Object.hasOwn||function(e,t){return T.call(A(e),t)},z=0,x=Math.random(),P=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++z+x).toString(36)},W=function(e,t){return arguments.length<2?(n=c[e],u(n)?n:void 0):c[e]&&c[e][t];var n},F=W("navigator","userAgent")||"",H=c.process,M=c.Deno,_=H&&H.versions||M&&M.version,R=_&&_.v8;R?o=(r=R.split("."))[0]<4?1:r[0]+r[1]:F&&(!(r=F.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=F.match(/Chrome\/(\d+)/))&&(o=r[1]);var N,G=o&&+o,D=!!Object.getOwnPropertySymbols&&!y((function(){var e=Symbol();return!String(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&G&&G<41})),q=D&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,B=E("wks"),Z=c.Symbol,V=q?Z:Z&&Z.withoutSetter||P,Y=function(e){return j(B,e)&&(D||"string"==typeof B[e])||(D&&j(Z,e)?B[e]=Z[e]:B[e]=V("Symbol."+e)),B[e]},U=function(e){if(h(e))return e;throw TypeError(String(e)+" is not an object")},X=!y((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),$=!X&&!y((function(){return 7!=Object.defineProperty(p("div"),"a",{get:function(){return 7}}).a})),K=q?function(e){return"symbol"==typeof e}:function(e){var t=W("Symbol");return u(t)&&Object(e)instanceof t},J=function(e){if(u(e))return e;throw TypeError(function(e){try{return String(e)}catch(e){return"Object"}}(e)+" is not a function")},Q=Y("toPrimitive"),ee=function(e,t){if(!h(e)||K(e))return e;var n,i,s=null==(n=e[Q])?void 0:J(n);if(s){if(void 0===t&&(t="default"),i=s.call(e,t),!h(i)||K(i))return i;throw TypeError("Can't convert object to primitive value")}return void 0===t&&(t="number"),function(e,t){var n,i;if("string"===t&&u(n=e.toString)&&!h(i=n.call(e)))return i;if(u(n=e.valueOf)&&!h(i=n.call(e)))return i;if("string"!==t&&u(n=e.toString)&&!h(i=n.call(e)))return i;throw TypeError("Can't convert object to primitive value")}(e,t)},te=function(e){var t=ee(e,"string");return K(t)?t:String(t)},ne=Object.defineProperty,ie={f:X?ne:function(e,t,n){if(U(e),t=te(t),U(n),$)try{return ne(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},se=Math.ceil,re=Math.floor,oe=function(e){var t=+e;return t!=t||0===t?0:(t>0?re:se)(t)},ae=Math.max,ce=Math.min,le=Math.min,ue=function(e){return(t=e.length)>0?le(oe(t),9007199254740991):0;var t},he=function(e){return function(t,n,i){var s,r=I(t),o=ue(r),a=function(e,t){var n=oe(e);return n<0?ae(n+t,0):ce(n,t)}(i,o);if(e&&n!=n){for(;o>a;)if((s=r[a++])!=s)return!0}else for(;o>a;a++)if((e||a in r)&&r[a]===n)return e||a||0;return!e&&-1}},me={includes:he(!0),indexOf:he(!1)},fe={},pe=me.indexOf,ge=function(e,t){var n,i=I(e),s=0,r=[];for(n in i)!j(fe,n)&&j(i,n)&&r.push(n);for(;t.length>s;)j(i,n=t[s++])&&(~pe(r,n)||r.push(n));return r},de=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"],ve=Object.keys||function(e){return ge(e,de)},ye=X?Object.defineProperties:function(e,t){U(e);for(var n,i=ve(t),s=i.length,r=0;s>r;)ie.f(e,n=i[r++],t[n]);return e},be=W("document","documentElement"),we=E("keys"),Se=function(e){return we[e]||(we[e]=P(e))},Oe="prototype",Ie="script",Le=Se("IE_PROTO"),ke=function(){},Ce=function(e){return"<"+Ie+">"+e+"</"+Ie+">"},Ee=function(e){e.write(Ce("")),e.close();var t=e.parentWindow.Object;return e=null,t},Ae=function(){try{N=new ActiveXObject("htmlfile")}catch(e){}var e,t,n;Ae="undefined"!=typeof document?document.domain&&N?Ee(N):(t=p("iframe"),n="java"+Ie+":",t.style.display="none",be.appendChild(t),t.src=String(n),(e=t.contentWindow.document).open(),e.write(Ce("document.F=Object")),e.close(),e.F):Ee(N);for(var i=de.length;i--;)delete Ae[Oe][de[i]];return Ae()};fe[Le]=!0;var Te=Object.create||function(e,t){var n;return null!==e?(ke[Oe]=U(e),n=new ke,ke[Oe]=null,n[Le]=e):n=Ae(),void 0===t?n:ye(n,t)},je=Y("unscopables"),ze=Array.prototype;null==ze[je]&&ie.f(ze,je,{configurable:!0,value:Te(null)});var xe=function(e){ze[je][e]=!0},Pe=Function.toString;u(C.inspectSource)||(C.inspectSource=function(e){return Pe.call(e)});var We,Fe,He,Me=C.inspectSource,_e=c.WeakMap,Re=u(_e)&&/native code/.test(Me(_e)),Ne=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},Ge=X?function(e,t,n){return ie.f(e,t,Ne(1,n))}:function(e,t,n){return e[t]=n,e},De="Object already initialized",qe=c.WeakMap;if(Re||C.state){var Be=C.state||(C.state=new qe),Ze=Be.get,Ve=Be.has,Ye=Be.set;We=function(e,t){if(Ve.call(Be,e))throw new TypeError(De);return t.facade=e,Ye.call(Be,e,t),t},Fe=function(e){return Ze.call(Be,e)||{}},He=function(e){return Ve.call(Be,e)}}else{var Ue=Se("state");fe[Ue]=!0,We=function(e,t){if(j(e,Ue))throw new TypeError(De);return t.facade=e,Ge(e,Ue,t),t},Fe=function(e){return j(e,Ue)?e[Ue]:{}},He=function(e){return j(e,Ue)}}var Xe,$e,Ke,Je={set:We,get:Fe,has:He,enforce:function(e){return He(e)?Fe(e):We(e,{})},getterFor:function(e){return function(t){var n;if(!h(t)||(n=Fe(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}},Qe={}.propertyIsEnumerable,et=Object.getOwnPropertyDescriptor,tt={f:et&&!Qe.call({1:2},1)?function(e){var t=et(this,e);return!!t&&t.enumerable}:Qe},nt=Object.getOwnPropertyDescriptor,it={f:X?nt:function(e,t){if(e=I(e),t=te(t),$)try{return nt(e,t)}catch(e){}if(j(e,t))return Ne(!tt.f.call(e,t),e[t])}},st=Function.prototype,rt=X&&Object.getOwnPropertyDescriptor,ot=j(st,"name"),at={EXISTS:ot,PROPER:ot&&"something"===function(){}.name,CONFIGURABLE:ot&&(!X||X&&rt(st,"name").configurable)},ct=s((function(e){var t=at.CONFIGURABLE,n=Je.get,i=Je.enforce,s=String(String).split("String");(e.exports=function(e,n,r,o){var a,l=!!o&&!!o.unsafe,h=!!o&&!!o.enumerable,m=!!o&&!!o.noTargetGet,f=o&&void 0!==o.name?o.name:n;u(r)&&("Symbol("===String(f).slice(0,7)&&(f="["+String(f).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),(!j(r,"name")||t&&r.name!==f)&&Ge(r,"name",f),(a=i(r)).source||(a.source=s.join("string"==typeof f?f:""))),e!==c?(l?!m&&e[n]&&(h=!0):delete e[n],h?e[n]=r:Ge(e,n,r)):h?e[n]=r:L(n,r)})(Function.prototype,"toString",(function(){return u(this)&&n(this).source||Me(this)}))})),lt=de.concat("length","prototype"),ut={f:Object.getOwnPropertyNames||function(e){return ge(e,lt)}},ht={f:Object.getOwnPropertySymbols},mt=W("Reflect","ownKeys")||function(e){var t=ut.f(U(e)),n=ht.f;return n?t.concat(n(e)):t},ft=function(e,t){for(var n=mt(t),i=ie.f,s=it.f,r=0;r<n.length;r++){var o=n[r];j(e,o)||i(e,o,s(t,o))}},pt=/#|\.prototype\./,gt=function(e,t){var n=vt[dt(e)];return n==bt||n!=yt&&(u(t)?y(t):!!t)},dt=gt.normalize=function(e){return String(e).replace(pt,".").toLowerCase()},vt=gt.data={},yt=gt.NATIVE="N",bt=gt.POLYFILL="P",wt=gt,St=it.f,Ot=!y((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype})),It=Se("IE_PROTO"),Lt=Object.prototype,kt=Ot?Object.getPrototypeOf:function(e){var t=A(e);if(j(t,It))return t[It];var n=t.constructor;return u(n)&&t instanceof n?n.prototype:t instanceof Object?Lt:null},Ct=Y("iterator"),Et=!1;[].keys&&("next"in(Ke=[].keys())?($e=kt(kt(Ke)))!==Object.prototype&&(Xe=$e):Et=!0),(null==Xe||y((function(){var e={};return Xe[Ct].call(e)!==e})))&&(Xe={}),u(Xe[Ct])||ct(Xe,Ct,(function(){return this}));var At={IteratorPrototype:Xe,BUGGY_SAFARI_ITERATORS:Et},Tt=ie.f,jt=Y("toStringTag"),zt=function(e,t,n){e&&!j(e=n?e:e.prototype,jt)&&Tt(e,jt,{configurable:!0,value:t})},xt=At.IteratorPrototype,Pt=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set).call(n,[]),t=n instanceof Array}catch(e){}return function(n,i){return U(n),function(e){if("object"==typeof e||u(e))return e;throw TypeError("Can't set "+String(e)+" as a prototype")}(i),t?e.call(n,i):n.__proto__=i,n}}():void 0),Wt=at.PROPER,Ft=at.CONFIGURABLE,Ht=At.IteratorPrototype,Mt=At.BUGGY_SAFARI_ITERATORS,_t=Y("iterator"),Rt="keys",Nt="values",Gt="entries",Dt=function(){return this},qt="Array Iterator",Bt=Je.set,Zt=Je.getterFor(qt),Vt=function(e,t,n,i,s,r,o){!function(e,t,n){var i=t+" Iterator";e.prototype=Te(xt,{next:Ne(1,n)}),zt(e,i,!1)}(n,t,i);var a,l,h,m=function(e){if(e===s&&v)return v;if(!Mt&&e in g)return g[e];switch(e){case Rt:case Nt:case Gt:return function(){return new n(this,e)}}return function(){return new n(this)}},f=t+" Iterator",p=!1,g=e.prototype,d=g[_t]||g["@@iterator"]||s&&g[s],v=!Mt&&d||m(s),y="Array"==t&&g.entries||d;if(y&&(a=kt(y.call(new e)))!==Object.prototype&&a.next&&(kt(a)!==Ht&&(Pt?Pt(a,Ht):u(a[_t])||ct(a,_t,Dt)),zt(a,f,!0)),Wt&&s==Nt&&d&&d.name!==Nt&&(Ft?Ge(g,"name",Nt):(p=!0,v=function(){return d.call(this)})),s)if(l={values:m(Nt),keys:r?v:m(Rt),entries:m(Gt)},o)for(h in l)(Mt||p||!(h in g))&&ct(g,h,l[h]);else!function(e,t){var n,i,s,r,o,a=e.target,l=e.global,u=e.stat;if(n=l?c:u?c[a]||L(a,{}):(c[a]||{}).prototype)for(i in t){if(r=t[i],s=e.noTargetGet?(o=St(n,i))&&o.value:n[i],!wt(l?i:a+(u?".":"#")+i,e.forced)&&void 0!==s){if(typeof r==typeof s)continue;ft(r,s)}(e.sham||s&&s.sham)&&Ge(r,"sham",!0),ct(n,i,r,e)}}({target:t,proto:!0,forced:Mt||p},l);return g[_t]!==v&&ct(g,_t,v,{name:s}),l}(Array,"Array",(function(e,t){Bt(this,{type:qt,target:I(e),index:0,kind:t})}),(function(){var e=Zt(this),t=e.target,n=e.kind,i=e.index++;return!t||i>=t.length?(e.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:i,done:!1}:"values"==n?{value:t[i],done:!1}:{value:[i,t[i]],done:!1}}),"values");xe("keys"),xe("values"),xe("entries");var Yt=Y("iterator"),Ut=Y("toStringTag"),Xt=Vt.values,$t=function(e,t){if(e){if(e[Yt]!==Xt)try{Ge(e,Yt,Xt)}catch(t){e[Yt]=Xt}if(e[Ut]||Ge(e,Ut,t),l[t])for(var n in Vt)if(e[n]!==Vt[n])try{Ge(e,n,Vt[n])}catch(t){e[n]=Vt[n]}}};for(var Kt in l)$t(c[Kt]&&c[Kt].prototype,Kt);$t(v,"DOMTokenList");var Jt=void 0;function Qt(e,t){return new Promise((function(n){var i=function e(){t.removeEventListener("transitionend",e),n()};t.addEventListener("transitionend",i);var s=t.getAttribute("class"),r=t.getAttribute("style");e(),s===t.getAttribute("class")&&r===t.getAttribute("style")&&i(),0===parseFloat(getComputedStyle(t).transitionDuration)&&i()}))}function en(e){var t=e.src,n=e.srcset,i=e.sizes,s=new Image;return s.src=t,n&&(s.srcset=n),i&&(s.sizes=i),new Promise("decode"in s?function(e,t){s.decode().then((function(){e(s)})).catch((function(){t(s)}))}:function(e,t){s.onload=e(s),s.onerror=t(s)})}function tn(e){var t,n,i=e.imgHeight,s=e.imgWidth,r=e.containerHeight,o=e.containerWidth,a=e.canvasWidth,c=e.canvasHeight,l=e.imageSize,u=i/s;return"cover"==l?u<r/o?n=(t=r)/u:t=(n=o)*u:"native"==l?(t=i,n=s):(u>c/a?n=(t=c)/u:t=(n=a)*u,"scale-down"===l&&(n>=s||t>=i)&&(n=s,t=i)),{height:t,width:n}}function nn(e){return e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():Promise.reject()}function sn(){return document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen?document.msExitFullscreen():Promise.reject()}var rn={container:document.body,className:void 0,imageSize:"scale-down",fullScreen:!1,loop:!1,linkImages:!0,setIndex:0,firstImageIndex:0,lastImageIndex:!1,currentImageIndex:void 0,allowZoom:!0,closeOnBackgroundClick:!0,imageSourceAttribute:"href",setTitle:function(){return""},description:function(){return this.images[this.settings.currentImageIndex].title},pagination:function(){var e=this.settings.lastImageIndex+1;return this.settings.currentImageIndex+1+"/"+e},afterInitialize:function(){},afterMarkup:function(){},afterImageLoad:function(){},afterClose:function(){},zoomedPaddingX:function(e,t){return 0},zoomedPaddingY:function(e,t){return 0}},on=function(){function n(e,t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.settings=t,this.elems={},this.images=[],this.events=[],this.state={fullScreenOpen:!1,initialZoomState:null,initialized:!1,timer:!1,visible:!1},this._cssClasses=["chocolat-open","chocolat-in-container","chocolat-cover","chocolat-zoomable","chocolat-zoomed","chocolat-zooming-in","chocolat-zooming-out"],NodeList.prototype.isPrototypeOf(e)||HTMLCollection.prototype.isPrototypeOf(e)?e.forEach((function(e,n){i.images.push({title:e.getAttribute("title"),src:e.getAttribute(t.imageSourceAttribute),srcset:e.getAttribute("data-srcset"),sizes:e.getAttribute("data-sizes")}),i.off(e,"click.chocolat"),i.on(e,"click.chocolat",(function(e){i.init(n),e.preventDefault()}))})):this.images=e,this.settings.container instanceof Element||this.settings.container instanceof HTMLElement?this.elems.container=this.settings.container:this.elems.container=document.body,this.api={open:function(e){return e=parseInt(e)||0,i.init(e)},close:function(){return i.close()},next:function(){return i.change(1)},prev:function(){return i.change(-1)},goto:function(e){return i.open(e)},current:function(){return i.settings.currentImageIndex},position:function(){return i.position(i.elems.img)},destroy:function(){return i.destroy()},set:function(e,t){return i.settings[e]=t,t},get:function(e){return i.settings[e]},getElem:function(e){return i.elems[e]}}}var i,s,r;return i=n,(s=[{key:"init",value:function(e){return this.state.initialized||(this.markup(),this.attachListeners(),this.settings.lastImageIndex=this.images.length-1,this.state.initialized=!0),this.settings.afterInitialize.call(this),this.load(e)}},{key:"load",value:function(e){var t=this;if(this.state.visible||(this.state.visible=!0,setTimeout((function(){t.elems.overlay.classList.add("chocolat-visible"),t.elems.wrapper.classList.add("chocolat-visible")}),0),this.elems.container.classList.add("chocolat-open")),this.settings.fullScreen&&nn(this.elems.wrapper),this.settings.currentImageIndex===e)return Promise.resolve();var n,i,s=setTimeout((function(){t.elems.loader.classList.add("chocolat-visible")}),1e3),r=setTimeout((function(){r=void 0,n=Qt((function(){t.elems.imageCanvas.classList.remove("chocolat-visible")}),t.elems.imageCanvas)}),80);return en(this.images[e]).then((function(e){return i=e,r?(clearTimeout(r),Promise.resolve()):n})).then((function(){var n=e+1;return null!=t.images[n]&&en(t.images[n]),t.settings.currentImageIndex=e,t.elems.description.textContent=t.settings.description.call(t),t.elems.pagination.textContent=t.settings.pagination.call(t),t.arrows(),t.position(i).then((function(){return t.elems.loader.classList.remove("chocolat-visible"),clearTimeout(s),t.appear(i)}))})).then((function(){t.elems.container.classList.toggle("chocolat-zoomable",t.zoomable(i,t.elems.wrapper)),t.settings.afterImageLoad.call(t)}))}},{key:"position",value:function(e){var t=this,n=tn({imgHeight:e.naturalHeight,imgWidth:e.naturalWidth,containerHeight:this.elems.container.clientHeight,containerWidth:this.elems.container.clientWidth,canvasWidth:this.elems.imageCanvas.clientWidth,canvasHeight:this.elems.imageCanvas.clientHeight,imageSize:this.settings.imageSize}),i=n.width,s=n.height;return Qt((function(){Object.assign(t.elems.imageWrapper.style,{width:i+"px",height:s+"px"})}),this.elems.imageWrapper)}},{key:"appear",value:function(e){var t=this;return this.elems.imageWrapper.removeChild(this.elems.img),this.elems.img=e,this.elems.img.setAttribute("class","chocolat-img"),this.elems.imageWrapper.appendChild(this.elems.img),Qt((function(){t.elems.imageCanvas.classList.add("chocolat-visible")}),this.elems.imageCanvas)}},{key:"change",value:function(e){if(this.state.visible&&this.settings.linkImages){this.zoomOut();var t=this.settings.currentImageIndex+parseInt(e);if(t>this.settings.lastImageIndex){if(this.settings.loop)return this.load(this.settings.firstImageIndex)}else{if(!(t<this.settings.firstImageIndex))return this.load(t);if(this.settings.loop)return this.load(this.settings.lastImageIndex)}}}},{key:"arrows",value:function(){this.settings.loop?(this.elems.left.classList.add("active"),this.elems.right.classList.add("active")):this.settings.linkImages?(this.elems.right.classList.toggle("active",this.settings.currentImageIndex!==this.settings.lastImageIndex),this.elems.left.classList.toggle("active",this.settings.currentImageIndex!==this.settings.firstImageIndex)):(this.elems.left.classList.remove("active"),this.elems.right.classList.remove("active"))}},{key:"close",value:function(){var e=this;if(!this.state.fullScreenOpen){this.state.visible=!1;var t=Qt((function(){e.elems.overlay.classList.remove("chocolat-visible")}),this.elems.overlay),n=Qt((function(){e.elems.wrapper.classList.remove("chocolat-visible")}),this.elems.wrapper);return Promise.all([t,n]).then((function(){e.elems.container.classList.remove("chocolat-open"),e.settings.afterClose.call(e)}))}sn()}},{key:"destroy",value:function(){for(var e,n=this.events.length-1;n>=0;n--){var i=this.events[n],s=i.element,r=i.eventName;this.off(s,r)}this.state.initialized&&(this.state.fullScreenOpen&&sn(),this.settings.currentImageIndex=void 0,this.state.visible=!1,this.state.initialized=!1,(e=this.elems.container.classList).remove.apply(e,t(this._cssClasses)),this.elems.wrapper.parentNode.removeChild(this.elems.wrapper))}},{key:"markup",value:function(){this.elems.container.classList.add("chocolat-open",this.settings.className),"cover"==this.settings.imageSize&&this.elems.container.classList.add("chocolat-cover"),this.elems.container!==document.body&&this.elems.container.classList.add("chocolat-in-container"),this.elems.wrapper=document.createElement("div"),this.elems.wrapper.setAttribute("id","chocolat-content-"+this.settings.setIndex),this.elems.wrapper.setAttribute("class","chocolat-wrapper"),this.elems.container.appendChild(this.elems.wrapper),this.elems.overlay=document.createElement("div"),this.elems.overlay.setAttribute("class","chocolat-overlay"),this.elems.wrapper.appendChild(this.elems.overlay),this.elems.loader=document.createElement("div"),this.elems.loader.setAttribute("class","chocolat-loader"),this.elems.wrapper.appendChild(this.elems.loader),this.elems.layout=document.createElement("div"),this.elems.layout.setAttribute("class","chocolat-layout"),this.elems.wrapper.appendChild(this.elems.layout),this.elems.top=document.createElement("div"),this.elems.top.setAttribute("class","chocolat-top"),this.elems.layout.appendChild(this.elems.top),this.elems.center=document.createElement("div"),this.elems.center.setAttribute("class","chocolat-center"),this.elems.layout.appendChild(this.elems.center),this.elems.left=document.createElement("div"),this.elems.left.setAttribute("class","chocolat-left"),this.elems.center.appendChild(this.elems.left),this.elems.imageCanvas=document.createElement("div"),this.elems.imageCanvas.setAttribute("class","chocolat-image-canvas"),this.elems.center.appendChild(this.elems.imageCanvas),this.elems.imageWrapper=document.createElement("div"),this.elems.imageWrapper.setAttribute("class","chocolat-image-wrapper"),this.elems.imageCanvas.appendChild(this.elems.imageWrapper),this.elems.img=document.createElement("img"),this.elems.img.setAttribute("class","chocolat-img"),this.elems.imageWrapper.appendChild(this.elems.img),this.elems.right=document.createElement("div"),this.elems.right.setAttribute("class","chocolat-right"),this.elems.center.appendChild(this.elems.right),this.elems.bottom=document.createElement("div"),this.elems.bottom.setAttribute("class","chocolat-bottom"),this.elems.layout.appendChild(this.elems.bottom),this.elems.close=document.createElement("span"),this.elems.close.setAttribute("class","chocolat-close"),this.elems.top.appendChild(this.elems.close),this.elems.description=document.createElement("span"),this.elems.description.setAttribute("class","chocolat-description"),this.elems.bottom.appendChild(this.elems.description),this.elems.pagination=document.createElement("span"),this.elems.pagination.setAttribute("class","chocolat-pagination"),this.elems.bottom.appendChild(this.elems.pagination),this.elems.setTitle=document.createElement("span"),this.elems.setTitle.setAttribute("class","chocolat-set-title"),this.elems.setTitle.textContent=this.settings.setTitle(),this.elems.bottom.appendChild(this.elems.setTitle),this.elems.fullscreen=document.createElement("span"),this.elems.fullscreen.setAttribute("class","chocolat-fullscreen"),this.elems.bottom.appendChild(this.elems.fullscreen),this.settings.afterMarkup.call(this)}},{key:"attachListeners",value:function(){var e=this;this.off(document,"keydown.chocolat"),this.on(document,"keydown.chocolat",(function(t){e.state.initialized&&(37==t.keyCode?e.change(-1):39==t.keyCode?e.change(1):27==t.keyCode&&e.close())}));var t=this.elems.wrapper.querySelector(".chocolat-right");this.off(t,"click.chocolat"),this.on(t,"click.chocolat",(function(){e.change(1)}));var n=this.elems.wrapper.querySelector(".chocolat-left");this.off(n,"click.chocolat"),this.on(n,"click.chocolat",(function(){e.change(-1)})),this.off(this.elems.close,"click.chocolat"),this.on(this.elems.close,"click.chocolat",this.close.bind(this)),this.off(this.elems.fullscreen,"click.chocolat"),this.on(this.elems.fullscreen,"click.chocolat",(function(){e.state.fullScreenOpen?sn():nn(e.elems.wrapper)})),this.off(document,"fullscreenchange.chocolat"),this.on(document,"fullscreenchange.chocolat",(function(){document.fullscreenElement||document.webkitCurrentFullScreenElement||document.webkitFullscreenElement?e.state.fullScreenOpen=!0:e.state.fullScreenOpen=!1})),this.off(document,"webkitfullscreenchange.chocolat"),this.on(document,"webkitfullscreenchange.chocolat",(function(){document.fullscreenElement||document.webkitCurrentFullScreenElement||document.webkitFullscreenElement?e.state.fullScreenOpen=!0:e.state.fullScreenOpen=!1})),this.settings.closeOnBackgroundClick&&(this.off(this.elems.overlay,"click.chocolat"),this.on(this.elems.overlay,"click.chocolat",this.close.bind(this))),this.off(this.elems.wrapper,"click.chocolat"),this.on(this.elems.wrapper,"click.chocolat",(function(){null!==e.state.initialZoomState&&e.state.visible&&(e.elems.container.classList.add("chocolat-zooming-out"),e.zoomOut().then((function(){e.elems.container.classList.remove("chocolat-zoomed"),e.elems.container.classList.remove("chocolat-zooming-out")})))})),this.off(this.elems.imageWrapper,"click.chocolat"),this.on(this.elems.imageWrapper,"click.chocolat",(function(t){null===e.state.initialZoomState&&e.elems.container.classList.contains("chocolat-zoomable")&&(t.stopPropagation(),e.elems.container.classList.add("chocolat-zooming-in"),e.zoomIn(t).then((function(){e.elems.container.classList.add("chocolat-zoomed"),e.elems.container.classList.remove("chocolat-zooming-in")})))})),this.on(this.elems.wrapper,"mousemove.chocolat",(function(t){if(null!==e.state.initialZoomState&&e.state.visible){var n=e.elems.wrapper.getBoundingClientRect(),i=n.top+window.scrollY,s=n.left+window.scrollX,r=e.elems.wrapper.clientHeight,o=e.elems.wrapper.clientWidth,a=e.elems.img.width,c=e.elems.img.height,l=[t.pageX-o/2-s,t.pageY-r/2-i],u=0;if(a>o){var h=e.settings.zoomedPaddingX(a,o);u=l[0]/(o/2),u*=(a-o)/2+h}var m=0;if(c>r){var f=e.settings.zoomedPaddingY(c,r);m=l[1]/(r/2),m*=(c-r)/2+f}e.elems.img.style.marginLeft=-u+"px",e.elems.img.style.marginTop=-m+"px"}})),this.on(window,"resize.chocolat",(function(t){var n,i;e.state.initialized&&e.state.visible&&(n=50,i=function(){tn({imgHeight:e.elems.img.naturalHeight,imgWidth:e.elems.img.naturalWidth,containerHeight:e.elems.wrapper.clientHeight,containerWidth:e.elems.wrapper.clientWidth,canvasWidth:e.elems.imageCanvas.clientWidth,canvasHeight:e.elems.imageCanvas.clientHeight,imageSize:e.settings.imageSize}),e.position(e.elems.img).then((function(){e.elems.container.classList.toggle("chocolat-zoomable",e.zoomable(e.elems.img,e.elems.wrapper))}))},clearTimeout(Jt),Jt=setTimeout((function(){i()}),n))}))}},{key:"zoomable",value:function(e,t){var n=t.clientWidth,i=t.clientHeight,s=!(!this.settings.allowZoom||!(e.naturalWidth>n||e.naturalHeight>i)),r=e.clientWidth>e.naturalWidth||e.clientHeight>e.naturalHeight;return s&&!r}},{key:"zoomIn",value:function(e){return this.state.initialZoomState=this.settings.imageSize,this.settings.imageSize="native",this.position(this.elems.img)}},{key:"zoomOut",value:function(e){return this.settings.imageSize=this.state.initialZoomState||this.settings.imageSize,this.state.initialZoomState=null,this.elems.img.style.margin=0,this.position(this.elems.img)}},{key:"on",value:function(e,t,n){var i=this.events.push({element:e,eventName:t,cb:n});e.addEventListener(t.split(".")[0],this.events[i-1].cb)}},{key:"off",value:function(e,t){var n=this.events.findIndex((function(n){return n.element===e&&n.eventName===t}));this.events[n]&&(e.removeEventListener(t.split(".")[0],this.events[n].cb),this.events.splice(n,1))}}])&&e(i.prototype,s),r&&e(i,r),n}(),an=[];window.Chocolat=function(e,t){var n=Object.assign({},rn,{images:[]},t,{setIndex:an.length}),i=new on(e,n);return an.push(i),i}}();
2
    'use strict';
3
4
    let timerDebounce = undefined;
5
    function debounce(duration, callback) {
6
      clearTimeout(timerDebounce);
7
      timerDebounce = setTimeout(function () {
8
        callback();
9
      }, duration);
10
      return timerDebounce;
11
    }
12
    function transitionAsPromise(triggeringFunc, el) {
13
      return new Promise(resolve => {
14
        const handleTransitionEnd = () => {
15
          el.removeEventListener('transitionend', handleTransitionEnd);
16
          resolve();
17
        };
18
19
        el.addEventListener('transitionend', handleTransitionEnd);
20
        const classesBefore = el.getAttribute('class');
21
        const stylesBefore = el.getAttribute('style');
22
        triggeringFunc();
23
24
        if (classesBefore === el.getAttribute('class') && stylesBefore === el.getAttribute('style')) {
25
          handleTransitionEnd();
26
        }
27
28
        if (parseFloat(getComputedStyle(el)['transitionDuration']) === 0) {
29
          handleTransitionEnd();
30
        }
31
      });
32
    }
33
    function loadImage({
34
      src,
35
      srcset,
36
      sizes
37
    }) {
38
      const image = new Image();
39
      image.src = src;
40
41
      if (srcset) {
42
        image.srcset = srcset;
43
      }
44
45
      if (sizes) {
46
        image.sizes = sizes;
47
      }
48
49
      if ('decode' in image) {
50
        return new Promise((resolve, reject) => {
51
          image.decode().then(() => {
52
            resolve(image);
53
          }).catch(() => {
54
            reject(image);
55
          });
56
        });
57
      } else {
58
        return new Promise((resolve, reject) => {
59
          image.onload = resolve(image);
60
          image.onerror = reject(image);
61
        });
62
      }
63
    }
64
    function fit(options) {
65
      let height;
66
      let width;
67
      const {
68
        imgHeight,
69
        imgWidth,
70
        containerHeight,
71
        containerWidth,
72
        canvasWidth,
73
        canvasHeight,
74
        imageSize
75
      } = options;
76
      const canvasRatio = canvasHeight / canvasWidth;
77
      const containerRatio = containerHeight / containerWidth;
78
      const imgRatio = imgHeight / imgWidth;
79
80
      if (imageSize == 'cover') {
81
        if (imgRatio < containerRatio) {
82
          height = containerHeight;
83
          width = height / imgRatio;
84
        } else {
85
          width = containerWidth;
86
          height = width * imgRatio;
87
        }
88
      } else if (imageSize == 'native') {
89
        height = imgHeight;
90
        width = imgWidth;
91
      } else {
92
        if (imgRatio > canvasRatio) {
93
          height = canvasHeight;
94
          width = height / imgRatio;
95
        } else {
96
          width = canvasWidth;
97
          height = width * imgRatio;
98
        }
99
100
        if (imageSize === 'scale-down' && (width >= imgWidth || height >= imgHeight)) {
101
          width = imgWidth;
102
          height = imgHeight;
103
        }
104
      }
105
106
      return {
107
        height: height,
108
        width: width
109
      };
110
    }
111
    function openFullScreen(wrapper) {
112
      if (wrapper.requestFullscreen) {
113
        return wrapper.requestFullscreen();
114
      } else if (wrapper.webkitRequestFullscreen) {
115
        return wrapper.webkitRequestFullscreen();
116
      } else if (wrapper.msRequestFullscreen) {
117
        return wrapper.msRequestFullscreen();
118
      } else {
119
        return Promise.reject();
120
      }
121
    }
122
    function exitFullScreen() {
123
      if (document.exitFullscreen) {
124
        return document.exitFullscreen();
125
      } else if (document.webkitExitFullscreen) {
126
        return document.webkitExitFullscreen();
127
      } else if (document.msExitFullscreen) {
128
        return document.msExitFullscreen();
129
      } else {
130
        return Promise.reject();
131
      }
132
    }
133
134
    const defaults = {
135
      container: document.body,
136
      // window or element
137
      className: undefined,
138
      imageSize: 'scale-down',
139
      // 'scale-down', 'contain', 'cover' or 'native'
140
      fullScreen: false,
141
      loop: false,
142
      linkImages: true,
143
      setIndex: 0,
144
      firstImageIndex: 0,
145
      lastImageIndex: false,
146
      currentImageIndex: undefined,
147
      allowZoom: true,
148
      closeOnBackgroundClick: true,
149
      setTitle: function () {
150
        return '';
151
      },
152
      description: function () {
153
        return this.images[this.settings.currentImageIndex].title;
154
      },
155
      pagination: function () {
156
        const last = this.settings.lastImageIndex + 1;
157
        const position = this.settings.currentImageIndex + 1;
158
        return position + '/' + last;
159
      },
160
161
      afterInitialize() {},
162
163
      afterMarkup() {},
164
165
      afterImageLoad() {},
166
167
      afterClose() {},
168
169
      zoomedPaddingX: function (canvasWidth, imgWidth) {
170
        return 0;
171
      },
172
      zoomedPaddingY: function (canvasHeight, imgHeight) {
173
        return 0;
174
      }
175
    };
176
    class Chocolat {
177
      constructor(elements, settings) {
178
        this.settings = settings;
179
        this.elems = {};
180
        this.images = [];
181
        this.events = [];
182
        this.state = {
183
          fullScreenOpen: false,
184
          initialZoomState: null,
185
          initialized: false,
186
          timer: false,
187
          visible: false
188
        };
189
        this._cssClasses = ['chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', 'chocolat-zoomed', 'chocolat-zooming-in', 'chocolat-zooming-out'];
190
191
        if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) {
192
          elements.forEach((el, i) => {
193
            this.images.push({
194
              title: el.getAttribute('title'),
195
              src: el.getAttribute('href'),
196
              srcset: el.getAttribute('data-srcset'),
197
              sizes: el.getAttribute('data-sizes')
198
            });
199
            this.off(el, 'click.chocolat');
200
            this.on(el, 'click.chocolat', e => {
201
              this.init(i);
202
              e.preventDefault();
203
            });
204
          });
205
        } else {
206
          this.images = elements;
207
        }
208
209
        if (this.settings.container instanceof Element || this.settings.container instanceof HTMLElement) {
210
          this.elems.container = this.settings.container;
211
        } else {
212
          this.elems.container = document.body;
213
        }
214
215
        this.api = {
216
          open: i => {
217
            i = parseInt(i) || 0;
218
            return this.init(i);
219
          },
220
          close: () => {
221
            return this.close();
222
          },
223
          next: () => {
224
            return this.change(1);
225
          },
226
          prev: () => {
227
            return this.change(-1);
228
          },
229
          goto: i => {
230
            return this.open(i);
231
          },
232
          current: () => {
233
            return this.settings.currentImageIndex;
234
          },
235
          position: () => {
236
            return this.position(this.elems.img);
237
          },
238
          destroy: () => {
239
            return this.destroy();
240
          },
241
          set: (property, value) => {
242
            this.settings[property] = value;
243
            return value;
244
          },
245
          get: property => {
246
            return this.settings[property];
247
          },
248
          getElem: name => {
249
            return this.elems[name];
250
          }
251
        };
252
      }
253
254
      init(i) {
255
        if (!this.state.initialized) {
256
          this.markup();
257
          this.attachListeners();
258
          this.settings.lastImageIndex = this.images.length - 1;
259
          this.state.initialized = true;
260
        }
261
262
        this.settings.afterInitialize.call(this);
263
        return this.load(i);
264
      }
265
266
      load(index) {
267
        if (!this.state.visible) {
268
          this.state.visible = true;
269
          setTimeout(() => {
270
            this.elems.overlay.classList.add('chocolat-visible');
271
            this.elems.wrapper.classList.add('chocolat-visible');
272
          }, 0);
273
          this.elems.container.classList.add('chocolat-open');
274
        }
275
276
        if (this.settings.fullScreen) {
277
          openFullScreen(this.elems.wrapper);
278
        }
279
280
        if (this.settings.currentImageIndex === index) {
281
          return Promise.resolve();
282
        }
283
284
        let loaderTimer = setTimeout(() => {
285
          this.elems.loader.classList.add('chocolat-visible');
286
        }, 1000);
287
        let fadeOutPromise;
288
        let image;
289
        let fadeOutTimer = setTimeout(() => {
290
          fadeOutTimer = undefined;
291
          fadeOutPromise = transitionAsPromise(() => {
292
            this.elems.imageCanvas.classList.remove('chocolat-visible');
293
          }, this.elems.imageCanvas);
294
        }, 80);
295
        return loadImage(this.images[index]).then(loadedImage => {
296
          image = loadedImage;
297
298
          if (fadeOutTimer) {
299
            clearTimeout(fadeOutTimer);
300
            return Promise.resolve();
301
          } else {
302
            return fadeOutPromise;
303
          }
304
        }).then(() => {
305
          const nextIndex = index + 1;
306
307
          if (this.images[nextIndex] != undefined) {
308
            loadImage(this.images[nextIndex]);
309
          }
310
311
          this.settings.currentImageIndex = index;
312
          this.elems.description.innerHTML = this.settings.description.call(this);
313
          this.elems.pagination.textContent = this.settings.pagination.call(this);
314
          this.arrows();
315
          return this.position(image).then(() => {
316
            this.elems.loader.classList.remove('chocolat-visible');
317
            clearTimeout(loaderTimer);
318
            return this.appear(image);
319
          });
320
        }).then(() => {
321
          this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(image, this.elems.wrapper));
322
          this.settings.afterImageLoad.call(this);
323
        });
324
      }
325
326
      position({
327
        naturalHeight,
328
        naturalWidth
329
      }) {
330
        const fitOptions = {
331
          imgHeight: naturalHeight,
332
          imgWidth: naturalWidth,
333
          containerHeight: this.elems.container.clientHeight,
334
          containerWidth: this.elems.container.clientWidth,
335
          canvasWidth: this.elems.imageCanvas.clientWidth,
336
          canvasHeight: this.elems.imageCanvas.clientHeight,
337
          imageSize: this.settings.imageSize
338
        };
339
        const {
340
          width,
341
          height
342
        } = fit(fitOptions);
343
        return transitionAsPromise(() => {
344
          Object.assign(this.elems.imageWrapper.style, {
345
            width: width + 'px',
346
            height: height + 'px'
347
          });
348
        }, this.elems.imageWrapper);
349
      }
350
351
      appear(image) {
352
        this.elems.imageWrapper.removeChild(this.elems.img);
353
        this.elems.img = image;
354
        this.elems.img.setAttribute('class', 'chocolat-img');
355
        this.elems.imageWrapper.appendChild(this.elems.img);
356
        const fadeInPromise = transitionAsPromise(() => {
357
          this.elems.imageCanvas.classList.add('chocolat-visible');
358
        }, this.elems.imageCanvas);
359
        return fadeInPromise;
360
      }
361
362
      change(step) {
363
        if (!this.state.visible) {
364
          return;
365
        }
366
367
        if (!this.settings.linkImages) {
368
          return;
369
        }
370
371
        this.zoomOut();
372
        const requestedImage = this.settings.currentImageIndex + parseInt(step);
373
374
        if (requestedImage > this.settings.lastImageIndex) {
375
          if (this.settings.loop) {
376
            return this.load(this.settings.firstImageIndex);
377
          }
378
        } else if (requestedImage < this.settings.firstImageIndex) {
379
          if (this.settings.loop) {
380
            return this.load(this.settings.lastImageIndex);
381
          }
382
        } else {
383
          return this.load(requestedImage);
384
        }
385
      }
386
387
      arrows() {
388
        if (this.settings.loop) {
389
          this.elems.left.classList.add('active');
390
          this.elems.right.classList.add('active');
391
        } else if (this.settings.linkImages) {
392
          this.elems.right.classList.toggle('active', this.settings.currentImageIndex !== this.settings.lastImageIndex);
393
          this.elems.left.classList.toggle('active', this.settings.currentImageIndex !== this.settings.firstImageIndex);
394
        } else {
395
          this.elems.left.classList.remove('active');
396
          this.elems.right.classList.remove('active');
397
        }
398
      }
399
400
      close() {
401
        if (this.state.fullScreenOpen) {
402
          exitFullScreen();
403
          return;
404
        }
405
406
        this.state.visible = false;
407
        const promiseOverlay = transitionAsPromise(() => {
408
          this.elems.overlay.classList.remove('chocolat-visible');
409
        }, this.elems.overlay);
410
        const promiseWrapper = transitionAsPromise(() => {
411
          this.elems.wrapper.classList.remove('chocolat-visible');
412
        }, this.elems.wrapper);
413
        return Promise.all([promiseOverlay, promiseWrapper]).then(() => {
414
          this.elems.container.classList.remove('chocolat-open');
415
          this.settings.afterClose.call(this);
416
        });
417
      }
418
419
      destroy() {
420
        for (let i = this.events.length - 1; i >= 0; i--) {
421
          const {
422
            element,
423
            eventName
424
          } = this.events[i];
425
          this.off(element, eventName);
426
        }
427
428
        if (!this.state.initialized) {
429
          return;
430
        }
431
432
        if (this.state.fullScreenOpen) {
433
          exitFullScreen();
434
        }
435
436
        this.settings.currentImageIndex = undefined;
437
        this.state.visible = false;
438
        this.state.initialized = false;
439
        this.elems.container.classList.remove(...this._cssClasses);
440
        this.elems.wrapper.parentNode.removeChild(this.elems.wrapper);
441
      }
442
443
      markup() {
444
        this.elems.container.classList.add('chocolat-open', this.settings.className);
445
446
        if (this.settings.imageSize == 'cover') {
447
          this.elems.container.classList.add('chocolat-cover');
448
        }
449
450
        if (this.elems.container !== document.body) {
451
          this.elems.container.classList.add('chocolat-in-container');
452
        }
453
454
        this.elems.wrapper = document.createElement('div');
455
        this.elems.wrapper.setAttribute('id', 'chocolat-content-' + this.settings.setIndex);
456
        this.elems.wrapper.setAttribute('class', 'chocolat-wrapper');
457
        this.elems.container.appendChild(this.elems.wrapper);
458
        this.elems.overlay = document.createElement('div');
459
        this.elems.overlay.setAttribute('class', 'chocolat-overlay');
460
        this.elems.wrapper.appendChild(this.elems.overlay);
461
        this.elems.loader = document.createElement('div');
462
        this.elems.loader.setAttribute('class', 'chocolat-loader');
463
        this.elems.wrapper.appendChild(this.elems.loader);
464
        this.elems.layout = document.createElement('div');
465
        this.elems.layout.setAttribute('class', 'chocolat-layout');
466
        this.elems.wrapper.appendChild(this.elems.layout);
467
        this.elems.top = document.createElement('div');
468
        this.elems.top.setAttribute('class', 'chocolat-top');
469
        this.elems.layout.appendChild(this.elems.top);
470
        this.elems.center = document.createElement('div');
471
        this.elems.center.setAttribute('class', 'chocolat-center');
472
        this.elems.layout.appendChild(this.elems.center);
473
        this.elems.left = document.createElement('div');
474
        this.elems.left.setAttribute('class', 'chocolat-left');
475
        this.elems.center.appendChild(this.elems.left);
476
        this.elems.imageCanvas = document.createElement('div');
477
        this.elems.imageCanvas.setAttribute('class', 'chocolat-image-canvas');
478
        this.elems.center.appendChild(this.elems.imageCanvas);
479
        this.elems.imageWrapper = document.createElement('div');
480
        this.elems.imageWrapper.setAttribute('class', 'chocolat-image-wrapper');
481
        this.elems.imageCanvas.appendChild(this.elems.imageWrapper);
482
        this.elems.img = document.createElement('img');
483
        this.elems.img.setAttribute('class', 'chocolat-img');
484
        this.elems.imageWrapper.appendChild(this.elems.img);
485
        this.elems.right = document.createElement('div');
486
        this.elems.right.setAttribute('class', 'chocolat-right');
487
        this.elems.center.appendChild(this.elems.right);
488
        this.elems.bottom = document.createElement('div');
489
        this.elems.bottom.setAttribute('class', 'chocolat-bottom');
490
        this.elems.layout.appendChild(this.elems.bottom);
491
        this.elems.close = document.createElement('span');
492
        this.elems.close.setAttribute('class', 'chocolat-close');
493
        this.elems.top.appendChild(this.elems.close);
494
        this.elems.description = document.createElement('span');
495
        this.elems.description.setAttribute('class', 'chocolat-description');
496
        this.elems.bottom.appendChild(this.elems.description);
497
        this.elems.pagination = document.createElement('span');
498
        this.elems.pagination.setAttribute('class', 'chocolat-pagination');
499
        this.elems.bottom.appendChild(this.elems.pagination);
500
        this.elems.setTitle = document.createElement('span');
501
        this.elems.setTitle.setAttribute('class', 'chocolat-set-title');
502
        this.elems.setTitle.textContent = this.settings.setTitle();
503
        this.elems.bottom.appendChild(this.elems.setTitle);
504
        this.elems.fullscreen = document.createElement('span');
505
        this.elems.fullscreen.setAttribute('class', 'chocolat-fullscreen');
506
        this.elems.bottom.appendChild(this.elems.fullscreen);
507
        this.settings.afterMarkup.call(this);
508
      }
509
510
      attachListeners() {
511
        this.off(document, 'keydown.chocolat');
512
        this.on(document, 'keydown.chocolat', e => {
513
          if (this.state.initialized) {
514
            if (e.keyCode == 37) {
515
              this.change(-1);
516
            } else if (e.keyCode == 39) {
517
              this.change(1);
518
            } else if (e.keyCode == 27) {
519
              this.close();
520
            }
521
          }
522
        });
523
        const right = this.elems.wrapper.querySelector('.chocolat-right');
524
        this.off(right, 'click.chocolat');
525
        this.on(right, 'click.chocolat', () => {
526
          this.change(+1);
527
        });
528
        const left = this.elems.wrapper.querySelector('.chocolat-left');
529
        this.off(left, 'click.chocolat');
530
        this.on(left, 'click.chocolat', () => {
531
          this.change(-1);
532
        });
533
        this.off(this.elems.close, 'click.chocolat');
534
        this.on(this.elems.close, 'click.chocolat', this.close.bind(this));
535
        this.off(this.elems.fullscreen, 'click.chocolat');
536
        this.on(this.elems.fullscreen, 'click.chocolat', () => {
537
          if (this.state.fullScreenOpen) {
538
            exitFullScreen();
539
            return;
540
          }
541
542
          openFullScreen(this.elems.wrapper);
543
        });
544
        this.off(document, 'fullscreenchange.chocolat');
545
        this.on(document, 'fullscreenchange.chocolat', () => {
546
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
547
            this.state.fullScreenOpen = true;
548
          } else {
549
            this.state.fullScreenOpen = false;
550
          }
551
        });
552
        this.off(document, 'webkitfullscreenchange.chocolat');
553
        this.on(document, 'webkitfullscreenchange.chocolat', () => {
554
          if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) {
555
            this.state.fullScreenOpen = true;
556
          } else {
557
            this.state.fullScreenOpen = false;
558
          }
559
        });
560
561
        if (this.settings.closeOnBackgroundClick) {
562
          this.off(this.elems.overlay, 'click.chocolat');
563
          this.on(this.elems.overlay, 'click.chocolat', this.close.bind(this));
564
        }
565
566
        this.off(this.elems.wrapper, 'click.chocolat');
567
        this.on(this.elems.wrapper, 'click.chocolat', () => {
568
          if (this.state.initialZoomState === null || !this.state.visible) {
569
            return;
570
          }
571
572
          this.elems.container.classList.add('chocolat-zooming-out');
573
          this.zoomOut().then(() => {
574
            this.elems.container.classList.remove('chocolat-zoomed');
575
            this.elems.container.classList.remove('chocolat-zooming-out');
576
          });
577
        });
578
        this.off(this.elems.imageWrapper, 'click.chocolat');
579
        this.on(this.elems.imageWrapper, 'click.chocolat', e => {
580
          if (this.state.initialZoomState === null && this.elems.container.classList.contains('chocolat-zoomable')) {
581
            e.stopPropagation();
582
            this.elems.container.classList.add('chocolat-zooming-in');
583
            this.zoomIn(e).then(() => {
584
              this.elems.container.classList.add('chocolat-zoomed');
585
              this.elems.container.classList.remove('chocolat-zooming-in');
586
            });
587
          }
588
        });
589
        this.on(this.elems.wrapper, 'mousemove.chocolat', e => {
590
          if (this.state.initialZoomState === null || !this.state.visible) {
591
            return;
592
          }
593
594
          const rect = this.elems.wrapper.getBoundingClientRect();
595
          const pos = {
596
            top: rect.top + window.scrollY,
597
            left: rect.left + window.scrollX
598
          };
599
          const height = this.elems.wrapper.clientHeight;
600
          const width = this.elems.wrapper.clientWidth;
601
          const imgWidth = this.elems.img.width;
602
          const imgHeight = this.elems.img.height;
603
          const coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top];
604
          let mvtX = 0;
605
606
          if (imgWidth > width) {
607
            const paddingX = this.settings.zoomedPaddingX(imgWidth, width);
608
            mvtX = coord[0] / (width / 2);
609
            mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX;
610
          }
611
612
          let mvtY = 0;
613
614
          if (imgHeight > height) {
615
            const paddingY = this.settings.zoomedPaddingY(imgHeight, height);
616
            mvtY = coord[1] / (height / 2);
617
            mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY;
618
          }
619
620
          this.elems.img.style.marginLeft = -mvtX + 'px';
621
          this.elems.img.style.marginTop = -mvtY + 'px';
622
        });
623
        this.on(window, 'resize.chocolat', e => {
624
          if (!this.state.initialized || !this.state.visible) {
625
            return;
626
          }
627
628
          debounce(50, () => {
629
            const fitOptions = {
630
              imgHeight: this.elems.img.naturalHeight,
631
              imgWidth: this.elems.img.naturalWidth,
632
              containerHeight: this.elems.wrapper.clientHeight,
633
              containerWidth: this.elems.wrapper.clientWidth,
634
              canvasWidth: this.elems.imageCanvas.clientWidth,
635
              canvasHeight: this.elems.imageCanvas.clientHeight,
636
              imageSize: this.settings.imageSize
637
            };
638
            const {
639
              width,
640
              height
641
            } = fit(fitOptions);
642
            this.position(this.elems.img).then(() => {
643
              this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(this.elems.img, this.elems.wrapper));
644
            });
645
          });
646
        });
647
      }
648
649
      zoomable(image, wrapper) {
650
        const wrapperWidth = wrapper.clientWidth;
651
        const wrapperHeight = wrapper.clientHeight;
652
        const isImageZoomable = this.settings.allowZoom && (image.naturalWidth > wrapperWidth || image.naturalHeight > wrapperHeight) ? true : false;
653
        const isImageStretched = image.clientWidth > image.naturalWidth || image.clientHeight > image.naturalHeight;
654
        return isImageZoomable && !isImageStretched;
655
      }
656
657
      zoomIn(e) {
658
        this.state.initialZoomState = this.settings.imageSize;
659
        this.settings.imageSize = 'native';
660
        return this.position(this.elems.img);
661
      }
662
663
      zoomOut(e) {
664
        this.settings.imageSize = this.state.initialZoomState || this.settings.imageSize;
665
        this.state.initialZoomState = null;
666
        this.elems.img.style.margin = 0;
667
        return this.position(this.elems.img);
668
      }
669
670
      on(element, eventName, cb) {
671
        // const eventName = this.settings.setIndex + '-' + eventName
672
        const length = this.events.push({
673
          element,
674
          eventName,
675
          cb
676
        });
677
        element.addEventListener(eventName.split('.')[0], this.events[length - 1].cb);
678
      }
679
680
      off(element, eventName) {
681
        // const eventName = this.settings.setIndex + '-' + eventName
682
        const index = this.events.findIndex(event => {
683
          return event.element === element && event.eventName === eventName;
684
        });
685
686
        if (this.events[index]) {
687
          element.removeEventListener(eventName.split('.')[0], this.events[index].cb);
688
          this.events.splice(index, 1);
689
        }
690
      }
691
692
    }
693
694
    const instances = [];
695
696
    window.Chocolat = function (elements, options) {
697
      const settings = Object.assign({}, defaults, {
698
        images: []
699
      }, options, {
700
        setIndex: instances.length
701
      });
702
      const instance = new Chocolat(elements, settings);
703
      instances.push(instance);
704
      return instance;
705
    };
706
707
}());
708
- 

Return to bug 35633