js-cloudimage-360-view 3.0.1 → 3.0.2

package/CHANGELOG.md

@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 3.0.2 - 2022-04-05
+### Changed
+- documentation
+
 ## 3.0.1 - 2022-03-28
 ### Changed
 - hotspots icons

package/README.md

@@ -1,12 +1,13 @@
-
-[![Release](https://img.shields.io/badge/release-v3.0.1-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)
+[![Download](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
 [![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
 
 <p align="center">
-<img
+			<img
 			alt="cloudimage logo"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 </p>
@@ -21,7 +22,7 @@
 		•
 		<a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
 		•
-		<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html" target="_blank">Code Sandbox</a>
+		<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18" target="_blank">Code Sandbox</a>
 		•
 		<a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
 		•
@@ -44,6 +45,7 @@
 * [Customize elements](#customize-elements)
 * [Configuration](#configuration)
 * [Controls](#controls)
+* [Spin in X and Y axis](#spin_x_y)
 * [Hotspots](#hotspots)
 * [Cloudimage responsive integration](#cloudimage-responsive-integration)
 * [Lazy loading integration](#lazy-loading)
@@ -82,7 +84,7 @@ After adding the js-cloudimage-360-view lib, simply initialize it with **class n
 ></div>
 ```
 
-<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-example-l7ce4h"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ## <a name="methods"></a> Methods
 
@@ -115,6 +117,8 @@ lazy init cloudimage-360 view by id.
 #### `idOftheView`: string
 The id of the new view
 
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-vxlmoi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
 ### update
 
 ###### Type: **Function**
@@ -147,6 +151,8 @@ window.CI360.update('gurkha-suv');
 window.CI360.update(null, true);
 ```
 
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-n7m04e"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
 ### destroy
 
 ###### Type: **Function**
@@ -156,7 +162,7 @@ Destroying a cloudimage 360 viewer instance will reset the HTML to its original
 ```javascript
 window.CI360.destroy();
 ```
-<a href="https://codesandbox.io/s/js-cloudimage-360-view-initdestroy-y1il9">
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-03pb2t">
 	<img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### getActiveIndexByID
@@ -190,10 +196,10 @@ You can customize elements by adding the following classes:
   	bottom: 0;
 }
 .cloudimage-360-magnifier-icon {
-	background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
 }
 .cloudimage-360-close-fullscreen-icon {
-	background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
 }
 .cloudimage-360-view-360-circle {
   	margin: auto;
@@ -202,7 +208,7 @@ You can customize elements by adding the following classes:
 	margin: auto;
 }
 .cloudimage-360-view-360-icon {
-	background: url(hhttps://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
 }
 .cloudimage-360-box-shadow {
 	top: 0;
@@ -252,12 +258,12 @@ The filename pattern for your 360 image. Must include {index}, which the library
 ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
 The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
 
-### <a name="data-amount-x"></a> data-amount-x (or amount-x)
+### data-amount-x (or amount-x)
 ###### Type: **Number** | Default: **36** | _optional_
 
 Amount of images to load in X-axis for 360 view .
 
-### <a name="data-amount-y"></a> data-amount-y (or amount-y)
+### data-amount-y (or amount-y)
 
 ###### Type: **Number** | Default: **0** | _optional_
 
@@ -322,7 +328,7 @@ Setting the height relative to the container width according to the provided rat
    data-ratio="2"
 ></div>
 ```
-<a href="https://codesandbox.io/s/js-cloudimage-360-view-g4wyt1?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-865iz5"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 #### `ratio`: JSON
 Setting the height relative to the container width at any window size.
 
@@ -345,7 +351,7 @@ and 2.22 at window size less than or equal to 768px.
    }'
 ></div>
 ```
-<a href="https://codesandbox.io/s/js-cloudimage-360-view-5tssb7?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-xzx8no"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### data-autoplay-reverse (or autoplay-reverse)
 
@@ -427,12 +433,12 @@ Option to add list of images in x-oriantation instead of `folder` , `filename-x`
 example:
 
 ```javascript
-data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
 data-image-list-x='[
    "iris-1.jpeg",
    "iris-4.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg",
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg"
    ]’
 ```
 
@@ -445,12 +451,12 @@ Option to add list of images in y-oriantation instead of `folder` , `filename-y`
 example:
 
 ```javascript
-data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
 data-image-list-y='[
    "iris-2-y.jpeg",
    "iris-6-y.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-8-y.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-30-y.jpeg"
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg",
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg"
    ]’
 ```
 ### data-pointer-zoom (or pointer-zoom)
@@ -479,7 +485,7 @@ Helper class to apply lazy-loading depending on library you choose, see [Lazy lo
 
 ## <a name="controls"></a> Controls
 
-You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom 
+You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom
 
 ### Example CSS
 ```css
@@ -528,7 +534,7 @@ You can add controls by adding elements with the following classes: **cloudimage
 ```html
 <div
 	class="cloudimage-360"
-	data-folder="https://scaleflex.airstore.io/demo/indoor/"
+	data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
 	data-filename-x="{index}.jpeg"
 >
 	<button class="cloudimage-360-left"></button>
@@ -538,7 +544,31 @@ You can add controls by adding elements with the following classes: **cloudimage
 </div>
 ```
 
-<a href="https://codesandbox.io/s/js-cloudimage-360-view-361eb?fontsize=14"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+## <a name="spin_x_y"/> Spin in X and Y axes
+Allow the view to spin in both X, Y axes
+### Requirements
+We need to provide the `file-name` of the y-axis images using <a href="#data-filename-y-or-filename-y">data-filename-y</a>
+
+Also as we did for the x-axis if we are intializing the view using <a href="#data-folder-or-folder">data-folder</a> and <a href="#data-filename-y-or-filename-y">data-filename-y</a>
+so we need to provide <a href="#data-amount-y-or-amount-y">data-amount-y</a> which indicates the number of images on the y-axis.
+example:
+
+```javascript
+<div
+   class="cloudimage-360"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
+   data-filename-x="nike-{index}.jpg"
+   data-filename-y="nike-y-{index}.jpg"
+   data-amount-x="35"
+   data-amount-y="36"
+>
+</div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-wc9j12?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a></br>
+> Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.</br>
+Just we need to provide the <a href="#data-amount-y-or-amount-y">data-amount-y</a>
 ## <a name="hotspots"/> Hotspots or Markers
 Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
 ### Requirements
@@ -683,7 +713,7 @@ example:
 ```js
 window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);
 ```
-<a href="https://codesandbox.io/s/competent-bogdan-49b0u6?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/competent-bogdan-49b0u6"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### data-responsive (or responsive)
 
@@ -742,11 +772,11 @@ data-filters="bright:15,contrast:30"
 
 Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like [lazysizes](https://github.com/aFarkas/lazysizes), [yall.js (Yet Another Lazy Loader)](https://github.com/malchata/yall.js), [lozad.js](https://github.com/ApoorvSaxena/lozad.js) to handle it.
 
-[Implementation example with lazysizes](https://codesandbox.io/s/w7vx5w1ln7?fontsize=14)
+[Implementation example with lazysizes](https://codesandbox.io/s/js-cloudimage-360-view-examples-ux850x)
 
-[Implementation example with yall.js](https://codesandbox.io/s/ym2xrk87xv?fontsize=14)
+[Implementation example with yall.js](https://codesandbox.io/s/js-cloudimage-360-view-xjpdg1)
 
-[Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
+[Implementation example with lozad.js](https://codesandbox.io/s/js-cloudimage-360-view-examples-8iukcn)
 
 ## <a name="best-practices"/> Best practices
 

package/dist/ci360.utils.js

@@ -45,7 +45,7 @@ var get360ViewProps = function get360ViewProps(image) {
     controlReverse: isTrue(image, 'control-reverse'),
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
-    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
+    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg',
     ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
     imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };

package/dist/static/css/style.css

@@ -15,7 +15,7 @@
   height: 25px;
   margin-bottom: 5px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-fullscreen-icon {
@@ -23,7 +23,7 @@
   height: 25px;
   margin-bottom: 5px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-reset-zoom-icon {
@@ -39,7 +39,7 @@
   width: 25px;
   height: 25px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-loader {

package/dist/utils/container-elements/create-360-view-circle-icon.js

@@ -7,7 +7,7 @@ exports.create360ViewCircleIcon = void 0;
 
 var create360ViewCircleIcon = function create360ViewCircleIcon(circleOffset) {
   var view360CircleIcon = new Image();
-  view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
+  view360CircleIcon.src = 'https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg';
   view360CircleIcon.style.bottom = "".concat(circleOffset, "%");
   view360CircleIcon.className = 'cloudimage-360-view-360-circle';
   return view360CircleIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",