Skip to content

Commit

Permalink
Implement next/prev
Browse files Browse the repository at this point in the history
  • Loading branch information
rstacruz committed Oct 9, 2015
1 parent 6deb511 commit 72259e0
Show file tree
Hide file tree
Showing 9 changed files with 280 additions and 13 deletions.
4 changes: 3 additions & 1 deletion README.md
@@ -1,3 +1,5 @@
# docpress-base

Base theme for Docpress.
Base theme for Docpress. See [docpress] for documentation.

[docpress]: https://github.com/docpress/docpress
16 changes: 15 additions & 1 deletion data/layout.jade
Expand Up @@ -59,9 +59,22 @@ mixin header-nav
.right
if meta.github
a.iconlink(href='https://github.com/' + meta.github, data-title=meta.github)
span.title Open in GitHub
// span.title Open in GitHub
span.icon.-github

mixin footer-nav(prev, next)
if prev || next
.footer-nav
if prev
.left
a(href=prev.url)
span.title= prev.title
if next
.right
a(href=next.url)
span.label= "Next: "
span.title= next.title

//-
//- html
//-
Expand All @@ -79,6 +92,7 @@ html
+header-nav
.markdown-body
!= contents
+footer-nav(prev, next)
.menu.toc-menu
+menu(toc, 0)
script(src=(base + 'assets/script.js?t=' + hash.script))
26 changes: 26 additions & 0 deletions data/script.js
Expand Up @@ -7,6 +7,7 @@ var each = require('dom101/each')
var toggleClass = require('dom101/toggle-class')
var ready = require('dom101/ready')
var Scrolltrack = require('./scrolltrack')
var Scrollclass = require('./scrollclass')

/*
* pjax/nprogress
Expand Down Expand Up @@ -104,3 +105,28 @@ void (function () {
st.update()
})
}())

void(function () {
onmount('.footer-nav', function (b) {
b.sc = Scrollclass(this, {
className: '-expanded',
onscroll: function (y) {
console.log(this.maxScroll, y, this.maxScroll - y < 1)
return this.maxScroll - y < 1
}
})
}, function (b) {
b.sc.destroy()
})
}())

void(function () {
onmount('.header-nav', function (b) {
b.sc = Scrollclass(this, {
className: '-expanded',
onscroll: function (y) { return y < 40 }
})
}, function (b) {
b.sc.destroy()
})
}())
92 changes: 92 additions & 0 deletions data/scrollclass/index.js
@@ -0,0 +1,92 @@
var debounce = require('debounce')
var documentHeight = require('dom101/document-height')
var toggleClass = require('dom101/toggle-class')
var scrollTop = require('dom101/scroll-top')

/**
* Listens for scrolling.
* Available options:
*
* * `parent` (Element) — the parent to listen for scroll events to. Defaults
* to `document.`
* * `className` (String) — classname to apply to the function.
* * `onresize` (Function) — callback to run when the window resizes. Use
* this to cache metrics.
* * `onscroll` (Function) — callback to run when scrolling. When this returns
* true, `className` will be applied; if false, it'll be removed.
*/

function Scrollclass (el, options) {
if (!(this instanceof Scrollclass)) return new Scrollclass(el, options)
if (!options) options = {}

this.el = q(el)
this.parent = q(options.parent || document)
this.className = options.className || 'active'
this.onresize = (options.onresize || noop).bind(this)
this.onscroll = (options.onscroll || noop).bind(this)

this._onscroll = debounce(this.poll.bind(this), 5)
this._onresize = debounce(this.update.bind(this), 5)

this.listen()
}

/**
* Fires event listeners.
*/

Scrollclass.prototype.listen = function () {
window.addEventListener('resize', this._onresize)
window.addEventListener('resize', this._onscroll)
this.parent.addEventListener('scroll', this._onscroll)
this._onresize()
this._onscroll()
}

/**
* Destroys all event listeners.
*/

Scrollclass.prototype.destroy = function () {
window.removeEventListener('resize', this._onresize)
window.removeEventListener('resize', this._onscroll)
this.parent.removeEventListener('scroll', this._onscroll)
}

/**
* Internal: Updates data on window resize. This sets some useful stuff that
* can be used by the `onscroll` handler.
*/

Scrollclass.prototype.update = function () {
this.documentHeight = documentHeight()
this.winHeight = window.innerHeight
this.maxScroll = this.documentHeight - this.winHeight
console.log('maxscroll', this.maxScroll, 'w:', this.winHeight, 'd:', documentHeight())
this.onresize()
}

/**
* Internal: scroll handler.
*/

Scrollclass.prototype.poll = function () {
var result = this.onscroll(scrollTop())
toggleClass(this.el, this.className, result)
}

function noop () {}

/**
* Internal: helper to normalize between CSS selectors, DOM elements and
* jQuery objects.
*/

function q (el) {
if (typeof el === 'string') return document.querySelector(el)
else if (typeof el === 'object' && el[0]) return el[0]
else return el
}

module.exports = Scrollclass
9 changes: 7 additions & 2 deletions data/scrolltrack/index.js
Expand Up @@ -41,7 +41,7 @@ function Scrolltrack (options) {

Scrolltrack.prototype.listen = function () {
q(this.scrollParent).addEventListener('scroll', this.listener)
document.addEventListener('resize', this.update)
window.addEventListener('resize', this.update)
}

/**
Expand All @@ -50,7 +50,7 @@ Scrolltrack.prototype.listen = function () {

Scrolltrack.prototype.destroy = function () {
q(this.scrollParent).removeEventListener('scroll', this.listener)
document.removeEventListener('resize', this.update)
window.removeEventListener('resize', this.update)
}

/**
Expand Down Expand Up @@ -162,6 +162,11 @@ Scrolltrack.prototype.follow = function (heading, last) {
}
}

/**
* Internal: helper to normalize between CSS selectors, DOM elements and
* jQuery objects.
*/

function q (el) {
if (typeof el === 'string') return document.querySelector(el)
else if (typeof el === 'object' && el[0]) return el[0]
Expand Down
106 changes: 102 additions & 4 deletions data/style.sass
Expand Up @@ -10,11 +10,12 @@ $black: #111
$slate: #505d6b
$accent: #4078C0
$nav-width: 250px
$collapsed-nav-width: 64px
$xpad: 24px

// :before:
clearfix()
@mixin clearfix
&:after
content: ''
display: table
Expand Down Expand Up @@ -271,11 +272,25 @@ ul.heading-list
//
.header-nav
&
position: relative
position: fixed
top: $xpad
right: $xpad
left: $xpad
height: 40px
line-height: 40px
text-align: center

.title,
.label
opacity: 0
transition: opacity 250ms linear
pointer-events: none

&.-expanded .title,
&.-expanded .label
opacity: 1
pointer-events: auto

.left
position: absolute
left: 0
Expand Down Expand Up @@ -304,7 +319,7 @@ ul.heading-list
white-space: nowrap
text-decoration: none

.title
.title, .label
font-size: 13px
white-space: nowrap
margin: 0 8px
Expand Down Expand Up @@ -357,6 +372,79 @@ ul.heading-list
.icon.-github:after
+ion-icon('social-github')

//
// Footer nav
//
.footer-nav
&
position: fixed
bottom: $xpad
right: $xpad
left: $xpad
height: 24px
line-height: 24px
+clearfix

.left
float: left

.right
float: right

.title,
.label
opacity: 0
pointer-events: none

.title,
.label,
a:before,
a:after
transition: opacity 250ms linear, color 250ms linear

&.-expanded .title,
&.-expanded .label
opacity: 1
pointer-events: auto

a
text-decoration: none
font-size: 13px
color: $slate
transition: color 100ms linear

.label,
.left .title
color: rgba($slate, 0.5)

.right .title
font-weight: bold
margin-right: 0.1em

.left a:hover:before,
.right a:hover:after
color: $accent

a:hover .title
color: $accent

.left a:before,
.right a:after
display: inline-block
font-size: 20px
vertical-align: middle
position: relative
top: -1px

.left a:before
+ion-icon('chevron-left')
margin-right: 16px

.right a:after
+ion-icon('chevron-right')
margin-left: 16px

//
// Desktop layout
//
Expand All @@ -372,7 +460,7 @@ ul.heading-list
overflow-y: auto

.body
padding-top: $xpad
padding-top: $xpad + 40px
padding-bottom: 64px + 24px
transition: all 250ms ease-in

Expand All @@ -381,7 +469,16 @@ ul.heading-list
transform: translate3d(-1 * $nav-width, 0, 0)
transition: all 250ms ease-in

.header-nav,
.footer-nav
transition: left 250ms ease-in
left: $xpad + $collapsed-nav-width

.-menu-visible &
.header-nav,
.footer-nav
left: $nav-width + $xpad

.body
padding-left: $nav-width + $xpad
padding-right: $xpad
Expand All @@ -394,3 +491,4 @@ ul.heading-list
content: ''
display: block
height: 64px

0 comments on commit 72259e0

Please sign in to comment.