From ef84c030454e7e232094c7c0a07e25b4e022868f Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sat, 18 Apr 2020 02:00:26 +0100
Subject: [PATCH] Add a visible progress bar

---
 _config.yml                |  4 +++-
 _includes/head/custom.html |  1 +
 assets/css/main.scss       | 12 ++++++++++++
 assets/js/progress.js      | 36 ++++++++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 _includes/head/custom.html
 create mode 100644 assets/js/progress.js

diff --git a/_config.yml b/_config.yml
index 140a92f..20eb031 100644
--- a/_config.yml
+++ b/_config.yml
@@ -43,6 +43,8 @@ breadcrumbs              : false # true, false (default)
 breadcrumb_home_label : "Home"
 breadcrumb_separator  : ">"
 words_per_minute         : 200
+head_scripts: 
+  - /assets/js/progress.js
 comments:
   provider               : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "utterances", "custom"
   disqus:
@@ -380,4 +382,4 @@ titlecase: true
 # Change default template file (in _templates/)
 post_template: post
 page_template: page
-draft_template: draft
+draft_template: draft
\ No newline at end of file
diff --git a/_includes/head/custom.html b/_includes/head/custom.html
new file mode 100644
index 0000000..77ca5b7
--- /dev/null
+++ b/_includes/head/custom.html
@@ -0,0 +1 @@
+<div id="progress-bar"></div>
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index b86f04e..d174cea 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -71,5 +71,17 @@ $base0f: #926e5c;
   color: $base0c !important;
 }
 
+// Progress Bar
+#progress-bar {
+  background: linear-gradient(to right, red, orange , yellow, green,   
+  blue, indigo, violet var(--scroll), transparent 0);
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+  height: 3px;
+  z-index: 1;
+}
+
+//@import "progress.css"; // for progress bar
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes"; // main partials
\ No newline at end of file
diff --git a/assets/js/progress.js b/assets/js/progress.js
new file mode 100644
index 0000000..4e36dc6
--- /dev/null
+++ b/assets/js/progress.js
@@ -0,0 +1,36 @@
+
+document.addEventListener('scroll', _ => {
+    var docElem = document.documentElement;
+    var docBody = document.body;
+    var docScrollTop = (docBody.scrollTop || docElem.scrollTop);
+  
+    readPercent = docScrollTop / (docElem.scrollHeight - docElem.clientHeight) * 100;
+  
+    if (readPercent > 0) {
+      progressBar = document.querySelector('#progress-bar');
+      progressBar.style.setProperty('--scroll', readPercent + '%');
+    } else {
+      progressBar.style.setProperty('--scroll', '0%');
+    }
+  })
+
+  /*
+  document.addEventListener('scroll', _ => {
+  var docElem = document.documentElement;
+  var docBody = document.body;
+  var scrollTop = (docBody.scrollTop || docElem.scrollTop);
+  var height = docElem.scrollHeight - docElem.clientHeight;
+
+  progress = scrollTop / height * 100;
+
+  if (progress > 0) {
+    progressBar = document.querySelector('#progress-bar');
+    var bgVal = '';
+    bgVal = 'linear-gradient(to right, red ' + progress + '%, transparent 0)';
+    progressBar.style.background = bgVal;
+  } else {
+    var bgVal = 'linear-gradient(to right, red 0%, transparent 0)';
+    progressBar.style.background = bgVal;
+  }
+})
+*/
\ No newline at end of file