handle manual fullscreen toggle by user

nextapps-de · May 3, 2021 · 46d9728 · 46d9728
1 parent c4cd2d9
commit 46d9728
Show file tree

Hide file tree

Showing 9 changed files with 307 additions and 283 deletions.
diff --git a/README.md b/README.md
diff --git a/dist/js/spotlight.min.js b/dist/js/spotlight.min.js
diff --git a/dist/spotlight.bundle.js b/dist/spotlight.bundle.js
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@ <h1>
     <br>
     <b>Anchors &amp; Images</b>
     <div class="spotlight-group" data-fit="cover">
-        <a class="spotlight" href="demo/gallery/brooklyn-bridge-1791001.jpg" data-button="Click Me!" data-button-href="javascript:alert('You can open an URL or execute some Javascript here.')" data-description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
+        <a class="spotlight" href="demo/gallery/brooklyn-bridge-1791001.jpg" data-fullscreen="false" data-button="Click Me!" data-button-href="javascript:alert('You can open an URL or execute some Javascript here.')" data-description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
             <img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" alt="Lorem ipsum dolor sit amet">
         </a>
         <a class="spotlight" href="demo/gallery/california-1751455.jpg" data-description="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
@@ -88,9 +88,9 @@ <h1>
         <label><input type="checkbox" value="page" checked>Page</label>
         <label><input type="checkbox" value="theme" checked>Theme</label>
         <label><input type="checkbox" value="fullscreen" checked>Fullscreen</label>
-        <label><input type="checkbox" value="autofit" checked>Autofit</label>
-        <label><input type="checkbox" value="zoom-in" checked>Zoom +</label>
-        <label><input type="checkbox" value="zoom-out" checked>Zoom -</label><br>
+        <label><input type="checkbox" value="autofit">Autofit</label>
+        <label><input type="checkbox" value="zoom-in">Zoom +</label>
+        <label><input type="checkbox" value="zoom-out">Zoom -</label><br>
         <label><input type="checkbox" value="close" checked>Close</label>
         <label><input type="checkbox" value="download" checked>Download</label>
         <label><input type="checkbox" value="play" checked>Play</label>
@@ -100,7 +100,7 @@ <h1>
     <br>
     Choose Modifier:<br><br>
     <div id="modifier">
-        <label><input type="checkbox" value="autoplay" checked>Autoplay</label>
+        <label><input type="checkbox" value="autoplay">Autoplay</label>
         <label><input type="checkbox" value="infinite" checked>Infinite Slide</label>
         <label><input type="checkbox" value="spinner" checked>Spinner</label>
         <label><input type="checkbox" value="preload" checked>Preload Next</label><br>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spotlight.js",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Modern HTML5 Image Gallery",
   "homepage": "https://github.com/nextapps-de/spotlight/",
   "author": "Thomas Wilkerling",

diff --git a/src/js/helper.js b/src/js/helper.js
@@ -134,3 +134,13 @@ export function cancelEvent(event, prevent){
 
     //return false;
 }
+
+/**
+ * @param {!string} element
+ * @return {Element}
+ */
+
+export function createElement(element){
+
+    return document.createElement(element);
+}
diff --git a/src/js/polyfill.js b/src/js/polyfill.js
@@ -2,7 +2,7 @@ Object.assign || (Object.assign =
 
     function(target, source){
 
-        console.log("assign", target, source);
+        //console.log("assign", target, source);
 
         const keys = Object.keys(/** @type {!Object} */(source));
 
@@ -18,7 +18,7 @@ Object.assign || (Object.assign =
 
 Element.prototype.closest || (Element.prototype.closest = function(classname){
 
-    console.log("closest", classname);
+    //console.log("closest", classname);
 
     classname = classname.substring(1);
 

diff --git a/src/js/spotlight.js b/src/js/spotlight.js
@@ -6,7 +6,7 @@
  * https://github.com/nextapps-de/spotlight
  */
 
-import { addClass, removeClass, setStyle, prepareStyle, getByClass, getByTag, setText, addListener, removeListener, cancelEvent } from "./helper.js";
+import { addClass, removeClass, setStyle, prepareStyle, getByClass, getByTag, setText, addListener, removeListener, cancelEvent, createElement } from "./helper.js";
 import widget from "./template.js";
 
 const controls = [
@@ -36,8 +36,7 @@ const controls_default = {
     "fullscreen": 1
 };
 
-const tpl_video = document.createElement("video");
-const tpl_control = document.createElement("div");
+const tpl_video = /** @type {HTMLVideoElement} */ (createElement("video"));
 const controls_dom = {};
 const video_support = {};
 
@@ -225,7 +224,7 @@ function setup(){
 
 export function addControl(classname, fn){
 
-    const div = tpl_control.cloneNode(false);
+    const div = createElement("div");
 
     div.className = "spl-" + classname;
     addListener(div, "click", fn);
@@ -522,7 +521,7 @@ function init_slide(index, direction){
 
         if(type === "video"){
 
-            media = document.createElement("video");
+            media = /** @type {HTMLVideoElement} */ (createElement("video"));
 
             media.onloadedmetadata = /** @this {HTMLVideoElement} */ function(e){
 
@@ -543,7 +542,7 @@ function init_slide(index, direction){
             media.muted = parse_option("muted");
             media.src = gallery.src; //files[i].src;
 
-            // const source = document.createElement("source");
+            // const source = createElement("source");
             // source.type = "video/" + files[i].type;
             // source.src = files[i].src;
             // media.appendChild(source);
@@ -569,7 +568,7 @@ function init_slide(index, direction){
         }
         else{
 
-            media = new Image();
+            media = createElement("img");
 
             media.onload = /** @this {Image} */ function(){
 
@@ -605,7 +604,7 @@ function prefetch(direction){
 
     if(direction && gallery_next){
 
-        (new Image()).src = gallery_next;
+        (createElement("img")).src = gallery_next;
     }
 }
 
@@ -634,6 +633,24 @@ function resize_listener(){
         update_media_viewport();
     }
 
+    if(prefix_request){
+
+        if(has_fullscreen()){
+
+            addClass(maximize, "on");
+        }
+        else{
+
+            removeClass(maximize, "on");
+
+            // handle when user toggles the fullscreen state manually
+            // entering the fullscreen state manually needs to be hide the fullscreen icon, because
+            // the exit fullscreen handler will not work due to a browser restriction
+
+            display_state(maximize, (screen.availHeight - window.outerHeight) >= 0);
+        }
+    }
+
     //update_scroll();
 }
 
@@ -708,8 +725,6 @@ function history_listener(event) {
     if(panel && /*event.state &&*/ event.state["spl"]) {
 
         close(true);
-        //history.back();
-        //cancelEvent(event, true);
     }
 }
 
@@ -1021,24 +1036,20 @@ export function fullscreen(init){
 
     //console.log("fullscreen", init);
 
-    const isFullscreen = (
+    const is_fullscreen = has_fullscreen();
 
-        typeof init === "boolean" ?
+    if((typeof init !== "boolean") || (init !== !!is_fullscreen)){
 
-            init
-        :
-            has_fullscreen()
-    );
+        if(is_fullscreen){
 
-    if(isFullscreen){
-
-        document[prefix_exit]();
-        removeClass(maximize, "on");
-    }
-    else{
+            document[prefix_exit]();
+            //removeClass(maximize, "on");
+        }
+        else{
 
-        widget[prefix_request]();
-        addClass(maximize, "on");
+            widget[prefix_request]();
+            //addClass(maximize, "on");
+        }
     }
 }
 
@@ -1223,7 +1234,7 @@ function show_gallery(){
 
 export function download(){
 
-    const link = document.createElement("a");
+    const link = createElement("a");
     link.href = media.src;
     link.download = media.src.substring(media.src.lastIndexOf("/") + 1);
     body.appendChild(link);
@@ -1249,6 +1260,7 @@ export function close(hashchange){
     removeClass(body, "hide-scrollbars");
     removeClass(widget, "show");
 
+    fullscreen(false);
     toggle_listener();
 
     history.go(hashchange === true ? -1 : -2);
@@ -1438,11 +1450,9 @@ function prepare(){
 
         media: options["media"],
         src: determine_src(anchor, size, options),
-        title: (
-            parse_option("title") ||
-            anchor["title"] ||
-            anchor["alt"] ||
-            ((tmp = getByTag("img", anchor)[0]) && tmp["alt"])
+        title: parse_option("title",
+            anchor["alt"] || anchor["title"] ||
+            ((tmp = getByTag("img", anchor)[0]) && (tmp["alt"] || tmp["title"]))
         )
     };
 

diff --git a/src/js/template.js b/src/js/template.js
@@ -1,4 +1,6 @@
-const template = /** @type {HTMLElement} */ (document.createElement("div"));
+import { createElement } from "./helper.js";
+
+const template = createElement("div");
 template.id = "spotlight";
 template.innerHTML = (