From 4baeacab7aefb29b50e8532ffdc7c1d402461a2b Mon Sep 17 00:00:00 2001 From: Galen Wolfe-Pauly Date: Mon, 19 Oct 2015 18:07:56 -0700 Subject: [PATCH] ok next and styles --- blog/hymn.hook | 2 - blog/json.hook | 2 - front/hymn.hook | 2 + front/json.hook | 2 + pub/tree/src/css/main.css | 12 ++- pub/tree/src/css/main.styl | 12 ++- .../src/js/components/AnchorComponent.coffee | 35 ++++--- pub/tree/src/js/main.coffee | 4 +- pub/tree/src/js/main.js | 94 +++++++++++-------- 9 files changed, 106 insertions(+), 59 deletions(-) delete mode 100644 blog/hymn.hook delete mode 100644 blog/json.hook create mode 100644 front/hymn.hook create mode 100644 front/json.hook diff --git a/blog/hymn.hook b/blog/hymn.hook deleted file mode 100644 index 83c792261..000000000 --- a/blog/hymn.hook +++ /dev/null @@ -1,2 +0,0 @@ -/: /%%%/tree/pub/blog /% /hymn/ --< diff --git a/blog/json.hook b/blog/json.hook deleted file mode 100644 index 93678cb23..000000000 --- a/blog/json.hook +++ /dev/null @@ -1,2 +0,0 @@ -/: /%%%/tree/pub/blog /% /json/ --< diff --git a/front/hymn.hook b/front/hymn.hook new file mode 100644 index 000000000..53e8dadc8 --- /dev/null +++ b/front/hymn.hook @@ -0,0 +1,2 @@ +/: /%%%/tree/pub/front /% /hymn/ +-< diff --git a/front/json.hook b/front/json.hook new file mode 100644 index 000000000..5b110b21f --- /dev/null +++ b/front/json.hook @@ -0,0 +1,2 @@ +/: /%%%/tree/pub/front /% /json/ +-< diff --git a/pub/tree/src/css/main.css b/pub/tree/src/css/main.css index a15518843..f0990722f 100644 --- a/pub/tree/src/css/main.css +++ b/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; } diff --git a/pub/tree/src/css/main.styl b/pub/tree/src/css/main.styl index bc8548540..db148670c 100644 --- a/pub/tree/src/css/main.styl +++ b/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 diff --git a/pub/tree/src/js/components/AnchorComponent.coffee b/pub/tree/src/js/components/AnchorComponent.coffee index 32553933a..273cf69e1 100644 --- a/pub/tree/src/js/components/AnchorComponent.coffee +++ b/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, ()->'' diff --git a/pub/tree/src/js/main.coffee b/pub/tree/src/js/main.coffee index b3a27a245..a4c381821 100644 --- a/pub/tree/src/js/main.coffee +++ b/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 diff --git a/pub/tree/src/js/main.js b/pub/tree/src/js/main.js index 2902f983d..6c12e55b1 100644 --- a/pub/tree/src/js/main.js +++ b/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;