From 39469ed58823ebe45388a5a885d880e288c99366 Mon Sep 17 00:00:00 2001
From: Amr Wagdy <wagdy@scaleflex.com>
Date: Mon, 25 Sep 2023 18:15:01 +0300
Subject: [PATCH] feat: Dynamic add hotspots

---
 CHANGELOG.md         |  4 ++++
 package.json         |  2 +-
 src/ci360.service.js | 12 +++++++++---
 src/index.js         | 22 ++++++++++++++++------
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da4fa7b..293a4a2 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index f5928a8..c5963b1 100644
--- a/package.json
+++ b/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",
diff --git a/src/ci360.service.js b/src/ci360.service.js
index 5fe573f..2b82cee 100644
--- a/src/ci360.service.js
+++ b/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();
     }
 
diff --git a/src/index.js b/src/index.js
index 1abf11f..18e66b0 100644
--- a/src/index.js
+++ b/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)
   }
 }