Fix #118

nicolas-t · Jul 18, 2020 · 66b2fb4 · 66b2fb4
1 parent 59df28e
commit 66b2fb4
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 69 deletions.
diff --git a/dist/js/chocolat.cjs.js b/dist/js/chocolat.cjs.js
@@ -109,30 +109,24 @@ function fit(options) {
 }
 function openFullScreen(wrapper) {
   if (wrapper.requestFullscreen) {
-    wrapper.requestFullscreen();
-    return true;
+    return wrapper.requestFullscreen();
   } else if (wrapper.webkitRequestFullscreen) {
-    wrapper.webkitRequestFullscreen();
-    return true;
+    return wrapper.webkitRequestFullscreen();
   } else if (wrapper.msRequestFullscreen) {
-    wrapper.msRequestFullscreen();
-    return true;
+    return wrapper.msRequestFullscreen();
   } else {
-    return false;
+    return Promise.reject();
   }
 }
 function exitFullScreen() {
   if (document.exitFullscreen) {
-    document.exitFullscreen();
-    return false;
+    return document.exitFullscreen();
   } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-    return false;
+    return document.webkitExitFullscreen();
   } else if (document.msExitFullscreen) {
-    document.msExitFullscreen();
-    return false;
+    return document.msExitFullscreen();
   } else {
-    return true;
+    return Promise.reject();
   }
 }
 
@@ -404,7 +398,7 @@ class Chocolat {
 
   close() {
     if (this.state.fullScreenOpen) {
-      this.state.fullScreenOpen = exitFullScreen();
+      exitFullScreen();
       return;
     }
 
@@ -540,11 +534,19 @@ class Chocolat {
     this.off(this.elems.fullscreen, 'click.chocolat');
     this.on(this.elems.fullscreen, 'click.chocolat', () => {
       if (this.state.fullScreenOpen) {
-        this.state.fullScreenOpen = exitFullScreen();
+        exitFullScreen();
         return;
       }
 
-      this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
+      openFullScreen(this.elems.wrapper);
+    });
+    this.off(document, 'fullscreenchange.chocolat');
+    this.on(document, 'fullscreenchange.chocolat', () => {
+      if (document.fullscreenElement) {
+        this.state.fullScreenOpen = true;
+      } else {
+        this.state.fullScreenOpen = false;
+      }
     });
 
     if (this.settings.closeOnBackgroundClick) {

diff --git a/dist/js/chocolat.esm.js b/dist/js/chocolat.esm.js
@@ -107,30 +107,24 @@ function fit(options) {
 }
 function openFullScreen(wrapper) {
   if (wrapper.requestFullscreen) {
-    wrapper.requestFullscreen();
-    return true;
+    return wrapper.requestFullscreen();
   } else if (wrapper.webkitRequestFullscreen) {
-    wrapper.webkitRequestFullscreen();
-    return true;
+    return wrapper.webkitRequestFullscreen();
   } else if (wrapper.msRequestFullscreen) {
-    wrapper.msRequestFullscreen();
-    return true;
+    return wrapper.msRequestFullscreen();
   } else {
-    return false;
+    return Promise.reject();
   }
 }
 function exitFullScreen() {
   if (document.exitFullscreen) {
-    document.exitFullscreen();
-    return false;
+    return document.exitFullscreen();
   } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-    return false;
+    return document.webkitExitFullscreen();
   } else if (document.msExitFullscreen) {
-    document.msExitFullscreen();
-    return false;
+    return document.msExitFullscreen();
   } else {
-    return true;
+    return Promise.reject();
   }
 }
 
@@ -402,7 +396,7 @@ class Chocolat {
 
   close() {
     if (this.state.fullScreenOpen) {
-      this.state.fullScreenOpen = exitFullScreen();
+      exitFullScreen();
       return;
     }
 
@@ -538,11 +532,19 @@ class Chocolat {
     this.off(this.elems.fullscreen, 'click.chocolat');
     this.on(this.elems.fullscreen, 'click.chocolat', () => {
       if (this.state.fullScreenOpen) {
-        this.state.fullScreenOpen = exitFullScreen();
+        exitFullScreen();
         return;
       }
 
-      this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
+      openFullScreen(this.elems.wrapper);
+    });
+    this.off(document, 'fullscreenchange.chocolat');
+    this.on(document, 'fullscreenchange.chocolat', () => {
+      if (document.fullscreenElement) {
+        this.state.fullScreenOpen = true;
+      } else {
+        this.state.fullScreenOpen = false;
+      }
     });
 
     if (this.settings.closeOnBackgroundClick) {

diff --git a/dist/js/chocolat.js b/dist/js/chocolat.js
@@ -110,30 +110,24 @@
     }
     function openFullScreen(wrapper) {
       if (wrapper.requestFullscreen) {
-        wrapper.requestFullscreen();
-        return true;
+        return wrapper.requestFullscreen();
       } else if (wrapper.webkitRequestFullscreen) {
-        wrapper.webkitRequestFullscreen();
-        return true;
+        return wrapper.webkitRequestFullscreen();
       } else if (wrapper.msRequestFullscreen) {
-        wrapper.msRequestFullscreen();
-        return true;
+        return wrapper.msRequestFullscreen();
       } else {
-        return false;
+        return Promise.reject();
       }
     }
     function exitFullScreen() {
       if (document.exitFullscreen) {
-        document.exitFullscreen();
-        return false;
+        return document.exitFullscreen();
       } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-        return false;
+        return document.webkitExitFullscreen();
       } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-        return false;
+        return document.msExitFullscreen();
       } else {
-        return true;
+        return Promise.reject();
       }
     }
 
@@ -405,7 +399,7 @@
 
       close() {
         if (this.state.fullScreenOpen) {
-          this.state.fullScreenOpen = exitFullScreen();
+          exitFullScreen();
           return;
         }
 
@@ -541,11 +535,19 @@
         this.off(this.elems.fullscreen, 'click.chocolat');
         this.on(this.elems.fullscreen, 'click.chocolat', () => {
           if (this.state.fullScreenOpen) {
-            this.state.fullScreenOpen = exitFullScreen();
+            exitFullScreen();
             return;
           }
 
-          this.state.fullScreenOpen = openFullScreen(this.elems.wrapper);
+          openFullScreen(this.elems.wrapper);
+        });
+        this.off(document, 'fullscreenchange.chocolat');
+        this.on(document, 'fullscreenchange.chocolat', () => {
+          if (document.fullscreenElement) {
+            this.state.fullScreenOpen = true;
+          } else {
+            this.state.fullScreenOpen = false;
+          }
         });
 
         if (this.settings.closeOnBackgroundClick) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chocolat",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Responsive Lightbox Plugin",
   "main": "dist/js/chocolat.cjs.js",
   "module": "dist/js/chocolat.esm.js",

diff --git a/src/js/chocolat.js b/src/js/chocolat.js
@@ -312,7 +312,7 @@ export class Chocolat {
 
     close() {
         if (this.state.fullScreenOpen) {
-            this.state.fullScreenOpen = exitFullScreen()
+            exitFullScreen()
             return
         }
 
@@ -466,11 +466,20 @@ export class Chocolat {
         this.off(this.elems.fullscreen, 'click.chocolat')
         this.on(this.elems.fullscreen, 'click.chocolat', () => {
             if (this.state.fullScreenOpen) {
-                this.state.fullScreenOpen = exitFullScreen()
+                exitFullScreen()
                 return
             }
 
-            this.state.fullScreenOpen = openFullScreen(this.elems.wrapper)
+            openFullScreen(this.elems.wrapper)
+        })
+
+        this.off(document, 'fullscreenchange.chocolat')
+        this.on(document, 'fullscreenchange.chocolat', () => {
+            if (document.fullscreenElement) {
+                this.state.fullScreenOpen = true
+            } else {
+                this.state.fullScreenOpen = false
+            }
         })
 
         if (this.settings.closeOnBackgroundClick) {

diff --git a/src/js/utils.js b/src/js/utils.js
@@ -115,30 +115,24 @@ export function fit(options) {
 
 export function openFullScreen(wrapper) {
     if (wrapper.requestFullscreen) {
-        wrapper.requestFullscreen()
-        return true
+        return wrapper.requestFullscreen()
     } else if (wrapper.webkitRequestFullscreen) {
-        wrapper.webkitRequestFullscreen()
-        return true
+        return wrapper.webkitRequestFullscreen()
     } else if (wrapper.msRequestFullscreen) {
-        wrapper.msRequestFullscreen()
-        return true
+        return wrapper.msRequestFullscreen()
     } else {
-        return false
+        return Promise.reject()
     }
 }
 
 export function exitFullScreen() {
     if (document.exitFullscreen) {
-        document.exitFullscreen()
-        return false
+        return document.exitFullscreen()
     } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen()
-        return false
+        return document.webkitExitFullscreen()
     } else if (document.msExitFullscreen) {
-        document.msExitFullscreen()
-        return false
+        return document.msExitFullscreen()
     } else {
-        return true
+        return Promise.reject()
     }
 }