Added progression bar for article reading estimate

css/default.css

@@ -68,7 +68,6 @@ td, tr, th {
 /*                                                                                                             HEADER */
 
 header {
-    border: 1px solid black; /*DEBUG*/
     position: fixed;
     box-sizing: border-box;
     width: 100%;
@@ -111,6 +110,16 @@ header img {
     height: 100%;
 }
 
+#scrollBar {
+    box-sizing: border-box;
+    position: fixed;
+    left: 0;
+    top: 57px;
+    height: 3px;
+    background: rgb(148, 194, 228);
+    transition: width 0.5s;
+}
+
 /*                                                                                                            CONTENT */
 
 h1 {

javascript/scroll.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var windowHeight;
+var scrollTS = 0;
+var lastScroll = 0;
+
+window.requestAnimationFrame (animateScroll);
+
+function computeWindowHeight() {
+  var myHeight = 0;
+  if( typeof( window.innerWidth ) == 'number' ) {
+    //Non-IE
+    myHeight = window.innerHeight;
+  } else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
+    //IE 6+ in 'standards compliant mode'
+    myHeight = document.documentElement.clientHeight;
+  } else if( document.body && ( document.body.clientHeight ) ) {
+    //IE 4 compatible
+    myHeight = document.body.clientHeight;
+  }
+  return (myHeight);
+}
+
+windowHeight = computeWindowHeight();
+
+function getScroll() {
+  var scrOfY = 0;
+  if( typeof( window.pageYOffset ) == 'number' ) {
+    //Netscape compliant
+    scrOfY = window.pageYOffset;
+  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
+    //DOM compliant
+    scrOfY = document.body.scrollTop;
+  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
+    //IE6 standards compliant mode
+    scrOfY = document.documentElement.scrollTop;
+  }
+  return (scrOfY);
+}
+
+function computeScroll () {
+    var percentage = Math.round (getScroll() / (document.body.offsetHeight - windowHeight) * 100);
+    return (percentage);
+}
+
+function animateScroll (timestamp) {
+    if (timestamp - scrollTS >= 500) {
+        scrollTS = timestamp;
+
+        var newScroll = computeScroll();
+
+        if (newScroll !== lastScroll) {
+            lastScroll = newScroll;
+            document.getElementById ("scrollBar").style.width = newScroll + "%";
+        }
+
+    }
+
+    window.requestAnimationFrame (animateScroll);
+}

nschoeslabs.cabal

@@ -5,7 +5,7 @@ cabal-version:      >= 1.10
 
 executable site
   main-is:          site.hs
-  build-depends:    base == 4.*
-                  , hakyll == 4.6.*
+  build-depends:    base
+                  , hakyll
   ghc-options:      -threaded
   default-language: Haskell2010

site.hs

@@ -15,10 +15,15 @@ main = hakyllWith config $ do
         route   idRoute
         compile compressCssCompiler
 
+    match "javascript/*" $ do
+        route idRoute
+        compile copyFileCompiler
+
     match "favicon.gif" $ do
         route idRoute
         compile copyFileCompiler
 
+
     match (fromList ["about.md", "haskell.md", "ai.md", "webrtc.md"]) $ do
         route   $ setExtension "html"
         compile $ pandocCompiler

templates/article.html

@@ -2,4 +2,5 @@
     $body$
     <br>
     <span class="date_article">$date$</span>
-</div>
+</div>
+<script src="/javascript/scroll.js"></script>

templates/default.html

@@ -27,6 +27,9 @@
             <a href="/rss.xml"><img src="/images/rss.png" alt="RSS feed logo"></a>
         </header>
 
+        <div id="scrollBar">
+        </div>
+
         <div id="content">
             <h1>$title$</h1>