fix missing scrollbars (Firefox)

delay autoplay during loading

README.md

@@ -154,6 +154,8 @@ __Get Latest Nightly (Do not use for production!):__
 
 Just exchange the version number from the URLs above with "master", e.g.: "/spotlight/__0.7.6__/dist/" into "/spotlight/__master__/dist".
 
+> If you are using markup on anchor elements to inject the library, then it is recommended to load the lib inside your head section of the document. Because that will better prevent the original behavior of the anchor tag (e.g. when library wasn't fully loaded on page start).
+
 ### Use Bundled Version
 
 The bundled version includes all assets like js, css, html and icon images as base64.
@@ -181,7 +183,9 @@ The non-bundled version needs to load js and css separately (css also includes i
 </html>
 ```
 
-### Preload Library / Async Load (Recommended)
+### Preload Library / Async Load
+
+> If you are using markup on anchor elements to inject the library, then it is recommended to load the lib inside your head section of the document. Read example above.
 
 Just add a link tag to the header sections which indicated to preload the script. Right before the body is closing add your site scripts. Depending on your code you may need to load them in the right order.
 
@@ -350,17 +354,6 @@ When using API the ___spotlight-group___ is represented by the options payload,
         <td>Description</td>
         <td>Default</td>
     </tr>
-    <tr>
-        <td>index</td>
-        <td>
-            number
-        </td>
-        <td>
-            Sets the starting index when showing the gallery by using the <a href="#api">Spotlight API</a>. The index starts from 1.
-        </td>
-        <td>1</td>
-    </tr>
-    <tr></tr>
     <tr>
         <td>class</td>
         <td>
@@ -549,8 +542,6 @@ When using API the ___spotlight-group___ is represented by the options payload,
 
 ### Additional Image Options
 
-Most of these options for a video are inherited by the attributes of a standard video element.
-
 <table>
     <tr></tr>
     <tr>
@@ -710,6 +701,17 @@ Most of these options for a video are inherited by the attributes of a standard
         <td>Description</td>
         <td>Default</td>
     </tr>
+    <tr>
+        <td>index</td>
+        <td>
+            number
+        </td>
+        <td>
+            Sets the starting index when showing the gallery by using the <a href="#api">Spotlight API</a>. The index starts from 1.
+        </td>
+        <td>1</td>
+    </tr>
+    <tr></tr>
     <tr>
         <td>onchange</td>
         <td>
@@ -1260,6 +1262,20 @@ Spotlight.show(
 );
 ```
 
+You can also import any of the Spotlight methods just as you need:
+
+```js
+import { show, close, goto } from "./spotlight.js";
+
+show([/* Gallery */], {/* Options */});
+// ....
+goto(5);
+// ....
+close();
+```
+
+> Modern build tools will apply dead code elimination when just importing methods your application needs.
+
 <a name="styling" id="styling"></a>
 ## Custom Styling
 

index.html

@@ -10,6 +10,10 @@
     <!--<link rel="stylesheet" href="dist/css/spotlight.min.css">-->
     <!-- Custom Control: -->
     <style>
+        /*
+         * Custom Control:
+         * ---------------
+         */
         /* custom classes are always prefixed by "spl-" automatically */
         .spl-like{
             background-image: url(demo/gallery/heart-outline.svg);
@@ -19,9 +23,10 @@
         .spl-like.on{
             background-image: url(demo/gallery/heart.svg);
         }
-    </style>
-    <!-- Custom Animation: -->
-    <style>
+        /*
+         * Custom Animation:
+         * -----------------
+         */
         /* custom scene transition (slide effect) */
         .only-this-gallery.show .spl-scene{
             transition: transform 0.2s ease;
@@ -39,11 +44,11 @@
             transition: transform 0.65s ease,
                         opacity 0.65s ease;
         }
-        /* custom animation when gallery is hidden */
+        /* animation state when gallery is hidden */
         #spotlight.only-this-gallery{
             clip-path: circle(0px at center);
         }
-        /* custom animation gallery will open */
+        /* animation state when gallery will open */
         #spotlight.only-this-gallery.show{
             clip-path: circle(100% at center);
             transition: clip-path 0.65s ease 0.15s;
@@ -88,7 +93,7 @@ <h1>
     <b>Custom Elements, Videos &amp; Node Fragments</b>
     <div class="spotlight-group">
         <div class="spotlight" data-media="image" data-src="demo/gallery/godafoss-1840758.jpg" data-description="In hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.">
-            <img src="demo/gallery/canada-2340312-thumb.jpg" alt="Duis autem vel eum iriure dolor">
+            <img src="demo/gallery/godafoss-1840758-thumb.jpg" alt="Duis autem vel eum iriure dolor">
         </div>
         <a class="spotlight" data-media="video" data-src-webm="https://nextapps.de/video/spotlight/big_buck_bunny.webm" data-src-ogg="https://nextapps.de/video/spotlight/big_buck_bunny.ogv" data-src-mp4="https://nextapps.de/video/spotlight/big_buck_bunny.mp4" data-autoplay="false" data-poster="demo/gallery/poster.jpg">
             <img src="demo/gallery/poster.jpg">

package.json

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

src/css/spotlight.css

@@ -299,11 +299,7 @@
   }
 }
 .hide-scrollbars {
-  overflow: -moz-hidden-unscrollable;
-  -ms-overflow-style: none;
-}
-.hide-scrollbars::-webkit-scrollbar {
-  width: 0;
+  overflow: hidden;
 }
 @keyframes pulsate {
   0% {

src/css/spotlight.less

@@ -323,11 +323,12 @@
 }
 
 .hide-scrollbars{
-  &::-webkit-scrollbar {
-    width: 0;
-  }
-  overflow: -moz-hidden-unscrollable;
-  -ms-overflow-style: none;
+  //&::-webkit-scrollbar {
+  //  width: 0;
+  //}
+  //overflow: -moz-hidden-unscrollable;
+  //-ms-overflow-style: none;
+  overflow: hidden;
 }
 
 @keyframes pulsate {

src/js/spotlight.js

@@ -508,6 +508,7 @@ function init_slide(index){
         setStyle(media, "visibility", "visible");
 
         gallery_next && (media_next.src = gallery_next);
+        options_autoplay && animate_bar(playing);
     }
     else{
 
@@ -811,42 +812,49 @@ function wheel_listener(event){
 
 /**
  * @param {Event|boolean=} init
+ * @param {boolean=} _skip_animation
  */
 
-export function play(init){
+export function play(init, _skip_animation){
 
     //console.log("play", init);
 
-    // TODO: stop playing until finished loading
-
     const state = (typeof init === "boolean" ? init : !playing);
 
     if(state === !playing){
 
-        playing = playing ? clearInterval(playing) : setInterval(next, delay * 1000);
+        playing = playing ? clearTimeout(playing) : 1;
         toggleClass(player, "on", playing);
-        options_progress && animate_bar();
+        _skip_animation || animate_bar(playing);
     }
 }
 
-function animate_bar(){
+/**
+ * @param {?=} start
+ */
+
+function animate_bar(start){
 
     //console.log("animate_bar", start);
 
-    // reset bar
+    if(options_progress){
 
-    prepareStyle(progress, function(){
+        prepareStyle(progress, function(){
 
-        setStyle(progress, "transition-duration", "");
-        setStyle(progress, "transform", "");
-    });
+            setStyle(progress, "transition-duration", "");
+            setStyle(progress, "transform", "");
+        });
 
-    // start animation
+        if(start){
 
-    if(playing){
+            setStyle(progress, "transition-duration", delay + "s");
+            setStyle(progress, "transform", "translateX(0)");
+        }
+    }
+
+    if(start){
 
-        setStyle(progress, "transition-duration", delay + "s");
-        setStyle(progress, "transform", "translateX(0)");
+        playing = setTimeout(next, delay * 1000);
     }
 }
 
@@ -1221,7 +1229,7 @@ function show_gallery(){
     //resize_listener();
     autohide();
 
-    options_autoplay && play();
+    options_autoplay && play(true, true);
 }
 
 export function download(){
@@ -1259,7 +1267,7 @@ export function close(hashchange){
     gallery_next && (media_next.src = "");
     playing && play();
     media && checkout(media);
-    hide && clearTimeout(hide); //menu(true);
+    hide && (hide = clearTimeout(hide));
     toggle_theme && theme();
     options_class && removeClass(widget, options_class);
     options_onclose && options_onclose();
@@ -1342,13 +1350,23 @@ export function goto(slide){
 
     if(slide !== current_slide){
 
-        playing ? play() : autohide();
+        if(playing){
+
+            clearTimeout(playing);
+            animate_bar();
+        }
+        else{
+
+            autohide();
+        }
+
+        //playing ? animate_bar() : autohide();
 
         const direction = slide > current_slide;
 
         current_slide = slide;
         setup_page(direction);
-        options_autoplay && play();
+        //options_autoplay && play(true, true);
 
         return true;
     }
@@ -1419,9 +1437,6 @@ function setup_page(direction){
     y = 0;
     scale = 1;
 
-    prepare(direction);
-    update_slider(current_slide - 1);
-
     if(media){
 
         // Note: the onerror callback was removed when the image was fully loaded (also for video)
@@ -1447,20 +1462,16 @@ function setup_page(direction){
             // animate out the old image
 
             prepare_animation();
-            //toggleAnimation(panel);
             update_panel();
         }
     }
 
+    prepare(direction);
+    update_slider(current_slide - 1);
     removeClass(spinner, "error");
-
     init_slide(current_slide);
-
-    //if(panel){
-
-        toggleAnimation(panel);
-        update_panel();
-    //}
+    toggleAnimation(panel);
+    update_panel();
 
     const str_title = gallery.title;
     const str_description = parse_option("description");