Skip to content

Commit

Permalink
feat(render): add auto header
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 19, 2017
1 parent fd9c3bd commit b7768b1
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 26 deletions.
1 change: 1 addition & 0 deletions src/core/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const config = merge({
name: '',
themeColor: '',
nameLink: window.location.pathname,
autoHeader: false,
ga: ''
}, window.$docsify)

Expand Down
44 changes: 28 additions & 16 deletions src/core/event/sidebar.js
Original file line number Diff line number Diff line change
@@ -1,43 +1,51 @@
import { isMobile } from '../util/env'
import { getNode, on, body, findAll, toggleClass } from '../util/dom'
import * as dom from '../util/dom'
import { getHash } from '../route/hash'

const title = dom.$.title
/**
* Toggle button
*/
export function btn (el) {
const toggle = () => body.classList.toggle('close')
const toggle = () => dom.body.classList.toggle('close')

el = getNode(el)
on(el, 'click', toggle)
el = dom.getNode(el)
dom.on(el, 'click', toggle)

if (isMobile) {
const sidebar = getNode('.sidebar')
const sidebar = dom.getNode('.sidebar')

on(sidebar, 'click', () => {
dom.on(sidebar, 'click', () => {
toggle()
setTimeout(() => getAndActive(true), 0)
setTimeout(() => getAndActive(sidebar, true, true), 0)
})
}
}

export function sticky () {
const cover = getNode('section.cover')
const cover = dom.getNode('section.cover')
if (!cover) return
const coverHeight = cover.getBoundingClientRect().height

if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) {
toggleClass(body, 'add', 'sticky')
dom.toggleClass(dom.body, 'add', 'sticky')
} else {
toggleClass(body, 'remove', 'sticky')
dom.toggleClass(dom.body, 'remove', 'sticky')
}
}

export function getAndActive (el, isParent) {
const dom = getNode(el)
const links = findAll(dom, 'a')
const hash = '#' + getHash()
/**
* Get and active link
* @param {string|element} el
* @param {Boolean} isParent acitve parent
* @param {Boolean} autoTitle auto set title
* @return {element}
*/
export function getAndActive (el, isParent, autoTitle) {
el = dom.getNode(el)

const links = dom.findAll(el, 'a')
const hash = '#' + getHash()
let target

links
Expand All @@ -48,11 +56,15 @@ export function getAndActive (el, isParent) {

if (hash.indexOf(href) === 0 && !target) {
target = a
toggleClass(node, 'add', 'active')
dom.toggleClass(node, 'add', 'active')
} else {
toggleClass(node, 'remove', 'active')
dom.toggleClass(node, 'remove', 'active')
}
})

if (autoTitle) {
dom.$.title = target ? `${target.innerText} - ${title}` : title
}

return target
}
5 changes: 1 addition & 4 deletions src/core/render/compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,7 @@ renderer.code = function (code, lang = '') {
return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
}
renderer.link = function (href, title, text) {
if (!/:|(\/{2})/.test(href)) {
href = toURL(href)
}
return `<a href="${href}" title="${title || ''}">${text}</a>`
return `<a href="${toURL(href)}" title="${title || text}">${text}</a>`
}
renderer.paragraph = function (text) {
if (/^!&gt;/.test(text)) {
Expand Down
16 changes: 13 additions & 3 deletions src/core/render/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,22 @@ export function renderMixin (proto) {
}

proto._renderSidebar = function (text) {
const { maxLevel, subMaxLevel } = this.config
const { maxLevel, subMaxLevel, autoHeader } = this.config

this._renderTo('.sidebar-nav', sidebar(text, maxLevel))
subSidebar(getAndActive('.sidebar-nav', true), subMaxLevel)
const active = getAndActive('.sidebar-nav', true, true)
subSidebar(active, subMaxLevel)
// bind event
scrollActiveSidebar()

if (autoHeader && active) {
const main = dom.getNode('#main')
if (main.children[0].tagName !== 'H1') {
const h1 = dom.create('h1')
h1.innerText = active.innerText
dom.before(main, h1)
}
}
}

proto._renderNav = function (text) {
Expand Down Expand Up @@ -128,7 +138,7 @@ export function initRender (vm) {
// Render main app
vm._renderTo(el, html, true)
// Add nav
dom.body.insertBefore(navEl, dom.body.children[0])
dom.before(dom.body, navEl)

if (config.themeColor) {
dom.$.head += tpl.theme(config.themeColor)
Expand Down
4 changes: 2 additions & 2 deletions src/core/route/hash.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { merge, cached } from '../util/core'
import { parseQuery, stringifyQuery } from './util'
import { parseQuery, stringifyQuery, cleanPath } from './util'

function replaceHash (path) {
const i = window.location.href.indexOf('#')
Expand Down Expand Up @@ -70,5 +70,5 @@ export function toURL (path, params) {
route.query = merge({}, route.query, params)
path = route.path + stringifyQuery(route.query)

return '#' + path
return cleanPath('#/' + path)
}
6 changes: 5 additions & 1 deletion src/core/util/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ export function appendTo (target, el) {
return target.appendChild(el)
}

export function before (target, el) {
return target.insertBefore(el, target.children[0])
}

export function on (el, type, handler) {
isFn(type)
? window.addEventListener(el, type)
Expand All @@ -72,5 +76,5 @@ export const off = function on (el, type, handler) {
* toggleClass(el, 'add', 'active') => el.classList.add('active')
*/
export function toggleClass (el, type, val) {
el.classList[val ? type : 'toggle'](val || type)
el && el.classList[val ? type : 'toggle'](val || type)
}

0 comments on commit b7768b1

Please sign in to comment.