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

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);
       }
     }
@@ -187,7 +187,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 +209,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 +226,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 +254,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));
       }
     }
   }, {
@@ -306,7 +306,7 @@ var CI360Viewer = /*#__PURE__*/function () {
         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.onMoveHandler(event);
     }
   }, {
@@ -433,12 +433,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 +457,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 +485,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 +509,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 +528,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 +537,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 +546,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 +555,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 +572,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 +589,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 +597,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 +605,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 +613,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 +627,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 +635,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 +669,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 +696,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 +711,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 +723,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 +743,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 +779,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 +807,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 +830,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 +841,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 +855,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 +866,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 +882,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 +909,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);
@@ -945,7 +946,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 +954,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 +981,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 +1009,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 +1109,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 || {};
@@ -1210,7 +1211,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.spinY = autoplayBehavior === _constants.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
       this.imageOffset = imageOffset;
       this.bottomCircle = bottomCircle;
       this.bottomCircleOffset = bottomCircleOffset;
@@ -1239,11 +1240,11 @@ var CI360Viewer = /*#__PURE__*/function () {
       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.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 +1261,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 +1277,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 +1304,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 +1327,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;
 
@@ -28,7 +28,7 @@ var get360ViewProps = function get360ViewProps(image) {
     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),

package/dist/constants/auto-play-behavior.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AUTOPLAY_BEHAVIOR = void 0;
+var AUTOPLAY_BEHAVIOR = {
+  SPIN_X: 'spin-x',
+  SPIN_Y: 'spin-y',
+  SPIN_XY: 'spin-xy',
+  SPIN_YX: 'spin-yx'
+};
+exports.AUTOPLAY_BEHAVIOR = AUTOPLAY_BEHAVIOR;

package/dist/constants/falsy-values.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FALSY_VALUES = void 0;
+var FALSY_VALUES = [false, 0, null, undefined, 'false', '0', 'null', 'undefined'];
+exports.FALSY_VALUES = FALSY_VALUES;

package/dist/constants/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AND_SYMBOL_REGEX", {
+  enumerable: true,
+  get: function get() {
+    return _regex.AND_SYMBOL_REGEX;
+  }
+});
+Object.defineProperty(exports, "AUTOPLAY_BEHAVIOR", {
+  enumerable: true,
+  get: function get() {
+    return _autoPlayBehavior.AUTOPLAY_BEHAVIOR;
+  }
+});
+Object.defineProperty(exports, "FALSY_VALUES", {
+  enumerable: true,
+  get: function get() {
+    return _falsyValues.FALSY_VALUES;
+  }
+});
+Object.defineProperty(exports, "ORGINAL_SIZE_REGEX", {
+  enumerable: true,
+  get: function get() {
+    return _regex.ORGINAL_SIZE_REGEX;
+  }
+});
+Object.defineProperty(exports, "ORIENTATIONS", {
+  enumerable: true,
+  get: function get() {
+    return _orientations.ORIENTATIONS;
+  }
+});
+
+var _autoPlayBehavior = require("./auto-play-behavior");
+
+var _falsyValues = require("./falsy-values");
+
+var _orientations = require("./orientations");
+
+var _regex = require("./regex");

package/dist/constants/orientations.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORIENTATIONS = void 0;
+var ORIENTATIONS = {
+  X: 'x-axis',
+  Y: 'y-axis',
+  CENTER: 'center'
+};
+exports.ORIENTATIONS = ORIENTATIONS;

package/dist/constants/regex.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ORGINAL_SIZE_REGEX = exports.AND_SYMBOL_REGEX = void 0;
+var ORGINAL_SIZE_REGEX = /width=\d+|w=\d+|h=\d+|&width=\d+|&w=\d+|&h=\d+|func=\w+|\?$/g;
+exports.ORGINAL_SIZE_REGEX = ORGINAL_SIZE_REGEX;
+var AND_SYMBOL_REGEX = /\?&/g;
+exports.AND_SYMBOL_REGEX = AND_SYMBOL_REGEX;

package/dist/index.js

@@ -29,14 +29,18 @@ function destroy() {
   window.CI360._viewers = [];
 }
 
-function getActiveIndexByID(id) {
+function getActiveIndexByID(id, oriantation) {
   if (isNoViewers()) return;
 
   var currentViewer = window.CI360._viewers.filter(function (viewer) {
     return viewer.id === id;
   })[0];
 
-  return currentViewer && currentViewer.activeImage - 1;
+  if (oriantation === 'y') {
+    return currentViewer && currentViewer.activeImageY - 1;
+  }
+
+  return currentViewer && currentViewer.activeImageX - 1;
 }
 
 function isNoViewers() {