Allow openning same image twice, fix multiple images leaked into imageWrapper

Author: nicolas-t

dist/js/chocolat.cjs.js

@@ -267,7 +267,14 @@ class Chocolat {
   }
 
   load(index) {
-    this.state.visible = true;
+    if (!this.state.visible) {
+      this.state.visible = true;
+      setTimeout(() => {
+        this.elems.overlay.classList.add('chocolat-visible');
+        this.elems.wrapper.classList.add('chocolat-visible');
+      }, 0);
+      this.elems.container.classList.add('chocolat-open');
+    }
 
     if (this.settings.fullScreen) {
       this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
@@ -277,11 +284,6 @@ class Chocolat {
       return Promise.resolve();
     }
 
-    setTimeout(() => {
-      this.elems.overlay.classList.add('chocolat-visible');
-      this.elems.wrapper.classList.add('chocolat-visible');
-    }, 0);
-    this.elems.container.classList.add('chocolat-open');
     let loaderTimer = setTimeout(() => {
       this.elems.loader.classList.add('chocolat-visible');
     }, 1000);
@@ -350,9 +352,8 @@ class Chocolat {
   }
 
   appear(image) {
-    this.elems.img = image; // Not sure if needed to avoid white flickering ?
-    // this.elems.imageWrapper.innerHTML = ''
-
+    this.elems.imageWrapper.removeChild(this.elems.img);
+    this.elems.img = image;
     this.elems.img.setAttribute('class', 'chocolat-img');
     this.elems.imageWrapper.appendChild(this.elems.img);
     const fadeInPromise = transitionAsPromise(() => {

dist/js/chocolat.esm.js

@@ -265,7 +265,14 @@ class Chocolat {
   }
 
   load(index) {
-    this.state.visible = true;
+    if (!this.state.visible) {
+      this.state.visible = true;
+      setTimeout(() => {
+        this.elems.overlay.classList.add('chocolat-visible');
+        this.elems.wrapper.classList.add('chocolat-visible');
+      }, 0);
+      this.elems.container.classList.add('chocolat-open');
+    }
 
     if (this.settings.fullScreen) {
       this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
@@ -275,11 +282,6 @@ class Chocolat {
       return Promise.resolve();
     }
 
-    setTimeout(() => {
-      this.elems.overlay.classList.add('chocolat-visible');
-      this.elems.wrapper.classList.add('chocolat-visible');
-    }, 0);
-    this.elems.container.classList.add('chocolat-open');
     let loaderTimer = setTimeout(() => {
       this.elems.loader.classList.add('chocolat-visible');
     }, 1000);
@@ -348,9 +350,8 @@ class Chocolat {
   }
 
   appear(image) {
-    this.elems.img = image; // Not sure if needed to avoid white flickering ?
-    // this.elems.imageWrapper.innerHTML = ''
-
+    this.elems.imageWrapper.removeChild(this.elems.img);
+    this.elems.img = image;
     this.elems.img.setAttribute('class', 'chocolat-img');
     this.elems.imageWrapper.appendChild(this.elems.img);
     const fadeInPromise = transitionAsPromise(() => {

dist/js/chocolat.js

@@ -268,7 +268,14 @@
       }
 
       load(index) {
-        this.state.visible = true;
+        if (!this.state.visible) {
+          this.state.visible = true;
+          setTimeout(() => {
+            this.elems.overlay.classList.add('chocolat-visible');
+            this.elems.wrapper.classList.add('chocolat-visible');
+          }, 0);
+          this.elems.container.classList.add('chocolat-open');
+        }
 
         if (this.settings.fullScreen) {
           this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
@@ -278,11 +285,6 @@
           return Promise.resolve();
         }
 
-        setTimeout(() => {
-          this.elems.overlay.classList.add('chocolat-visible');
-          this.elems.wrapper.classList.add('chocolat-visible');
-        }, 0);
-        this.elems.container.classList.add('chocolat-open');
         let loaderTimer = setTimeout(() => {
           this.elems.loader.classList.add('chocolat-visible');
         }, 1000);
@@ -351,9 +353,8 @@
       }
 
       appear(image) {
-        this.elems.img = image; // Not sure if needed to avoid white flickering ?
-        // this.elems.imageWrapper.innerHTML = ''
-
+        this.elems.imageWrapper.removeChild(this.elems.img);
+        this.elems.img = image;
         this.elems.img.setAttribute('class', 'chocolat-img');
         this.elems.imageWrapper.appendChild(this.elems.img);
         const fadeInPromise = transitionAsPromise(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocolat",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "Responsive Lightbox Plugin",
   "main": "dist/js/chocolat.cjs.js",
   "module": "dist/js/chocolat.esm.js",

src/js/chocolat.js

@@ -161,7 +161,16 @@ export class Chocolat {
     }
 
     load(index) {
-        this.state.visible = true
+        if (!this.state.visible) {
+            this.state.visible = true
+
+            setTimeout(() => {
+                this.elems.overlay.classList.add('chocolat-visible')
+                this.elems.wrapper.classList.add('chocolat-visible')
+            }, 0)
+
+            this.elems.container.classList.add('chocolat-open')
+        }
 
         if (this.settings.fullScreen) {
             this.state.fullScreenOpen = openFullScreen(this.elems.wrapper)
@@ -171,13 +180,6 @@ export class Chocolat {
             return Promise.resolve()
         }
 
-        setTimeout(() => {
-            this.elems.overlay.classList.add('chocolat-visible')
-            this.elems.wrapper.classList.add('chocolat-visible')
-        }, 0)
-
-        this.elems.container.classList.add('chocolat-open')
-
         let loaderTimer = setTimeout(() => {
             this.elems.loader.classList.add('chocolat-visible')
         }, 1000)
@@ -251,9 +253,8 @@ export class Chocolat {
     }
 
     appear(image) {
+        this.elems.imageWrapper.removeChild(this.elems.img)
         this.elems.img = image
-        // Not sure if needed to avoid white flickering ?
-        // this.elems.imageWrapper.innerHTML = ''
         this.elems.img.setAttribute('class', 'chocolat-img')
         this.elems.imageWrapper.appendChild(this.elems.img)