js-cloudimage-360-view 2.7.4 → 2.7.5

package/CHANGELOG.md

@@ -25,6 +25,14 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.5 - 2022-01-08
+### Added
+- update method to re-render or re-init the plugin
+### Fixed
+- drag speed on mobile
+- error when drag speed is too high
+- error in dependencies
+
 ## 2.7.4 - 2022-01-26
 ### Fixed
 - typo in documentation file

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.4-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.5-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![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%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -6,11 +6,16 @@
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)
 
 <p align="center">
-	<a href="https://www.cloudimage.io/">
+	<a href="https://www.cloudimage.io/#gh-light-mode-only">
 		<img
 			alt="The Lounge"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 	</a>
+		<a href="https://www.cloudimage.io/#gh-dark-mode-only">
+		<img
+			alt="The Lounge"
+			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
+	</a>
 </p>
 
 <h1 align="center">
@@ -70,7 +75,7 @@ To see the Cloudimage 360 view plugin in action, please check out the
 Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.4/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.5/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -107,6 +112,36 @@ window.CI360.init();
 > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
+### update
+
+###### Type: **Function**
+```javascript
+window.CI360.update(idOfInstance, forceUpdate);
+```
+Update cloudimage 360 viewer instance.<br/>
+For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`),
+the plugin will re-init.
+### Properties
+#### `idOfInstance`: string
+The id of the instance
+
+```html
+<div
+   id="cloudimage-360-car"
+   class="cloudimage-360"
+   data-folder="https://scaleflex.airstore.io/demo/360-car/"
+   data-filename-x="iris-{index}.jpeg"
+   data-amount-x="36"
+></div>
+```
+```javascript
+window.CI360.update('cloudimage-360-car');
+```
+#### `forceUpdate`: bool
+Force the plugin to re-init.
+```javascript
+window.CI360.update(null, true);
+```
 
 ### destroy
 
@@ -127,8 +162,15 @@ window.CI360.destroy();
 Get the {index} of the image that is being viewed.
 
 ```javascript
-window.CI360.getActiveIndexByID('id_of_product', oriantation = 'x');
+window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);
 ```
+### Properties
+#### `idOfInstance`: string
+The id of the instance
+
+#### `oriantation`: string
+The oriantation of the active index
+
 ## <a name="customize-elements"></a> Customize elements
 
 You can customize elements by adding the following classes:

package/dist/ci360.service.js

@@ -175,6 +175,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.pointerZoom && this.mouseTracked) {
         this.togglePointerZoom();
       }
+
+      if (this.isMagnifyOpen) {
+        this.closeMagnifier();
+      }
     }
   }, {
     key: "togglePointerZoom",
@@ -302,11 +306,16 @@ var CI360Viewer = /*#__PURE__*/function () {
     key: "touchMove",
     value: function touchMove(event) {
       if (!this.isClicked || !this.imagesLoaded) return;
+
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
       var nextPositions = {
         x: event.touches[0].clientX,
         y: event.touches[0].clientY
       };
-      this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions);
+      this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
       this.onMoveHandler(event);
     }
   }, {
@@ -927,6 +936,21 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.bottomCircle) this.show360ViewCircleIcon();
       window.clearTimeout(this.loopTimeoutId);
     }
+  }, {
+    key: "updatePlugin",
+    value: function updatePlugin(forceUpdate) {
+      var container = this.container;
+      var imageProps = (0, _ci.get360ViewProps)(container);
+      var srcPropsChanged = (0, _utils.isSrcPropsChanged)(this, imageProps);
+      var reloadPlugin = srcPropsChanged || forceUpdate;
+      container.style.position = 'relative';
+      container.style.width = '100%';
+      container.style.cursor = 'default';
+      container.setAttribute('draggable', 'false');
+      if (reloadPlugin) container.innerHTML = '';
+      this.stop();
+      this.init(container, !reloadPlugin, reloadPlugin);
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -1133,9 +1157,7 @@ var CI360Viewer = /*#__PURE__*/function () {
           passive: true
         });
         this.container.addEventListener('touchend', this.touchEnd.bind(this));
-        this.container.addEventListener('touchmove', this.touchMove.bind(this), {
-          passive: true
-        });
+        this.container.addEventListener('touchmove', this.touchMove.bind(this));
       }
 
       if (keys) {
@@ -1150,6 +1172,9 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function init(container) {
       var _this6 = this;
 
+      var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var reload = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
           folder = _get360ViewProps.folder,
           apiVersion = _get360ViewProps.apiVersion,
@@ -1160,7 +1185,6 @@ var CI360Viewer = /*#__PURE__*/function () {
           indexZeroBase = _get360ViewProps.indexZeroBase,
           amountX = _get360ViewProps.amountX,
           amountY = _get360ViewProps.amountY,
-          imageOffset = _get360ViewProps.imageOffset,
           _get360ViewProps$drag = _get360ViewProps.draggable,
           draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
           _get360ViewProps$swip = _get360ViewProps.swipeable,
@@ -1212,7 +1236,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.activeImageX = autoplayReverse ? this.amountX : 1;
       this.activeImageY = autoplayReverse ? this.amountY : 1;
       this.spinY = autoplayBehavior === _constants.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
-      this.imageOffset = imageOffset;
       this.bottomCircle = bottomCircle;
       this.bottomCircleOffset = bottomCircleOffset;
       this.boxShadow = boxShadow;
@@ -1223,13 +1246,13 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.reversed = autoplayReverse;
       this.disableDrag = disableDrag;
       this.fullscreen = fullscreen;
-      this.magnifier = !this.isMobile && magnifier ? magnifier : false;
+      this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
       this.lazyloadX = lazyload;
       this.lazyloadY = lazyload;
       this.lazySelector = lazySelector;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
-      this.dragSpeed = dragSpeed;
+      this.dragSpeed = Math.max(magnifier, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
@@ -1240,6 +1263,17 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.containerHeight = containerHeight;
       this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
       this.keysReverse = keysReverse;
+
+      if (reload) {
+        new CI360Viewer(this.container);
+        return;
+      }
+
+      if (update) {
+        this.onAllImagesLoaded();
+        return;
+      }
+
       this.innerBox = (0, _utils.createInnerBox)(this.container);
       this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
       this.canvas = (0, _utils.createCanvas)(this.innerBox);

package/dist/ci360.utils.js

@@ -21,7 +21,6 @@ var get360ViewProps = function get360ViewProps(image) {
     indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
     amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),
     amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10),
-    imageOffset: parseInt(attr(image, 'image-offset') || attr(image, 'data-image-offset')),
     speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
     dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
     keys: isTrue(image, 'keys'),
@@ -35,7 +34,7 @@ var get360ViewProps = function get360ViewProps(image) {
     bottomCircle: isTrue(image, 'bottom-circle'),
     disableDrag: isTrue(image, 'disable-drag'),
     fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
-    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
+    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
     bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
     ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),

package/dist/constants/image-src-props.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_SRC_PROPS = void 0;
+var IMAGE_SRC_PROPS = ['folder', 'filenameX', 'filenameY', 'apiVersion', 'imageListX', 'imageListY', 'indexZeroBase', 'amountX', 'amountY', 'lazySelector'];
+exports.IMAGE_SRC_PROPS = IMAGE_SRC_PROPS;

package/dist/index.js

@@ -43,6 +43,27 @@ function getActiveIndexByID(id, oriantation) {
   return currentViewer && currentViewer.activeImageX - 1;
 }
 
+function update() {
+  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (id) {
+    try {
+      var view = window.CI360._viewers.filter(function (viewer) {
+        return viewer.id === id;
+      })[0];
+
+      return view.updatePlugin(forceUpdate);
+    } catch (_unused) {
+      console.error("Cloudimage-360: there is no view with such id '".concat(id, "'"));
+    }
+  }
+
+  return window.CI360._viewers.forEach(function (viewer) {
+    viewer.updatePlugin(forceUpdate);
+  });
+}
+
 function isNoViewers() {
   return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 }
@@ -51,6 +72,7 @@ window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
+window.CI360.update = update;
 
 if (!window.CI360.notInitOnLoad) {
   init();

package/dist/utils/image-src/is-src-props-changed.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSrcPropsChanged = void 0;
+
+var _imageSrcProps = require("../../constants/image-src-props");
+
+var isSrcPropsChanged = function isSrcPropsChanged(currentProps, changedProps) {
+  return Object.keys(changedProps).reduce(function (acc, current) {
+    var isPropChanged = currentProps[current] !== changedProps[current];
+    var isSrcProp = _imageSrcProps.IMAGE_SRC_PROPS.indexOf(current) !== -1;
+
+    if (isSrcProp && isPropChanged) {
+      acc = true;
+    }
+
+    return acc;
+  }, false);
+};
+
+exports.isSrcPropsChanged = isSrcPropsChanged;

package/dist/utils/index.js

@@ -26,7 +26,8 @@ var _exportNames = {
   createHotspots: true,
   generateHotspotsConfigs: true,
   isMouseOnHotspot: true,
-  hideHotspotsIcons: true
+  hideHotspotsIcons: true,
+  isSrcPropsChanged: true
 };
 Object.defineProperty(exports, "addClass", {
   enumerable: true,
@@ -130,6 +131,12 @@ Object.defineProperty(exports, "isMouseOnHotspot", {
     return _isMouseOnHotspot.isMouseOnHotspot;
   }
 });
+Object.defineProperty(exports, "isSrcPropsChanged", {
+  enumerable: true,
+  get: function get() {
+    return _isSrcPropsChanged.isSrcPropsChanged;
+  }
+});
 Object.defineProperty(exports, "loop", {
   enumerable: true,
   get: function get() {
@@ -225,4 +232,6 @@ var _generateHotspotsConfigs = require("./hotspot/generate-hotspots-configs");
 
 var _isMouseOnHotspot = require("./hotspot/is-mouse-on-hotspot");
 
-var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");
+var _hideHotspotsIcons = require("./hotspot/hide-hotspots-icons");
+
+var _isSrcPropsChanged = require("./image-src/is-src-props-changed");

package/dist/utils/spin-y/get-moving-direction.js

@@ -8,7 +8,7 @@ exports.getMovingDirection = void 0;
 var _orientations = require("../../constants/orientations");
 
 var getMovingDirection = function getMovingDirection(isStartSpin, allowSpinY, prevPosition, nextPositions, currentMovingDirection) {
-  var movingDirection;
+  var movingDirection = _orientations.ORIENTATIONS.CENTER;
   if (isStartSpin) return currentMovingDirection;
   var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
   var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -33,6 +33,7 @@
     "publish-demo": "npm run build-demo && npm run deploy-demo"
   },
   "dependencies": {
+    "@babel/runtime": "^7.17.0",
     "@popperjs/core": "^2.11.2",
     "core-js": "^3.0.0"
   },