js-cloudimage-360-view 3.0.3 → 3.1.0

package/dist/static/css/style.css

@@ -1,230 +1,230 @@
-.cloudimage-360-icons-container {
-  position: absolute;
-  display: flex;
-  top: 5px;
-  right: 5px;
-  width: 30px;
-  height: 95%;
-  flex-direction: column;
-  align-items: center;
-  z-index: 101;
-}
-
-.cloudimage-360-magnifier-icon {
-  width: 25px;
-  height: 25px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360-fullscreen-icon {
-  width: 25px;
-  height: 25px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360-reset-zoom-icon {
-  display: none;
-  width: 30px;
-  height: 30px;
-  margin-top: auto;
-  cursor: pointer;
-  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360-close-fullscreen-icon {
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 0%;
-  height: 8px;
-  background-color: rgb(165, 175, 184);
-  z-index: 100;
-}
-
-.cloudimage-360-box-shadow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-}
-
-.cloudimage-360-view-360-icon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100px;
-  height: 100px;
-  margin: auto;
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 50%;
-  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
-  transition: 0.5s all;
-  color: rgb(80, 80, 80);
-  text-align: center;
-  line-height: 100px;
-  z-index: 2;
-}
-
-.cloudimage-360-view-360-circle {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 80%;
-  height: auto;
-  margin: auto;
-  pointer-events: none;
-  user-select: none;
-  transition: 0.5s all;
-  z-index: 2;
-}
-
-.cloudimage-360-fullscreen-modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  background-color: #FFF;
-}
-
-.cloudimage-360-img-magnifier-glass {
-  background-color: #FFF;
-  background-repeat: no-repeat;
-  position: absolute;
-  border: 3px solid #000;
-  border-radius: 50%;
-  cursor: wait;
-  line-height: 200px;
-  text-align: center;
-  z-index: 1000;
-  width: 250px;
-  height: 250px;
-  top: -75px;
-  right: -85px;
-}
-
-.cloudimage-360 .cloudimage-360-left,
-.cloudimage-360 .cloudimage-360-right {
-  padding: 8px;
-  background: rgb(244, 244, 244);
-  border: none;
-  border-radius: 4px;
-}
-
-.cloudimage-360 .cloudimage-360-left:focus,
-.cloudimage-360 .cloudimage-360-right:focus {
-  outline: none;
-}
-
-.cloudimage-360 .cloudimage-360-left {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  top: calc(50% - 15px);
-  left: 20px;
-}
-
-.cloudimage-360 .cloudimage-360-right {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  top: calc(50% - 15px);
-  right: 20px;
-}
-
-.cloudimage-360 .cloudimage-360-left:before,
-.cloudimage-360 .cloudimage-360-right:before {
-  content: '';
-  display: block;
-  width: 30px;
-  height: 30px;
-  background: 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360 .cloudimage-360-left:before {
-  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
-}
-
-.cloudimage-360 .cloudimage-360-right:before {
-  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
-}
-
-.cloudimage-360 .cloudimage-360-left.not-active,
-.cloudimage-360 .cloudimage-360-right.not-active {
-  opacity: 0.4;
-  cursor: default;
-  pointer-events: none;
-}
-
-.cloudimage-360 .cloudimage-360-top,
-.cloudimage-360 .cloudimage-360-bottom {
-  padding: 8px;
-  background: rgb(244, 244, 244);
-  border: none;
-  border-radius: 4px;
-}
-
-.cloudimage-360 .cloudimage-360-top:focus,
-.cloudimage-360 .cloudimage-360-bottom:focus {
-  outline: none;
-}
-
-.cloudimage-360 .cloudimage-360-top {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  left: calc(50% - 15px);
-  top: 20px;
-  transform: rotate(90deg);
-}
-
-.cloudimage-360 .cloudimage-360-bottom {
-  display: none;
-  position: absolute;
-  z-index: 100;
-  left: calc(50% - 15px);
-  bottom: 20px;
-  transform: rotate(90deg);
-}
-
-.cloudimage-360 .cloudimage-360-top:before,
-.cloudimage-360 .cloudimage-360-bottom:before {
-  content: '';
-  display: block;
-  width: 30px;
-  height: 30px;
-  background: 50% 50% / cover no-repeat;
-}
-
-.cloudimage-360 .cloudimage-360-top:before {
-  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
-}
-
-.cloudimage-360 .cloudimage-360-bottom:before {
-  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
-}
-
-.cloudimage-360 .cloudimage-360-top.not-active,
-.cloudimage-360 .cloudimage-360-bottom.not-active {
-  opacity: 0.4;
-  cursor: default;
+.cloudimage-360-icons-container {
+  position: absolute;
+  display: flex;
+  top: 5px;
+  right: 5px;
+  width: 30px;
+  height: 95%;
+  flex-direction: column;
+  align-items: center;
+  z-index: 101;
+}
+
+.cloudimage-360-magnifier-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-reset-zoom-icon {
+  display: none;
+  width: 30px;
+  height: 30px;
+  margin-top: auto;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-close-fullscreen-icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 0%;
+  height: 8px;
+  background-color: rgb(165, 175, 184);
+  z-index: 100;
+}
+
+.cloudimage-360-box-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+}
+
+.cloudimage-360-view-360-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100px;
+  height: 100px;
+  margin: auto;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
+  transition: 0.5s all;
+  color: rgb(80, 80, 80);
+  text-align: center;
+  line-height: 100px;
+  z-index: 2;
+}
+
+.cloudimage-360-view-360-circle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 80%;
+  height: auto;
+  margin: auto;
+  pointer-events: none;
+  user-select: none;
+  transition: 0.5s all;
+  z-index: 2;
+}
+
+.cloudimage-360-fullscreen-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-color: #FFF;
+}
+
+.cloudimage-360-img-magnifier-glass {
+  background-color: #FFF;
+  background-repeat: no-repeat;
+  position: absolute;
+  border: 3px solid #000;
+  border-radius: 50%;
+  cursor: wait;
+  line-height: 200px;
+  text-align: center;
+  z-index: 1000;
+  width: 250px;
+  height: 250px;
+  top: -75px;
+  right: -85px;
+}
+
+.cloudimage-360 .cloudimage-360-left,
+.cloudimage-360 .cloudimage-360-right {
+  padding: 8px;
+  background: rgb(244, 244, 244);
+  border: none;
+  border-radius: 4px;
+}
+
+.cloudimage-360 .cloudimage-360-left:focus,
+.cloudimage-360 .cloudimage-360-right:focus {
+  outline: none;
+}
+
+.cloudimage-360 .cloudimage-360-left {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  top: calc(50% - 15px);
+  left: 20px;
+}
+
+.cloudimage-360 .cloudimage-360-right {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  top: calc(50% - 15px);
+  right: 20px;
+}
+
+.cloudimage-360 .cloudimage-360-left:before,
+.cloudimage-360 .cloudimage-360-right:before {
+  content: '';
+  display: block;
+  width: 30px;
+  height: 30px;
+  background: 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360 .cloudimage-360-left:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+}
+
+.cloudimage-360 .cloudimage-360-right:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+}
+
+.cloudimage-360 .cloudimage-360-left.not-active,
+.cloudimage-360 .cloudimage-360-right.not-active {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+.cloudimage-360 .cloudimage-360-top,
+.cloudimage-360 .cloudimage-360-bottom {
+  padding: 8px;
+  background: rgb(244, 244, 244);
+  border: none;
+  border-radius: 4px;
+}
+
+.cloudimage-360 .cloudimage-360-top:focus,
+.cloudimage-360 .cloudimage-360-bottom:focus {
+  outline: none;
+}
+
+.cloudimage-360 .cloudimage-360-top {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 15px);
+  top: 20px;
+  transform: rotate(90deg);
+}
+
+.cloudimage-360 .cloudimage-360-bottom {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  left: calc(50% - 15px);
+  bottom: 20px;
+  transform: rotate(90deg);
+}
+
+.cloudimage-360 .cloudimage-360-top:before,
+.cloudimage-360 .cloudimage-360-bottom:before {
+  content: '';
+  display: block;
+  width: 30px;
+  height: 30px;
+  background: 50% 50% / cover no-repeat;
+}
+
+.cloudimage-360 .cloudimage-360-top:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
+}
+
+.cloudimage-360 .cloudimage-360-bottom:before {
+  background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
+}
+
+.cloudimage-360 .cloudimage-360-top.not-active,
+.cloudimage-360 .cloudimage-360-bottom.not-active {
+  opacity: 0.4;
+  cursor: default;
 }

package/dist/utils/auto-play/get-speed-factor.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSpeedFactor = void 0;
-
 var getSpeedFactor = function getSpeedFactor(dragSpeed, amount, containerOffset) {
   var containerOffsetWidth = Math.max(containerOffset, 600);
   var speedFactor = dragSpeed / 150 * (36 / amount) * 25 * (containerOffsetWidth / 1500) || 1;
   return Math.floor(speedFactor);
 };
-
 exports.getSpeedFactor = getSpeedFactor;

package/dist/utils/auto-play/is-completed-one-cycle.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isCompletedOneCycle = void 0;
-
 var _autoPlayBehavior = require("../../constants/auto-play-behavior");
-
 var isCompletedOneCycle = function isCompletedOneCycle(autoplayBehavior, activeImageX, activeImageY, amountX, amountY, isReversed) {
   switch (autoplayBehavior) {
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_XY:
@@ -16,17 +14,14 @@ var isCompletedOneCycle = function isCompletedOneCycle(autoplayBehavior, activeI
         if (isReachedTheEdge) return true;
         return false;
       }
-
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_X:
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_YX:
     default:
       {
         var _isReachedTheEdge = isReversed ? activeImageX === 1 : activeImageX === amountX;
-
         if (_isReachedTheEdge) return true;
         return false;
       }
   }
 };
-
 exports.isCompletedOneCycle = isCompletedOneCycle;

package/dist/utils/auto-play/loop.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.loop = void 0;
-
 var _autoPlayBehavior = require("../../constants/auto-play-behavior");
-
 var loop = function loop(autoplayBehavior, spinY, reversed, loopTriggers) {
   var bottom = loopTriggers.bottom,
-      top = loopTriggers.top,
-      left = loopTriggers.left,
-      right = loopTriggers.right;
-
+    top = loopTriggers.top,
+    left = loopTriggers.left,
+    right = loopTriggers.right;
   switch (autoplayBehavior) {
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_Y:
       if (reversed) {
@@ -20,9 +17,7 @@ var loop = function loop(autoplayBehavior, spinY, reversed, loopTriggers) {
       } else {
         top();
       }
-
       break;
-
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_XY:
       if (spinY) {
         if (reversed) {
@@ -35,9 +30,7 @@ var loop = function loop(autoplayBehavior, spinY, reversed, loopTriggers) {
       } else {
         right();
       }
-
       break;
-
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_YX:
       if (spinY) {
         if (reversed) {
@@ -50,9 +43,7 @@ var loop = function loop(autoplayBehavior, spinY, reversed, loopTriggers) {
       } else {
         right();
       }
-
       break;
-
     case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_X:
     default:
       if (reversed) {
@@ -60,8 +51,6 @@ var loop = function loop(autoplayBehavior, spinY, reversed, loopTriggers) {
       } else {
         right();
       }
-
   }
 };
-
 exports.loop = loop;

package/dist/utils/class-names/add-class.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addClass = void 0;
-
 var addClass = function addClass(el, className) {
   var element = el || {};
-
   if (element.classList) {
     element.classList.add(className);
   } else {
     element.className += " ".concat(className);
   }
 };
-
 exports.addClass = addClass;

package/dist/utils/class-names/remove-class.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeClass = void 0;
-
 var removeClass = function removeClass(el, className) {
   if (el.classList) {
     el.classList.remove(className);
@@ -12,5 +11,4 @@ var removeClass = function removeClass(el, className) {
     el.className = el.className.replace(new RegExp("(^|\\b)".concat(className.split(' ').join('|'), "(\\b|$)"), 'gi'), ' ');
   }
 };
-
 exports.removeClass = removeClass;

package/dist/utils/container-elements/apply-styles-to-container.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyStylesToContainer = void 0;
-
 var applyStylesToContainer = function applyStylesToContainer(container) {
   container.style.position = 'relative';
   container.style.width = '100%';
@@ -12,5 +11,4 @@ var applyStylesToContainer = function applyStylesToContainer(container) {
   container.setAttribute('draggable', 'false');
   container.className = "".concat(container.className, " initialized");
 };
-
 exports.applyStylesToContainer = applyStylesToContainer;

package/dist/utils/container-elements/create-360-view-circle-icon.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.create360ViewCircleIcon = void 0;
-
 var create360ViewCircleIcon = function create360ViewCircleIcon(circleOffset) {
   var view360CircleIcon = new Image();
   view360CircleIcon.src = 'https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg';
@@ -12,5 +11,4 @@ var create360ViewCircleIcon = function create360ViewCircleIcon(circleOffset) {
   view360CircleIcon.className = 'cloudimage-360-view-360-circle';
   return view360CircleIcon;
 };
-
 exports.create360ViewCircleIcon = create360ViewCircleIcon;

package/dist/utils/container-elements/create-360-view-icon.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.create360ViewIcon = void 0;
-
 var create360ViewIcon = function create360ViewIcon() {
   var view360Icon = document.createElement('div');
   view360Icon.className = 'cloudimage-360-view-360-icon';
   view360Icon.innerText = '0%';
   return view360Icon;
 };
-
 exports.create360ViewIcon = create360ViewIcon;

package/dist/utils/container-elements/create-box-shadow.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createBoxShadow = void 0;
-
 var createBoxShadow = function createBoxShadow(boxShadow, innerBox) {
   var nextBoxShadow = document.createElement('div');
   nextBoxShadow.className = 'cloudimage-360-box-shadow';
@@ -12,5 +11,4 @@ var createBoxShadow = function createBoxShadow(boxShadow, innerBox) {
   innerBox.appendChild(nextBoxShadow);
   return nextBoxShadow;
 };
-
 exports.createBoxShadow = createBoxShadow;

package/dist/utils/container-elements/create-canvas.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createCanvas = void 0;
-
 var createCanvas = function createCanvas(innerBox) {
   var canvas = document.createElement('canvas');
   canvas.style.width = '100%';
@@ -12,5 +11,4 @@ var createCanvas = function createCanvas(innerBox) {
   innerBox.appendChild(canvas);
   return canvas;
 };
-
 exports.createCanvas = createCanvas;

package/dist/utils/container-elements/create-close-fullscreen-icon.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createCloseFullscreenIcon = void 0;
-
 var createCloseFullscreenIcon = function createCloseFullscreenIcon() {
   var closeFullscreenIcon = document.createElement('div');
   closeFullscreenIcon.className = 'cloudimage-360-close-fullscreen-icon';
   return closeFullscreenIcon;
 };
-
 exports.createCloseFullscreenIcon = createCloseFullscreenIcon;

package/dist/utils/container-elements/create-fullscreen-icon.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createFullscreenIcon = void 0;
-
 var createFullscreenIcon = function createFullscreenIcon() {
   var fullscreenIcon = document.createElement('div');
   fullscreenIcon.className = 'cloudimage-360-fullscreen-icon';
   return fullscreenIcon;
 };
-
 exports.createFullscreenIcon = createFullscreenIcon;