diff --git a/dist/js/chocolat.cjs.js b/dist/js/chocolat.cjs.js index a045f2c..c6e2d42 100644 --- 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 index 3c40628..4c0b1a0 100644 --- 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 index f38f85c..07a022c 100644 --- 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 index 230800f..b4fc216 100644 --- 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 index ca6b529..fa23c9c 100644 --- 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 index 5138f74..e0874c9 100644 --- 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() } }