js-cloudimage-360-view 3.0.3 → 3.1.0

package/dist/ci360.utils.js

@@ -4,11 +4,8 @@ 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 {
@@ -47,44 +44,35 @@ var get360ViewProps = function get360ViewProps(image) {
     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')
+    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/index.js

@@ -33,11 +33,7 @@ Object.defineProperty(exports, "ORIENTATIONS", {
     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/props-require-reload.js

@@ -4,18 +4,30 @@ 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
+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/index.js

@@ -1,70 +1,51 @@
 "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;
@@ -72,16 +53,13 @@ function add(id) {
     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;
-
   if (id) {
     var view = window.CI360._viewers.filter(function (viewer) {
       return viewer.id === id;
     })[0];
-
     view.updateView(forceUpdate, window.CI360._viewers);
   } else {
     window.CI360._viewers.forEach(function (viewer) {
@@ -89,22 +67,18 @@ function update() {
     });
   }
 }
-
 function isNoViewers() {
   return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 }
-
 function addHotspots(instanceId, config) {
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
   var container = Array.from(view360Array).find(function (view) {
     return view.id === instanceId;
   });
-
   if (container) {
     window.CI360._viewers.push(new _ci.default(container, false, config));
   }
 }
-
 window.CI360 = window.CI360 || {};
 window.CI360.init = init;
 window.CI360.destroy = destroy;
@@ -112,7 +86,6 @@ 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 +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 }
+.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 }
 }