Modernize the project by adding native Typescript types. Making a class

.gitignore

@@ -12,6 +12,6 @@ lib-cov
 pids
 logs
 results
-
+dist
 npm-debug.log
-node_modules
+node_modules

index.d.ts

@@ -1,23 +1,39 @@
-export interface BarColors {
-  [key: string]: string
+type TopBarOptions = {
+    container?: HTMLElement;
+    autoRun?: boolean;
+    barThickness?: number;
+    barColors?: Record<string, string>;
+    shadowBlur?: number;
+    showShadow?: boolean;
+    shadowColor?: string;
+    className?: string;
+};
+declare class Topbar {
+    private container;
+    private canvas;
+    private progressTimerId;
+    private autoRun;
+    private showing;
+    private currentProgress;
+    private barThickness;
+    private barColors;
+    private shadowBlur;
+    private shadowColor;
+    private className;
+    private fadeTimerId;
+    private delayTimerId;
+    constructor({ container, autoRun, barThickness, barColors, shadowBlur, shadowColor, className, }?: Partial<TopBarOptions>);
+    show(delay?: number): void;
+    hide(): void;
+    progress(to?: number | string): number;
+    private hideLoop;
+    private loopShow;
+    private createCanvas;
+    private repaint;
 }
+declare function config(options: Partial<TopBarOptions>): Topbar;
+declare function show(delay?: number): void;
+declare function hide(): void;
+declare function progress(to?: number | string): number;
 
-export interface TopbarConfigOptions {
-  autoRun?: boolean
-  barThickness?: number
-  barColors?: BarColors
-  shadowBlur?: number
-  shadowColor?: string
-  className?: string
-}
-
-export interface Topbar {
-  config: (options: TopbarConfigOptions) => void
-  show: (delay?: number) => void
-  progress: (to?: number | string) => number
-  hide: () => void
-}
-
-declare const topbar: Topbar
-
-export default topbar
+export { type TopBarOptions, Topbar, config, hide, progress, show };

index.html

@@ -65,7 +65,7 @@
           $('#btnStartAdvanced').click(function() {
             resetToDefaults()
             topbar.config({
-              autoRun      : false, 
+              autoRun      : false,
               barThickness : 5,
               barColors    : {
                   '0'      : 'rgba(26,  188, 156, .7)',
@@ -77,13 +77,13 @@
             })
             topbar.show();
             (function step() {
-              setTimeout(function() {  
+              setTimeout(function() {
                 if (topbar.progress('+.01') < 1) step()
               }, 16)
             })()
           })
           $('#btnStopAdvanced').click(function() {
-            topbar.hide()  
+            topbar.hide()
           })
       })
     </script>
@@ -159,14 +159,15 @@ <h4>Advanced</h4>
               <li><code>shadowBlur</code> (default: <code>10</code>): the shadow blur.</li>
               <li><code>shadowColor</code>: the shadow color.</li>
               <li><code>className</code>: the CSS class name for the progress bar.</li>
+              <li><code>container</code>: the HTMLElement that works as container for the top bar. If not defined <code>document.body</code> is the container.</li>
             </ul>
             <p>Note: <code>topbar.progress()</code> can take a number or string value. If string, you can use <code>+</code> or <code>-</code> to change the progress relatively to current position. If no argument is specified, return the current progress (<code>0</code> to <code>1</code>).</p>
             <a id="btnStartAdvanced" class="button" href="javascript:void(0)">Show Progress</a>
             <a id="btnStopAdvanced" class="button" href="javascript:void(0)">Hide Progress</a>
             <pre class="prettyprint">
 $('#btnStartAdvanced').click(function() {
   topbar.config({
-    autoRun      : false, 
+    autoRun      : false,
     barThickness : 5,
     barColors    : {
       '0'        : 'rgba(26,  188, 156, .7)',
@@ -179,7 +180,7 @@ <h4>Advanced</h4>
   })
   topbar.show();
   (function step() {
-    setTimeout(function() {  
+    setTimeout(function() {
       if (topbar.progress('+.01') &lt; 1) step()
     }, 16)
   })()