5 files changed, 88 insertions, 13 deletions

diff --git a/api/src/main/scala/twist/stages/IndentHandler.scala b/api/src/main/scala/twist/stages/IndentHandler.scala
index ea396e7..1a59046 100644
--- a/api/src/main/scala/twist/stages/IndentHandler.scala
+++ b/api/src/main/scala/twist/stages/IndentHandler.scala
@@ -50,7 +50,7 @@ object IndentHandler extends (String => String){
 
       val declRemainder = successRemainder(Parser.parse(current.trim, _.templateDeclaration()))
 
-      val exprRemainder = successRemainder(Parser.parse(current.trim, _.expression()))
+      val exprRemainder = successRemainder(Parser.parse(current.trim, _.expression())).filter(_ == current.trim)
 
 
       /**
diff --git a/book/index.tw b/book/index.tw
index 22e0805..3ccd3df 100644
--- a/book/index.tw
+++ b/book/index.tw
@@ -14,13 +14,17 @@
 
         @div(id:="menu")
             @div(cls:="pure-menu pure-menu-open")
-                @a(cls:="pure-menu-heading", href:="#") Contents
-                @Book.contentBar
+                @a(cls:="pure-menu-heading", href:="#")
+                    Contents
+                @ul(cls:="menu-item-list")
+                    @Book.contentBar
 
         @div(id:="main")
             @div(cls:="header")
-                @h1 Hands-on Scala.js
-                @h2 Writing client-side web applications in Scala
+                @h1(id:=Utils.munge("Hands-on Scala.js"))
+                    Hands-on Scala.js
+                @h2
+                    Writing client-side web applications in Scala
 
             @div(cls:="content")
                 @Book.intro
diff --git a/book/src/main/resources/css/layouts/side-menu.css b/book/src/main/resources/css/layouts/side-menu.css
index aba4441..08c2443 100755
--- a/book/src/main/resources/css/layouts/side-menu.css
+++ b/book/src/main/resources/css/layouts/side-menu.css
@@ -2,6 +2,13 @@ body {
     color: #777;
 }
 
+#main{
+    position: fixed;
+
+    right: 0px;
+    height: 100%;
+    overflow-y: scroll
+}
 .pure-img-responsive {
     max-width: 100%;
     height: auto;
@@ -92,6 +99,7 @@ appears on the left side of the page.
     z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
 }
     /*
@@ -222,6 +230,9 @@ Hides the menu at `48em`, but modify this based on your app's needs.
         padding-left: 250px; /* left col width "#menu" */
         left: 0;
     }
+    #main{
+        left: 250px;
+    }
     #menu {
         left: 250px;
     }
diff --git a/book/src/main/resources/js/ui.js b/book/src/main/resources/js/ui.js
index eed641b..8ac4e3a 100755
--- a/book/src/main/resources/js/ui.js
+++ b/book/src/main/resources/js/ui.js
@@ -40,4 +40,60 @@ document.addEventListener("DOMContentLoaded", function(){
         hljs.highlightBlock(snippets[i])
     }
 
+
+
+
+    // Cache selectors
+    var lastId = -1;
+    var main = document.getElementById("main");
+
+    scrollItems = document.getElementsByClassName("menu-item");
+
+    scrollHeaders = []
+
+    for(var i = 0; i < scrollItems.length; i++){
+        scrollHeaders.push(
+            document.getElementById(
+                scrollItems[i].getAttribute("href").substring(1)
+            )
+        )
+    }
+
+
+    function isElementInViewport (el) {
+        var rect = el.getBoundingClientRect();
+
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+        );
+    }
+    main.addEventListener("scroll", function(){
+        // Get container scroll position
+        var fromTop = main.scrollTop;
+
+        // Get id of current scroll item
+        for(var i = scrollItems.length - 1; i >= 0; i--){
+            console.log(scrollHeaders[i].offsetTop, fromTop)
+            if (scrollHeaders[i].offsetTop < fromTop + 15 /*fudge factor*/){
+                if (lastId != i) {
+                    if (lastId != -1) {
+                        scrollItems[lastId].parentElement.className = scrollItems[lastId].parentElement.className.replace(
+                            " pure-menu-selected",
+                            ""
+                        );
+                    }
+                    scrollItems[i].parentElement.className = scrollItems[i].parentElement.className + " pure-menu-selected"
+                    if (!isElementInViewport(scrollItems[i].parentElement)){
+                        scrollItems[i].parentElement.scrollIntoView(lastId > i)
+                    }
+
+                    lastId = i
+                }
+                break;
+            }
+        }
+    });
 });
diff --git a/book/src/main/scala/book/Book.scala b/book/src/main/scala/book/Book.scala
index d301824..1798713 100644
--- a/book/src/main/scala/book/Book.scala
+++ b/book/src/main/scala/book/Book.scala
@@ -16,17 +16,21 @@ object Book {
   val intro = twf("book/intro.tw")
   val gettingStarted = twf("book/getting-started.tw")
   val contentBar = {
-    def rec(current: Node, depth: Int): Frag = {
-      div(
-        marginLeft := s"${depth * 5}px",
-        a(current.name, href:="#"+Utils.munge(current.name)),
-        current.children.map(
-          rec(_, depth + 1)
+    def rec(current: Node, depth: Int): Seq[Frag] = Seq(
+      li(
+        a(
+          current.name,
+          href:="#"+Utils.munge(current.name),
+          paddingLeft := s"${depth * 5}px",
+          cls := "menu-item"
         )
       )
-    }
+    ) ++ current.children.flatMap(
+      rec(_, depth + 1)
+    )
+
     //    @li(cls:="menu-item-divided pure-menu-selected")
-    ul(rec(Utils.structure, 0))
+    rec(Utils.structure, 0)
   }