From b0ee19950e9a171cb76e20f26cf5d1b22c03e9f6 Mon Sep 17 00:00:00 2001
From: m42e <iceboy@iceboy.de>
Date: Mon, 23 Oct 2017 23:33:42 +0300
Subject: [PATCH] Add progress bar plugin by Matthias Bilger (@m42e).

Originally from https://github.com/m42e/impress.js-progress and
adapted for the new plugin api. Also made the sample CSS produce
a smaller bar and font.

Adds event.detail.next to impress:stepleave event in impress.js.
---
 src/plugins/progress/README.md   | 46 +++++++++++++++++++++++++
 src/plugins/progress/progress.js | 58 ++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 src/plugins/progress/README.md
 create mode 100644 src/plugins/progress/progress.js

diff --git a/src/plugins/progress/README.md b/src/plugins/progress/README.md
new file mode 100644
index 0000000..fc1cd69
--- /dev/null
+++ b/src/plugins/progress/README.md
@@ -0,0 +1,46 @@
+Progress plugin
+===============
+
+Progressbar and pagexounter for impress.js presentations
+
+Usage
+-----
+
+Add a div for progressbar and/or progress as you can see it here:
+
+### HTML
+
+	  <div class="impress-progressbar"><div></div></div>
+	  <div class="impress-progress"></div>
+
+### Sample CSS
+
+    .impress-progressbar {
+      position: absolute;
+      right: 318px;
+      bottom: 1px;
+      left: 118px;
+      border-radius: 7px;
+      border: 2px solid rgba(100, 100, 100, 0.2);
+    }
+    .impress-progressbar DIV {
+      width: 0;
+      height: 2px;
+      border-radius: 5px;
+      background: rgba(75, 75, 75, 0.4);
+      transition: width 1s linear;
+    }
+    .impress-progress {
+      position: absolute;
+      left: 59px;
+      bottom: 1px;
+      text-align: left;
+      opacity: 0.6;
+    }
+
+Feel free to change the style of your progressbar as you like by editing the CSS file.
+
+Author
+------
+
+Copyright 2014: Matthias Bilger (@m42e)
diff --git a/src/plugins/progress/progress.js b/src/plugins/progress/progress.js
new file mode 100644
index 0000000..85b4d26
--- /dev/null
+++ b/src/plugins/progress/progress.js
@@ -0,0 +1,58 @@
+/* global document */
+( function( document ) {
+    "use strict";
+    var root;
+    var stepids = [];
+
+    // Get stepids from the steps under impress root
+    var getSteps = function() {
+        stepids = [];
+        var steps = root.querySelectorAll( ".step" );
+        for ( var i = 0; i < steps.length; i++ )
+        {
+          stepids[ i + 1 ] = steps[ i ].id;
+        }
+        };
+
+    // Wait for impress.js to be initialized
+    document.addEventListener( "impress:init", function( event ) {
+            root = event.target;
+        getSteps();
+        var gc = event.detail.api.lib.gc;
+        gc.addCallback( function() {
+            stepids = [];
+            if ( progressbar ) {
+                progressbar.style.width = "";
+                        }
+            if ( progress ) {
+                progress.innerHTML = "";
+                        }
+        } );
+    } );
+
+    var progressbar = document.querySelector( "div.impress-progressbar div" );
+    var progress = document.querySelector( "div.impress-progress" );
+
+    if ( null !== progressbar || null !== progress ) {
+        document.addEventListener( "impress:stepleave", function( event ) {
+            updateProgressbar( event.detail.next.id );
+        } );
+
+        document.addEventListener( "impress:steprefresh", function( event ) {
+            getSteps();
+            updateProgressbar( event.target.id );
+        } );
+
+    }
+
+    function updateProgressbar( slideId ) {
+        var slideNumber = stepids.indexOf( slideId );
+        if ( null !== progressbar ) {
+                        var width = 100 / ( stepids.length - 1 ) * ( slideNumber );
+            progressbar.style.width = width.toFixed( 2 ) + "%";
+        }
+        if ( null !== progress ) {
+            progress.innerHTML = slideNumber + "/" + ( stepids.length - 1 );
+        }
+    }
+} )( document );