release: delay support

Author: buunguyen

index.d.ts

@@ -13,7 +13,7 @@ export interface TopbarConfigOptions {
 
 export interface Topbar {
   config: (options: TopbarConfigOptions) => void
-  show: () => void
+  show: (delay?: number) => void
   progress: (to?: number | string) => number
   hide: () => void
 }

index.html

@@ -55,7 +55,7 @@
           // Delayed Demo
           $('#btnStartDelayed').click(function() {
             resetToDefaults()
-            topbar.delayedShow(500)
+            topbar.show(500)
           })
           $('#btnStopDelayed').click(function() {
             topbar.hide()
@@ -137,12 +137,12 @@ <h4>Basic</h4>
           </section>
           <h4>Delayed show</h4>
           <section class="code">
-            <p>You can use <code>topbar.delayedShow(microseconds)</code> to delay the progress bar. If the topbar is hidden within the time in microseconds, it does not show up at all. This can make the user experience feel smoother:</p>
+            <p>You can use <code>topbar.show(delayMillis)</code> to delay the progress bar. If hide() is invoked within the delay period, topbar won't show up at all. This can make the user experience feel smoother in some cases.</p>
             <a id="btnStartDelayed" class="button" href="javascript:void(0)">Show Progress</a>
             <a id="btnStopDelayed" class="button" href="javascript:void(0)">Hide Progress</a>
             <pre class="prettyprint">
 $('#btnStartDelayed').click(function() {
-  topbar.delayedShow(500)
+  topbar.show(500)
 })
 
 $('#btnStopDelayed').click(function() {

package.json

@@ -6,7 +6,7 @@
     "topbar.min.js",
     "*.d.ts"
   ],
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Tiny & beautiful site-wide progress indicator",
   "homepage": "http://buunguyen.github.io/topbar",
   "repository": {

topbar.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * topbar 1.0.0, 2021-01-06
+ * topbar 2.0.0, 2023-02-04
  * http://buunguyen.github.io/topbar
  * Copyright (c) 2021 Buu Nguyen
  */
@@ -96,26 +96,26 @@
         for (var key in opts)
           if (options.hasOwnProperty(key)) options[key] = opts[key];
       },
-      delayedShow: function(time) {
+      show: function (delay) {
         if (showing) return;
-        if (delayTimerId) return;
-        delayTimerId = setTimeout(() => topbar.show(), time);
-      },
-      show: function () {
-        if (showing) return;
-        showing = true;
-        if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
-        if (!canvas) createCanvas();
-        canvas.style.opacity = 1;
-        canvas.style.display = "block";
-        topbar.progress(0);
-        if (options.autoRun) {
-          (function loop() {
-            progressTimerId = window.requestAnimationFrame(loop);
-            topbar.progress(
-              "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
-            );
-          })();
+        if (delay) {
+          if (delayTimerId) return;
+          delayTimerId = setTimeout(() => topbar.show(), delay);
+        } else  {
+          showing = true;
+          if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
+          if (!canvas) createCanvas();
+          canvas.style.opacity = 1;
+          canvas.style.display = "block";
+          topbar.progress(0);
+          if (options.autoRun) {
+            (function loop() {
+              progressTimerId = window.requestAnimationFrame(loop);
+              topbar.progress(
+                "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
+              );
+            })();
+          }
         }
       },
       progress: function (to) {