Attachment 120409 Details for Bug 28179 – Bug 28179: Add the Chocolat gallery lightbox JS library

[patch] Bug 28179: Add the Chocolat gallery lightbox JS library

Bug-28179-Add-the-Chocolat-gallery-lightbox-JS-lib.patch (text/plain), 44.29 KB, created by Owen Leonard on 2021-05-03 18:15:42 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2021-05-03 18:15:42 UTC

Size: 44.29 KB

patch

obsolete

>From c8fc14ffcdcaaa42146e28b116fe5a6ed56bc22f Mon Sep 17 00:00:00 2001
>From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
>Date: Mon, 19 Apr 2021 11:38:33 +0200
>Subject: [PATCH] Bug 28179: Add the Chocolat gallery lightbox JS library
>
>Chocolat is a lightbox JS library.
>https://chocolat.insipi.de
>https://github.com/nicolas-t/Chocolat
>https://chocolat.gitbook.io
>
>Why Chocolat? It's released under the GPL v3 license, easy to use,
>configure and extend, and is still maintained/active.
>
>(and it has a nice name)
>
>Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
>---
> .../intranet-tmpl/lib/Chocolat/css/chocolat.css    | 230 +++++++
> .../intranet-tmpl/lib/Chocolat/images/close.png    | Bin 0 -> 1119 bytes
> .../lib/Chocolat/images/fullscreen-black.png       | Bin 0 -> 658 bytes
> .../lib/Chocolat/images/fullscreen.png             | Bin 0 -> 663 bytes
> .../intranet-tmpl/lib/Chocolat/images/left.png     | Bin 0 -> 1237 bytes
> .../intranet-tmpl/lib/Chocolat/images/loader.gif   | Bin 0 -> 3208 bytes
> .../intranet-tmpl/lib/Chocolat/images/right.png    | Bin 0 -> 1224 bytes
> .../intranet-tmpl/lib/Chocolat/js/chocolat.js      | 707 +++++++++++++++++++++
> koha-tmpl/intranet-tmpl/prog/en/modules/about.tt   |   4 +
> 9 files changed, 941 insertions(+)
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen-black.png
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/loader.gif
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/images/right.png
> create mode 100644 koha-tmpl/intranet-tmpl/lib/Chocolat/js/chocolat.js
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css b/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css
>new file mode 100644
>index 0000000000..e5ad53cd1a
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/lib/Chocolat/css/chocolat.css
>@@ -0,0 +1,230 @@
>+.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;
>+}
>+*/
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/close.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..87631d1e68275986eff00bc4193f18ed81444a9b
>GIT binary patch
>literal 1119
>zcmV-l1fctgP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00009a7bBm000XU
>z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>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(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
>zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
>zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
>zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
>z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
>zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
>z06tg%0Z2yx01iw5000V{ww+Y~00I9=L_t(|+QgW@a??N%hd;?moN+=3lMHDvG!zsR
>z%<u$8qrwkF?Q!h~O0jdfm!P2G&yb3YVG<zVWaOA;FQZXpMJL<RuRZDR)7|avZx!ID
>zUEnd$19pH2=m2vd1!lls;1am1I%!bhnGiSxj)ATR@HKD_Oo7`~AP#^&uuXm40B693
>zFGK)52aZ^urocB~kss(3Jlp|Z0#8`4dcdCU$f67)P=H5lMqRz!Kg%FqY+wh9K(;i3
>z?m-*?&uB(H;Gc#xVI~awG^@T_-$5L%7>0GU?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;<hW&Hs@Kh$?zY|!ZZ20rE6!Xk);_61vOKAI`;rKm40s~MMS%lGQkmRuBkElUGc
>lyYeG7rLA=3jr^bZKLCE)zQ==Gzy|;T002ovPDHLkV1k^=1CRg!
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen-black.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen-black.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..14c2f63e3a51e22910ced6624671125c257bfaba
>GIT binary patch
>literal 658
>zcmV;D0&V??P)<h;3K|Lk000e1NJLTq000mG000aK1^@s6Yv(<I00009a7bBm000XU
>z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>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(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
>zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
>zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
>zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
>z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
>zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
>z06tg%0Z2yx01iw5000V{ww+Y~001&cL_t(|+G1p2VEE5KA)v&7|4fwHKJW&xP#Qig
>sL|DQ&%ma~P0~jey$^ZZW0RR630HWds6!;)bSO5S307*qoM6N<$g5>rd6951J
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/fullscreen.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..7be7be9be8ac4f4c30acb77f654057ead2deffad
>GIT binary patch
>literal 663
>zcmV;I0%-k-P)<h;3K|Lk000e1NJLTq000mG000aK1^@s6Yv(<I00009a7bBm000XU
>z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>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(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
>zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
>zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
>zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
>z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
>zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
>z06tg%0Z2yx01iw5000V{ww+Y~001{hL_t(|+G70w|Nnmm3IGd~W+YSpe<lVB!N429
>xLdcJl8bBz3heIGzEf)Th8xsHk009600{|P12^o8z>(&4O002ovPDHLkV1jM|ACCY4
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/left.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..185f77bd1c596a0c88dbfa1f7af82b7a077fdf9c
>GIT binary patch
>literal 1237
>zcmV;`1S<Q9P)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00009a7bBm000XU
>z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>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(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
>zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
>zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
>zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
>z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
>zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
>z06tg%0Z2yx01iw5000V{ww+Y~00MPML_t(|+QgVKY!YD<$A289Ek~)CHg-^yG!BNy
>zfW|O1ajA?n?Mgz}oJd$@a3C&?(O?=kg9CADz%*StC^2y&4uruFlSVOiAT~&-+LIOv
>zF5ek~1n%Gp|MlK?_sjQv@4f#!6Z&KWE&wtx3rqoK;0$O2bwB}*fMcyMHED>EfCXR)
>zn9%`z0vrMrpfw7F18@S<46jq*0I2DOFacMAMT}Dg_y)AQADDXtn}O@VMU0gU%!wUo
>z_k%DA06XWS8F9I*{UENL!w&QUv4{-%55fUlVLXz7KO&`(I?~X|c;!^TuR<)0n1;h>
>zTFpKcVu{J<k_utdSqTA1r_(EqM&pev%hIUXA_4PyS0<CmTN@i2kMsHb3q?^{Bksn$
>zx)Yj}NF?0ha5zyc7GL^&zHI}J#3qSus7dj7d^r+{Y?Vr-*B*~2Y0$lxl|(xpsAx2L
>zITnjOFPF>j+-~=lftPd21l-mVsVK^})oNYV^Y&)5S+iIy_Xbi3Lt-8jn8{?G1cSk6
>z`}_N^c6WE*YJsR$t91=wXH&uv4TK1VLLcmQ`-8Q$wN0<rTk`w;dj=gxQ&Q`<7Ok(Z
>zzt3i~k5*S#AMWhz+%*WIF6r@t0DixJFPF<b4Fm$4sZ{EY0T9O~Q73NbU0Em;!Y-F<
>z#o=(=9}(h{YVU3iQ@Rb%3Gh*^``;(jzz#dR=nvtF$Ej0ce*ZzVge@PZ4%B(1vp&>?
>z(U8XgQ0cq^-9_rBaN6hTvVH?!2F)F{VU3Ok{Q^FBkA=M;+F~xS7<@Dppww$F?bkDo
>zge{-b(pv^(!PkCeK<iY#C`{=@rt-1;pZGff2#lhiH;83$00000NkvXXu0mjfa#S(V
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/loader.gif b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/loader.gif
>new file mode 100644
>index 0000000000000000000000000000000000000000..3c2f7c058836808f7f1f5f9a4bdf37d4e5f9284a
>GIT binary patch
>literal 3208
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
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/images/right.png b/koha-tmpl/intranet-tmpl/lib/Chocolat/images/right.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..5d46f36536015177bc1b6ca164c17213e235d139
>GIT binary patch
>literal 1224
>zcmV;(1ULJMP)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP00009a7bBm000XU
>z000XU0RWnu7ytkP+G#^WP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-ozkO>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(AR<L?m{<!s!mc3rAI)j6Rn|i417(JOhfrKP;=(c0d%tb$j0M|
>zleMTWx5BAQ!c=;h4xh_TmgHf2)R1?Z&1OS}`}@+y<B6L}Yo^8?7=4FD767jFZPuS;
>zE|Wp8y$rrFo72aV(Pu)2BSR9<qkX35ybOjTxln(0)QAduu-u*av|97=9z6YU+IQm(
>zynlH5?s5gFz{%~Ej1|xCw!CHIwb>jGpDr!D|DP|)O23<d*)!Ipk&%Ak^1?}FbX+7-
>z8E50D7WhilrCd5|vpE5VJq#8@N`yh;Q{c!ca7YveO-w=Z`{c01MAQiIQ7Gz2<OL=;
>zi^bmqsBFU9vJgTXe|hlo-@0F_LYb)%^n^J8001CkNK#Dz0EY?y0E`U)0UrGT0B52A
>z06tg%0Z2yx01iw5000V{ww+Y~00L-9L_t(|+QgVoh!SBK#(y)qf0*59bC>o|CPYF=
>zf)L>$=rVZ-R6KPGgwBH3Ja~{U9SULDQ&5n{(2%)wFbRUdV~3C~t<oN(#lo#Nb#2!!
>z--MaDGmehW)$h|E-}k-m^Snx!(+Y4JP=IB?2{?cw;1|#VeggZzfzdCO46KoXbzl=%
>zG6CEL_JAgEYz1Nsa081>u0voKXqknOfD6C|(^C`p1oVeLaEw^&04@P%n64CHRh&qF
>z9E2nQPB9xTiO2nQ9E4{ECol?RK~&H`5Np7B?2!VrMM)zMl%X4Y<<@^+hgi2*hLdPf
>zuRa}OllkbZ4zXgg6aIa<iX!)Vy;44(zdmWTIK+`mT#~(BuOAMFyQ-?DJs!_HP171?
>zJF0#XmJ|#IpI58Zr}20^o6Tl@W=&BRZfIG4zyC?CR(p|1B(^e{%taGhmt|qcQ<2Z-
>z+iEl#uT!bib~2efXK<TS0<Idk_g7A*bIlA;yWQSV6y>%d3K2*g;})gU>ANnM%h0t&
>zqtTmQulG)&P<UvN_ecV+SSis#l}e>ss;Z_nO}iJ1#oibVKeFDxt*Tfo-cVIFT`rgJ
>zn*adl$Y!$O|CGz+u0<k|2bD_YQ79C8X>$94B>Kc<D-f+#>v6qae;Wt{o=vd*gC6gu
>z_AX4S3%u72?DL!qY;Vv-zlc<9rw&E<{R43<V!55#)#s7HCe;x^L$Lv%Irs#IJLNZF
>z>$6N*KY*Q+=8l%tpfg6_fseyu;V6i{m<txBd^Js=Hfk;%XI%Rtmam><a0aTNKCTTI
>moys>vD4okxZp;4@zXt$Vo1tE0yQLWb0000<MNUMnLSTZkdMph9
>
>literal 0
>HcmV?d00001
>
>diff --git a/koha-tmpl/intranet-tmpl/lib/Chocolat/js/chocolat.js b/koha-tmpl/intranet-tmpl/lib/Chocolat/js/chocolat.js
>new file mode 100644
>index 0000000000..8b47927d28
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/lib/Chocolat/js/chocolat.js
>@@ -0,0 +1,707 @@
>+(function () {
>+    'use strict';
>+
>+    let timerDebounce = undefined;
>+    function debounce(duration, callback) {
>+      clearTimeout(timerDebounce);
>+      timerDebounce = setTimeout(function () {
>+        callback();
>+      }, duration);
>+      return timerDebounce;
>+    }
>+    function transitionAsPromise(triggeringFunc, el) {
>+      return new Promise(resolve => {
>+        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.textContent = 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;
>+    };
>+
>+}());
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
>index d2d4eea04e..f4200e77a7 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
>@@ -812,6 +812,10 @@
> 
>             <h2>Moment.js</h2>
>             <p><a href="https://momentjs.com/">Moment.js</a> licensed under the <a href="https://github.com/moment/moment/blob/develop/LICENSE">MIT license</a>.</p>
>+
>+            <h2>Chocolat.js</h2>
>+            <p><a href="http://chocolat.insipi.de">Chocolat.js</a> licensed under the <a href="https://github.com/nicolas-t/Chocolat/blob/master/LICENSE">GPL v3 license</a>.</p>
>+
>         </div>
> 
>         <div id="translations">
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 28179: 119914 | 119915 | 119916 | 120108 | 120253 | 120254 | 120255 | 120256 | 120409 | 120410 | 120411 | 120412 | 120413 | 120459 | 120460 | 120461 | 120462 | 120463 | 120731 | 120732 | 120733 | 120734 | 120735