js-cloudimage-360-view 3.1.1 → 3.2.1

package/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/README.md

@@ -12,11 +12,6 @@
 			alt="cloudimage logo"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 	</a>
-		<!-- <a href="https://www.cloudimage.io/#gh-dark-mode-only">
-		<img
-			alt="cloudimage logo"
-			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
-   </a> -->
 </p>
 
 <h1 align="center">

package/dist/ci360.service.js

@@ -855,7 +855,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     }
   }, {
     key: "updateView",
-    value: function updateView(forceUpdate, viewers) {
+    value: function updateView(forceUpdate, viewers, hotspotConfigs) {
       var _this5 = this;
       var container = this.container;
       var imageProps = (0, _ci.get360ViewProps)(container);
@@ -877,7 +877,7 @@ var CI360Viewer = /*#__PURE__*/function () {
       container.style.cursor = 'default';
       container.setAttribute('draggable', 'false');
       this.stop();
-      this.init(container, true);
+      this.init(container, true, hotspotConfigs);
     }
   }, {
     key: "destroy",
@@ -1079,6 +1079,7 @@ var CI360Viewer = /*#__PURE__*/function () {
     value: function init(container) {
       var _this7 = this;
       var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var hotspotsConfigs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
         folder = _get360ViewProps.folder,
         apiVersion = _get360ViewProps.apiVersion,
@@ -1190,6 +1191,10 @@ var CI360Viewer = /*#__PURE__*/function () {
         if (this.boxShadow && !this.fullscreenView) {
           this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
         }
+        if (hotspotsConfigs && !this.fullscreenView) {
+          this.hotspotsConfigs = (0, _utils.generateHotspotsConfigs)(hotspotsConfigs);
+          (0, _utils.createHotspots)(container, this.hotspotsConfigs);
+        }
         return this.onAllImagesLoaded();
       }
       this.innerBox = (0, _utils.createInnerBox)(this.container);

package/dist/index.js

@@ -56,11 +56,19 @@ function add(id) {
 function update() {
   var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var hotspotConfigs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   if (id) {
     var view = window.CI360._viewers.filter(function (viewer) {
       return viewer.id === id;
     })[0];
-    view.updateView(forceUpdate, window.CI360._viewers);
+    if (hotspotConfigs) {
+      var view360Array = document.querySelectorAll('.cloudimage-360');
+      var _container2 = Array.from(view360Array).find(function (view) {
+        return view.id === id;
+      });
+      _container2.setAttribute('data-hotspots', true);
+    }
+    view.updateView(forceUpdate, window.CI360._viewers, hotspotConfigs);
   } else {
     window.CI360._viewers.forEach(function (viewer) {
       viewer.updateView(forceUpdate, window.CI360._viewers);
@@ -72,11 +80,14 @@ function isNoViewers() {
 }
 function addHotspots(instanceId, config) {
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
-  var container = Array.from(view360Array).find(function (view) {
+  var notInitializedContainer = Array.from(view360Array).find(function (view) {
     return view.id === instanceId;
   });
-  if (container) {
-    window.CI360._viewers.push(new _ci.default(container, false, config));
+  if (notInitializedContainer) {
+    container.setAttribute('data-hotspots', true);
+    return window.CI360._viewers.push(new _ci.default(container, false, config));
+  } else {
+    update(instanceId, false, config);
   }
 }
 window.CI360 = window.CI360 || {};

package/package.json

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