js-cloudimage-360-view 3.0.0-beta.0 → 3.0.1

package/dist/static/css/hotspots.css

@@ -0,0 +1,222 @@
+.cloudimage-360-hotspot-link-icon {
+  width: 42px;
+  height: 42px;
+  background: rgba(12, 109, 199, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition: opacity 600ms ease-in-out;
+  cursor: auto;
+}
+
+.cloudimage-360-hotspot-link-icon::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg');
+  background-color: #0C6DC7;
+  background-repeat: no-repeat;
+  background-size: 17px 7px;
+  background-position: center;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+	animation: pulse 2s infinite;
+  cursor: auto;
+}
+
+.cloudimage-360-hotspot-custom-icon {
+  width: 42px;
+  height: 42px;
+  background: #76AD0133;
+  border: 1px solid #FFFFFF33;
+  border-radius: 50%;
+  box-sizing: border-box;
+  transition: opacity 300ms ease-in-out;
+  cursor: auto;
+}
+
+.cloudimage-360-hotspot-custom-icon::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg');
+  background-color: #76AD01;
+  background-repeat: no-repeat;
+  background-size: 17px 7px;
+  background-position: center;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+	animation: pulse 2s infinite;
+  cursor: auto;
+}
+
+.cloudimage-360-hotspot-popup {
+  visibility: hidden;
+  opacity: 0;
+  background-color: #FFFFFF;
+  padding: 6px;
+  border-radius: 2px;
+  box-shadow: 0px 4px 4px 0px #00000040;
+  z-index: 999;
+}
+
+.cloudimage-360-hotspot-popup[data-show] {
+  visibility: visible;
+  opacity: 1;
+}
+
+.cloudimage-360-popup-arrow,
+.cloudimage-360-popup-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  cursor: 'auto';
+}
+
+.cloudimage-360-popup-arrow {
+  visibility: hidden;
+}
+
+.cloudimage-360-popup-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.cloudimage-360-hotspot-popup[data-popper-placement^='top']
+  > .cloudimage-360-popup-arrow {
+  bottom: -4px;
+}
+
+.cloudimage-360-hotspot-popup[data-popper-placement^='bottom']
+  > .cloudimage-360-popup-arrow {
+  top: -4px;
+}
+
+.cloudimage-360-hotspot-popup[data-popper-placement^='left']
+  > .cloudimage-360-popup-arrow {
+  right: -4px;
+}
+
+.cloudimage-360-hotspot-popup[data-popper-placement^='right']
+  > .cloudimage-360-popup-arrow {
+  left: -4px;
+}
+
+.cloudimage-360-modal-wrapper {
+  max-width: 222px;
+}
+
+.cloudimage-360-images-carousel-wrapper {
+  margin: 0 auto;
+}
+
+.cloudimage-360-images-carousel {
+  background-color: #f5f4f4;
+  border-radius: 2px;
+}
+
+.cloudimage-360-images-carousel .cloudimage-360-carousel-image {
+  display: none;
+  object-fit: contain;
+  min-height: 187px;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image {
+  display: block;
+  animation-name: fade-active-image;
+  animation-duration: 1.5s;
+}
+
+.cloudimage-360-carousel-dots {
+  display: flex;
+  column-gap: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 5px auto;
+  row-gap: 3px;
+  padding: 0 6px;
+  width: 50%;
+}
+
+.cloudimage-360-carousel-dot {
+  width: 6px;
+  height: 6px;
+  background-color: #C9D0DE;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.6s ease;
+  border: 0;
+  padding: 0;
+}
+
+.cloudimage-360-carousel-dot.active-dot {
+  background-color: #76AD01;
+}
+
+.cloudimage-360-carousel-dot:focus,
+.cloudimage-360-carousel-dot:focus-visible {
+  border: 0;
+  outline: 0;
+}
+
+.cloudimage-360-modal-title {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  margin: 4px 0;
+}
+
+.cloudimage-360-modal-description {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 16px;
+  margin: 4px 0;
+}
+
+.cloudimage-360-modal-more-details {
+  color: #76AD01;
+  background-color: #ECFAE6;
+  font-size: 10px;
+  line-height: 16px;
+  font-weight: 400;
+  padding: 4px 8px;
+  transition: background-color 200ms ease-in-out;
+  border-radius: 2px;
+  text-decoration: none;
+}
+
+.cloudimage-360-modal-more-details:hover {
+  color: #76AD01;
+  background-color: #e1f5d8;
+}
+
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(99, 99, 99, 0.7);
+	}
+
+	70% {
+		box-shadow: 0 0 0 10px rgba(99, 99, 99, 0);
+	}
+
+	100% {
+		box-shadow: 0 0 0 0 rgba(99, 99, 99, 0);
+	}
+}
+
+@keyframes fade-active-image {
+  from { opacity: 0.7 }
+  to { opacity: 1 }
+}

package/dist/static/css/style.css

@@ -49,7 +49,7 @@
   right: 0;
   width: 0%;
   height: 8px;
-  background-color: rgb(165,175,184);
+  background-color: rgb(165, 175, 184);
   z-index: 100;
 }
 
@@ -71,11 +71,11 @@
   width: 100px;
   height: 100px;
   margin: auto;
-  background-color: rgba(255,255,255,0.8);
+  background-color: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
-  box-shadow: rgb(255, 255, 255, 0.5) 0px 0px 4px;
+  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px;
   transition: 0.5s all;
-  color: rgb(80,80,80);
+  color: rgb(80, 80, 80);
   text-align: center;
   line-height: 100px;
   z-index: 2;
@@ -88,6 +88,8 @@
   width: 80%;
   height: auto;
   margin: auto;
+  pointer-events: none;
+  user-select: none;
   transition: 0.5s all;
   z-index: 2;
 }
@@ -118,4 +120,111 @@
   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

@@ -0,0 +1,14 @@
+"use strict";
+
+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

@@ -0,0 +1,32 @@
+"use strict";
+
+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:
+    case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_Y:
+      {
+        var isReachedTheEdge = isReversed ? activeImageY === 1 : activeImageY === amountY;
+        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

@@ -0,0 +1,67 @@
+"use strict";
+
+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;
+
+  switch (autoplayBehavior) {
+    case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_Y:
+      if (reversed) {
+        bottom();
+      } else {
+        top();
+      }
+
+      break;
+
+    case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_XY:
+      if (spinY) {
+        if (reversed) {
+          bottom();
+        } else {
+          top();
+        }
+      } else if (reversed) {
+        left();
+      } else {
+        right();
+      }
+
+      break;
+
+    case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_YX:
+      if (spinY) {
+        if (reversed) {
+          bottom();
+        } else {
+          top();
+        }
+      } else if (reversed) {
+        left();
+      } else {
+        right();
+      }
+
+      break;
+
+    case _autoPlayBehavior.AUTOPLAY_BEHAVIOR.SPIN_X:
+    default:
+      if (reversed) {
+        left();
+      } else {
+        right();
+      }
+
+  }
+};
+
+exports.loop = loop;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeClass = void 0;
+
+var removeClass = function removeClass(el, className) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyStylesToContainer = void 0;
+
+var applyStylesToContainer = function applyStylesToContainer(container) {
+  container.style.position = 'relative';
+  container.style.width = '100%';
+  container.style.cursor = 'wait';
+  container.setAttribute('draggable', 'false');
+  container.className = "".concat(container.className, " initialized");
+};
+
+exports.applyStylesToContainer = applyStylesToContainer;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.create360ViewCircleIcon = void 0;
+
+var create360ViewCircleIcon = function create360ViewCircleIcon(circleOffset) {
+  var view360CircleIcon = new Image();
+  view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
+  view360CircleIcon.style.bottom = "".concat(circleOffset, "%");
+  view360CircleIcon.className = 'cloudimage-360-view-360-circle';
+  return view360CircleIcon;
+};
+
+exports.create360ViewCircleIcon = create360ViewCircleIcon;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+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

@@ -0,0 +1,16 @@
+"use strict";
+
+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';
+  nextBoxShadow.style.boxShadow = boxShadow;
+  innerBox.appendChild(nextBoxShadow);
+  return nextBoxShadow;
+};
+
+exports.createBoxShadow = createBoxShadow;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCanvas = void 0;
+
+var createCanvas = function createCanvas(innerBox) {
+  var canvas = document.createElement('canvas');
+  canvas.style.width = '100%';
+  canvas.style.fontSize = '0';
+  innerBox.appendChild(canvas);
+  return canvas;
+};
+
+exports.createCanvas = createCanvas;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+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

@@ -0,0 +1,14 @@
+"use strict";
+
+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;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFullscreenModal = void 0;
+
+var createFullscreenModal = function createFullscreenModal(container) {
+  var fullscreenModal = document.createElement('div');
+  fullscreenModal.className = 'cloudimage-360-fullscreen-modal';
+  var fullscreenContainer = container.cloneNode();
+  fullscreenContainer.style.height = '100%';
+  fullscreenContainer.style.maxHeight = '100%';
+  fullscreenModal.appendChild(fullscreenContainer);
+  window.document.body.style.overflow = 'hidden';
+  window.document.body.appendChild(fullscreenModal);
+  return fullscreenContainer;
+};
+
+exports.createFullscreenModal = createFullscreenModal;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIconsContainer = void 0;
+
+var createIconsContainer = function createIconsContainer(innerBox) {
+  var iconsContainer = document.createElement('div');
+  iconsContainer.className = 'cloudimage-360-icons-container';
+  innerBox.appendChild(iconsContainer);
+  return iconsContainer;
+};
+
+exports.createIconsContainer = createIconsContainer;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createInnerBox = void 0;
+
+var createInnerBox = function createInnerBox(container) {
+  var innerBox = document.createElement('div');
+  innerBox.className = 'cloudimage-360-inner-box';
+  container.appendChild(innerBox);
+  return innerBox;
+};
+
+exports.createInnerBox = createInnerBox;