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

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/common/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/common/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;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMagnifierIcon = void 0;
+
+var createMagnifierIcon = function createMagnifierIcon() {
+  var magnifyIcon = document.createElement('div');
+  magnifyIcon.className = 'cloudimage-360-magnifier-icon';
+  return magnifyIcon;
+};
+
+exports.createMagnifierIcon = createMagnifierIcon;

package/dist/utils/container-elements/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applyStylesToContainer", {
+  enumerable: true,
+  get: function get() {
+    return _applyStylesToContainer.applyStylesToContainer;
+  }
+});
+Object.defineProperty(exports, "create360ViewCircleIcon", {
+  enumerable: true,
+  get: function get() {
+    return _create360ViewCircleIcon.create360ViewCircleIcon;
+  }
+});
+Object.defineProperty(exports, "create360ViewIcon", {
+  enumerable: true,
+  get: function get() {
+    return _create360ViewIcon.create360ViewIcon;
+  }
+});
+Object.defineProperty(exports, "createBoxShadow", {
+  enumerable: true,
+  get: function get() {
+    return _createBoxShadow.createBoxShadow;
+  }
+});
+Object.defineProperty(exports, "createCanvas", {
+  enumerable: true,
+  get: function get() {
+    return _createCanvas.createCanvas;
+  }
+});
+Object.defineProperty(exports, "createCloseFullscreenIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseFullscreenIcon.createCloseFullscreenIcon;
+  }
+});
+Object.defineProperty(exports, "createFullscreenIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createFullscreenIcon.createFullscreenIcon;
+  }
+});
+Object.defineProperty(exports, "createFullscreenModal", {
+  enumerable: true,
+  get: function get() {
+    return _createFullscreenModal.createFullscreenModal;
+  }
+});
+Object.defineProperty(exports, "createIconsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _createIconsContainer.createIconsContainer;
+  }
+});
+Object.defineProperty(exports, "createInnerBox", {
+  enumerable: true,
+  get: function get() {
+    return _createInnerBox.createInnerBox;
+  }
+});
+Object.defineProperty(exports, "createLoader", {
+  enumerable: true,
+  get: function get() {
+    return _createLoader.createLoader;
+  }
+});
+Object.defineProperty(exports, "createMagnifierIcon", {
+  enumerable: true,
+  get: function get() {
+    return _createMagnifierIcon.createMagnifierIcon;
+  }
+});
+
+var _create360ViewCircleIcon = require("./create-360-view-circle-icon");
+
+var _create360ViewIcon = require("./create-360-view-icon");
+
+var _createCanvas = require("./create-canvas");
+
+var _createCloseFullscreenIcon = require("./create-close-fullscreen-icon");
+
+var _createFullscreenIcon = require("./create-fullscreen-icon");
+
+var _createIconsContainer = require("./create-icons-container");
+
+var _createInnerBox = require("./create-inner-box");
+
+var _createMagnifierIcon = require("./create-magnifier-icon");
+
+var _createBoxShadow = require("./create-box-shadow");
+
+var _createLoader = require("./create-loader");
+
+var _applyStylesToContainer = require("./apply-styles-to-container");
+
+var _createFullscreenModal = require("./create-fullscreen-modal");

package/dist/utils/controls/get-item-skipped.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemSkipped = void 0;
+
+var getItemSkipped = function getItemSkipped(currentPosition, movementStart, speedFactor) {
+  var itemsSkipped = Math.floor((currentPosition - movementStart) / speedFactor) || 1;
+  return itemsSkipped;
+};
+
+exports.getItemSkipped = getItemSkipped;

package/dist/utils/controls/init-controls.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initControls = void 0;
+
+var _addClass = require("../common/add-class");
+
+var initControls = function initControls(controlsConfig, controlsTriggers) {
+  var container = controlsConfig.container,
+      controlReverse = controlsConfig.controlReverse,
+      spinReverse = controlsConfig.spinReverse,
+      stopAtEdges = controlsConfig.stopAtEdges;
+  var onRightStart = controlsTriggers.onRightStart,
+      onLeftStart = controlsTriggers.onLeftStart,
+      onTopStart = controlsTriggers.onTopStart,
+      onBottomStart = controlsTriggers.onBottomStart,
+      onEventEnd = controlsTriggers.onEventEnd;
+  var controlElements = {};
+  var isReverse = controlReverse ? !spinReverse : spinReverse;
+  var left = container.querySelectorAll('.cloudimage-360-left, .cloudimage-360-prev')[0];
+  var right = container.querySelectorAll('.cloudimage-360-right, .cloudimage-360-next')[0];
+  var top = container.querySelector('.cloudimage-360-top');
+  var bottom = container.querySelector('.cloudimage-360-bottom');
+
+  if (left) {
+    left.style.display = 'block';
+    left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
+    left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, {
+      passive: true
+    });
+    left.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    left.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.left = left;
+  }
+
+  if (right) {
+    right.style.display = 'block';
+    right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
+    right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, {
+      passive: true
+    });
+    right.addEventListener('mouseup', onEventEnd);
+    right.addEventListener('touchend', onEventEnd);
+    controlElements.right = right;
+  }
+
+  if (top) {
+    top.style.display = 'block';
+    top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart);
+    top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart);
+    top.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    top.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.top = top;
+  }
+
+  if (bottom) {
+    bottom.style.display = 'block';
+    bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart);
+    bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart);
+    bottom.addEventListener('mouseup', isReverse ? onEventEnd : onEventEnd);
+    bottom.addEventListener('touchend', isReverse ? onEventEnd : onEventEnd);
+    controlElements.bottom = bottom;
+  }
+
+  if (isReverse ? right : left) {
+    if (stopAtEdges) {
+      (0, _addClass.addClass)(isReverse ? right : left, 'not-active');
+      (0, _addClass.addClass)(isReverse ? top : bottom, 'not-active');
+    }
+  }
+
+  return controlElements;
+};
+
+exports.initControls = initControls;

package/dist/utils/hotspot/attach-popup-events.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.attachPopupEvents = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var attachPopupEvents = function attachPopupEvents(reference, popper, popperInstance, open) {
+  if (open) return;
+  var showEvents = ['mouseenter', 'focus'];
+  var hideEvents = ['mouseleave', 'blur'];
+  var isVisible;
+
+  var showPopup = function showPopup() {
+    popper.setAttribute('data-show', '');
+    popper.setAttribute('data-cloudimage-360-show', '');
+    popperInstance.update();
+  };
+
+  var hidePopup = function hidePopup() {
+    setTimeout(function () {
+      if (!isVisible) {
+        popper.removeAttribute('data-show');
+        popper.removeAttribute('data-cloudimage-360-show');
+        popperInstance.setOptions(function (options) {
+          return _objectSpread(_objectSpread({}, options), {}, {
+            modifiers: [].concat((0, _toConsumableArray2.default)(options.modifiers), [{
+              name: 'eventListeners',
+              enabled: false
+            }])
+          });
+        });
+      } else {
+        isVisible = false;
+      }
+    }, 160);
+  };
+
+  var keepPopupShown = function keepPopupShown() {
+    isVisible = true;
+  };
+
+  showEvents.forEach(function (event) {
+    reference.addEventListener(event, showPopup);
+  });
+  hideEvents.forEach(function (event) {
+    reference.addEventListener(event, hidePopup);
+  });
+  popper.addEventListener('mouseenter', keepPopupShown);
+  popper.addEventListener('mouseleave', hidePopup);
+};
+
+exports.attachPopupEvents = attachPopupEvents;

package/dist/utils/hotspot/configs-error-handler.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configsErrorHandler = void 0;
+
+var configsErrorHandler = function configsErrorHandler(hotspotProps) {
+  var _hotspotProps$variant = hotspotProps.variant,
+      variant = _hotspotProps$variant === void 0 ? {} : _hotspotProps$variant,
+      _hotspotProps$popupPr = hotspotProps.popupProps,
+      popupProps = _hotspotProps$popupPr === void 0 ? {} : _hotspotProps$popupPr;
+  var anchorId = popupProps.anchorId;
+  var url = variant.url,
+      title = variant.title;
+
+  if (url && !title) {
+    console.error('Cloudimage-360: Hotspot config with variant link must have title for the link');
+  }
+
+  if (title && !url) {
+    console.error('Cloudimage-360: Hotspot config with variant link must have url for the link');
+  }
+
+  if (!title && !url && !anchorId) {
+    console.error('Cloudimage-360: Hotspot config with custom variant must provide anchorId');
+  }
+};
+
+exports.configsErrorHandler = configsErrorHandler;

package/dist/utils/hotspot/create-popper-instace.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPopperInstance = void 0;
+
+var _core = require("@popperjs/core");
+
+var createPopperInstance = function createPopperInstance(popper, popupProps, container) {
+  var placement = popupProps.placement,
+      offset = popupProps.offset;
+  var virtualReference = document.createElement('div');
+  var popperInstance = (0, _core.createPopper)(virtualReference, popper);
+  popperInstance.setOptions({
+    placement: placement,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: offset
+      }
+    }, {
+      name: 'preventOverflow',
+      options: {
+        boundary: container
+      }
+    }]
+  });
+  return popperInstance;
+};
+
+exports.createPopperInstance = createPopperInstance;