js-cloudimage-360-view 2.7.9 → 2.7.12

package/CHANGELOG.md

@@ -25,6 +25,20 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.12 - 2022-03-19
+### Changed
+- hotspots init method
+
+## 2.7.11 - 2022-03-17
+### Fixed
+- canvas aspect ratio
+- initialization of lazyloading
+
+## 2.7.10 - 2022-03-01
+### Fixed
+- image quality in fullscreen
+- resized image loading
+
 ## 2.7.9 - 2022-02-27
 ### Fixed
 - typo in documentation

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.9-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/badge/release-v2.7.12-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -106,14 +106,14 @@ window.CI360.init();
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
 
-### addView
+### add
 
 ###### Type: **Function**
 
 add new view by id to cloudimage 360 views.
 
 ```javascript
-window.CI360.addView(idOfView: string);
+window.CI360.add(idOfView: string);
 ```
 
 ### update
@@ -241,7 +241,6 @@ data-api-version="v7"
 ```javascript
 data-api-version="null"
 ```
-### data-filename (or filename)
 ### data-filename-x (or filename-x)
 ### ~~data-filename (or filename)~~ [deprecated]
 

package/dist/ci360.service.js

@@ -23,12 +23,14 @@ require("./static/css/hotspots.css");
 
 var _utils = require("./utils");
 
+var _togglePopupEvents = require("./utils/hotspots/toggle-popup-events");
+
 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 CI360Viewer = /*#__PURE__*/function () {
-  function CI360Viewer(container, fullscreen, hotspotConfig) {
+  function CI360Viewer(container, fullscreen, hotspotsConfigs) {
     (0, _classCallCheck2.default)(this, CI360Viewer);
     this.container = container;
     this.movementStart = {
@@ -52,7 +54,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
     this.id = container.id;
-    this.hotspotConfig = hotspotConfig && (0, _utils.generateHotspotsConfigs)(hotspotConfig);
+    this.hotspotsConfigs = hotspotsConfigs && (0, _utils.generateHotspotsConfigs)(hotspotsConfigs);
     this.isMagnifyOpen = false;
     this.isDragged = false;
     this.startPointerZoom = false;
@@ -71,6 +73,18 @@ var CI360Viewer = /*#__PURE__*/function () {
   }
 
   (0, _createClass2.default)(CI360Viewer, [{
+    key: "isReady",
+    value: function isReady() {
+      var loadedXImages = this.imagesX.filter(function (image) {
+        return image;
+      });
+      var loadedYImages = this.imagesY.filter(function (image) {
+        return image;
+      });
+      var totalAmount = this.amountX + this.amountY;
+      return loadedXImages.length + loadedYImages.length === totalAmount;
+    }
+  }, {
     key: "mouseDown",
     value: function mouseDown(event) {
       if (!this.imagesLoaded) return;
@@ -96,6 +110,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.isClicked = true;
       this.isDragged = false;
 
+      if (this.hotspotsConfigs) {
+        (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs, event, true);
+      }
+
       if (isMouseOnHotspotElement) {
         this.isClicked = false;
       }
@@ -117,6 +135,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.show360ViewCircleIcon();
       }
 
+      if (this.hotspotsConfigs) {
+        (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs);
+      }
+
       if (this.pointerZoom && !this.fullscreenView) {
         setTimeout(function () {
           _this.isZoomReady = true;
@@ -222,7 +244,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
 
-        if (this.hotspotConfig) {
+        if (this.hotspotsConfigs) {
           (0, _utils.hideHotspotsIcons)();
         }
 
@@ -248,10 +270,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
-        return !!image;
+        return image;
       });
       var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
-        return !!image;
+        return image;
       });
       var totalAmount = this.amountX + this.amountY;
       var totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length;
@@ -277,7 +299,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
-        (0, _utils.preloadOriginalImages)(this.srcXConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
+        (0, _utils.preloadOriginalImages)(this.srcYConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
       }
     }
   }, {
@@ -665,6 +687,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.container.height = window.innerHeight * this.devicePixelRatio;
         this.container.style.height = window.innerHeight + 'px';
         this.container.style.maxWidth = 'unset';
+        this.canvas.width = window.innerWidth * this.devicePixelRatio;
+        this.canvas.style.width = window.innerWidth + 'px';
+        this.canvas.height = window.innerHeight * this.devicePixelRatio;
+        this.canvas.style.height = window.innerHeight + 'px';
         return;
       }
 
@@ -683,10 +709,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
-        return !!image;
+        return image;
       });
       var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
-        return !!image;
+        return image;
       });
       var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
 
@@ -711,17 +737,18 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "requestResizedImages",
     value: function requestResizedImages() {
+      if (!this.isReady()) return;
       var responsive = this.ciParams.ciToken;
       var firstImage = this.imagesX[0];
       this.update();
+      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
       this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
-      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
-      (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X), true);
+      (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
 
       if (this.allowSpinY) {
         var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
-        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y), true);
+        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y));
       }
     }
   }, {
@@ -749,8 +776,8 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (this.mouseTracked) {
           this.updateImageScale(ctx);
         } else {
-          if (this.hotspotConfig && !this.autoplay) {
-            (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+          if (this.hotspotsConfigs && !this.autoplay) {
+            (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection, this.isClicked);
           }
 
           ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
@@ -795,6 +822,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function onFirstImageLoaded(image) {
       if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
       var ctx = this.canvas.getContext("2d");
+      ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
@@ -834,8 +862,8 @@ var CI360Viewer = /*#__PURE__*/function () {
         this.addFullscreenIcon();
       }
 
-      if (this.hotspotConfig && !this.autoplay) {
-        (0, _utils.updateHotspots)(this.container, this.hotspotConfig, this.activeImageX, this.activeImageY, this.movingDirection);
+      if (this.hotspotsConfigs && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
       }
     }
   }, {
@@ -867,6 +895,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       this.initControls();
+
+      if (this.hotspotsConfigs && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
     key: "magnify",
@@ -903,7 +935,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       event.stopPropagation();
       if (this.mouseTracked) this.togglePointerZoom();
       var fullscreenContainer = (0, _utils.createFullscreenModal)(this.container);
-      new CI360Viewer(fullscreenContainer, true, this.hotspotConfig);
+      new CI360Viewer(fullscreenContainer, true, this.hotspotsConfigs);
     }
   }, {
     key: "setFullscreenEvents",
@@ -962,9 +994,9 @@ var CI360Viewer = /*#__PURE__*/function () {
         var viewIndex = viewers.findIndex(function (view) {
           return view.id === _this5.container.id;
         });
+        container.removeChild(this.innerBox);
         container = container.cloneNode(true);
         container.className = container.className.replace(' initialized', '');
-        container.innerHTML = '';
         oldElement.parentNode.replaceChild(container, oldElement);
         return viewers.splice(viewIndex, 1, new CI360Viewer(container));
       }
@@ -1159,10 +1191,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         onEventEnd: onEventEnd
       };
       var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
-      this.topElem = controlsElements.top || {};
-      this.bottomElem = controlsElements.bottom || {};
-      this.leftElem = controlsElements.left || {};
-      this.rightElem = controlsElements.right || {};
+      this.topElem = controlsElements.top;
+      this.bottomElem = controlsElements.bottom;
+      this.leftElem = controlsElements.left;
+      this.rightElem = controlsElements.right;
     }
   }, {
     key: "attachEvents",
@@ -1272,8 +1304,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.disableDrag = disableDrag;
       this.fullscreen = fullscreen;
       this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
-      this.lazyloadX = lazyload;
-      this.lazyloadY = lazyload;
       this.lazySelector = lazySelector;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
@@ -1306,10 +1336,6 @@ var CI360Viewer = /*#__PURE__*/function () {
           this.addMagnifier();
         }
 
-        if (this.info) {
-          this.showImageInfo(ctx);
-        }
-
         if (this.bottomCircle && !this.fullscreenView) {
           this.add360ViewCircleIcon();
         }
@@ -1330,8 +1356,8 @@ var CI360Viewer = /*#__PURE__*/function () {
       this.canvas = (0, _utils.createCanvas)(this.innerBox);
       this.loader = (0, _utils.createLoader)(this.innerBox);
 
-      if (this.hotspotConfig && !this.fullscreenView) {
-        (0, _utils.createHotspots)(container, this.hotspotConfig);
+      if (this.hotspotsConfigs && !this.fullscreenView) {
+        (0, _utils.createHotspots)(container, this.hotspotsConfigs);
       }
 
       (0, _utils.applyStylesToContainer)(this.container);
@@ -1343,7 +1369,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         innerBox: this.innerBox,
         apiVersion: apiVersion,
         ciParams: ciParams,
-        lazyload: lazyload,
         lazySelector: lazySelector,
         amount: this.amountX,
         indexZeroBase: indexZeroBase,
@@ -1356,26 +1381,6 @@ var CI360Viewer = /*#__PURE__*/function () {
         amount: this.amountY
       });
       var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
-      var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
-
-      var initLazyload = function initLazyload(image, orientation) {
-        var lazyloadXConfig = _objectSpread(_objectSpread({}, _this7.srcXConfig), {}, {
-          lazyload: false
-        });
-
-        var lazyloadYConfig = _objectSpread(_objectSpread({}, _this7.srcYConfig), {}, {
-          lazyload: false
-        });
-
-        if (orientation === _constants.ORIENTATIONS.Y) {
-          _this7.lazyloadY = false;
-          (0, _utils.preloadImages)(lazyloadXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
-        } else {
-          _this7.lazyloadX = false;
-          _this7.lazyloadInitImageX = image;
-          (0, _utils.preloadImages)(lazyloadYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
-        }
-      };
 
       var onImageLoad = function onImageLoad(orientation, image, index) {
         if (orientation !== _constants.ORIENTATIONS.Y) {
@@ -1385,40 +1390,48 @@ var CI360Viewer = /*#__PURE__*/function () {
         }
 
         var loadedXImages = _this7.imagesX.filter(function (image) {
-          return !!image;
+          return image;
         });
 
         var loadedYImages = _this7.imagesY.filter(function (image) {
-          return !!image;
+          return image;
         });
 
         var totalAmount = _this7.amountX + _this7.amountY;
-        var totalLoadedImages = _this7.imagesX.length + _this7.imagesY.length;
-        var isFirstImageLoaded = index === 0 && orientation !== _constants.ORIENTATIONS.Y;
-        var isAllImagesLoaded = loadedXImages.length + loadedYImages.length === _this7.amountX + _this7.amountY;
+        var totalLoadedImages = loadedXImages.length + loadedYImages.length;
+        var isFirstImageLoaded = !index && orientation !== _constants.ORIENTATIONS.Y;
         var percentage = Math.round(totalLoadedImages / totalAmount * 100);
 
         _this7.updatePercentageInLoader(percentage);
 
-        if (_this7.lazyloadX || _this7.lazyloadY) return initLazyload(image, orientation);
-
         if (isFirstImageLoaded) {
           _this7.onFirstImageLoaded(image);
         }
 
-        if (isAllImagesLoaded) {
+        if (_this7.isReady()) {
           _this7.onAllImagesLoaded();
+        }
+      };
 
-          if (lazyload) {
-            _this7.innerBox.removeChild(_this7.lazyloadInitImageX);
-          }
+      var loadImages = function loadImages() {
+        (0, _utils.preloadImages)(_this7.srcXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
+
+        if (_this7.allowSpinY) {
+          var srcY = (0, _utils.generateImagesPath)(_this7.srcYConfig);
+          (0, _utils.preloadImages)(_this7.srcYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
         }
       };
 
-      (0, _utils.preloadImages)(this.srcXConfig, srcX, onImageLoad.bind(this, _constants.ORIENTATIONS.X));
+      if (lazyload) {
+        var onFirstImageLoad = function onFirstImageLoad(image) {
+          _this7.innerBox.removeChild(image);
 
-      if (this.allowSpinY) {
-        (0, _utils.preloadImages)(this.srcYConfig, srcY, onImageLoad.bind(this, _constants.ORIENTATIONS.Y));
+          loadImages();
+        };
+
+        (0, _utils.initLazyload)(srcX, this.srcXConfig, onFirstImageLoad);
+      } else {
+        loadImages();
       }
 
       this.attachEvents(draggable, swipeable, keys);

package/dist/ci360.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setView360Icon = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
+exports.setView360Icon = exports.isTrue = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
 
 var _constants = require("./constants");
 
@@ -46,7 +46,7 @@ var get360ViewProps = function get360ViewProps(image) {
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
     logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
-    ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
+    ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
     imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };
 };
@@ -59,6 +59,8 @@ var isTrue = function isTrue(image, type) {
   return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';
 };
 
+exports.isTrue = isTrue;
+
 var attr = function attr(element, attribute) {
   return element.getAttribute(attribute);
 };

package/dist/index.js

@@ -12,7 +12,7 @@ var _ci = _interopRequireDefault(require("./ci360.service"));
 
 var _ci2 = require("./ci360.utils");
 
-function setContainerId(container) {
+function getContainerWithId(container) {
   var containerId = container.id;
 
   if (!containerId) {
@@ -27,12 +27,13 @@ function setContainerId(container) {
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  var hotspotsConfigs = window.CI360.hotspots || {};
-  [].slice.call(view360Array).forEach(function (container) {
-    var containerWithId = setContainerId(container);
-    var hotspotInstanceName = (0, _ci2.attr)(containerWithId, 'hotspot-instance') || (0, _ci2.attr)(containerWithId, 'data-hotspot-instance');
-    var hotspotConfig = hotspotsConfigs === null || hotspotsConfigs === void 0 ? void 0 : hotspotsConfigs[hotspotInstanceName];
-    viewers.push(new _ci.default(containerWithId, false, hotspotConfig));
+  [].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;
 }
@@ -61,7 +62,7 @@ function getActiveIndexByID(id, oriantation) {
   return currentViewer && currentViewer.activeImageX - 1;
 }
 
-function addView(id) {
+function add(id) {
   var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
 
   if (view360Array.length && id) {
@@ -77,15 +78,11 @@ function update() {
   var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
   if (id) {
-    try {
-      var view = window.CI360._viewers.filter(function (viewer) {
-        return viewer.id === id;
-      })[0];
-
-      view.updateView(forceUpdate, window.CI360._viewers);
-    } catch (_unused) {
-      console.warn("Cloudimage-360: there is no view with such id '".concat(id, "', you may need to run window.addView('").concat(id, "') before run update'"));
-    }
+    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) {
       viewer.updateView(forceUpdate, window.CI360._viewers);
@@ -97,12 +94,24 @@ 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;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
 window.CI360.update = update;
-window.CI360.addView = addView;
+window.CI360.add = add;
+window.CI360.addHotspots = addHotspots;
 
 if (!window.CI360.notInitOnLoad) {
   init();

package/dist/static/css/hotspots.css

@@ -35,7 +35,7 @@
   border: 1px solid #FFFFFF33;
   border-radius: 50%;
   box-sizing: border-box;
-  transition: opacity 800ms ease-in-out;
+  transition: opacity 300ms ease-in-out;
   cursor: auto;
 }
 
@@ -61,7 +61,7 @@
 .cloudimage-360-hotspot-custom-icon::after {
   content: '+';
   position: absolute;
-  width: 8px;
+  line-height: 20px;
   left: 50%;
   top: 100%;
   color: #FFF;
@@ -131,6 +131,8 @@
 .cloudimage-360-images-carousel .cloudimage-360-carousel-image {
   display: none;
   min-height: 187px;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .cloudimage-360-images-carousel .cloudimage-360-carousel-image.active-image {
@@ -194,10 +196,10 @@
   padding: 4px 8px;
   transition: background-color 200ms ease-in-out;
   border-radius: 2px;
+  text-decoration: none;
 }
 
 .cloudimage-360-modal-more-details:hover {
-  text-decoration: none;
   color: #76AD01;
   background-color: #e1f5d8;
 }

package/dist/static/css/style.css

@@ -118,4 +118,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/hotspots/attach-events/hide-popup.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hidePopup = void 0;
+
+var hidePopup = function hidePopup(popup, isVisible) {
+  if (!isVisible) {
+    popup.removeAttribute('data-show');
+    popup.removeAttribute('data-cloudimage-360-show');
+  }
+};
+
+exports.hidePopup = hidePopup;

package/dist/utils/hotspots/attach-events/show-popup.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showPopup = void 0;
+
+var showPopup = function showPopup(popup, popperInstance) {
+  popup.setAttribute('data-show', '');
+  popup.setAttribute('data-cloudimage-360-show', '');
+  popperInstance.update();
+};
+
+exports.showPopup = showPopup;