Bugzilla – Attachment 119914 Details for
Bug 28179
Use a lightbox gallery to display the images - detail page, staff interface
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 28179: Add the Chocolat gallery lightbox JS library
Bug-28179-Add-the-Chocolat-gallery-lightbox-JS-lib.patch (text/plain), 45.01 KB, created by
Jonathan Druart
on 2021-04-20 14:38:34 UTC
(
hide
)
Description:
Bug 28179: Add the Chocolat gallery lightbox JS library
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2021-04-20 14:38:34 UTC
Size:
45.01 KB
patch
obsolete
>From 314ae8597e896488bfa468ed95415252029a50d5 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) >--- > .../lib/Chocolat/css/chocolat.css | 230 ++++++ > .../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 > .../lib/Chocolat/images/left.png | Bin 0 -> 1237 bytes > .../lib/Chocolat/images/loader.gif | Bin 0 -> 3208 bytes > .../lib/Chocolat/images/right.png | Bin 0 -> 1224 bytes > .../intranet-tmpl/lib/Chocolat/js/chocolat.js | 707 ++++++++++++++++++ > .../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 >KcmV+b0RR6000031 > >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 >KcmV+b0RR6000031 > >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 >KcmV+b0RR6000031 > >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 >KcmV+b0RR6000031 > >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 >KcmV+b0RR6000031 > >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 >KcmV+b0RR6000031 > >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 7ec5f4d7b5..8b7fe06348 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.20.1
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=119914">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
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