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

Comparing version 2.1.0 to 2.3.0

dist/ci360.service.js

@@ -31,3 +31,3 @@ 'use strict';
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
-
+    this.id = container.id;
     this.init(container);
@@ -231,3 +231,3 @@ }
       } else {
-        this.activeImage = (this.activeImage + itemsSkipped) % this.amount || 1;
+        this.activeImage = (this.activeImage + itemsSkipped) % this.amount || this.amount;
       }
@@ -488,3 +488,4 @@ }
 
-      var src = '' + this.folder + this.filename.replace('{index}', this.activeImage);
+      var nextZeroFilledIndex = (0, _ci.pad)(this.activeImage, this.indexZeroBase);
+      var src = '' + this.folder + this.filename.replace('{index}', nextZeroFilledIndex);
       var image = new Image();
@@ -624,3 +625,8 @@
     key: 'getSrc',
-    value: function getSrc(responsive, container, folder, filename, ciSize, ciToken, ciOperation, ciFilters) {
+    value: function getSrc(responsive, container, folder, filename, _ref) {
+      var ciSize = _ref.ciSize,
+          ciToken = _ref.ciToken,
+          ciOperation = _ref.ciOperation,
+          ciFilters = _ref.ciFilters;
+
       var src = '' + folder + filename;
@@ -648,29 +654,50 @@
     key: 'preloadImages',
-    value: function preloadImages(amount, src, lazyload, lazySelector) {
+    value: function preloadImages(amount, src, lazyload, lazySelector, container, responsive, ciParams) {
       var _this4 = this;
 
-      [].concat(_toConsumableArray(new Array(amount))).map(function (item, index) {
-        var image = new Image();
-        var resultSrc = src.replace('{index}', index + 1);
+      if (this.imageList) {
+        try {
+          var images = JSON.parse(this.imageList);
 
-        if (lazyload && !_this4.fullScreenView) {
-          image.setAttribute('data-src', resultSrc);
-          image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
+          this.amount = images.length;
+          images.forEach(function (src) {
+            var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this4.folder;
+            var resultSrc = _this4.getSrc(responsive, container, folder, src, ciParams);
 
-          if (index === 0) {
-            _this4.lazyloadInitImage = image;
-            image.style.position = 'absolute';
-            image.style.top = '0';
-            image.style.left = '0';
-            _this4.innerBox.appendChild(image);
-          }
-        } else {
-          image.src = resultSrc;
+            _this4.addImage(resultSrc, lazyload, lazySelector);
+          });
+        } catch (error) {
+          console.error('Wrong format in image-list attribute: ' + error.message);
         }
+      } else {
+        [].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
+          var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this4.indexZeroBase);
+          var resultSrc = src.replace('{index}', nextZeroFilledIndex);
+          _this4.addImage(resultSrc, lazyload, lazySelector);
+        });
+      }
+    }
+  }, {
+    key: 'addImage',
+    value: function addImage(resultSrc, lazyload, lazySelector) {
+      var image = new Image();
 
-        image.onload = _this4.onImageLoad.bind(_this4);
-        image.onerror = _this4.onImageLoad.bind(_this4);
+      if (lazyload && !this.fullScreenView) {
+        image.setAttribute('data-src', resultSrc);
+        image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
 
-        _this4.images.push(image);
-      });
+        if (index === 0) {
+          this.lazyloadInitImage = image;
+          image.style.position = 'absolute';
+          image.style.top = '0';
+          image.style.left = '0';
+          this.innerBox.appendChild(image);
+        }
+      } else {
+        image.src = resultSrc;
+      }
+
+      image.onload = this.onImageLoad.bind(this);
+      image.onerror = this.onImageLoad.bind(this);
+      this.images.push(image);
     }
@@ -811,2 +838,4 @@ }, {
           filename = _get360ViewProps.filename,
+          imageList = _get360ViewProps.imageList,
+          indexZeroBase = _get360ViewProps.indexZeroBase,
           amount = _get360ViewProps.amount,
@@ -839,2 +868,4 @@ _get360ViewProps$drag = _get360ViewProps.draggable,
 
+      var ciParams = { ciSize: ciSize, ciToken: ciToken, ciOperation: ciOperation, ciFilters: ciFilters };
+
       this.addInnerBox();
@@ -845,2 +876,4 @@ this.addLoader();
       this.filename = filename;
+      this.imageList = imageList;
+      this.indexZeroBase = indexZeroBase;
       this.amount = amount;
@@ -867,5 +900,5 @@ this.bottomCircle = bottomCircle;
 
-      var src = this.getSrc(responsive, container, folder, filename, ciSize, ciToken, ciOperation, ciFilters);
+      var src = this.getSrc(responsive, container, folder, filename, ciParams);
 
-      this.preloadImages(amount, src, lazyload, lazySelector);
+      this.preloadImages(amount, src, lazyload, lazySelector, container, responsive, ciParams);
 
@@ -872,0 +905,0 @@ this.attachEvents(draggable, swipeable, keys);

dist/ci360.utils.js

@@ -10,2 +10,4 @@ 'use strict';
     filename: attr(image, 'filename') || attr(image, 'data-filename') || 'image-{index}.jpg',
+    imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
+    indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
     amount: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || 36, 10),
@@ -292,2 +294,10 @@ speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
 
+var pad = function pad(n) {
+  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  n = n + '';
+
+  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
+};
+
 exports.get360ViewProps = get360ViewProps;
@@ -308,2 +318,3 @@ exports.set360ViewIconStyles = set360ViewIconStyles;
 exports.addClass = addClass;
-exports.removeClass = removeClass;
+exports.removeClass = removeClass;
+exports.pad = pad;

dist/index.js

@@ -27,5 +27,5 @@ 'use strict';
 function destroy() {
-  if (!(window.CI360._viewers && window.CI360._viewers.length > 0)) return;
+  if (isNoViewers()) return;
 
-  [].slice.call(window.CI360._viewers).forEach(function (viewer) {
+  window.CI360._viewers.forEach(function (viewer) {
     viewer.destroy();
@@ -37,5 +37,20 @@ });
 
+function getActiveIndexByID(id) {
+  if (isNoViewers()) return;
+
+  var currentViewer = window.CI360._viewers.filter(function (viewer) {
+    return viewer.id === id;
+  })[0];
+
+  return currentViewer && currentViewer.activeImage;
+}
+
+function isNoViewers() {
+  return !(window.CI360._viewers && window.CI360._viewers.length > 0);
+}
+
 window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
+window.CI360.getActiveIndexByID = getActiveIndexByID;
 
@@ -42,0 +57,0 @@ if (!window.CI360.notInitOnLoad) {

package.json

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

README.md

@@ -1,2 +0,2 @@
-[![Release](https://img.shields.io/badge/release-v2.1.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.3.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
@@ -71,3 +71,3 @@ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.1.0/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.3.0/js-cloudimage-360-view.min.js"></script>
 ```
@@ -120,3 +120,3 @@
 
-Destroy cloudimage 360 viewer instances.
+Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
 
@@ -126,2 +126,4 @@ ```javascript
 ```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-initdestroy-y1il9">
+	<img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
@@ -238,2 +240,26 @@ ## <a name="configuration"></a> Config
 
+### data-index-zero-base (or index-zero-base)
+
+###### Type: **Number** | _optional_
+
+Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
+
+### data-image-list (or image-list)
+
+###### Type: **Array** | _optional_
+
+Option to add list of images instead of `folder` & `filename`.
+
+example:
+
+```javascript
+data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-image-list='[
+   "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"
+   ]’
+```
+
 ### data-lazyload (or lazyload)
@@ -240,0 +266,0 @@

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

Lines of code

1066

increased by4.92%

Number of lines in readme file

420

increased by6.6%

Worsened metrics

Total package byte prevSize

59117

decreased by-5.22%

Number of package files

6

decreased by-14.29%

No dependency changes