js-cloudimage-360-view 2.7.2-beta.8 → 2.7.6

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,16 +636,12 @@ 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",
-    value: function updateContainerSize(image) {
-      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);
+    key: "updateContainerAndCanvasSize",
+    value: function updateContainerAndCanvasSize(image) {
+      var imageAspectRatio = (0, _utils.getImageAspectRatio)(image, this.ratio);
 
       if (this.fullscreenView) {
         this.container.width = window.innerWidth * this.devicePixelRatio;
@@ -647,29 +652,15 @@ var CI360Viewer = /*#__PURE__*/function () {
         return;
       }
 
-      if (this.containerWidth && this.containerHeight) {
-        this.container.style.width = containerWidth + 'px';
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if (!this.containerWidth && !this.containerHeight) {
-        this.container.style.height = containerHeight / imageAspectRatio + 'px';
-        return;
-      }
-
-      if ((isProvidedHeightLessThanWidth || !this.containerWidth) && this.containerHeight) {
-        this.container.style.maxWidth = containerHeight * imageAspectRatio + 'px';
-        this.container.style.height = containerHeight + 'px';
-      } else {
-        this.container.style.maxWidth = containerWidth + 'px';
-        this.container.style.height = containerWidth / imageAspectRatio + 'px';
-      }
+      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+      this.canvas.style.width = this.container.offsetWidth + 'px';
+      this.canvas.height = this.container.offsetWidth / imageAspectRatio * this.devicePixelRatio;
+      this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
     }
   }, {
     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;
@@ -694,16 +685,16 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function requestResizedImages() {
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
-      this.updateContainerSize(firstImage);
+      this.updateContainerAndCanvasSize(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,19 +702,15 @@ 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];
       }
 
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
-      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-      this.canvas.style.width = this.container.offsetWidth + 'px';
-      this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
-      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 +730,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 +766,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 +794,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 +817,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 +828,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 +842,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 +853,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 +869,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 +896,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 +914,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 +948,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 +956,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 +983,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 +1011,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 +1111,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 +1135,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 +1150,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 +1163,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,
@@ -1189,9 +1192,8 @@ var CI360Viewer = /*#__PURE__*/function () {
           controlReverse = _get360ViewProps.controlReverse,
           hide360Logo = _get360ViewProps.hide360Logo,
           logoSrc = _get360ViewProps.logoSrc,
-          containerWidth = _get360ViewProps.containerWidth,
-          containerHeight = _get360ViewProps.containerHeight,
-          pointerZoom = _get360ViewProps.pointerZoom;
+          pointerZoom = _get360ViewProps.pointerZoom,
+          ratio = _get360ViewProps.ratio;
 
       var ciParams = {
         ciToken: ciToken,
@@ -1210,8 +1212,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,28 +1223,38 @@ 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(dragSpeed, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
       this.logoSrc = logoSrc;
       this.ciParams = ciParams;
       this.apiVersion = apiVersion;
-      this.containerWidth = containerWidth;
-      this.containerHeight = containerHeight;
       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);
+      this.ratio = ratio && JSON.parse(ratio);
+
+      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 +1271,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 +1287,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 +1314,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);
 
@@ -1312,7 +1323,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (_this6.lazyloadX || _this6.lazyloadY) return initLazyload(image, orientation);
 
         if (isFirstImageLoaded) {
-          _this6.updateContainerSize(image);
+          _this6.updateContainerAndCanvasSize(image);
 
           _this6.onFirstImageLoaded(image);
         }
@@ -1326,10 +1337,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);