hotFix: improve update function

examples/src/index.js

@@ -16,25 +16,4 @@ const wrapper = document.getElementById('main');
 
 wrapper.classList.add('active');
 spinner.style.display = 'none';
-document.body.classList.remove('on-load');
-
-const cloudimageModalOverlay = document.getElementById('cloudimage-modal-overlay');
-const showModalBtn = document.getElementById('show-modal-btn');
-const cloudimageModal = document.getElementById('cloudimage-modal');
-
-
-showModalBtn.onclick = openModalPreview;
-cloudimageModalOverlay.onclick = closeModalPreview;
-
-
-function openModalPreview() {
-  cloudimageModal.style.display = 'flex';
-  cloudimageModalOverlay.style.display = 'block';
-  document.body.style.overflowY = 'hidden';
-}
-
-function closeModalPreview() {
-  cloudimageModal.style.display = 'none';
-  cloudimageModalOverlay.style.display = 'none';
-  document.body.style.overflowY = 'visible';
-}
+document.body.classList.remove('on-load');

src/ci360.service.js

@@ -44,6 +44,7 @@ import {
   hideHotspotsIcons,
   isSrcPropsChanged,
   getImageAspectRatio,
+  removeChildFromParent,
   } from './utils';
 
   class CI360Viewer {
@@ -863,7 +864,7 @@ import {
     }
 
     if (this.boxShadow && !this.fullscreenView) {
-      createBoxShadow(this.boxShadow, this.innerBox);
+      this.boxShadowEl =createBoxShadow(this.boxShadow, this.innerBox);
     }
 
     if (this.bottomCircle && !this.fullscreenView) {
@@ -1294,6 +1295,38 @@ import {
     }
 
     if (update) {
+      removeChildFromParent(this.innerBox, this.iconsContainer);
+      removeChildFromParent(this.innerBox, this.boxShadowEl);
+      removeChildFromParent(this.innerBox, this.view360Icon);
+      this.remove360ViewCircleIcon();
+
+      this.iconsContainer = createIconsContainer(this.innerBox);
+
+      if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
+        this.add360ViewIcon();
+        setView360Icon(this.view360Icon, this.logoSrc);
+      }
+
+      if (this.magnifier) {
+        this.addMagnifier();
+      }
+
+      if (this.info) {
+        this.showImageInfo(ctx);
+      }
+
+      if (this.bottomCircle && !this.fullscreenView) {
+        this.add360ViewCircleIcon();
+      }
+
+      if (this.fullscreen && !this.fullscreenView) {
+        this.addFullscreenIcon();
+      }
+
+      if (this.boxShadow && !this.fullscreenView) {
+        this.boxShadowEl = createBoxShadow(this.boxShadow, this.innerBox);
+      }
+
       this.onAllImagesLoaded();
 
       return;

src/utils/container-elements/index.js

@@ -10,3 +10,4 @@ export { createBoxShadow } from './create-box-shadow';
 export { createLoader } from './create-loader';
 export { applyStylesToContainer } from './apply-styles-to-container';
 export { createFullscreenModal } from './create-fullscreen-modal';
+export { removeChildFromParent } from './remove-child-from-parent';

src/utils/container-elements/remove-child-from-parent.js

@@ -0,0 +1,7 @@
+export const removeChildFromParent = (parent, child) => {
+  if (parent && child) {
+    try {
+      parent.removeChild(child);
+    } catch {}
+  }
+}