minor fixes

Author: ts-thomas

Diff for: README.md

@@ -958,7 +958,7 @@ That is the same custom like button from above example, just shorter but also no
 
 You can use this feature completely by markup by providing a query selector as "src" which points to a node in your document.
 
-#### Using Auto-Mount / Auto-Unmount
+### Using Auto-Mount / Auto-Unmount
 
 You can use a hidden backstore optionally which holds the fragments to be inserted as a slide, e.g.:
 
@@ -980,6 +980,39 @@ Provide a __dom query selector__ as "src" which points to a node in your documen
 
 When closing the gallery or change the page to another slide, the fragment will automatically move back to its original position (the hidden backstore in this example).
 
+### Custom Elements (API-only)
+
+You can add nodes as slide which are not part of the document also via the API (e.g. fragments, templates, offscreen nodes). This way you can create your own full customized slides with its own interactions inside them. Also, you can create an iframe to load extern contents.
+
+#### Example: Youtube Video
+
+You can create your own fragments/templates and add the root node directly as "src":
+
+```js
+Spotlight.show([{
+    media: "node",
+    src: (function(){
+        const iframe = document.createElement("iframe");
+        iframe.src = "https://www.youtube.com/embed/tgbNymZ7vqY";
+        iframe.height = "auto";
+        return iframe;
+    }())
+}]);
+```
+
+#### Example: Templating Engine
+
+Or use your preferred templating engine and add the root node as "src":
+
+```js
+Mikado(template).mount(root).render(data);
+
+Spotlight.show([{
+    media: "node",
+    src: root
+}]);
+```
+
 <a name="api" id="api"></a>
 ## Spotlight API
 

Diff for: dist/css/spotlight.min.css

@@ -164,7 +164,16 @@ <h1>
             button: "Close Gallery",
             onclick: Spotlight.close,
             like: false
-        }];
+        }/*,{
+            media: "node",
+            control: "next,prev,close",
+            src: (function(){
+                const iframe = document.createElement("iframe");
+                iframe.src = "https://www.youtube.com/embed/tgbNymZ7vqY";
+                iframe.height = "auto";
+                return iframe;
+            }())
+        }*/];
 
         window.showGallery = function(index){
 

Diff for: dist/js/spotlight.min.js

@@ -1,6 +1,6 @@
 {
   "name": "spotlight.js",
-  "version": "0.7.42",
+  "version": "0.7.43",
   "description": "Modern HTML5 Image Gallery",
   "homepage": "https://github.com/nextapps-de/spotlight/",
   "author": "Thomas Wilkerling",

Diff for: dist/spotlight.bundle.js

@@ -23,7 +23,7 @@
   pointer-events: auto;
 }
 #spotlight.white {
-  color: #000;
+  color: #212529;
   background-color: #fff;
 }
 #spotlight.white .spl-spinner,
@@ -39,6 +39,10 @@
 #spotlight.white .spl-footer {
   background-color: rgba(255, 255, 255, 0.65);
 }
+#spotlight.white .spl-button {
+  background: #212529;
+  color: #fff;
+}
 #spotlight .cover {
   object-fit: cover;
   height: 100%;

Diff for: index.html

@@ -39,7 +39,7 @@
   }
   &.white {
     & {
-      color: #000;
+      color: #212529;
       background-color: #fff;
     }
     .spl-spinner,
@@ -55,6 +55,10 @@
     .spl-footer{
       background-color: rgba(255, 255, 255, 0.65);
     }
+    .spl-button{
+      background: #212529;
+      color: #fff;
+    }
   }
   .cover{
     object-fit: cover;

Diff for: package.json

@@ -562,13 +562,16 @@ function init_slide(index, direction){
                 media = document.querySelector(media);
             }
 
-            media._root || (media._root = media.parentNode);
-            update_media_viewport();
+            if(media){
 
-            options_spinner && removeClass(widget, "spinner");
-            panel.appendChild(media);
+                media._root || (media._root = media.parentNode);
+                update_media_viewport();
+
+                options_spinner && removeClass(widget, "spinner");
+                panel.appendChild(media);
 
-            init_slide(index, direction);
+                init_slide(index, direction);
+            }
         }
         else{
 
@@ -1273,21 +1276,10 @@ export function close(hashchange){
 
     history.go(hashchange === true ? -1 : -2);
 
-    if(playing){
-
-        play(false);
-    }
-
-    if(media){
-
-        checkout(media);
-    }
-
-    if(hide){
-
-        hide = clearTimeout(hide);
-    }
-
+    playing && play();
+    media && checkout(media);
+    hide && menu(true);
+    toggle_theme && theme();
     options_onclose && options_onclose();
 }
 
@@ -1356,7 +1348,7 @@ export function next(e){
         }
         else if(playing){
 
-            play(false);
+            play();
         }
     }
 }
@@ -1367,19 +1359,13 @@ export function goto(slide){
 
     if(slide !== current_slide){
 
-        playing || autohide();
-
-        if(playing){
-
-            playing = clearInterval(playing);
-            play();
-        }
+        playing ? play() : autohide();
 
         const direction = slide > current_slide;
 
         current_slide = slide;
-
         setup_page(direction);
+        options_autoplay && play();
 
         return true;
     }
@@ -1469,7 +1455,7 @@ function prepare(){
         src: determine_src(anchor, size, options),
         title: parse_option("title",
             anchor["alt"] || anchor["title"] ||
-            ((tmp = getByTag("img", anchor)[0]) && (tmp["alt"] || tmp["title"]))
+            ((anchor.nodeType === 1) && (tmp = getByTag("img", anchor)[0]) && (tmp["alt"] || tmp["title"]))
         )
     };