js-cloudimage-360-view 2.7.2-beta.7 → 2.7.5

package/dist/ci360.service.js

@@ -15,11 +15,11 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _ci = require("./ci360.utils");
 
-var _ci2 = require("./ci360.constants");
+var _constants = require("./constants/");
 
 require("./static/css/style.css");
 
-var _jsCloudimage360ViewUtils = require("js-cloudimage-360-view-utils");
+var _utils = require("./utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -34,7 +34,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       y: 0
     };
     this.isStartSpin = false;
-    this.movingDirection = _ci2.ORIENTATIONS.CENTER;
+    this.movingDirection = _constants.ORIENTATIONS.CENTER;
     this.isClicked = false;
     this.loadedImagesX = 0;
     this.loadedImagesY = 0;
@@ -163,7 +163,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         };
         this.container.style.cursor = 'grabbing';
         this.isDragged = true;
-        this.movingDirection = (0, _jsCloudimage360ViewUtils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
+        this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
         this.onMoveHandler(event);
       }
     }
@@ -175,6 +175,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.pointerZoom && this.mouseTracked) {
         this.togglePointerZoom();
       }
+
+      if (this.isMagnifyOpen) {
+        this.closeMagnifier();
+      }
     }
   }, {
     key: "togglePointerZoom",
@@ -187,7 +191,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.mouseTracked) {
-        var zoomSteps = (0, _jsCloudimage360ViewUtils.generateZoomOutSteps)(this.pointerZoom);
+        var zoomSteps = (0, _utils.generateZoomOutSteps)(this.pointerZoom);
         this.container.style.cursor = 'zoom-in';
         zoomSteps.forEach(function (step, index) {
           setTimeout(function () {
@@ -209,7 +213,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       } else {
         if (this.bottomCircle) this.hide360ViewCircleIcon();
 
-        var _zoomSteps = (0, _jsCloudimage360ViewUtils.generateZoomInSteps)(this.pointerZoom);
+        var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
 
         _zoomSteps.forEach(function (step) {
           setTimeout(function () {
@@ -226,7 +230,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "onOriginalImageLoad",
     value: function onOriginalImageLoad(orientation, event, image, index) {
-      if (orientation === _ci2.ORIENTATIONS.Y) {
+      if (orientation === _constants.ORIENTATIONS.Y) {
         this.originalImagesY[index] = image;
       } else {
         this.originalImagesX[index] = image;
@@ -254,15 +258,15 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "prepareOriginalImages",
     value: function prepareOriginalImages(event) {
-      var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
       this.isStartedLoadOriginalImages = true;
-      this.loader = (0, _jsCloudimage360ViewUtils.createLoader)(this.innerBox);
+      this.loader = (0, _utils.createLoader)(this.innerBox);
       this.container.style.cursor = 'wait';
-      (0, _jsCloudimage360ViewUtils.preloadOriginalImages)(this.srcXConfig, srcX, this.onOriginalImageLoad.bind(this, _ci2.ORIENTATIONS.X, event));
+      (0, _utils.preloadOriginalImages)(this.srcXConfig, srcX, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.X, event));
 
       if (this.allowSpinY) {
-        var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
-        (0, _jsCloudimage360ViewUtils.preloadOriginalImages)(this.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _ci2.ORIENTATIONS.Y, event));
+        var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
+        (0, _utils.preloadOriginalImages)(this.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
       }
     }
   }, {
@@ -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, _jsCloudimage360ViewUtils.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);
     }
   }, {
@@ -433,12 +442,12 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.activeImageX = this.amountX;
 
           if (isReverse ? this.leftElem : this.rightElem) {
-            (0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.leftElem : this.rightElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.leftElem : this.rightElem, 'not-active');
           }
         } else {
           this.activeImageX += itemsSkipped;
-          if (this.rightElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.rightElem, 'not-active');
-          if (this.leftElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.leftElem, 'not-active');
+          if (this.rightElem) (0, _utils.removeClass)(this.rightElem, 'not-active');
+          if (this.leftElem) (0, _utils.removeClass)(this.leftElem, 'not-active');
         }
       } else {
         this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX;
@@ -457,12 +466,12 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.activeImageX = 1;
 
           if (isReverse ? this.rightElem : this.leftElem) {
-            (0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
           }
         } else {
           this.activeImageX -= itemsSkipped;
-          if (this.leftElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.leftElem, 'not-active');
-          if (this.rightElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.rightElem, 'not-active');
+          if (this.leftElem) (0, _utils.removeClass)(this.leftElem, 'not-active');
+          if (this.rightElem) (0, _utils.removeClass)(this.rightElem, 'not-active');
         }
       } else {
         if (this.activeImageX - itemsSkipped < 1) {
@@ -485,12 +494,12 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.activeImageY = this.amountY;
 
           if (isReverse ? this.bottomElem : this.topElem) {
-            (0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
           }
         } else {
           this.activeImageY += itemsSkipped;
-          if (this.topElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.topElem, 'not-active');
-          if (this.bottomElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.bottomElem, 'not-active');
+          if (this.topElem) (0, _utils.removeClass)(this.topElem, 'not-active');
+          if (this.bottomElem) (0, _utils.removeClass)(this.bottomElem, 'not-active');
         }
       } else {
         this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY;
@@ -509,12 +518,12 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.activeImageY = 1;
 
           if (isReverse ? this.topElem : this.bottomElem) {
-            (0, _jsCloudimage360ViewUtils.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
           }
         } else {
           this.activeImageY -= itemsSkipped;
-          if (this.bottomElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.bottomElem, 'not-active');
-          if (this.topElem) (0, _jsCloudimage360ViewUtils.removeClass)(this.topElem, 'not-active');
+          if (this.bottomElem) (0, _utils.removeClass)(this.bottomElem, 'not-active');
+          if (this.topElem) (0, _utils.removeClass)(this.topElem, 'not-active');
         }
       } else {
         if (this.activeImageY - itemsSkipped < 1) {
@@ -528,7 +537,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "moveRight",
     value: function moveRight(currentPositionX) {
-      var itemsSkippedRight = (0, _jsCloudimage360ViewUtils.getItemSkipped)(currentPositionX, this.movementStart.x, this.speedFactor);
+      var itemsSkippedRight = (0, _utils.getItemSkipped)(currentPositionX, this.movementStart.x, this.speedFactor);
       this.spinReverse ? this.moveActiveIndexDown(itemsSkippedRight) : this.moveActiveIndexUp(itemsSkippedRight);
       this.movementStart.x = currentPositionX;
       this.activeImageY = 1;
@@ -537,7 +546,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "moveLeft",
     value: function moveLeft(currentPositionX) {
-      var itemsSkippedLeft = (0, _jsCloudimage360ViewUtils.getItemSkipped)(this.movementStart.x, currentPositionX, this.speedFactor);
+      var itemsSkippedLeft = (0, _utils.getItemSkipped)(this.movementStart.x, currentPositionX, this.speedFactor);
       this.spinReverse ? this.moveActiveIndexUp(itemsSkippedLeft) : this.moveActiveIndexDown(itemsSkippedLeft);
       this.activeImageY = 1;
       this.movementStart.x = currentPositionX;
@@ -546,7 +555,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "moveTop",
     value: function moveTop(currentPositionY) {
-      var itemsSkippedTop = (0, _jsCloudimage360ViewUtils.getItemSkipped)(this.movementStart.y, currentPositionY, this.speedFactor);
+      var itemsSkippedTop = (0, _utils.getItemSkipped)(this.movementStart.y, currentPositionY, this.speedFactor);
       this.spinReverse ? this.moveActiveYIndexUp(itemsSkippedTop) : this.moveActiveYIndexDown(itemsSkippedTop);
       this.activeImageX = 1;
       this.movementStart.y = currentPositionY;
@@ -555,7 +564,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "moveBottom",
     value: function moveBottom(currentPositionY) {
-      var itemsSkippedBottom = (0, _jsCloudimage360ViewUtils.getItemSkipped)(currentPositionY, this.movementStart.y, this.speedFactor);
+      var itemsSkippedBottom = (0, _utils.getItemSkipped)(currentPositionY, this.movementStart.y, this.speedFactor);
       this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) : this.moveActiveYIndexUp(itemsSkippedBottom);
       this.activeImageX = 1;
       this.movementStart.y = currentPositionY;
@@ -572,16 +581,16 @@ var CI360Viewer = /*#__PURE__*/function () {
       var isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor;
       if (this.bottomCircle) this.hide360ViewCircleIcon();
 
-      if (isMoveRight && this.movingDirection === _ci2.ORIENTATIONS.X) {
+      if (isMoveRight && this.movingDirection === _constants.ORIENTATIONS.X) {
         this.moveRight(currentPositionX);
         this.isStartSpin = true;
-      } else if (isMoveLeft && this.movingDirection === _ci2.ORIENTATIONS.X) {
+      } else if (isMoveLeft && this.movingDirection === _constants.ORIENTATIONS.X) {
         this.moveLeft(currentPositionX);
         this.isStartSpin = true;
-      } else if (isMoveTop && this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      } else if (isMoveTop && this.movingDirection === _constants.ORIENTATIONS.Y) {
         this.moveTop(currentPositionY);
         this.isStartSpin = true;
-      } else if (isMoveBottom && this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      } else if (isMoveBottom && this.movingDirection === _constants.ORIENTATIONS.Y) {
         this.moveBottom(currentPositionY);
         this.isStartSpin = true;
       }
@@ -589,7 +598,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "left",
     value: function left() {
-      this.movingDirection = _ci2.ORIENTATIONS.X;
+      this.movingDirection = _constants.ORIENTATIONS.X;
       this.activeImageY = this.reversed ? this.amountY : 1;
       this.moveActiveIndexDown(1);
       this.update();
@@ -597,7 +606,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "right",
     value: function right() {
-      this.movingDirection = _ci2.ORIENTATIONS.X;
+      this.movingDirection = _constants.ORIENTATIONS.X;
       this.activeImageY = this.reversed ? this.amountY : 1;
       this.moveActiveIndexUp(1);
       this.update();
@@ -605,7 +614,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "top",
     value: function top() {
-      this.movingDirection = _ci2.ORIENTATIONS.Y;
+      this.movingDirection = _constants.ORIENTATIONS.Y;
       this.activeImageX = this.reversed ? this.amountX : 1;
       this.moveActiveYIndexUp(1);
       this.update();
@@ -613,7 +622,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "bottom",
     value: function bottom() {
-      this.movingDirection = _ci2.ORIENTATIONS.Y;
+      this.movingDirection = _constants.ORIENTATIONS.Y;
       this.activeImageX = this.reversed ? this.amountX : 1;
       this.moveActiveYIndexDown(1);
       this.update();
@@ -627,7 +636,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         top: this.top.bind(this),
         bottom: this.bottom.bind(this)
       };
-      (0, _jsCloudimage360ViewUtils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
+      (0, _utils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
     }
   }, {
     key: "updateContainerSize",
@@ -635,8 +644,8 @@ var CI360Viewer = /*#__PURE__*/function () {
       var parentEl = this.container.parentNode || {};
       var imageAspectRatio = image.width / image.height;
       var isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
-      var containerWidth = (0, _jsCloudimage360ViewUtils.getContainerResponsiveWidth)(parentEl, this.containerWidth);
-      var containerHeight = (0, _jsCloudimage360ViewUtils.getContainerResponsiveHeight)(this.container, containerWidth, this.containerHeight);
+      var containerWidth = (0, _utils.getContainerResponsiveWidth)(parentEl, this.containerWidth);
+      var containerHeight = (0, _utils.getContainerResponsiveHeight)(this.container, containerWidth, this.containerHeight);
 
       if (this.fullscreenView) {
         this.container.width = window.innerWidth * this.devicePixelRatio;
@@ -669,7 +678,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "onResizedImageLoad",
     value: function onResizedImageLoad(orientation, image, index) {
-      if (orientation === _ci2.ORIENTATIONS.Y) {
+      if (orientation === _constants.ORIENTATIONS.Y) {
         this.resizedImagesY[index] = image;
       } else {
         this.resizedImagesX[index] = image;
@@ -696,14 +705,14 @@ var CI360Viewer = /*#__PURE__*/function () {
       var firstImage = this.imagesX[0];
       this.updateContainerSize(firstImage);
       this.update();
-      this.speedFactor = (0, _jsCloudimage360ViewUtils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
-      var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
+      this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
       if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
-      (0, _jsCloudimage360ViewUtils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _ci2.ORIENTATIONS.X), true);
+      (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X), true);
 
       if (this.allowSpinY) {
-        var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
-        (0, _jsCloudimage360ViewUtils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _ci2.ORIENTATIONS.Y), true);
+        var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
+        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y), true);
       }
     }
   }, {
@@ -711,7 +720,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function update() {
       var image = this.imagesX[this.activeImageX - 1];
 
-      if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.imagesY[this.activeImageY - 1];
       }
 
@@ -723,7 +732,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.canvas.style.height = this.container.offsetHeight + 'px';
 
       if (this.fullscreenView) {
-        var _contain = (0, _jsCloudimage360ViewUtils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
+        var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
             width = _contain.width,
             height = _contain.height,
             offsetX = _contain.offsetX,
@@ -743,7 +752,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function updateImageScale(ctx) {
       var image = this.originalImagesX[this.activeImageX - 1];
 
-      if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.originalImagesY[this.activeImageY - 1];
       }
 
@@ -779,7 +788,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.canvas.height = window.innerHeight * this.devicePixelRatio;
         this.canvas.style.height = window.innerHeight + 'px';
 
-        var _contain2 = (0, _jsCloudimage360ViewUtils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
+        var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
             offsetX = _contain2.offsetX,
             offsetY = _contain2.offsetY,
             width = _contain2.width,
@@ -807,7 +816,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.boxShadow && !this.fullscreenView) {
-        (0, _jsCloudimage360ViewUtils.createBoxShadow)(this.boxShadow, this.innerBox);
+        (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
 
       if (this.bottomCircle && !this.fullscreenView) {
@@ -830,7 +839,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.container.style.cursor = 'grab';
       }
 
-      this.speedFactor = (0, _jsCloudimage360ViewUtils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
+      this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
 
       if (this.autoplay) {
         this.play();
@@ -841,8 +850,9 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.view360Icon) {
-        this.view360Icon.innerText = '';
-        (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+        this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
+
+        if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
       }
 
       this.initControls();
@@ -854,7 +864,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
-      var currentOriginalImage = (0, _jsCloudimage360ViewUtils.getCurrentOriginalImage)(this.movingDirection, this.imagesX, this.imagesY, this.activeImageX, this.activeImageY);
+      var currentOriginalImage = (0, _utils.getCurrentOriginalImage)(this.movingDirection, this.imagesX, this.imagesY, this.activeImageX, this.activeImageY);
       this.isMagnifyOpen = true;
 
       currentOriginalImage.onload = function () {
@@ -865,7 +875,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       this.glass = document.createElement('div');
       this.container.style.overflow = 'hidden';
-      (0, _jsCloudimage360ViewUtils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
+      (0, _utils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
     }
   }, {
     key: "closeMagnifier",
@@ -881,7 +891,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function openFullscreenModal(event) {
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
-      var fullscreenContainer = (0, _jsCloudimage360ViewUtils.createFullscreenModal)(this.container);
+      var fullscreenContainer = (0, _utils.createFullscreenModal)(this.container);
       new CI360Viewer(fullscreenContainer, true);
     }
   }, {
@@ -908,7 +918,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.loopTimeoutId = window.setInterval(function () {
         _this4.loop(_this4.reversed);
 
-        var isPlayedOnce = (0, _jsCloudimage360ViewUtils.isCompletedOneCycle)(_this4.autoplayBehavior, _this4.activeImageX, _this4.activeImageY, _this4.amountX, _this4.amountY, _this4.reversed);
+        var isPlayedOnce = (0, _utils.isCompletedOneCycle)(_this4.autoplayBehavior, _this4.activeImageX, _this4.activeImageY, _this4.amountX, _this4.amountY, _this4.reversed);
 
         if (_this4.playOnce && isPlayedOnce) {
           window.clearTimeout(_this4.loopTimeoutId);
@@ -926,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() {
@@ -945,7 +970,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "addCloseFullscreenView",
     value: function addCloseFullscreenView(event) {
-      var closeFullscreenIcon = (0, _jsCloudimage360ViewUtils.createCloseFullscreenIcon)();
+      var closeFullscreenIcon = (0, _utils.createCloseFullscreenIcon)();
       closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event);
       window.onkeyup = this.setFullscreenEvents.bind(this, event);
       this.iconsContainer.appendChild(closeFullscreenIcon);
@@ -953,13 +978,13 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "add360ViewIcon",
     value: function add360ViewIcon() {
-      this.view360Icon = (0, _jsCloudimage360ViewUtils.create360ViewIcon)();
+      this.view360Icon = (0, _utils.create360ViewIcon)();
       this.innerBox.appendChild(this.view360Icon);
     }
   }, {
     key: "addFullscreenIcon",
     value: function addFullscreenIcon() {
-      this.fullscreenIcon = (0, _jsCloudimage360ViewUtils.createFullscreenIcon)();
+      this.fullscreenIcon = (0, _utils.createFullscreenIcon)();
       this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
       this.iconsContainer.appendChild(this.fullscreenIcon);
     }
@@ -980,7 +1005,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "addMagnifier",
     value: function addMagnifier() {
-      this.magnifierIcon = (0, _jsCloudimage360ViewUtils.createMagnifierIcon)();
+      this.magnifierIcon = (0, _utils.createMagnifierIcon)();
       this.magnifierIcon.onclick = this.magnify.bind(this);
       this.iconsContainer.appendChild(this.magnifierIcon);
     }
@@ -1008,7 +1033,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "add360ViewCircleIcon",
     value: function add360ViewCircleIcon() {
-      this.view360CircleIcon = (0, _jsCloudimage360ViewUtils.create360ViewCircleIcon)(this.bottomCircleOffset);
+      this.view360CircleIcon = (0, _utils.create360ViewCircleIcon)(this.bottomCircleOffset);
       this.innerBox.appendChild(this.view360CircleIcon);
     }
   }, {
@@ -1108,7 +1133,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         onBottomStart: onBottomStart,
         onEventEnd: onEventEnd
       };
-      var controlsElements = (0, _jsCloudimage360ViewUtils.initControls)(controlsConfig, controlsTriggers);
+      var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
       this.topElem = controlsElements.top || {};
       this.bottomElem = controlsElements.bottom || {};
       this.leftElem = controlsElements.left || {};
@@ -1132,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) {
@@ -1149,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,
@@ -1159,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,
@@ -1210,8 +1235,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.allowSpinY = !!this.amountY;
       this.activeImageX = autoplayReverse ? this.amountX : 1;
       this.activeImageY = autoplayReverse ? this.amountY : 1;
-      this.spinY = autoplayBehavior === _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
-      this.imageOffset = imageOffset;
+      this.spinY = autoplayBehavior === _constants.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
       this.bottomCircle = bottomCircle;
       this.bottomCircleOffset = bottomCircleOffset;
       this.boxShadow = boxShadow;
@@ -1222,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;
@@ -1237,13 +1261,24 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.apiVersion = apiVersion;
       this.containerWidth = containerWidth;
       this.containerHeight = containerHeight;
-      this.pointerZoom = Math.min(Math.max(pointerZoom, 1), 3);
+      this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
       this.keysReverse = keysReverse;
-      this.innerBox = (0, _jsCloudimage360ViewUtils.createInnerBox)(this.container);
-      this.iconsContainer = (0, _jsCloudimage360ViewUtils.createIconsContainer)(this.innerBox);
-      this.canvas = (0, _jsCloudimage360ViewUtils.createCanvas)(this.innerBox);
-      this.loader = (0, _jsCloudimage360ViewUtils.createLoader)(this.innerBox);
-      (0, _jsCloudimage360ViewUtils.applyStylesToContainer)(this.container);
+
+      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);
+      this.loader = (0, _utils.createLoader)(this.innerBox);
+      (0, _utils.applyStylesToContainer)(this.container);
       this.srcXConfig = {
         folder: folder,
         filename: filenameX,
@@ -1260,12 +1295,12 @@ var CI360Viewer = /*#__PURE__*/function () {
       };
       this.srcYConfig = _objectSpread(_objectSpread({}, this.srcXConfig), {}, {
         filename: filenameY,
-        orientation: _ci2.ORIENTATIONS.Y,
+        orientation: _constants.ORIENTATIONS.Y,
         imageList: imageListY,
         amount: this.amountY
       });
-      var srcX = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcXConfig);
-      var srcY = (0, _jsCloudimage360ViewUtils.generateImagesPath)(this.srcYConfig);
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
+      var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
 
       var initLazyload = function initLazyload(image, orientation) {
         var lazyloadXConfig = _objectSpread(_objectSpread({}, _this6.srcXConfig), {}, {
@@ -1276,18 +1311,18 @@ var CI360Viewer = /*#__PURE__*/function () {
           lazyload: false
         });
 
-        if (orientation === _ci2.ORIENTATIONS.Y) {
+        if (orientation === _constants.ORIENTATIONS.Y) {
           _this6.lazyloadY = false;
-          (0, _jsCloudimage360ViewUtils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _ci2.ORIENTATIONS.X));
+          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this6, _constants.ORIENTATIONS.X));
         } else {
           _this6.lazyloadX = false;
           _this6.lazyloadInitImageX = image;
-          (0, _jsCloudimage360ViewUtils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _ci2.ORIENTATIONS.Y));
+          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this6, _constants.ORIENTATIONS.Y));
         }
       };
 
       var onImageLoad = function onImageLoad(orientation, image, index) {
-        if (orientation !== _ci2.ORIENTATIONS.Y) {
+        if (orientation !== _constants.ORIENTATIONS.Y) {
           _this6.imagesX[index] = image;
         } else {
           _this6.imagesY[index] = image;
@@ -1303,7 +1338,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         var totalAmount = _this6.amountX + _this6.amountY;
         var totalLoadedImages = _this6.imagesX.length + _this6.imagesY.length;
-        var isFirstImageLoaded = index === 0 && orientation !== _ci2.ORIENTATIONS.Y;
+        var isFirstImageLoaded = index === 0 && orientation !== _constants.ORIENTATIONS.Y;
         var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this6.amountX + _this6.amountY;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
 
@@ -1326,10 +1361,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         }
       };
 
-      (0, _jsCloudimage360ViewUtils.preloadImages)(this.srcXConfig, srcX, onImageLoad.bind(this, _ci2.ORIENTATIONS.X));
+      (0, _utils.preloadImages)(this.srcXConfig, srcX, onImageLoad.bind(this, _constants.ORIENTATIONS.X));
 
       if (this.allowSpinY) {
-        (0, _jsCloudimage360ViewUtils.preloadImages)(this.srcYConfig, srcY, onImageLoad.bind(this, _ci2.ORIENTATIONS.Y));
+        (0, _utils.preloadImages)(this.srcYConfig, srcY, onImageLoad.bind(this, _constants.ORIENTATIONS.Y));
       }
 
       this.attachEvents(draggable, swipeable, keys);

package/dist/ci360.utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setView360Icon = exports.get360ViewProps = exports.debounce = void 0;
 
-var _ci = require("./ci360.constants");
+var _constants = require("./constants");
 
 var _this = void 0;
 
@@ -21,21 +21,20 @@ 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'),
     keysReverse: isTrue(image, 'keys-reverse'),
     boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'),
     autoplay: isTrue(image, 'autoplay'),
-    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _ci.AUTOPLAY_BEHAVIOR.SPIN_X,
+    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _constants.AUTOPLAY_BEHAVIOR.SPIN_X,
     playOnce: isTrue(image, 'play-once'),
     autoplayReverse: isTrue(image, 'autoplay-reverse'),
     pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10),
     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'),