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

package/dist/ci360.utils.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setView360Icon = exports.isTrue = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
-var _constants = require("./constants");
-var _this = void 0;
-//TODO [deprecated]: remove filename, amount in the upcoming versions
-var get360ViewProps = function get360ViewProps(image) {
-  return {
-    folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
-    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
-    filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
-    filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
-    imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null,
-    imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null,
-    indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
-    amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),
-    amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10),
-    speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
-    dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
-    keys: isTrue(image, 'keys'),
-    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') || _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),
-    bottomCircle: isTrue(image, 'bottom-circle'),
-    disableDrag: isTrue(image, 'disable-drag'),
-    fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
-    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
-    bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
-    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
-    ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
-    ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
-    lazyload: isTrue(image, 'lazyload'),
-    lazySelector: attr(image, 'lazyload-selector') || attr(image, 'data-lazyload-selector') || 'lazyload',
-    spinReverse: isTrue(image, 'spin-reverse'),
-    controlReverse: isTrue(image, 'control-reverse'),
-    stopAtEdges: isTrue(image, 'stop-at-edges'),
-    hide360Logo: isTrue(image, 'hide-360-logo'),
-    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg',
-    ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
-    imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info'),
-    requestResponsiveImages: isTrue(image, 'request-responsive-images')
-  };
-};
-exports.get360ViewProps = get360ViewProps;
-var isTrue = function isTrue(image, type) {
-  var imgProp = attr(image, type);
-  var imgDataProp = attr(image, "data-".concat(type));
-  return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';
-};
-exports.isTrue = isTrue;
-var attr = function attr(element, attribute) {
-  return element.getAttribute(attribute);
-};
-exports.attr = attr;
-var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
-  view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
-};
-exports.setView360Icon = setView360Icon;
-var debounce = function debounce(func, timeout) {
-  var timer;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    clearTimeout(timer);
-    timer = setTimeout(function () {
-      func.apply(_this, args);
-    }, timeout);
-  };
-};
-exports.debounce = debounce;

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

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

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

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

@@ -1,12 +0,0 @@
-"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/props-require-reload.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PROPS_REQUIRE_RELOAD = void 0;
-var PROPS_REQUIRE_RELOAD = ['folder',
-//images source
-'filenameX',
-//images source
-'filenameY',
-//images source
-'apiVersion',
-//images source
-'imageListX',
-//images source
-'imageListY',
-//images source
-'indexZeroBase',
-//images source
-'lazySelector',
-//images source
-'keys',
-// events
-'stopAtEdges',
-// events
-'disableDrag',
-// events
-'controlReverse',
-// events
-'disableDrag' // events
-];
-exports.PROPS_REQUIRE_RELOAD = PROPS_REQUIRE_RELOAD;

package/dist/constants/regex.js

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

@@ -1,102 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-require("core-js/features/array/for-each");
-require("core-js/features/array/filter");
-require("core-js/features/array/includes");
-var _ci = _interopRequireDefault(require("./ci360.service"));
-var _ci2 = require("./ci360.utils");
-function getContainerWithId(container) {
-  var containerId = container.id;
-  if (!containerId) {
-    var uniqueId = Math.floor(Math.random() * 10000);
-    var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
-    container.id = generatedContainerId;
-  }
-  return container;
-}
-function init() {
-  var viewers = [];
-  var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  [].slice.call(view360Array).forEach(function (_container) {
-    var container = getContainerWithId(_container);
-    var isHotspotsEnabled = (0, _ci2.isTrue)(container, 'hotspots');
-    if (!isHotspotsEnabled) {
-      viewers.push(new _ci.default(container));
-    }
-  });
-  window.CI360._viewers = viewers;
-}
-function destroy() {
-  if (isNoViewers()) return;
-  window.CI360._viewers.forEach(function (viewer) {
-    viewer.destroy();
-  });
-  window.CI360._viewers = [];
-}
-function getActiveIndexByID(id, oriantation) {
-  if (isNoViewers()) return;
-  var currentViewer = window.CI360._viewers.filter(function (viewer) {
-    return viewer.id === id;
-  })[0];
-  if (oriantation === 'y') {
-    return currentViewer && currentViewer.activeImageY - 1;
-  }
-  return currentViewer && currentViewer.activeImageX - 1;
-}
-function add(id) {
-  var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
-  if (view360Array.length && id) {
-    var newViewContainer = view360Array.filter(function (viewer) {
-      return viewer.id === id;
-    })[0];
-    newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
-  }
-}
-function update() {
-  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var hotspotConfigs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  if (id) {
-    var view = window.CI360._viewers.filter(function (viewer) {
-      return viewer.id === id;
-    })[0];
-    if (hotspotConfigs) {
-      var view360Array = document.querySelectorAll('.cloudimage-360');
-      var _container2 = Array.from(view360Array).find(function (view) {
-        return view.id === id;
-      });
-      _container2.setAttribute('data-hotspots', true);
-    }
-    view.updateView(forceUpdate, window.CI360._viewers, hotspotConfigs);
-  } else {
-    window.CI360._viewers.forEach(function (viewer) {
-      viewer.updateView(forceUpdate, window.CI360._viewers);
-    });
-  }
-}
-function isNoViewers() {
-  return !(window.CI360._viewers && window.CI360._viewers.length > 0);
-}
-function addHotspots(instanceId, config) {
-  var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  var notInitializedContainer = Array.from(view360Array).find(function (view) {
-    return view.id === instanceId;
-  });
-  if (notInitializedContainer) {
-    container.setAttribute('data-hotspots', true);
-    return window.CI360._viewers.push(new _ci.default(container, false, config));
-  } else {
-    update(instanceId, false, config);
-  }
-}
-window.CI360 = window.CI360 || {};
-window.CI360.init = init;
-window.CI360.destroy = destroy;
-window.CI360.getActiveIndexByID = getActiveIndexByID;
-window.CI360.update = update;
-window.CI360.add = add;
-window.CI360.addHotspots = addHotspots;
-if (!window.CI360.notInitOnLoad) {
-  init();
-}

package/dist/static/css/hotspots.css

@@ -1,222 +0,0 @@
-.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: 9px;
-  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: 9px;
-  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 }
-}