feat: Dynamic add hotspots

Author: Amr Wagdy

CHANGELOG.md

@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 3.2.0 - 2023-09-25
+### Added
+- Possibility to add hotspots dynamically
+
 ## 3.1.1 - 2023-04-19
 ### Fixed
 - Remove CVE vulnerabilities

package.json

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

src/ci360.service.js

@@ -1033,7 +1033,7 @@ class CI360Viewer {
     window.clearTimeout(this.loopTimeoutId);
   }
 
-  updateView(forceUpdate, viewers) {
+  updateView(forceUpdate, viewers, hotspotConfigs) {
     let container = this.container;
 
     const imageProps = get360ViewProps(container);
@@ -1060,7 +1060,7 @@ class CI360Viewer {
     container.setAttribute('draggable', 'false');
 
     this.stop();
-    this.init(container, true);
+    this.init(container, true, hotspotConfigs);
   }
 
   destroy() {
@@ -1273,7 +1273,7 @@ class CI360Viewer {
     document.addEventListener('keydown', this.keyDownGeneral.bind(this));
   }
 
-  init(container, update = false) {
+  init(container, update = false, hotspotsConfigs = null) {
     let {
       folder, apiVersion, filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow,
       autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, pointerZoom, ratio, imageInfo = 'black', requestResponsiveImages
@@ -1351,6 +1351,12 @@ class CI360Viewer {
         this.boxShadowEl = createBoxShadow(this.boxShadow, this.innerBox);
       }
 
+
+    if (hotspotsConfigs && !this.fullscreenView) {
+      this.hotspotsConfigs = generateHotspotsConfigs(hotspotsConfigs);
+      createHotspots(container, this.hotspotsConfigs);
+    }
+
       return this.onAllImagesLoaded();
     }
 

src/index.js

@@ -64,10 +64,17 @@ function add(id) {
   }
 }
 
-function update(id = null, forceUpdate = false) {
+function update(id = null, forceUpdate = false, hotspotConfigs = null) {
   if (id) {
     const view = window.CI360._viewers.filter(viewer => viewer.id === id)[0];
-    view.updateView(forceUpdate, window.CI360._viewers);
+
+    if (hotspotConfigs) {
+      const view360Array = document.querySelectorAll('.cloudimage-360');
+      const container = Array.from(view360Array).find((view) => view.id === id);
+      container.setAttribute('data-hotspots', true);
+    }
+
+    view.updateView(forceUpdate, window.CI360._viewers, hotspotConfigs);
   } else {
     window.CI360._viewers
       .forEach(viewer => { viewer.updateView(forceUpdate, window.CI360._viewers); });
@@ -80,11 +87,14 @@ function isNoViewers() {
 
 function addHotspots(instanceId, config) {
   const view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  const container = Array.from(view360Array)
-    .find(view => view.id === instanceId);
+  const notInitializedContainer = Array.from(view360Array).find(view => view.id === instanceId);
 
-  if (container) {
-    window.CI360._viewers.push(new CI360Viewer(container, false, config))
+  if (notInitializedContainer) {
+      container.setAttribute('data-hotspots', true)
+
+    return window.CI360._viewers.push(new CI360Viewer(container, false, config))
+  } else {
+    update(instanceId, false, config)
   }
 }