From 6c54bc303fd65afd1d9e22ebf5a6fa681cae8020 Mon Sep 17 00:00:00 2001 From: Ivan Stankov Date: Sat, 11 Mar 2023 19:58:02 +0200 Subject: [PATCH] add mode xy --- config/webpack-demo2.config.js | 45 +++ examples2/src/index.html | 32 ++ examples2/src/index.js | 1 + examples2/static/images/nike-0-0.png | Bin 0 -> 1456 bytes examples2/static/images/nike-0-1.png | Bin 0 -> 1557 bytes examples2/static/images/nike-0-2.png | Bin 0 -> 1928 bytes examples2/static/images/nike-0-3.png | Bin 0 -> 1967 bytes examples2/static/images/nike-1-0.png | Bin 0 -> 1457 bytes examples2/static/images/nike-1-1.png | Bin 0 -> 517 bytes examples2/static/images/nike-1-2.png | Bin 0 -> 1210 bytes examples2/static/images/nike-1-3.png | Bin 0 -> 1249 bytes examples2/static/images/nike-2-0.png | Bin 0 -> 1886 bytes examples2/static/images/nike-2-1.png | Bin 0 -> 1252 bytes examples2/static/images/nike-2-2.png | Bin 0 -> 1150 bytes examples2/static/images/nike-2-3.png | Bin 0 -> 1764 bytes package.json | 4 +- src/ci360.service.js | 328 +++++++++++++----- src/ci360.utils.js | 4 + src/constants/orientations.js | 1 + .../prepare-images-from-folder.js | 11 +- 20 files changed, 337 insertions(+), 89 deletions(-) create mode 100644 config/webpack-demo2.config.js create mode 100644 examples2/src/index.html create mode 100644 examples2/src/index.js create mode 100644 examples2/static/images/nike-0-0.png create mode 100644 examples2/static/images/nike-0-1.png create mode 100644 examples2/static/images/nike-0-2.png create mode 100644 examples2/static/images/nike-0-3.png create mode 100644 examples2/static/images/nike-1-0.png create mode 100644 examples2/static/images/nike-1-1.png create mode 100644 examples2/static/images/nike-1-2.png create mode 100644 examples2/static/images/nike-1-3.png create mode 100644 examples2/static/images/nike-2-0.png create mode 100644 examples2/static/images/nike-2-1.png create mode 100644 examples2/static/images/nike-2-2.png create mode 100644 examples2/static/images/nike-2-3.png diff --git a/config/webpack-demo2.config.js b/config/webpack-demo2.config.js new file mode 100644 index 0000000..ab4a240 --- /dev/null +++ b/config/webpack-demo2.config.js @@ -0,0 +1,45 @@ +const path = require('path'); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const htmlWebpackPlugin = new HtmlWebpackPlugin({ + template: path.join(__dirname, "../examples2/src/index.html"), + filename: "./index.html" +}); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +module.exports = { + entry: path.join(__dirname, "../examples2/src/index.js"), + output: { + path: path.join(__dirname, "../examples2/dist"), + filename: "bundle[hash].js" + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, + use: "babel-loader", + exclude: /node_modules/ + }, + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, "css-loader"] + } + ] + }, + context: path.join(__dirname, '../examples2'), + plugins: [ + htmlWebpackPlugin, + new MiniCssExtractPlugin(), + new CopyWebpackPlugin({ + patterns: [ + { from: 'static' } + ] + }) + ], + resolve: { + extensions: [".js", ".jsx"] + }, + devServer: { + port: 3001 + }, + devtool: 'source-map' +}; \ No newline at end of file diff --git a/examples2/src/index.html b/examples2/src/index.html new file mode 100644 index 0000000..9bdcd3b --- /dev/null +++ b/examples2/src/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + + JS-Cloudimage-360-view + + +
+ + + diff --git a/examples2/src/index.js b/examples2/src/index.js new file mode 100644 index 0000000..a04fad6 --- /dev/null +++ b/examples2/src/index.js @@ -0,0 +1 @@ +import '../../src'; diff --git a/examples2/static/images/nike-0-0.png b/examples2/static/images/nike-0-0.png new file mode 100644 index 0000000000000000000000000000000000000000..d41c8d148395f6be0224696111bfee9a100cc231 GIT binary patch literal 1456 zcmV;h1yA~kP)Px)YDq*vRA@u(nOi7jUmVAOTO-lTgB0a5<4zPQhA{FlNN!O?u2C*&l%Zk5$heft zAmma+?hz6XW9DHV49W~KxnvTPTTw_Ng#GWg>+H_nXFF#*XYX?!{(f)g?B81J^IgAn z`K`4Gk|as^9~mJ}@X5&u3=a>(#>NJ0Zf=5>mKNyf=zz7gHF$b@LSSGZ^`E*-2p&$s zr>Cb-R#pbJwY74!I5;>!Wo0D<2M3F)Sx6ok!3PHi;OFNDYinz?h}6_nNK8xwLqkJY zU0sC_A3ng}zkliP4Gj(O?%g|4L<`Ns5R8?(ySu~Q-X0C#+S&?fX=w~G=jZ1T85s#v zQ&aT+I2y9Evjr6`1`k7UR8$l-XC)RM9uA|Uqnsl4_xHin)RggUWn~2%9UTP|Ed~!Q zcye+QLPA0qu-n_)U~X>ypa7h|`T6(}t>*Dv~0Qc@Chc6O>H zSWF&DaCvz-6c!dfYB)=rKY#uV#l^)ki`w(&&y^M}CJ!ap&d!dp%^>Oh{XGx_p%8j- za1df*Vir-@ktYE>_YO6chxw=qO`c z!&yikVqjo^WJd_2gHhsRnC=-E7%*HhK{-4;c_i+q(uTh=edKFKMn-USbi{Dq-QAT*O!(A? z`?{DsM0|Wa+0)a*U}lZ$;pZQ^XCr(Y-nhRIt}qPZ*OmynVDg@E4vpvJ3E7zJj9zf zZ^-HCX$EX}cQ?ex$Me+-ToG0_r}pvj0Wo=qkdP2^Vq$_Jj&B|}5)f4swLYir{Ldv$dsBh1Uo3x59m$*Vlu ziR<7mBoDE*wMAN5S~A*w3^3k`u*;W}l)$G?pOg~JRiBVN)bWr#2VcB+0cU4typD(8 zzI_9{9g(&lKYoC(udh;qv5=TNlwdq4up@%kH)dvL3ZWYt8zCzzi{W>1aRGXIdJ4-v z$fX}?a zBOpG#NSm^!Bz6ag#X}25(3dY?GTNP+n*$FIj|YR%*VhMeadGtb^z?LSX=za@x{|_T z@h~ppF~gD`#gobxV`KWi)( z-rhoQZ!chk(QpsOp)GIdtI`QV^E~)Ij5iilRaG!DGQ!D=oq+epm<6#HE>#3RR8}Y+ zxewylINnvQudf3xBG=c~U}0eaHa0e3Vq&7!$8bqUsLG>Iuo%(OWSvifHQD>>X!|L` z>gZ)nw(%5UP4>Pz+J1_#I(k`?Z9GL-lfAEwwx1%bj$YPe8~*{yIo+O4R5VTi0000< KMNUMnLSTX&sin&R literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-0-1.png b/examples2/static/images/nike-0-1.png new file mode 100644 index 0000000000000000000000000000000000000000..c961f848a93b5235602269a1243385b12bb79a54 GIT binary patch literal 1557 zcmV+w2I~2VP)Px)&q+i} zwH05vP@x4qB&`*-MC^mw2S4}%Q!7cs@{w7Af`y2pqTZN=z3jbv+k1BJ-G2-Joo~B$ z&dmJI%sFQsRun~1@IN9eeSm-c`US16tuQq;1=G{huxHO6u(h>?BS((F>C>knA|gWl z-@l~E$w{cLu7=>?U`S6-=QV{B@bBNh;r8v@P+ME8SAaw!fy&BCICt(GuOhJ-zI^!t zWo2d1*x0BRotv8rN~MxljSk?SKYxN$Dh1p*4W*{0LSkYfxVX5$#KZ(#yLJsefBsB= zzkByCWM^mdDiecYW@ZM;%gf=(lP3&uMgc~!7#iQdf2V~#c<=zy($W~hS65fz(xpq# z-Q7+9kI|5qmnQ}$P8sv_^H5Py0cZ~w83p+A<;&_btDy@QF2Ji-uQ(O_`0)b{9z4kS z_VMFK@bmK%9dv$vK5w`h4EXiy*C3P07{<=c&4H(<=U)Nf`7J0Ypue9yc@hQ(2f^Cf zT2#={(b4M2i;0N=S65f4udj#9%uHb+jh@jyx8dR8(ACwY*YI!OzQLhGhZsC>-n@aZ zurN^pvxVU~#+O2y4Dv7nWrrfy+2ukJ6chw+-@c_kB_$=n)2B~O3K;K@{rmSD4_Kj4 zKv7YVLE)@nE-fvETeoiMTx$0A_9g=@7_g6z5966ZOLup7!OF^t*XZWvW{8cAW$>v~ zD)o6Y6$t`7F)=~0!`a{8A3l8eKxFU8$OzzNrA?8Mk${(=sYnoDl}bgiJ%rvtFOd+Y zpH5Cr3|34~78e&umK((*2(VJAq}T}qo@Y$kNQo=-x3;#x#>R$Jgh70Q0AIg;ox=B2 zoA5WLkEC?qzyVlVT4Jy-EG+0GCZzKC_yhr#%jJ|N0oN$HfB!yYWo7Z{rN4W7d&BJP zEQ5b|cv$Cb6AR>F6a-i*l~R~2Xw#!dk02!_h1foJ(t-;+IyxXKDvDT!A&i0mOC%CX zJHtZ7FJ8RRd1~|-#7;ht_wnP$ker-s2o7RiL4f`J{i*TsafY&%mKJq2L`tEdp)fEo zz+gA!TPz6hnKNgozP>(&vCp181G!vIiWj&%Y|5Nk5MY^1Ms;>}GQg4M(V9g80Rg~{ zlCiNdIDY&%@unHVCF->L$NKs@*xA_;%P@pd5a7iw z2?9JjJ4+ote3+rv5QDKR!d_oeQUW(`-ZTaa(HcR3u`kU&gZuXFgO!yPqVlk(rw6b* zqD{TMy>RyISt8?&VG;}&3k9}Euzln1?#^q^y?gf{Cntx&x3;zhd-v|;U280ZV8A$8 z@b&d&=&!4*gN%#}UYjmnya?^>?KIz&D_5YVriOQ&5C*}3QF%f_0^P;O-z4W4OF$gG zXpRM_R zVuqz1#>b8wgZJ;>bH1mz%YlJ`bT15>@}r}p>T!&z3A4BpCr&WbVD67K03YehmabmC z3YckW2TA literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-0-2.png b/examples2/static/images/nike-0-2.png new file mode 100644 index 0000000000000000000000000000000000000000..b0cf7020213bf0881d78d6f02324a496c3fbf6e9 GIT binary patch literal 1928 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 B!g&Ay literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-1-0.png b/examples2/static/images/nike-1-0.png new file mode 100644 index 0000000000000000000000000000000000000000..d8847883ce8e9884d81593668e2b4e89f527dc13 GIT binary patch literal 1457 zcmV;i1y1^jP)Px)Ye_^wRA@u(Sy@O`YZU$rBa#$MN~oMQML`j>#6o;%AaXz<2Q(E0HAT^sNHin0 zD9wr#2XMlfOeN~U;lT$hAyZQ{$x6*3NT>)&EHYzl*qgnN`<%1A=X&@r*Y&pdKdtXy z!@mZD_4W02{Ex_Bvw+{cd4r;&A{;w*42g+}dcCTzU%#TQtqpJAzQz0Z@3CXY4(!^s z3-n`*|TT4f0{@!;CJudAwNGK4Gj(4eraiGxOeZKUI2gl_6-FE1-N_nuEz76 zot<&}_HFq2`Kg_!74U}-A8_;LP1MxXNH)%@ICSWc zWNdtV94;;{l7F&*LqkKkn+*#K!+`?_P+ne+q@*Ohs`S&RPvP(HFFA8&W(L;Q)@tpO z?Dxu*E5f*^rzc*#cmYF0L*buR8>X3L$K(mcwAB(O$%yUt%$YOj>gv+ywC3jKU}a?` znbX_bi<2i$ZVoWnh>3}b-T)I&RaKO;T{-kej~>O~;Gi%R6BC2l+FG^&-?(uDIXO9- zQfGd0US1xqUAwlysqNXbhx?~UrS&agM@L7=GeeC2`SS+`1_l~cng&~2TM-@}E}7TT z(!%*8CIQQ-v#YBsMn^}rf~5(sUcCZ2D>0orcMjwPnFK5+A(9SBNeNN-X=Y|7nMwi5 z=g*(n1bqMg{S5&F*)xT;N=Z)jfBpJ}ojZ53XT$W4(t9c<`lj$vDVdv_V`*tgGJSr2 zo(oKvb6QbRQ9^>kb6i?lisa;ErFdayXNT$OY03PTFJE%D%^cvO3Qia;^JaZj;@sCy!7nsESE_!Ct)flWoKtguu(#A_3Blncx7Ym zm6a9j-o2YWz;cN{)vzinD-{7=U0vmXiRt+9<9PP$8JnRcRW)pFZPhZY4Yl0*>({R% zH#e6}z{HiR4H_F84DaPGOq6kZ@#)l6d#_QLwH#|GU1J&J*962J?!YKD0 z8XDr-F`EWVhpM(*Xrsx=N$lObcPlX?GcywuY4JpTrne&>PX}WYpHvDfguIpapK*^NIsr~%<6E-$BaBy(I!Gj02HpA)c{~TalFKipIt~bc~ z`fUlbE+Jj{+m^7dH^}<>Z3(k3Azk^~mawij$ol$i39~LCUHSV9gHk@8R6JX200000 LNkvXXu0mjf(%QF% literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-1-1.png b/examples2/static/images/nike-1-1.png new file mode 100644 index 0000000000000000000000000000000000000000..cd542bfef34232acce0d29e3f144eba3f42d2c26 GIT binary patch literal 517 zcmeAS@N?(olHy`uVBq!ia0vp^Hb88^!3HFK?IbyY6k~CayA#8@b22Z1?ERiDjv*P& zZ)X~=YjO~1tJk*X7E;})W-?7=PD{oi)+471ScRRF5<5kEWgqI?NKDjG*|_j4!=3}H zzpO1R{Qh>9#g&xj|DVmD>AF1pdTFnIRaICMn{N^8CmK@63 zdZ=!HzT))Ls@ra_HG5G0bq|Z({PPj(uX{{-!sjQxVa2@V2d1B94HQY-e%mlMgjdI# zU)X}@@bssvgdseLH1%5A@tV|KX0#!cpUgpSxPuc&47rrX{LFsn_DoM!gm_&lMD zhgoZO-!+inv15yH;b+|Jw#mco|Kmks7oGVgA7*gz>hOwkVsqhHAh!$%|E*=5YA+|Z zy02T~(e4Ev8RUkav{%zIuS z^PKO-XPYINw{rJ*RYkk-ix&v6)Q9OUzQ}R>v0z)G$Ds%IZZ7=7J0czB_}HhUcIuqI zkTT`#jcvU5zZ=f){`2s2KbQH~=D(j75w-q$_U>5||9*Hgt>SCJ)Gav- wbDs-tIQM3ChcDmi6PwOSJi*C{fBu0#KcTdLj?nSnz<6cwboFyt=akR{0JYNTasU7T literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-1-2.png b/examples2/static/images/nike-1-2.png new file mode 100644 index 0000000000000000000000000000000000000000..e74c24937cad4f45c500c8a75aa7f76e91dae51b GIT binary patch literal 1210 zcmV;r1V#IaP)Px(bV)=(RA@u(nOP`xQ547jw?q_*PfP%@P~AY^`!ga`AGD09Sv zq$ENfNy(Hc$q*sRgE0{gh_AKlp6=+Li+elQch~FLXPx~!|Fzd%du`F@=jSK>BNM3$ zyuZJXmX;O-1Oy;EJ6o&2>gwtW6B84lIc#rlL+S=N*0{ry!g!cA!R8>`}{9aR26G}=-U|?XNaI8w;lamwF z*Vkika8SyDwtz{=$jC@sUtg<)6%X+9^TXuiB<$?$h1|OiW}+DJdxlwzjtD>FGgkZmw2CdUSLY1W0CWZOxKZ zaB#4k&<_s}C@n2Te}BK+GgDJj+}_^8(9n>3rg9C_NLt6T*-z67Qz);mufxsF4fFH! zu(7fEGOE+k(zt{wIdFG(mt}CV@dBnbWM*cjHHB%Co}QlUds|yu@b>mrxr8aHktnk3 zog#%IRnWk+1r-+;vwfbH6JIMYFGoW|gVgYfiVC)!3K}>%I+|tJy}dma(tM3-1PX0Q ztE{Xg#qz59om) zlh${E#cN;k{g;;)7#kZ4JEXr0EW0()K0Y!sBIWK+DeUCrgwxYg4v^{xM@PrM2|P75 zh1l3w4vxy>*49?JVEGdYzrMc0)zy_#mrBaBvoly)TK-MouC6ZR<>hg3l&!*@vg6rx_#}H3ewhnwXfVd{rkE-q_dx^{vS0aIv_!2n!1fm9RQlT2il# zngewHwYRs&+S(fH%J4OvQuyxf4naXdI669FZ67)vQFWz`=?pM6?dT*#O+6|s2v)Ln z^A+^X%?)eZM?^&E#%by8?G15pajYpounP+d@bU5CEi5%9$HvA$egv;D?X}cu72kNQ ztgNuC%-04629TMViJY7qba!|21EvHa+cng5*OGwfp0A*w0G*wkjIX)5S?++Z2>kK! zktMa6nHla!QD*n`_2malokJQdX$c7lEKD?MWo2ccyP}^Oh5zQ}CUe6pq$wO^uUsfg z9vmF--v88{bX{E?sN?t>Mos#Rj11+#;_FCiq*1v>3M(?Ys!UByWmg|oR#xn`!pO+z z$8)3*&d<;Pu^+Jmx}7jLH&+hK=Wa>SY%VV^)hYs%5s7adeuFqGD+_&neVi*^A^jU4 z7K#r&uuzoH)I9VGYwFJm#jjprp(vrLdFU0^)SnfKU%kRYQ9@Jm&?~H|KPwc!|DD4B Y00T+nfRXU!*8l(j07*qoM6N<$f=X^ovH$=8 literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-1-3.png b/examples2/static/images/nike-1-3.png new file mode 100644 index 0000000000000000000000000000000000000000..5f16b3f9abc54155acaa1c0445a184c9e89f5610 GIT binary patch literal 1249 zcmV<71Rnc|P)Px(n@L1LRA@u(nMo*paTLc7k}S*_5?06%iG^`tC?S@Hk|`;q49P}TGL*3_SQv_x zp(Int!a}AHWuBreObcVk@bCMpcYF7}``r8ff8O7Hy|bbF&i&or=XcKU{LVQ)qtDOJ zPm-y;yu6T^nVD9zH_{e(dwZK28X71#IGFPD^R@cezbYRd9#Us#Cv9$S((39eU0z<2 zg@pwL1O$+;uP3zOH*Wx40mF)+p`mnqd@Ks9P>7C>rkR-; zGB!3=dq*Si>FFt3(T|=L#cbx*4mzPshQxmf){uh(p-d+}^m1S~rlH%gxvbUY$;pZB z)w#JjGBGg`<0WN}P$(}fET|n*k}Ui`fV;Z7m~}inJVarkAT-C@+gmk5{Yqd-geppi z}wxpP?T2$MDN;NT$T=H_zeFA4`db8&IexGQ7{i~xoFespwH5DbZurb z`L7ejqN1W$QXwYF){Tser0MBt?l{uQrBx#zUPhl7#r99g^Yb&Ao1627 z1_17i!otGTK8eDjv9XaVDk|7-=x3vZw6U>K)0Jf5f`S6ID;J@}{JY>)TQFMmM(%#;l z-BxIOUn?{&+!$kPbAbi}R8>_GjPq3=TM$^v-ICBm&(F_U(D)9)H3_Pm;o)J8!yyX8 zqDe_fY>P=*Y)LNt9RPnj2AXv6H2g&!j2jT_O}MP9t1B598EG~2uLstOMuM^dSi&O7 zTE$>tS({J762F<4mE=94gagM}q5lB`t>7M8X7BuxGfQH=ACb$ztI00000 LNkvXXu0mjf0VQFV literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-2-0.png b/examples2/static/images/nike-2-0.png new file mode 100644 index 0000000000000000000000000000000000000000..6f00ff01dee74d9cee9e449ac2c8f4c229e6750b GIT binary patch literal 1886 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 QIsgCw07*qoM6N<$f|Q>q?f?J) literal 0 HcmV?d00001 diff --git a/examples2/static/images/nike-2-3.png b/examples2/static/images/nike-2-3.png new file mode 100644 index 0000000000000000000000000000000000000000..cddb349c4126cc7d5702b185c3c1d19fa0c9c560 GIT binary patch literal 1764 zcmVPx*o=HSORA@u(S$|ATZy0}4ST^~!RgSUuwa3v4J~1Q_wF5Cy?T}2ym>>-&CT@X%NLqHeL4jM1kmEei)rW1ofH}x zYH|x%zykvVR9IL@$B!RZ)GseDk1{ec$icxuk=I;?A3uIjPEHQx=H@DjNJ&Yd?Cfls zIdi5guLLkGxpwVZc6w?lI5?Q@-MdF_Zfw_wV1UUbA}jYO1QLqDhk` zN!Ew}zkU0bLPA0a7S>AZ)~%z;%1W}cv(viNDF3ftzi7>xHT3-XbH)Sr1(>Bvm(t+i zAT>5NQbR+7?D`8AF3^Dk2aE&$^XCtRhllgR!MT0=c6KLlKd`~;*RKhJj9LHs_3N~2 z*Dl=vCnhFRX=y2ww`b2DI(zmk&6qJmB)_`4n&8G=U0tHzaX7dNhQwRAtgMUy1UWl9 zvtYGyaW!7)F3_Dqtd7+|EJg9i`NzJ2@X(xpp^!a0V_%uJRpgmmoKF*v+O}<*CIy~8eJTlTdbqSECH`S9C@5eB z5J!mGa^7LGv{c#{DIqEC;qRUM|anOoNOgM`i=QfB!zk#>Vn85in3FSd(tvyvg=J zfuux8v**vBmygm)iw(aI4-b=%j}LEMl$0Mne4sgV=4chAnjdotx$ei5fX9y?Q%p>Z zh{Y@m7ZnwWIuS%`bTQVZv9U1*8i5g&9?~g14fj@#&=YiYbkOYCv-!`O0e}1UjXXR& z_&|Y3ot~a{LPMH_OxQdn4+ zq)pthV+WzJFbnXhQ>O@}BWTm6O?2nZ9jlIZv>qgi9?Z9dgi;wLvu3~#9z0+mLCANw zx6`Ig)2frz`MJJ8xDkTvg(%8fxzl0G;DwXwq?r}(F#m+ zxE50pFs23=4j?L`g25bV?%cT=RQPvU(a#431@W6AQe)h#%B8=4{YooVtYCov3(*~+ zy0T@$AQCkKM}}>pQ43>ehfWA(91077RXe&t#KgEaIyzd{DW;l(##m?l`t>|32KT79 zOAfp;Gq=|-j6CODrj_clvb@;#fl0g5?VJhGLoJ=dBUe7S(iR? zb7uM>t(B3gvQ zjbSA%4`@i6D0>k*OwF+wVD8mHi&DmT_wL9r<~(onfGs>P<3USr!L}-I!os#{8NKwH zu&`byX{&N3ENrWm(Mzuh3+r`~wkl`B!nSG|z4ZFuS@ image); const loadedYImages = this.imagesY.filter(image => image); + const loadedXYImages = this.imagesXY.filter(image => image); - const totalAmount = this.amountX + this.amountY; + let totalAmount = this.amountX + this.amountY; + if (this.modeXY) { + totalAmount = this.amountX * this.amountY; + } - return loadedXImages.length + loadedYImages.length === totalAmount; + return loadedXImages.length + loadedYImages.length + loadedXYImages.length === totalAmount; } mouseDown(event) { @@ -473,110 +478,215 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; } moveActiveIndexUp(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + if (this.modeXY) { + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageX + itemsSkipped >= this.amountX; + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageXModeXY + itemsSkipped >= this.amountX - 1; - if (isReachedTheEdge) { - this.activeImageX = this.amountX; + if (isReachedTheEdge) { + this.activeImageXModeXY = this.amountX - 1; - if (isReverse ? this.leftElem : this.rightElem) { - addClass(isReverse ? this.leftElem : this.rightElem, 'not-active'); - } - } else { - this.activeImageX += itemsSkipped; + if (isReverse ? this.leftElem : this.rightElem) { + addClass(isReverse ? this.leftElem : this.rightElem, 'not-active'); + } + } else { + this.activeImageXModeXY += itemsSkipped; - if (this.rightElem) removeClass(this.rightElem, 'not-active'); + if (this.rightElem) removeClass(this.rightElem, 'not-active'); - if (this.leftElem) removeClass(this.leftElem, 'not-active'); + if (this.leftElem) removeClass(this.leftElem, 'not-active'); + } + } else { + this.activeImageXModeXY = (this.activeImageXModeXY + itemsSkipped) % this.amountX; } } else { - this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX; + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - if (this.activeImageX === this.amountX && this.allowSpinY) this.spinY = true; - } - } + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageX + itemsSkipped >= this.amountX; - moveActiveIndexDown(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + if (isReachedTheEdge) { + this.activeImageX = this.amountX; - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageX - itemsSkipped <= 1; + if (isReverse ? this.leftElem : this.rightElem) { + addClass(isReverse ? this.leftElem : this.rightElem, 'not-active'); + } + } else { + this.activeImageX += itemsSkipped; - if (isReachedTheEdge) { - this.activeImageX = 1; + if (this.rightElem) removeClass(this.rightElem, 'not-active'); - if (isReverse ? this.rightElem : this.leftElem) { - addClass(isReverse ? this.rightElem : this.leftElem, 'not-active'); + if (this.leftElem) removeClass(this.leftElem, 'not-active'); } } else { - this.activeImageX -= itemsSkipped; + this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX; - if (this.leftElem) removeClass(this.leftElem, 'not-active'); - - if (this.rightElem) removeClass(this.rightElem, 'not-active'); - } - } else { - if (this.activeImageX - itemsSkipped < 1) { - this.activeImageX = this.amountX + (this.activeImageX - itemsSkipped); - this.spinY = true; - } else { - this.activeImageX -= itemsSkipped; + if (this.activeImageX === this.amountX && this.allowSpinY) this.spinY = true; } } } - moveActiveYIndexUp(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + moveActiveIndexDown(itemsSkipped) { + if (this.modeXY) { + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageY + itemsSkipped >= this.amountY; + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageXModeXY - itemsSkipped <= 0; - if (isReachedTheEdge) { - this.activeImageY = this.amountY; + if (isReachedTheEdge) { + this.activeImageXModeXY = 0; - if (isReverse ? this.bottomElem : this.topElem) { - addClass(isReverse ? this.bottomElem : this.topElem, 'not-active'); - } - } else { - this.activeImageY += itemsSkipped; + if (isReverse ? this.rightElem : this.leftElem) { + addClass(isReverse ? this.rightElem : this.leftElem, 'not-active'); + } + } else { + this.activeImageXModeXY -= itemsSkipped; - if (this.topElem) removeClass(this.topElem, 'not-active'); + if (this.leftElem) removeClass(this.leftElem, 'not-active'); - if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); + if (this.rightElem) removeClass(this.rightElem, 'not-active'); + } + } else { + if (this.activeImageXModeXY - itemsSkipped < 0) { + this.activeImageXModeXY = this.amountX + (this.activeImageXModeXY - itemsSkipped); + } else { + this.activeImageXModeXY -= itemsSkipped; + } } } else { - this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY; + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; - if (this.activeImageY === this.amountY) this.spinY = false; - } - } + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageX - itemsSkipped <= 1; - moveActiveYIndexDown(itemsSkipped) { - const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + if (isReachedTheEdge) { + this.activeImageX = 1; - if (this.stopAtEdges) { - const isReachedTheEdge = this.activeImageY - itemsSkipped <= 1; + if (isReverse ? this.rightElem : this.leftElem) { + addClass(isReverse ? this.rightElem : this.leftElem, 'not-active'); + } + } else { + this.activeImageX -= itemsSkipped; - if (isReachedTheEdge) { - this.activeImageY = 1; + if (this.leftElem) removeClass(this.leftElem, 'not-active'); - if (isReverse ? this.topElem : this.bottomElem) { - addClass(isReverse ? this.topElem : this.bottomElem, 'not-active'); + if (this.rightElem) removeClass(this.rightElem, 'not-active'); } } else { - this.activeImageY -= itemsSkipped; + if (this.activeImageX - itemsSkipped < 1) { + this.activeImageX = this.amountX + (this.activeImageX - itemsSkipped); + this.spinY = true; + } else { + this.activeImageX -= itemsSkipped; + } + } + } + } - if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); - if (this.topElem) removeClass(this.topElem, 'not-active'); + moveActiveYIndexUp(itemsSkipped) { + if (this.modeXY) { + // move down - see moveActiveYIndexDown + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageYModeXY - itemsSkipped <= 0; + + if (isReachedTheEdge) { + this.activeImageYModeXY = 0; + + if (isReverse ? this.topElem : this.bottomElem) { + addClass(isReverse ? this.topElem : this.bottomElem, 'not-active'); + } + } else { + this.activeImageYModeXY -= itemsSkipped; + + if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); + if (this.topElem) removeClass(this.topElem, 'not-active'); + } + } else { + if (this.activeImageYModeXY - itemsSkipped < 0) { + this.activeImageYModeXY = this.amountY + (this.activeImageYModeXY - itemsSkipped); + } else { + this.activeImageYModeXY -= itemsSkipped; + } } } else { - if (this.activeImageY - itemsSkipped < 1) { - this.activeImageY = this.amountY + (this.activeImageY - itemsSkipped); - this.spinY = false; + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageY + itemsSkipped >= this.amountY; + + if (isReachedTheEdge) { + this.activeImageY = this.amountY; + + if (isReverse ? this.bottomElem : this.topElem) { + addClass(isReverse ? this.bottomElem : this.topElem, 'not-active'); + } + } else { + this.activeImageY += itemsSkipped; + + if (this.topElem) removeClass(this.topElem, 'not-active'); + + if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); + } } else { - this.activeImageY -= itemsSkipped; + this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY; + + if (this.activeImageY === this.amountY) this.spinY = false; + } + } + } + + moveActiveYIndexDown(itemsSkipped) { + if (this.modeXY) { + // move up - see moveActiveYIndexUp + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageYModeXY + itemsSkipped >= this.amountY - 1; + + if (isReachedTheEdge) { + this.activeImageYModeXY = this.amountY - 1; + + if (isReverse ? this.bottomElem : this.topElem) { + addClass(isReverse ? this.bottomElem : this.topElem, 'not-active'); + } + } else { + this.activeImageYModeXY += itemsSkipped; + + if (this.topElem) removeClass(this.topElem, 'not-active'); + + if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); + } + } else { + this.activeImageYModeXY = (this.activeImageYModeXY + itemsSkipped) % this.amountY; + } + } else { + const isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse; + + if (this.stopAtEdges) { + const isReachedTheEdge = this.activeImageY - itemsSkipped <= 1; + + if (isReachedTheEdge) { + this.activeImageY = 1; + + if (isReverse ? this.topElem : this.bottomElem) { + addClass(isReverse ? this.topElem : this.bottomElem, 'not-active'); + } + } else { + this.activeImageY -= itemsSkipped; + + if (this.bottomElem) removeClass(this.bottomElem, 'not-active'); + if (this.topElem) removeClass(this.topElem, 'not-active'); + } + } else { + if (this.activeImageY - itemsSkipped < 1) { + this.activeImageY = this.amountY + (this.activeImageY - itemsSkipped); + this.spinY = false; + } else { + this.activeImageY -= itemsSkipped; + } } } } @@ -798,6 +908,10 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; if (this.movingDirection === ORIENTATIONS.Y) { image = this.imagesY[this.activeImageY - 1]; } + if (this.modeXY) { + const imageIndex = this.activeImageXModeXY + this.activeImageYModeXY * this.amountX; + image = this.imagesXY[imageIndex]; + } if (!image) return; @@ -1284,12 +1398,13 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; init(container, update = false) { let { - folder, apiVersion,filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow, + modeXY, folder, apiVersion,filenameX, filenameXY, filenameY, imageListX, imageListXY, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow, autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, pointerZoom, ratio, imageInfo = 'black' } = get360ViewProps(container); const ciParams = { ciToken, ciFilters, ciTransformation }; + this.modeXY = modeXY; this.folder = folder; this.apiVersion = apiVersion; this.filenameX = filenameX; @@ -1302,6 +1417,8 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; this.allowSpinY = (!!this.amountY); this.activeImageX = autoplayReverse ? this.amountX : 1; this.activeImageY = autoplayReverse ? this.amountY : 1; + this.activeImageXModeXY = 0; + this.activeImageYModeXY = 0; this.spinY = (autoplayBehavior === AUTOPLAY_BEHAVIOR.SPIN_YX) ? true : false; this.bottomCircle = bottomCircle; this.bottomCircleOffset = bottomCircleOffset; @@ -1387,6 +1504,25 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; fullscreen: this.fullscreenView, } + this.srcXYConfig = { + x: 0, + y: 0, + folder, + filename: filenameXY, + imageList: imageListXY, + container, + innerBox: this.innerBox, + apiVersion, + ciParams, + lazySelector, + amountX: this.amountX, + amountY: this.amountY, + amount: this.amountX * this.amountY, + indexZeroBase, + fullscreen: this.fullscreenView, + modeXY: true, + } + this.srcYConfig = { ...this.srcXConfig, filename: filenameY, @@ -1396,21 +1532,30 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; } const srcX = generateImagesPath(this.srcXConfig); + const srcXY = generateImagesPath(this.srcXYConfig); const onImageLoad = (orientation, image, index) => { - if (orientation !== ORIENTATIONS.Y) { - this.imagesX[index] = image; + if (orientation === ORIENTATIONS.XY) { + this.imagesXY[index] = image; + } else if (orientation !== ORIENTATIONS.Y) { + this.imagesX[index] = image; } else { this.imagesY[index] = image; } const loadedXImages = this.imagesX.filter(image => image); const loadedYImages = this.imagesY.filter(image => image); + const loadedXYImages = this.imagesXY.filter(image => image); - const totalAmount = this.amountX + this.amountY; - const totalLoadedImages = loadedXImages.length + loadedYImages.length; + let totalAmount; + if (orientation === ORIENTATIONS.XY) { + totalAmount = this.amountX * this.amountY; + } else { + totalAmount = this.amountX + this.amountY; + } + const totalLoadedImages = loadedXImages.length + loadedYImages.length + loadedXYImages.length; - const isFirstImageLoaded = !index && orientation !== ORIENTATIONS.Y; + let isFirstImageLoaded = !index && orientation !== ORIENTATIONS.Y; const percentage = Math.round(totalLoadedImages / totalAmount * 100); this.updatePercentageInLoader(percentage); @@ -1425,21 +1570,30 @@ import { togglePopupEvents } from './utils/hotspots/toggle-popup-events'; } const loadImages = () => { - preloadImages( - this.srcXConfig, - srcX, - (onImageLoad.bind(this, ORIENTATIONS.X)) - ); - - if (this.allowSpinY) { - const srcY = generateImagesPath(this.srcYConfig); - + if (this.modeXY) { + preloadImages( + this.srcXYConfig, + srcXY, + (onImageLoad.bind(this, ORIENTATIONS.XY)) + ); + } else { preloadImages( - this.srcYConfig, - srcY, - onImageLoad.bind(this, ORIENTATIONS.Y) + this.srcXConfig, + srcX, + (onImageLoad.bind(this, ORIENTATIONS.X)) ); + + if (this.allowSpinY) { + const srcY = generateImagesPath(this.srcYConfig); + + preloadImages( + this.srcYConfig, + srcY, + onImageLoad.bind(this, ORIENTATIONS.Y) + ); + } } + } if (lazyload) { diff --git a/src/ci360.utils.js b/src/ci360.utils.js index 79d59ba..89a2ca8 100644 --- a/src/ci360.utils.js +++ b/src/ci360.utils.js @@ -9,7 +9,10 @@ const get360ViewProps = (image) => ({ || 'image-{index}.jpg', filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg', + filenameXY: attr(image, 'filename-xy') || + attr(image, 'data-filename-xy') || 'image-{y}-{x}.jpg', imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null, + imageListXY: attr(image, 'image-list-xy') || attr(image, 'data-image-list-xy') || null, imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null, indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10), amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') @@ -23,6 +26,7 @@ const get360ViewProps = (image) => ({ keysReverse: isTrue(image, 'keys-reverse'), boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'), autoplay: isTrue(image, 'autoplay'), + modeXY: isTrue(image, 'mode-xy'), autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || AUTOPLAY_BEHAVIOR.SPIN_X, diff --git a/src/constants/orientations.js b/src/constants/orientations.js index 4d59489..781c800 100644 --- a/src/constants/orientations.js +++ b/src/constants/orientations.js @@ -1,5 +1,6 @@ export const ORIENTATIONS = { X: 'x-axis', Y: 'y-axis', + XY: 'xy-axis', CENTER: 'center', }; diff --git a/src/utils/load-images/images-from-folder/prepare-images-from-folder.js b/src/utils/load-images/images-from-folder/prepare-images-from-folder.js index 2131a13..ab277cf 100644 --- a/src/utils/load-images/images-from-folder/prepare-images-from-folder.js +++ b/src/utils/load-images/images-from-folder/prepare-images-from-folder.js @@ -6,7 +6,16 @@ export const prepareImagesFromFolder = (imagesSrc, srcConfig, loadOriginalImages return [...new Array(amount)].map((_item, index) => { const nextZeroFilledIndex = pad(index + 1, indexZeroBase); - const imageSrc = imagesSrc.replace('{index}', nextZeroFilledIndex); + let imageSrc; + if (srcConfig.modeXY) { + const x = index % srcConfig.amountX; + const y = Math.floor(index / srcConfig.amountX); + imageSrc = imagesSrc; + imageSrc = imageSrc.replace('{x}', x); + imageSrc = imageSrc.replace('{y}', y); + } else { + imageSrc = imagesSrc.replace('{index}', nextZeroFilledIndex); + } if (loadOriginalImages) { const imageOriginalSrc = imageSrc