js-cloudimage-360-view 2.7.11 → 2.7.12

package/CHANGELOG.md

@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 2.7.12 - 2022-03-19
+### Changed
+- hotspots init method
+
 ## 2.7.11 - 2022-03-17
 ### Fixed
 - canvas aspect ratio

package/README.md

@@ -1,4 +1,4 @@
-[![Release](https://img.shields.io/badge/release-v2.7.11-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)

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;
@@ -108,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;
       }
@@ -129,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;
@@ -234,7 +244,7 @@ var CI360Viewer = /*#__PURE__*/function () {
 
         var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
 
-        if (this.hotspotConfig) {
+        if (this.hotspotsConfigs) {
           (0, _utils.hideHotspotsIcons)();
         }
 
@@ -766,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);
@@ -852,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);
       }
     }
   }, {
@@ -885,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",
@@ -921,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",
@@ -1342,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);

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");
 
@@ -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;
 }
@@ -93,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.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/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;

package/dist/utils/hotspots/elements/create-hotspot-icon.js

@@ -5,34 +5,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createHotspotIcon = void 0;
 
+var _hidePopup = require("../attach-events/hide-popup");
+
+var _showPopup = require("../attach-events/show-popup");
+
 var _hideHotspotIcon = require("../hide-hotspot-icon");
 
-var createHotspotIcon = function createHotspotIcon(container, hotspotConfig) {
+var createHotspotIcon = function createHotspotIcon(container, hotspotConfig, popup, popperInstance) {
   var indicatorSelector = hotspotConfig.indicatorSelector,
       variant = hotspotConfig.variant;
   var url = variant.url,
       anchorId = variant.anchorId;
+  var _hotspotConfig$popupP = hotspotConfig.popupProps.open,
+      open = _hotspotConfig$popupP === void 0 ? false : _hotspotConfig$popupP;
+  var isVisible;
   var hotspotIcon = document.createElement('div');
-
-  var mouseEnterHotspot = function mouseEnterHotspot() {
-    hotspotIcon.setAttribute('data-cloudimage-360-show', '');
-  };
-
-  var mouseLeaveHotspot = function mouseLeaveHotspot() {
-    hotspotIcon.removeAttribute('data-cloudimage-360-show');
-  };
-
   hotspotIcon.style.position = 'absolute';
   hotspotIcon.className = "cloudimage-360-hotspot-".concat(url ? 'link' : 'custom', "-icon ").concat(indicatorSelector);
   hotspotIcon.setAttribute('data-hotspot-icon-id', anchorId);
   hotspotIcon.setAttribute('data-cloudimage-360-hotspot', '');
-  hotspotIcon.addEventListener('mouseenter', mouseEnterHotspot);
-  hotspotIcon.addEventListener('mouseleave', mouseLeaveHotspot);
+
+  var popupMouseEnter = function popupMouseEnter() {
+    isVisible = true;
+  };
+
+  var popupMouseLeave = function popupMouseLeave() {
+    isVisible = false;
+    !open && (0, _hidePopup.hidePopup)(popup, isVisible);
+  };
 
   hotspotIcon.onclick = function (e) {
     return e.stopPropagation();
   };
 
+  var showEvents = ['mouseenter', 'touchstart', 'focus'];
+  var hideEvents = ['mouseleave', 'blur'];
+  showEvents.forEach(function (event) {
+    hotspotIcon.addEventListener(event, function () {
+      return (0, _showPopup.showPopup)(popup, popperInstance);
+    });
+  });
+
+  if (!open) {
+    hideEvents.forEach(function (event) {
+      hotspotIcon.addEventListener(event, function () {
+        return setTimeout(function () {
+          return (0, _hidePopup.hidePopup)(popup, isVisible);
+        }, 160);
+      });
+    });
+  }
+
+  popup.addEventListener('mouseenter', popupMouseEnter);
+  popup.addEventListener('mouseleave', popupMouseLeave);
   (0, _hideHotspotIcon.hideHotspotIcon)(hotspotIcon);
   container.appendChild(hotspotIcon);
   return hotspotIcon;

package/dist/utils/hotspots/elements/create-hotspots.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createHotspots = void 0;
 
+var _createPopperInstace = require("../create-popper-instace");
+
 var _createHotspotIcon = require("./create-hotspot-icon");
 
 var _createPopup = require("./create-popup");
@@ -12,8 +14,11 @@ var _createPopup = require("./create-popup");
 var createHotspots = function createHotspots(container, hotspotsProps) {
   hotspotsProps.forEach(function (hotspotProps) {
     var popupProps = hotspotProps.popupProps;
-    (0, _createPopup.createPopup)(container, hotspotProps, popupProps);
-    (0, _createHotspotIcon.createHotspotIcon)(container, hotspotProps);
+    var popup = (0, _createPopup.createPopup)(container, hotspotProps, popupProps);
+    var popperInstance = (0, _createPopperInstace.createPopperInstance)(popup, popupProps, container);
+    var hotspotIcon = (0, _createHotspotIcon.createHotspotIcon)(container, hotspotProps, popup, popperInstance);
+    popperInstance.state.elements.reference = hotspotIcon;
+    popperInstance.update();
   });
 };
 

package/dist/utils/hotspots/get-hotspot-popup-node.js

@@ -5,16 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getHotspotPopupNode = void 0;
 
-var getHotspotPopupNode = function getHotspotPopupNode(anchorId, open, currentPosition) {
+var getHotspotPopupNode = function getHotspotPopupNode(anchorId) {
   var hotspotPopupSelector = "[data-hotspot-popup-id=".concat(anchorId, "]");
   var hotspotPopup = document.querySelector(hotspotPopupSelector);
-
-  if (open && currentPosition) {
-    hotspotPopup.setAttribute('data-show', '');
-  } else {
-    hotspotPopup.removeAttribute('data-show');
-  }
-
   return hotspotPopup;
 };
 

package/dist/utils/hotspots/toggle-popup-events.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.togglePopupEvents = void 0;
+
+var _ci = require("../../ci360.utils");
+
+var _getHotspotIcon = require("./get-hotspot-icon");
+
+var togglePopupEvents = function togglePopupEvents(hotspotsProps, event, isMouseDown) {
+  var iClickOnHotspotIcon = event && (0, _ci.isTrue)(event.target, 'data-cloudimage-360-hotspot');
+  if (iClickOnHotspotIcon) return;
+  hotspotsProps.forEach(function (hotspotProps) {
+    var variant = hotspotProps.variant;
+    var anchorId = variant.anchorId;
+    var hotspotIcon = (0, _getHotspotIcon.getHotspotIcon)(anchorId);
+    hotspotIcon.style.pointerEvents = isMouseDown ? 'none' : 'all';
+  });
+};
+
+exports.togglePopupEvents = togglePopupEvents;

package/dist/utils/hotspots/update-hotspots.js

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateHotspots = void 0;
 
-var _getHotspotPopupNode = require("./get-hotspot-popup-node");
-
-var _createPopperInstace = require("./create-popper-instace");
-
-var _attachPopupEvents = require("./attach-popup-events");
-
 var _prepareHotspotsPositions = require("./prepare-hotspots-positions");
 
 var _getHotspotIcon = require("./get-hotspot-icon");
@@ -26,25 +20,18 @@ var updateHotspots = function updateHotspots(container, hotspotsProps) {
   var activeImageY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var movingDirection = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'x-axis';
   hotspotsProps.forEach(function (hotspotProps) {
-    var popupProps = hotspotProps.popupProps,
-        hotspots = hotspotProps.hotspots,
+    var hotspots = hotspotProps.hotspots,
         initialDimensions = hotspotProps.initialDimensions,
         orientation = hotspotProps.orientation,
         variant = hotspotProps.variant;
+    var anchorId = variant.anchorId;
     var hotspotOriantaion = (0, _getHotspotOrientation.getHotspotOriantaion)(movingDirection);
     var currentImageIndex = orientation === 'x' ? activeImageX : activeImageY;
-    var open = popupProps.open;
-    var anchorId = variant.anchorId;
     var hotspotsPositions = (0, _prepareHotspotsPositions.prepareHotspotsPositions)(hotspots);
     var currentPosition = hotspotsPositions.find(function (hotspotPosition) {
       return hotspotPosition.imageIndex === currentImageIndex;
     });
-    var popup = (0, _getHotspotPopupNode.getHotspotPopupNode)(anchorId, open, currentPosition);
     var hotspotIcon = (0, _getHotspotIcon.getHotspotIcon)(anchorId);
-    var popperInstance = (0, _createPopperInstace.createPopperInstance)(popup, popupProps, container);
-    popperInstance.state.elements.reference = hotspotIcon;
-    popperInstance.update();
-    (0, _attachPopupEvents.attachPopupEvents)(hotspotIcon, popup, popperInstance, open);
 
     if (currentPosition && hotspotOriantaion === orientation) {
       var _currentPosition$xCoo = currentPosition.xCoord,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.7.11",
+  "version": "2.7.12",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",

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

@@ -1,63 +0,0 @@
-"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', 'touchstart', '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;