From 533e26e0d3495c17c2d2a85c0942460b3ca097b6 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 21 Dec 2023 19:04:47 +0000 Subject: [PATCH] Bug 35633: Upgrade Chocolat JS library from v1.1.0 to v1.1.2 This patch updates Chocolat JS library assets from v1.1.0 to v1.1.2 in both the OPAC and staff interface. The new version uses SVG images encoded as data-uris in CSS, so default images can now be overridden in our CSS. For that reason the Chocolat-related images files are removed by this patch. --- .../lib/Chocolat/css/chocolat.css | 268 +------ .../lib/Chocolat/images/close.png | Bin 1119 -> 0 bytes .../lib/Chocolat/images/fullscreen-black.png | Bin 658 -> 0 bytes .../lib/Chocolat/images/fullscreen.png | Bin 663 -> 0 bytes .../lib/Chocolat/images/left.png | Bin 1237 -> 0 bytes .../lib/Chocolat/images/loader.gif | Bin 3208 -> 0 bytes .../lib/Chocolat/images/right.png | Bin 1224 -> 0 bytes .../intranet-tmpl/lib/Chocolat/js/chocolat.js | 708 +----------------- .../opac-tmpl/lib/Chocolat/css/chocolat.css | 270 +------ .../opac-tmpl/lib/Chocolat/images/close.png | Bin 1119 -> 0 bytes .../lib/Chocolat/images/fullscreen-black.png | Bin 658 -> 0 bytes .../lib/Chocolat/images/fullscreen.png | Bin 663 -> 0 bytes .../opac-tmpl/lib/Chocolat/images/left.png | Bin 1237 -> 0 bytes .../opac-tmpl/lib/Chocolat/images/loader.gif | Bin 3208 -> 0 bytes .../opac-tmpl/lib/Chocolat/images/right.png | Bin 1224 -> 0 bytes .../opac-tmpl/lib/Chocolat/js/chocolat.js | 708 +----------------- 16 files changed, 4 insertions(+), 1950 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen-black.png delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/loader.gif delete mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/right.png delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/close.png delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/fullscreen-black.png delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/fullscreen.png delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/left.png delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/loader.gif delete mode 100644 koha-tmpl/opac-tmpl/lib/Chocolat/images/right.png diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css b/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css index 04d7da173a..f10c48fd23 100644 --- a/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css +++ b/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css @@ -1,267 +1 @@ -.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: 32px; - width: 32px; - position: absolute; - left: 50%; - top: 50%; - margin-left: -16px; - margin-top: -16px; - z-index: 11; - background: url(../images/loader.gif); - opacity: 0; -} -.chocolat-loader.chocolat-visible { - opacity: 1; -} - -.chocolat-image-wrapper { - position: fixed; - width: 0px; - height: 0px; - 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: url(../images/left.png) 50% 50% 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 .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: url(../images/right.png) 50% 50% 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: url(../images/close.png) 50% 50% 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; - /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/ -} -.chocolat-wrapper .chocolat-fullscreen { - width: 16px; - height: 40px; - background: url(../images/fullscreen.png) 50% 50% no-repeat; - display: block; - cursor: pointer; - float: right; -} -.chocolat-wrapper .chocolat-description { - display: inline-block; - flex-grow: 1; - text-align: left; -} - -/* no container mode*/ -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; -} - -/* container mode*/ -.chocolat-in-container .chocolat-wrapper, -.chocolat-in-container .chocolat-image-wrapper, -.chocolat-in-container .chocolat-overlay { - 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 .2s ease, height .2s ease; -} -.chocolat-zoomable.chocolat-zooming-in .chocolat-img, -.chocolat-zoomable.chocolat-zooming-out .chocolat-img { - transition: margin .2s ease; -} - -/* uncomment to hide controls when zoomed-in*/ -/* -.chocolat-zoomable .chocolat-top, -.chocolat-zoomable .chocolat-bottom, -.chocolat-zoomable .chocolat-right, -.chocolat-zoomable .chocolat-left { - transition: opacity .3s ease, visibility 0s .3s; - opacity: 1; -} - -.chocolat-zoomable.chocolat-zoomed .chocolat-top, -.chocolat-zoomable.chocolat-zoomed .chocolat-bottom, -.chocolat-zoomable.chocolat-zoomed .chocolat-right, -.chocolat-zoomable.chocolat-zoomed .chocolat-left { - visibility: hidden; - opacity: 0; -} -*/ - -/* Local chnages for Koha */ -.chocolat-wrapper { - z-index: 1035; -} - -.chocolat-wrapper .chocolat-left { - 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; - background-size: 35px; -} -.chocolat-wrapper .chocolat-right { - 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; - background-size: 35px; -} - -.chocolat-wrapper .chocolat-close { - 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; - background-size: 35px; -} - -.chocolat-wrapper .chocolat-bottom { - background: rgba(0, 0, 0, 0.8); -} - -.chocolat-wrapper .chocolat-bottom a { - color: #FFF; - text-decoration: underline; -} - -.chocolat-wrapper .chocolat-fullscreen { - width: 40px; - 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"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 25px; -} -/* End local changes for Koha */ +: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} diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png deleted file mode 100644 index 87631d1e68275986eff00bc4193f18ed81444a9b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1119 zcmV-l1fctgP)KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O230GU?V`^?9Mg`TI*47*Ot|)F34wi|x6(8{ z6_MexaS<7&X?p50<-XgA%Cgo@;y4}^fr!X3j^mNFcH&bML#>9Dl_bfDF=m_xaRA1c zagrn_9#ifFz?&uMyHwdl0crvO%md(U-CLy~V*q2!s0P4YlA6=5=8-z0RgPoijzdJK zu^VZm`MX>9KDb3iq%O!T^znjaQLrp(D(EWEJn_mWSy^i*%f41bhJ(T2eH2CSDo**) z*}K;*rS5CsgDYU)TZ)YHY!&^XuDD6vsQJBvxK&%;q|RJFlFbh@H5$DJ0H)b1kWW&- z)M;KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O23rd6951J diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png deleted file mode 100644 index 7be7be9be8ac4f4c30acb77f654057ead2deffad..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 663 zcmV;I0%-k-P)KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O23(&4O002ovPDHLkV1jM|ACCY4 diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png deleted file mode 100644 index 185f77bd1c596a0c88dbfa1f7af82b7a077fdf9c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1237 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 { - const handleTransitionEnd = () => { - el.removeEventListener('transitionend', handleTransitionEnd); - resolve(); - }; - - el.addEventListener('transitionend', handleTransitionEnd); - const classesBefore = el.getAttribute('class'); - const stylesBefore = el.getAttribute('style'); - triggeringFunc(); - - if (classesBefore === el.getAttribute('class') && stylesBefore === el.getAttribute('style')) { - handleTransitionEnd(); - } - - if (parseFloat(getComputedStyle(el)['transitionDuration']) === 0) { - handleTransitionEnd(); - } - }); - } - function loadImage({ - src, - srcset, - sizes - }) { - const image = new Image(); - image.src = src; - - if (srcset) { - image.srcset = srcset; - } - - if (sizes) { - image.sizes = sizes; - } - - if ('decode' in image) { - return new Promise((resolve, reject) => { - image.decode().then(() => { - resolve(image); - }).catch(() => { - reject(image); - }); - }); - } else { - return new Promise((resolve, reject) => { - image.onload = resolve(image); - image.onerror = reject(image); - }); - } - } - function fit(options) { - let height; - let width; - const { - imgHeight, - imgWidth, - containerHeight, - containerWidth, - canvasWidth, - canvasHeight, - imageSize - } = options; - const canvasRatio = canvasHeight / canvasWidth; - const containerRatio = containerHeight / containerWidth; - const imgRatio = imgHeight / imgWidth; - - if (imageSize == 'cover') { - if (imgRatio < containerRatio) { - height = containerHeight; - width = height / imgRatio; - } else { - width = containerWidth; - height = width * imgRatio; - } - } else if (imageSize == 'native') { - height = imgHeight; - width = imgWidth; - } else { - if (imgRatio > canvasRatio) { - height = canvasHeight; - width = height / imgRatio; - } else { - width = canvasWidth; - height = width * imgRatio; - } - - if (imageSize === 'scale-down' && (width >= imgWidth || height >= imgHeight)) { - width = imgWidth; - height = imgHeight; - } - } - - return { - height: height, - width: width - }; - } - function openFullScreen(wrapper) { - if (wrapper.requestFullscreen) { - return wrapper.requestFullscreen(); - } else if (wrapper.webkitRequestFullscreen) { - return wrapper.webkitRequestFullscreen(); - } else if (wrapper.msRequestFullscreen) { - return wrapper.msRequestFullscreen(); - } else { - return Promise.reject(); - } - } - function exitFullScreen() { - if (document.exitFullscreen) { - return document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - return document.webkitExitFullscreen(); - } else if (document.msExitFullscreen) { - return document.msExitFullscreen(); - } else { - return Promise.reject(); - } - } - - const defaults = { - container: document.body, - // window or element - className: undefined, - imageSize: 'scale-down', - // 'scale-down', 'contain', 'cover' or 'native' - fullScreen: false, - loop: false, - linkImages: true, - setIndex: 0, - firstImageIndex: 0, - lastImageIndex: false, - currentImageIndex: undefined, - allowZoom: true, - closeOnBackgroundClick: true, - setTitle: function () { - return ''; - }, - description: function () { - return this.images[this.settings.currentImageIndex].title; - }, - pagination: function () { - const last = this.settings.lastImageIndex + 1; - const position = this.settings.currentImageIndex + 1; - return position + '/' + last; - }, - - afterInitialize() {}, - - afterMarkup() {}, - - afterImageLoad() {}, - - afterClose() {}, - - zoomedPaddingX: function (canvasWidth, imgWidth) { - return 0; - }, - zoomedPaddingY: function (canvasHeight, imgHeight) { - return 0; - } - }; - class Chocolat { - constructor(elements, settings) { - this.settings = settings; - this.elems = {}; - this.images = []; - this.events = []; - this.state = { - fullScreenOpen: false, - initialZoomState: null, - initialized: false, - timer: false, - visible: false - }; - this._cssClasses = ['chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', 'chocolat-zoomed', 'chocolat-zooming-in', 'chocolat-zooming-out']; - - if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) { - elements.forEach((el, i) => { - this.images.push({ - title: el.getAttribute('title'), - src: el.getAttribute('href'), - srcset: el.getAttribute('data-srcset'), - sizes: el.getAttribute('data-sizes') - }); - this.off(el, 'click.chocolat'); - this.on(el, 'click.chocolat', e => { - this.init(i); - e.preventDefault(); - }); - }); - } else { - this.images = elements; - } - - if (this.settings.container instanceof Element || this.settings.container instanceof HTMLElement) { - this.elems.container = this.settings.container; - } else { - this.elems.container = document.body; - } - - this.api = { - open: i => { - i = parseInt(i) || 0; - return this.init(i); - }, - close: () => { - return this.close(); - }, - next: () => { - return this.change(1); - }, - prev: () => { - return this.change(-1); - }, - goto: i => { - return this.open(i); - }, - current: () => { - return this.settings.currentImageIndex; - }, - position: () => { - return this.position(this.elems.img); - }, - destroy: () => { - return this.destroy(); - }, - set: (property, value) => { - this.settings[property] = value; - return value; - }, - get: property => { - return this.settings[property]; - }, - getElem: name => { - return this.elems[name]; - } - }; - } - - init(i) { - if (!this.state.initialized) { - this.markup(); - this.attachListeners(); - this.settings.lastImageIndex = this.images.length - 1; - this.state.initialized = true; - } - - this.settings.afterInitialize.call(this); - return this.load(i); - } - - load(index) { - if (!this.state.visible) { - this.state.visible = true; - setTimeout(() => { - this.elems.overlay.classList.add('chocolat-visible'); - this.elems.wrapper.classList.add('chocolat-visible'); - }, 0); - this.elems.container.classList.add('chocolat-open'); - } - - if (this.settings.fullScreen) { - openFullScreen(this.elems.wrapper); - } - - if (this.settings.currentImageIndex === index) { - return Promise.resolve(); - } - - let loaderTimer = setTimeout(() => { - this.elems.loader.classList.add('chocolat-visible'); - }, 1000); - let fadeOutPromise; - let image; - let fadeOutTimer = setTimeout(() => { - fadeOutTimer = undefined; - fadeOutPromise = transitionAsPromise(() => { - this.elems.imageCanvas.classList.remove('chocolat-visible'); - }, this.elems.imageCanvas); - }, 80); - return loadImage(this.images[index]).then(loadedImage => { - image = loadedImage; - - if (fadeOutTimer) { - clearTimeout(fadeOutTimer); - return Promise.resolve(); - } else { - return fadeOutPromise; - } - }).then(() => { - const nextIndex = index + 1; - - if (this.images[nextIndex] != undefined) { - loadImage(this.images[nextIndex]); - } - - this.settings.currentImageIndex = index; - this.elems.description.innerHTML = this.settings.description.call(this); - this.elems.pagination.textContent = this.settings.pagination.call(this); - this.arrows(); - return this.position(image).then(() => { - this.elems.loader.classList.remove('chocolat-visible'); - clearTimeout(loaderTimer); - return this.appear(image); - }); - }).then(() => { - this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(image, this.elems.wrapper)); - this.settings.afterImageLoad.call(this); - }); - } - - position({ - naturalHeight, - naturalWidth - }) { - const fitOptions = { - imgHeight: naturalHeight, - imgWidth: 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 - }; - const { - width, - height - } = fit(fitOptions); - return transitionAsPromise(() => { - Object.assign(this.elems.imageWrapper.style, { - width: width + 'px', - height: height + 'px' - }); - }, this.elems.imageWrapper); - } - - appear(image) { - this.elems.imageWrapper.removeChild(this.elems.img); - this.elems.img = image; - this.elems.img.setAttribute('class', 'chocolat-img'); - this.elems.imageWrapper.appendChild(this.elems.img); - const fadeInPromise = transitionAsPromise(() => { - this.elems.imageCanvas.classList.add('chocolat-visible'); - }, this.elems.imageCanvas); - return fadeInPromise; - } - - change(step) { - if (!this.state.visible) { - return; - } - - if (!this.settings.linkImages) { - return; - } - - this.zoomOut(); - const requestedImage = this.settings.currentImageIndex + parseInt(step); - - if (requestedImage > this.settings.lastImageIndex) { - if (this.settings.loop) { - return this.load(this.settings.firstImageIndex); - } - } else if (requestedImage < this.settings.firstImageIndex) { - if (this.settings.loop) { - return this.load(this.settings.lastImageIndex); - } - } else { - return this.load(requestedImage); - } - } - - arrows() { - if (this.settings.loop) { - this.elems.left.classList.add('active'); - this.elems.right.classList.add('active'); - } else if (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); - } else { - this.elems.left.classList.remove('active'); - this.elems.right.classList.remove('active'); - } - } - - close() { - if (this.state.fullScreenOpen) { - exitFullScreen(); - return; - } - - this.state.visible = false; - const promiseOverlay = transitionAsPromise(() => { - this.elems.overlay.classList.remove('chocolat-visible'); - }, this.elems.overlay); - const promiseWrapper = transitionAsPromise(() => { - this.elems.wrapper.classList.remove('chocolat-visible'); - }, this.elems.wrapper); - return Promise.all([promiseOverlay, promiseWrapper]).then(() => { - this.elems.container.classList.remove('chocolat-open'); - this.settings.afterClose.call(this); - }); - } - - destroy() { - for (let i = this.events.length - 1; i >= 0; i--) { - const { - element, - eventName - } = this.events[i]; - this.off(element, eventName); - } - - if (!this.state.initialized) { - return; - } - - if (this.state.fullScreenOpen) { - exitFullScreen(); - } - - this.settings.currentImageIndex = undefined; - this.state.visible = false; - this.state.initialized = false; - this.elems.container.classList.remove(...this._cssClasses); - this.elems.wrapper.parentNode.removeChild(this.elems.wrapper); - } - - markup() { - this.elems.container.classList.add('chocolat-open', this.settings.className); - - if (this.settings.imageSize == 'cover') { - this.elems.container.classList.add('chocolat-cover'); - } - - if (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); - } - - attachListeners() { - this.off(document, 'keydown.chocolat'); - this.on(document, 'keydown.chocolat', e => { - if (this.state.initialized) { - if (e.keyCode == 37) { - this.change(-1); - } else if (e.keyCode == 39) { - this.change(1); - } else if (e.keyCode == 27) { - this.close(); - } - } - }); - const right = this.elems.wrapper.querySelector('.chocolat-right'); - this.off(right, 'click.chocolat'); - this.on(right, 'click.chocolat', () => { - this.change(+1); - }); - const left = this.elems.wrapper.querySelector('.chocolat-left'); - this.off(left, 'click.chocolat'); - this.on(left, 'click.chocolat', () => { - this.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', () => { - if (this.state.fullScreenOpen) { - exitFullScreen(); - return; - } - - openFullScreen(this.elems.wrapper); - }); - this.off(document, 'fullscreenchange.chocolat'); - this.on(document, 'fullscreenchange.chocolat', () => { - if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) { - this.state.fullScreenOpen = true; - } else { - this.state.fullScreenOpen = false; - } - }); - this.off(document, 'webkitfullscreenchange.chocolat'); - this.on(document, 'webkitfullscreenchange.chocolat', () => { - if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) { - this.state.fullScreenOpen = true; - } else { - this.state.fullScreenOpen = false; - } - }); - - if (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', () => { - if (this.state.initialZoomState === null || !this.state.visible) { - return; - } - - this.elems.container.classList.add('chocolat-zooming-out'); - this.zoomOut().then(() => { - this.elems.container.classList.remove('chocolat-zoomed'); - this.elems.container.classList.remove('chocolat-zooming-out'); - }); - }); - this.off(this.elems.imageWrapper, 'click.chocolat'); - this.on(this.elems.imageWrapper, 'click.chocolat', e => { - if (this.state.initialZoomState === null && this.elems.container.classList.contains('chocolat-zoomable')) { - e.stopPropagation(); - this.elems.container.classList.add('chocolat-zooming-in'); - this.zoomIn(e).then(() => { - this.elems.container.classList.add('chocolat-zoomed'); - this.elems.container.classList.remove('chocolat-zooming-in'); - }); - } - }); - this.on(this.elems.wrapper, 'mousemove.chocolat', e => { - if (this.state.initialZoomState === null || !this.state.visible) { - return; - } - - const rect = this.elems.wrapper.getBoundingClientRect(); - const pos = { - top: rect.top + window.scrollY, - left: rect.left + window.scrollX - }; - const height = this.elems.wrapper.clientHeight; - const width = this.elems.wrapper.clientWidth; - const imgWidth = this.elems.img.width; - const imgHeight = this.elems.img.height; - const coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top]; - let mvtX = 0; - - if (imgWidth > width) { - const paddingX = this.settings.zoomedPaddingX(imgWidth, width); - mvtX = coord[0] / (width / 2); - mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX; - } - - let mvtY = 0; - - if (imgHeight > height) { - const paddingY = this.settings.zoomedPaddingY(imgHeight, height); - mvtY = coord[1] / (height / 2); - mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY; - } - - this.elems.img.style.marginLeft = -mvtX + 'px'; - this.elems.img.style.marginTop = -mvtY + 'px'; - }); - this.on(window, 'resize.chocolat', e => { - if (!this.state.initialized || !this.state.visible) { - return; - } - - debounce(50, () => { - const fitOptions = { - imgHeight: this.elems.img.naturalHeight, - imgWidth: this.elems.img.naturalWidth, - containerHeight: this.elems.wrapper.clientHeight, - containerWidth: this.elems.wrapper.clientWidth, - canvasWidth: this.elems.imageCanvas.clientWidth, - canvasHeight: this.elems.imageCanvas.clientHeight, - imageSize: this.settings.imageSize - }; - const { - width, - height - } = fit(fitOptions); - this.position(this.elems.img).then(() => { - this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(this.elems.img, this.elems.wrapper)); - }); - }); - }); - } - - zoomable(image, wrapper) { - const wrapperWidth = wrapper.clientWidth; - const wrapperHeight = wrapper.clientHeight; - const isImageZoomable = this.settings.allowZoom && (image.naturalWidth > wrapperWidth || image.naturalHeight > wrapperHeight) ? true : false; - const isImageStretched = image.clientWidth > image.naturalWidth || image.clientHeight > image.naturalHeight; - return isImageZoomable && !isImageStretched; - } - - zoomIn(e) { - this.state.initialZoomState = this.settings.imageSize; - this.settings.imageSize = 'native'; - return this.position(this.elems.img); - } - - zoomOut(e) { - this.settings.imageSize = this.state.initialZoomState || this.settings.imageSize; - this.state.initialZoomState = null; - this.elems.img.style.margin = 0; - return this.position(this.elems.img); - } - - on(element, eventName, cb) { - // const eventName = this.settings.setIndex + '-' + eventName - const length = this.events.push({ - element, - eventName, - cb - }); - element.addEventListener(eventName.split('.')[0], this.events[length - 1].cb); - } - - off(element, eventName) { - // const eventName = this.settings.setIndex + '-' + eventName - const index = this.events.findIndex(event => { - return event.element === element && event.eventName === eventName; - }); - - if (this.events[index]) { - element.removeEventListener(eventName.split('.')[0], this.events[index].cb); - this.events.splice(index, 1); - } - } - - } - - const instances = []; - - window.Chocolat = function (elements, options) { - const settings = Object.assign({}, defaults, { - images: [] - }, options, { - setIndex: instances.length - }); - const instance = new Chocolat(elements, settings); - instances.push(instance); - return instance; - }; - -}()); +!function(){"use strict";function e(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,i=new Array(t);n=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+""},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=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?uc/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=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}}(); diff --git a/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css b/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css index b3e5b621da..f10c48fd23 100644 --- a/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css +++ b/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css @@ -1,269 +1 @@ -.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: 32px; - width: 32px; - position: absolute; - left: 50%; - top: 50%; - margin-left: -16px; - margin-top: -16px; - z-index: 11; - background: url(../images/loader.gif); - opacity: 0; -} -.chocolat-loader.chocolat-visible { - opacity: 1; -} - -.chocolat-image-wrapper { - position: fixed; - width: 0px; - height: 0px; - 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: url(../images/left.png) 50% 50% 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 .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: url(../images/right.png) 50% 50% 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: url(../images/close.png) 50% 50% 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; - /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/ -} -.chocolat-wrapper .chocolat-fullscreen { - width: 16px; - height: 40px; - background: url(../images/fullscreen.png) 50% 50% no-repeat; - display: block; - cursor: pointer; - float: right; -} -.chocolat-wrapper .chocolat-description { - display: inline-block; - flex-grow: 1; - text-align: left; -} - -/* no container mode*/ -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; -} - -/* container mode*/ -.chocolat-in-container .chocolat-wrapper, -.chocolat-in-container .chocolat-image-wrapper, -.chocolat-in-container .chocolat-overlay { - 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 .2s ease, height .2s ease; -} -.chocolat-zoomable.chocolat-zooming-in .chocolat-img, -.chocolat-zoomable.chocolat-zooming-out .chocolat-img { - transition: margin .2s ease; -} - -/* uncomment to hide controls when zoomed-in*/ -/* -.chocolat-zoomable .chocolat-top, -.chocolat-zoomable .chocolat-bottom, -.chocolat-zoomable .chocolat-right, -.chocolat-zoomable .chocolat-left { - transition: opacity .3s ease, visibility 0s .3s; - opacity: 1; -} - -.chocolat-zoomable.chocolat-zoomed .chocolat-top, -.chocolat-zoomable.chocolat-zoomed .chocolat-bottom, -.chocolat-zoomable.chocolat-zoomed .chocolat-right, -.chocolat-zoomable.chocolat-zoomed .chocolat-left { - visibility: hidden; - opacity: 0; -} -*/ - -/* Local chnages for Koha */ -.chocolat-wrapper { - z-index: 1035; -} - -.chocolat-wrapper .chocolat-left { - 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; - background-size: 35px; -} - -.chocolat-wrapper .chocolat-right { - 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; - background-size: 35px; -} - -.chocolat-wrapper .chocolat-close { - 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; - background-size: 35px; -} - -.chocolat-wrapper .chocolat-bottom { - background: rgba(0, 0, 0, 0.8); -} - -.chocolat-wrapper .chocolat-bottom a { - color: #FFF; - text-decoration: underline; -} - -.chocolat-wrapper .chocolat-fullscreen { - width: 40px; - 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"); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 25px; -} - -/* End local changes for Koha */ +: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} diff --git a/koha-tmpl/opac-tmpl/lib/Chocolat/images/close.png b/koha-tmpl/opac-tmpl/lib/Chocolat/images/close.png deleted file mode 100644 index 87631d1e68275986eff00bc4193f18ed81444a9b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1119 zcmV-l1fctgP)KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O230GU?V`^?9Mg`TI*47*Ot|)F34wi|x6(8{ z6_MexaS<7&X?p50<-XgA%Cgo@;y4}^fr!X3j^mNFcH&bML#>9Dl_bfDF=m_xaRA1c zagrn_9#ifFz?&uMyHwdl0crvO%md(U-CLy~V*q2!s0P4YlA6=5=8-z0RgPoijzdJK zu^VZm`MX>9KDb3iq%O!T^znjaQLrp(D(EWEJn_mWSy^i*%f41bhJ(T2eH2CSDo**) z*}K;*rS5CsgDYU)TZ)YHY!&^XuDD6vsQJBvxK&%;q|RJFlFbh@H5$DJ0H)b1kWW&- z)M;KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O23rd6951J diff --git a/koha-tmpl/opac-tmpl/lib/Chocolat/images/fullscreen.png b/koha-tmpl/opac-tmpl/lib/Chocolat/images/fullscreen.png deleted file mode 100644 index 7be7be9be8ac4f4c30acb77f654057ead2deffad..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 663 zcmV;I0%-k-P)KLZ*U+0v@6o#Kk zBy~|skq9maHzpVb!A%szeAFnH;fC8TlHlg{&NR8$`@v*xZFhqH4E+Z#x^m|~@B=Bh z_D6`z#6^szN*C?3dS~Xmobz%9%J006+AeKEk~$mo+Hx=)$+gd{Be=?au7%MwSKE(w z06f3j3Vfybi-4cs5CA8)JipuGe5^;gbs(z16K$puh-bj77cO@oz5`Xe6LdiQ05--e zdUr+J!EgknOF(tJ(ARjGpDr!D|DP|)O23(&4O002ovPDHLkV1jM|ACCY4 diff --git a/koha-tmpl/opac-tmpl/lib/Chocolat/images/left.png b/koha-tmpl/opac-tmpl/lib/Chocolat/images/left.png deleted file mode 100644 index 185f77bd1c596a0c88dbfa1f7af82b7a077fdf9c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1237 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 { - const handleTransitionEnd = () => { - el.removeEventListener('transitionend', handleTransitionEnd); - resolve(); - }; - - el.addEventListener('transitionend', handleTransitionEnd); - const classesBefore = el.getAttribute('class'); - const stylesBefore = el.getAttribute('style'); - triggeringFunc(); - - if (classesBefore === el.getAttribute('class') && stylesBefore === el.getAttribute('style')) { - handleTransitionEnd(); - } - - if (parseFloat(getComputedStyle(el)['transitionDuration']) === 0) { - handleTransitionEnd(); - } - }); - } - function loadImage({ - src, - srcset, - sizes - }) { - const image = new Image(); - image.src = src; - - if (srcset) { - image.srcset = srcset; - } - - if (sizes) { - image.sizes = sizes; - } - - if ('decode' in image) { - return new Promise((resolve, reject) => { - image.decode().then(() => { - resolve(image); - }).catch(() => { - reject(image); - }); - }); - } else { - return new Promise((resolve, reject) => { - image.onload = resolve(image); - image.onerror = reject(image); - }); - } - } - function fit(options) { - let height; - let width; - const { - imgHeight, - imgWidth, - containerHeight, - containerWidth, - canvasWidth, - canvasHeight, - imageSize - } = options; - const canvasRatio = canvasHeight / canvasWidth; - const containerRatio = containerHeight / containerWidth; - const imgRatio = imgHeight / imgWidth; - - if (imageSize == 'cover') { - if (imgRatio < containerRatio) { - height = containerHeight; - width = height / imgRatio; - } else { - width = containerWidth; - height = width * imgRatio; - } - } else if (imageSize == 'native') { - height = imgHeight; - width = imgWidth; - } else { - if (imgRatio > canvasRatio) { - height = canvasHeight; - width = height / imgRatio; - } else { - width = canvasWidth; - height = width * imgRatio; - } - - if (imageSize === 'scale-down' && (width >= imgWidth || height >= imgHeight)) { - width = imgWidth; - height = imgHeight; - } - } - - return { - height: height, - width: width - }; - } - function openFullScreen(wrapper) { - if (wrapper.requestFullscreen) { - return wrapper.requestFullscreen(); - } else if (wrapper.webkitRequestFullscreen) { - return wrapper.webkitRequestFullscreen(); - } else if (wrapper.msRequestFullscreen) { - return wrapper.msRequestFullscreen(); - } else { - return Promise.reject(); - } - } - function exitFullScreen() { - if (document.exitFullscreen) { - return document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - return document.webkitExitFullscreen(); - } else if (document.msExitFullscreen) { - return document.msExitFullscreen(); - } else { - return Promise.reject(); - } - } - - const defaults = { - container: document.body, - // window or element - className: undefined, - imageSize: 'scale-down', - // 'scale-down', 'contain', 'cover' or 'native' - fullScreen: false, - loop: false, - linkImages: true, - setIndex: 0, - firstImageIndex: 0, - lastImageIndex: false, - currentImageIndex: undefined, - allowZoom: true, - closeOnBackgroundClick: true, - setTitle: function () { - return ''; - }, - description: function () { - return this.images[this.settings.currentImageIndex].title; - }, - pagination: function () { - const last = this.settings.lastImageIndex + 1; - const position = this.settings.currentImageIndex + 1; - return position + '/' + last; - }, - - afterInitialize() {}, - - afterMarkup() {}, - - afterImageLoad() {}, - - afterClose() {}, - - zoomedPaddingX: function (canvasWidth, imgWidth) { - return 0; - }, - zoomedPaddingY: function (canvasHeight, imgHeight) { - return 0; - } - }; - class Chocolat { - constructor(elements, settings) { - this.settings = settings; - this.elems = {}; - this.images = []; - this.events = []; - this.state = { - fullScreenOpen: false, - initialZoomState: null, - initialized: false, - timer: false, - visible: false - }; - this._cssClasses = ['chocolat-open', 'chocolat-in-container', 'chocolat-cover', 'chocolat-zoomable', 'chocolat-zoomed', 'chocolat-zooming-in', 'chocolat-zooming-out']; - - if (NodeList.prototype.isPrototypeOf(elements) || HTMLCollection.prototype.isPrototypeOf(elements)) { - elements.forEach((el, i) => { - this.images.push({ - title: el.getAttribute('title'), - src: el.getAttribute('href'), - srcset: el.getAttribute('data-srcset'), - sizes: el.getAttribute('data-sizes') - }); - this.off(el, 'click.chocolat'); - this.on(el, 'click.chocolat', e => { - this.init(i); - e.preventDefault(); - }); - }); - } else { - this.images = elements; - } - - if (this.settings.container instanceof Element || this.settings.container instanceof HTMLElement) { - this.elems.container = this.settings.container; - } else { - this.elems.container = document.body; - } - - this.api = { - open: i => { - i = parseInt(i) || 0; - return this.init(i); - }, - close: () => { - return this.close(); - }, - next: () => { - return this.change(1); - }, - prev: () => { - return this.change(-1); - }, - goto: i => { - return this.open(i); - }, - current: () => { - return this.settings.currentImageIndex; - }, - position: () => { - return this.position(this.elems.img); - }, - destroy: () => { - return this.destroy(); - }, - set: (property, value) => { - this.settings[property] = value; - return value; - }, - get: property => { - return this.settings[property]; - }, - getElem: name => { - return this.elems[name]; - } - }; - } - - init(i) { - if (!this.state.initialized) { - this.markup(); - this.attachListeners(); - this.settings.lastImageIndex = this.images.length - 1; - this.state.initialized = true; - } - - this.settings.afterInitialize.call(this); - return this.load(i); - } - - load(index) { - if (!this.state.visible) { - this.state.visible = true; - setTimeout(() => { - this.elems.overlay.classList.add('chocolat-visible'); - this.elems.wrapper.classList.add('chocolat-visible'); - }, 0); - this.elems.container.classList.add('chocolat-open'); - } - - if (this.settings.fullScreen) { - openFullScreen(this.elems.wrapper); - } - - if (this.settings.currentImageIndex === index) { - return Promise.resolve(); - } - - let loaderTimer = setTimeout(() => { - this.elems.loader.classList.add('chocolat-visible'); - }, 1000); - let fadeOutPromise; - let image; - let fadeOutTimer = setTimeout(() => { - fadeOutTimer = undefined; - fadeOutPromise = transitionAsPromise(() => { - this.elems.imageCanvas.classList.remove('chocolat-visible'); - }, this.elems.imageCanvas); - }, 80); - return loadImage(this.images[index]).then(loadedImage => { - image = loadedImage; - - if (fadeOutTimer) { - clearTimeout(fadeOutTimer); - return Promise.resolve(); - } else { - return fadeOutPromise; - } - }).then(() => { - const nextIndex = index + 1; - - if (this.images[nextIndex] != undefined) { - loadImage(this.images[nextIndex]); - } - - this.settings.currentImageIndex = index; - this.elems.description.innerHTML = this.settings.description.call(this); - this.elems.pagination.textContent = this.settings.pagination.call(this); - this.arrows(); - return this.position(image).then(() => { - this.elems.loader.classList.remove('chocolat-visible'); - clearTimeout(loaderTimer); - return this.appear(image); - }); - }).then(() => { - this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(image, this.elems.wrapper)); - this.settings.afterImageLoad.call(this); - }); - } - - position({ - naturalHeight, - naturalWidth - }) { - const fitOptions = { - imgHeight: naturalHeight, - imgWidth: 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 - }; - const { - width, - height - } = fit(fitOptions); - return transitionAsPromise(() => { - Object.assign(this.elems.imageWrapper.style, { - width: width + 'px', - height: height + 'px' - }); - }, this.elems.imageWrapper); - } - - appear(image) { - this.elems.imageWrapper.removeChild(this.elems.img); - this.elems.img = image; - this.elems.img.setAttribute('class', 'chocolat-img'); - this.elems.imageWrapper.appendChild(this.elems.img); - const fadeInPromise = transitionAsPromise(() => { - this.elems.imageCanvas.classList.add('chocolat-visible'); - }, this.elems.imageCanvas); - return fadeInPromise; - } - - change(step) { - if (!this.state.visible) { - return; - } - - if (!this.settings.linkImages) { - return; - } - - this.zoomOut(); - const requestedImage = this.settings.currentImageIndex + parseInt(step); - - if (requestedImage > this.settings.lastImageIndex) { - if (this.settings.loop) { - return this.load(this.settings.firstImageIndex); - } - } else if (requestedImage < this.settings.firstImageIndex) { - if (this.settings.loop) { - return this.load(this.settings.lastImageIndex); - } - } else { - return this.load(requestedImage); - } - } - - arrows() { - if (this.settings.loop) { - this.elems.left.classList.add('active'); - this.elems.right.classList.add('active'); - } else if (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); - } else { - this.elems.left.classList.remove('active'); - this.elems.right.classList.remove('active'); - } - } - - close() { - if (this.state.fullScreenOpen) { - exitFullScreen(); - return; - } - - this.state.visible = false; - const promiseOverlay = transitionAsPromise(() => { - this.elems.overlay.classList.remove('chocolat-visible'); - }, this.elems.overlay); - const promiseWrapper = transitionAsPromise(() => { - this.elems.wrapper.classList.remove('chocolat-visible'); - }, this.elems.wrapper); - return Promise.all([promiseOverlay, promiseWrapper]).then(() => { - this.elems.container.classList.remove('chocolat-open'); - this.settings.afterClose.call(this); - }); - } - - destroy() { - for (let i = this.events.length - 1; i >= 0; i--) { - const { - element, - eventName - } = this.events[i]; - this.off(element, eventName); - } - - if (!this.state.initialized) { - return; - } - - if (this.state.fullScreenOpen) { - exitFullScreen(); - } - - this.settings.currentImageIndex = undefined; - this.state.visible = false; - this.state.initialized = false; - this.elems.container.classList.remove(...this._cssClasses); - this.elems.wrapper.parentNode.removeChild(this.elems.wrapper); - } - - markup() { - this.elems.container.classList.add('chocolat-open', this.settings.className); - - if (this.settings.imageSize == 'cover') { - this.elems.container.classList.add('chocolat-cover'); - } - - if (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); - } - - attachListeners() { - this.off(document, 'keydown.chocolat'); - this.on(document, 'keydown.chocolat', e => { - if (this.state.initialized) { - if (e.keyCode == 37) { - this.change(-1); - } else if (e.keyCode == 39) { - this.change(1); - } else if (e.keyCode == 27) { - this.close(); - } - } - }); - const right = this.elems.wrapper.querySelector('.chocolat-right'); - this.off(right, 'click.chocolat'); - this.on(right, 'click.chocolat', () => { - this.change(+1); - }); - const left = this.elems.wrapper.querySelector('.chocolat-left'); - this.off(left, 'click.chocolat'); - this.on(left, 'click.chocolat', () => { - this.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', () => { - if (this.state.fullScreenOpen) { - exitFullScreen(); - return; - } - - openFullScreen(this.elems.wrapper); - }); - this.off(document, 'fullscreenchange.chocolat'); - this.on(document, 'fullscreenchange.chocolat', () => { - if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) { - this.state.fullScreenOpen = true; - } else { - this.state.fullScreenOpen = false; - } - }); - this.off(document, 'webkitfullscreenchange.chocolat'); - this.on(document, 'webkitfullscreenchange.chocolat', () => { - if (document.fullscreenElement || document.webkitCurrentFullScreenElement || document.webkitFullscreenElement) { - this.state.fullScreenOpen = true; - } else { - this.state.fullScreenOpen = false; - } - }); - - if (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', () => { - if (this.state.initialZoomState === null || !this.state.visible) { - return; - } - - this.elems.container.classList.add('chocolat-zooming-out'); - this.zoomOut().then(() => { - this.elems.container.classList.remove('chocolat-zoomed'); - this.elems.container.classList.remove('chocolat-zooming-out'); - }); - }); - this.off(this.elems.imageWrapper, 'click.chocolat'); - this.on(this.elems.imageWrapper, 'click.chocolat', e => { - if (this.state.initialZoomState === null && this.elems.container.classList.contains('chocolat-zoomable')) { - e.stopPropagation(); - this.elems.container.classList.add('chocolat-zooming-in'); - this.zoomIn(e).then(() => { - this.elems.container.classList.add('chocolat-zoomed'); - this.elems.container.classList.remove('chocolat-zooming-in'); - }); - } - }); - this.on(this.elems.wrapper, 'mousemove.chocolat', e => { - if (this.state.initialZoomState === null || !this.state.visible) { - return; - } - - const rect = this.elems.wrapper.getBoundingClientRect(); - const pos = { - top: rect.top + window.scrollY, - left: rect.left + window.scrollX - }; - const height = this.elems.wrapper.clientHeight; - const width = this.elems.wrapper.clientWidth; - const imgWidth = this.elems.img.width; - const imgHeight = this.elems.img.height; - const coord = [e.pageX - width / 2 - pos.left, e.pageY - height / 2 - pos.top]; - let mvtX = 0; - - if (imgWidth > width) { - const paddingX = this.settings.zoomedPaddingX(imgWidth, width); - mvtX = coord[0] / (width / 2); - mvtX = ((imgWidth - width) / 2 + paddingX) * mvtX; - } - - let mvtY = 0; - - if (imgHeight > height) { - const paddingY = this.settings.zoomedPaddingY(imgHeight, height); - mvtY = coord[1] / (height / 2); - mvtY = ((imgHeight - height) / 2 + paddingY) * mvtY; - } - - this.elems.img.style.marginLeft = -mvtX + 'px'; - this.elems.img.style.marginTop = -mvtY + 'px'; - }); - this.on(window, 'resize.chocolat', e => { - if (!this.state.initialized || !this.state.visible) { - return; - } - - debounce(50, () => { - const fitOptions = { - imgHeight: this.elems.img.naturalHeight, - imgWidth: this.elems.img.naturalWidth, - containerHeight: this.elems.wrapper.clientHeight, - containerWidth: this.elems.wrapper.clientWidth, - canvasWidth: this.elems.imageCanvas.clientWidth, - canvasHeight: this.elems.imageCanvas.clientHeight, - imageSize: this.settings.imageSize - }; - const { - width, - height - } = fit(fitOptions); - this.position(this.elems.img).then(() => { - this.elems.container.classList.toggle('chocolat-zoomable', this.zoomable(this.elems.img, this.elems.wrapper)); - }); - }); - }); - } - - zoomable(image, wrapper) { - const wrapperWidth = wrapper.clientWidth; - const wrapperHeight = wrapper.clientHeight; - const isImageZoomable = this.settings.allowZoom && (image.naturalWidth > wrapperWidth || image.naturalHeight > wrapperHeight) ? true : false; - const isImageStretched = image.clientWidth > image.naturalWidth || image.clientHeight > image.naturalHeight; - return isImageZoomable && !isImageStretched; - } - - zoomIn(e) { - this.state.initialZoomState = this.settings.imageSize; - this.settings.imageSize = 'native'; - return this.position(this.elems.img); - } - - zoomOut(e) { - this.settings.imageSize = this.state.initialZoomState || this.settings.imageSize; - this.state.initialZoomState = null; - this.elems.img.style.margin = 0; - return this.position(this.elems.img); - } - - on(element, eventName, cb) { - // const eventName = this.settings.setIndex + '-' + eventName - const length = this.events.push({ - element, - eventName, - cb - }); - element.addEventListener(eventName.split('.')[0], this.events[length - 1].cb); - } - - off(element, eventName) { - // const eventName = this.settings.setIndex + '-' + eventName - const index = this.events.findIndex(event => { - return event.element === element && event.eventName === eventName; - }); - - if (this.events[index]) { - element.removeEventListener(eventName.split('.')[0], this.events[index].cb); - this.events.splice(index, 1); - } - } - - } - - const instances = []; - - window.Chocolat = function (elements, options) { - const settings = Object.assign({}, defaults, { - images: [] - }, options, { - setIndex: instances.length - }); - const instance = new Chocolat(elements, settings); - instances.push(instance); - return instance; - }; - -}()); +!function(){"use strict";function e(e,t){for(var n=0;ne.length)&&(t=e.length);for(var n=0,i=new Array(t);n=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+""},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=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?uc/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=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.30.2