js-cloudimage-360-view 3.2.1 → 4.0.0-beta.2

package/dist/static/css/style.css

@@ -1,230 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1,56 +0,0 @@
-"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

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

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

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

@@ -1,14 +0,0 @@
-"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.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/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

@@ -1,13 +0,0 @@
-"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

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

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

@@ -1,12 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-"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

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

@@ -1,13 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-"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

@@ -1,96 +0,0 @@
-"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;
-  }
-});
-Object.defineProperty(exports, "removeChildFromParent", {
-  enumerable: true,
-  get: function get() {
-    return _removeChildFromParent.removeChildFromParent;
-  }
-});
-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");
-var _removeChildFromParent = require("./remove-child-from-parent");

package/dist/utils/container-elements/remove-child-from-parent.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.removeChildFromParent = void 0;
-var removeChildFromParent = function removeChildFromParent(parent, child) {
-  if (parent && child) {
-    try {
-      parent.removeChild(child);
-    } catch (_unused) {}
-  }
-};
-exports.removeChildFromParent = removeChildFromParent;

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

@@ -1,11 +0,0 @@
-"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;