ok next and styles

blog/hymn.hook

@@ -1,2 +0,0 @@
-/:  /%%%/tree/pub/blog  /%  /hymn/
--<

blog/json.hook

@@ -1,2 +0,0 @@
-/:  /%%%/tree/pub/blog  /%  /json/
--<

front/hymn.hook

@@ -0,0 +1,2 @@
+/:  /%%%/tree/pub/front  /%  /hymn/
+-<

front/json.hook

@@ -0,0 +1,2 @@
+/:  /%%%/tree/pub/front  /%  /json/
+-<

pub/tree/src/css/main.css

@@ -184,6 +184,7 @@ li:before {
   position: fixed;
   top: 0rem;
   width: 57rem;
+  height: 100%;
   padding-top: 1rem;
   z-index: 0;
   margin-left: -32rem;
@@ -200,7 +201,7 @@ li:before {
   transition: opacity 0.3s ease-in-out;
 }
 #cont {
-  position: absolute;
+  position: relative;
   top: 0;
   margin-bottom: 9rem;
 }
@@ -286,6 +287,15 @@ h3.time {
   font-weight: 200;
   letter-spacing: 1px;
 }
+#nav .link-next {
+  position: absolute;
+  bottom: 4rem;
+  margin-left: 1rem;
+}
+#nav .link-next a {
+  font-weight: 500;
+  font-size: 1rem;
+}
 .list > li > a {
   margin-bottom: 0.3rem;
 }

pub/tree/src/css/main.styl

@@ -114,6 +114,7 @@ li:before
   position fixed
   top 0rem
   width 57rem
+  height 100%
   padding-top 1rem
   z-index 0
   margin-left -32rem
@@ -130,7 +131,7 @@ li:before
   transition opacity .3s ease-in-out
 
 #cont
-  position absolute
+  position relative
   top 0
   margin-bottom 9rem
 
@@ -213,6 +214,15 @@ h3.time
   font-weight 200
   letter-spacing 1px
 
+#nav .link-next
+  position absolute
+  bottom 4rem
+  margin-left 1rem
+  
+  a
+    font-weight 500
+    font-size 1rem
+
 .list > li > a
   margin-bottom .3rem
 

pub/tree/src/js/components/AnchorComponent.coffee

@@ -34,10 +34,23 @@ Links = React.createFactory query {
       @props.children, 
       @renderUp(),
       @renderSibs(),
-      @renderArrows()
+      @renderArrows(),
+      @renderNext()
     renderUp: ->
       if @props.sein 
         div {id:"up",key:"up"}, @renderArrow "up", @props.sein
+    renderSibs: ->
+      keys = getKeys @props
+      if keys.indexOf(@props.curr) isnt -1
+        style = {marginTop: -24 * (keys.indexOf @props.curr) + "px"}
+      div {id:"sibs",style}, keys.map (key) =>
+        href = window.tree.basepath @props.path+"/"+key
+        data = @props.kids[key]
+        head = data.meta.title if data.meta
+        head ?= @toText data.head
+        head ||= key
+        className = clas active: key is @props.curr
+        (div {className,key}, (a {href,onClick:@props.onClick}, head))
     renderArrow: (name, path) ->
       href = window.tree.basepath path
       (a {href,key:"arow-#{name}",className:"arow-#{name}"},"")
@@ -51,24 +64,20 @@ Links = React.createFactory query {
         if next is keys.length then next = 0
         prev = keys[prev]
         next = keys[next]
+        @next = next
       if @props.sein 
         if prev or next then _.filter [
           div {id:"sides",key:"sides"},
             if prev then @renderArrow "prev", "#{@props.sein}/#{prev}"
             if next then @renderArrow "next", "#{@props.sein}/#{next}"
           ]    
-    renderSibs: ->
-      keys = getKeys @props
-      if keys.indexOf(@props.curr) isnt -1
-        style = {marginTop: -24 * (keys.indexOf @props.curr) + "px"}
-      div {id:"sibs",style}, keys.map (key) =>
-        href = window.tree.basepath @props.path+"/"+key
-        data = @props.kids[key]
-        head = data.meta.title if data.meta
-        head ?= @toText data.head
-        head ||= key
-        className = clas active: key is @props.curr
-        (div {className,key}, (a {href,onClick:@props.onClick}, head))
+    renderNext: ->
+      curr = @props.kids[@props.curr]
+      if curr?.meta?.next
+        next = @props.kids[@next]
+        (div {className:"link-next"}, [
+          (a {href:"#{@props.sein}/#{next.name}"}, "Next: #{next.meta.title}")
+        ])
 
     toText: (elem)-> reactify.walk elem,
                                  ()->''

pub/tree/src/js/main.coffee

@@ -47,11 +47,13 @@ $ ->
     if po.lm isnt null and po.cm isnt null
       po.cs = $(window).scrollTop()
 
+      db = $(window).height()-(po.cs+window.innerHeight)
+
       ds = Math.abs po.cs-po.ls
       dx = Math.abs po.cm.x-po.lm.x
       dy = Math.abs po.cm.y-po.lm.y
       
-      $('#nav').toggleClass 'moving',(dx > 20 or dy > 20)
+      $('#nav').toggleClass 'moving',(dx > 20 or dy > 20 or db < 180)
     po.lm = po.cm
     po.ls = po.cs
   setInterval checkMove,200

pub/tree/src/js/main.js

@@ -85,7 +85,7 @@ Links = React.createFactory(query({
   render: function() {
     return div({
       className: 'links'
-    }, this.props.children, this.renderUp(), this.renderSibs(), this.renderArrows());
+    }, this.props.children, this.renderUp(), this.renderSibs(), this.renderArrows(), this.renderNext());
   },
   renderUp: function() {
     if (this.props.sein) {
@@ -95,42 +95,6 @@ Links = React.createFactory(query({
       }, this.renderArrow("up", this.props.sein));
     }
   },
-  renderArrow: function(name, path) {
-    var href;
-    href = window.tree.basepath(path);
-    return a({
-      href: href,
-      key: "arow-" + name,
-      className: "arow-" + name
-    }, "");
-  },
-  renderArrows: function() {
-    var index, keys, next, prev;
-    keys = getKeys(this.props);
-    if (keys.length > 1) {
-      index = keys.indexOf(this.props.curr);
-      prev = index - 1;
-      next = index + 1;
-      if (prev < 0) {
-        prev = keys.length - 1;
-      }
-      if (next === keys.length) {
-        next = 0;
-      }
-      prev = keys[prev];
-      next = keys[next];
-    }
-    if (this.props.sein) {
-      if (prev || next) {
-        return _.filter([
-          div({
-            id: "sides",
-            key: "sides"
-          }, prev ? this.renderArrow("prev", this.props.sein + "/" + prev) : void 0, next ? this.renderArrow("next", this.props.sein + "/" + next) : void 0)
-        ]);
-      }
-    }
-  },
   renderSibs: function() {
     var keys, style;
     keys = getKeys(this.props);
@@ -167,6 +131,57 @@ Links = React.createFactory(query({
       };
     })(this)));
   },
+  renderArrow: function(name, path) {
+    var href;
+    href = window.tree.basepath(path);
+    return a({
+      href: href,
+      key: "arow-" + name,
+      className: "arow-" + name
+    }, "");
+  },
+  renderArrows: function() {
+    var index, keys, next, prev;
+    keys = getKeys(this.props);
+    if (keys.length > 1) {
+      index = keys.indexOf(this.props.curr);
+      prev = index - 1;
+      next = index + 1;
+      if (prev < 0) {
+        prev = keys.length - 1;
+      }
+      if (next === keys.length) {
+        next = 0;
+      }
+      prev = keys[prev];
+      next = keys[next];
+      this.next = next;
+    }
+    if (this.props.sein) {
+      if (prev || next) {
+        return _.filter([
+          div({
+            id: "sides",
+            key: "sides"
+          }, prev ? this.renderArrow("prev", this.props.sein + "/" + prev) : void 0, next ? this.renderArrow("next", this.props.sein + "/" + next) : void 0)
+        ]);
+      }
+    }
+  },
+  renderNext: function() {
+    var curr, next, ref1;
+    curr = this.props.kids[this.props.curr];
+    if (curr != null ? (ref1 = curr.meta) != null ? ref1.next : void 0 : void 0) {
+      next = this.props.kids[this.next];
+      return div({
+        className: "link-next"
+      }, [
+        a({
+          href: this.props.sein + "/" + next.name
+        }, "Next: " + next.meta.title)
+      ]);
+    }
+  },
   toText: function(elem) {
     return reactify.walk(elem, function() {
       return '';
@@ -1268,13 +1283,14 @@ $(function() {
     };
   });
   checkMove = function() {
-    var ds, dx, dy;
+    var db, ds, dx, dy;
     if (po.lm !== null && po.cm !== null) {
       po.cs = $(window).scrollTop();
+      db = $(window).height() - (po.cs + window.innerHeight);
       ds = Math.abs(po.cs - po.ls);
       dx = Math.abs(po.cm.x - po.lm.x);
       dy = Math.abs(po.cm.y - po.lm.y);
-      $('#nav').toggleClass('moving', dx > 20 || dy > 20);
+      $('#nav').toggleClass('moving', dx > 20 || dy > 20 || db < 180);
     }
     po.lm = po.cm;
     return po.ls = po.cs;