js-cloudimage-360-view - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

CHANGELOG.md

@@ -28,2 +28,6 @@ # Changelog
 -------------
+## 3.0.2 - 2022-04-05
+### Changed
+- documentation
+
 ## 3.0.1 - 2022-03-28
@@ -30,0 +34,0 @@ ### Changed

dist/ci360.utils.js

@@ -48,3 +48,3 @@ "use strict";
     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'),
@@ -51,0 +51,0 @@ imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')

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

@@ -10,3 +10,3 @@ "use strict";
   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, "%");
@@ -13,0 +13,0 @@ view360CircleIcon.className = 'cloudimage-360-view-360-circle';

package.json

 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "description": "",

README.md

@@ -1,3 +0,4 @@
-
-[![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)
@@ -9,3 +10,3 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 <p align="center">
-<img
+			<img
 			alt="cloudimage logo"
@@ -25,3 +26,3 @@ src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 		•
-		<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>
 		•
@@ -49,2 +50,3 @@ <a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
 * [Controls](#controls)
+* [Spin in X and Y axis](#spin_x_y)
 * [Hotspots](#hotspots)
@@ -88,3 +90,3 @@ * [Cloudimage responsive integration](#cloudimage-responsive-integration)
 
-<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>
 
@@ -122,2 +124,4 @@ ## <a name="methods"></a> Methods
 
+<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
@@ -155,2 +159,4 @@
 
+<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
@@ -165,3 +171,3 @@
 ```
-<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>
@@ -200,6 +206,6 @@
 .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;
 }
@@ -213,3 +219,3 @@ .cloudimage-360-view-360-circle {
 .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;
 }
@@ -264,3 +270,3 @@ .cloudimage-360-box-shadow {
 
-### <a name="data-amount-x"></a> data-amount-x (or amount-x)
+### data-amount-x (or amount-x)
 ###### Type: **Number** | Default: **36** | _optional_
@@ -270,3 +276,3 @@
 
-### <a name="data-amount-y"></a> data-amount-y (or amount-y)
+### data-amount-y (or amount-y)
 
@@ -336,3 +342,3 @@ ###### Type: **Number** | Default: **0** | _optional_
 ```
-<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
@@ -360,3 +366,3 @@ Setting the height relative to the container width at any window size.
 ```
-<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>
 
@@ -443,8 +449,8 @@ ### data-autoplay-reverse (or autoplay-reverse)
 ```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"
    ]’
@@ -462,8 +468,8 @@ ```
 ```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"
    ]’
@@ -497,3 +503,3 @@ ```
 
-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
 
@@ -547,3 +553,3 @@ ### Example CSS
 	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"
@@ -558,3 +564,27 @@ >
 
-<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
@@ -704,3 +734,3 @@ Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
 ```
-<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>
 
@@ -764,7 +794,7 @@ ### data-responsive (or responsive)
 
-[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)
 
@@ -771,0 +801,0 @@ ## <a name="best-practices"/> Best practices

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

180561

increased by0.94%

Number of lines in readme file

807

increased by3.86%

No dependency changes