102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
import { isMobile } from './util'
|
|
|
|
/**
|
|
* Active sidebar when scroll
|
|
* @link https://buble.surge.sh/
|
|
*/
|
|
export function scrollActiveSidebar () {
|
|
if (isMobile()) return
|
|
|
|
const anchors = document.querySelectorAll('.anchor')
|
|
const nav = {}
|
|
const lis = document.querySelectorAll('.sidebar li')
|
|
let active = null
|
|
|
|
for (let i = 0, len = lis.length; i < len; i += 1) {
|
|
const li = lis[i]
|
|
let href = li.querySelector('a').getAttribute('href')
|
|
|
|
if (href !== '/') href = href.match(/#([^#]+)$/g)[0].slice(1)
|
|
|
|
nav[decodeURIComponent(href)] = li
|
|
}
|
|
|
|
function highlight () {
|
|
for (let i = 0, len = anchors.length; i < len; i += 1) {
|
|
const node = anchors[i].parentNode
|
|
const bcr = node.getBoundingClientRect()
|
|
|
|
if (bcr.top < 10 && bcr.bottom > 10) {
|
|
const li = nav[node.id]
|
|
|
|
if (!li || li === active) return
|
|
if (active) active.setAttribute('class', '')
|
|
|
|
li.setAttribute('class', 'active')
|
|
active = li
|
|
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
const dom = document.querySelector('main .content')
|
|
dom.removeEventListener('scroll', highlight)
|
|
dom.addEventListener('scroll', highlight)
|
|
highlight()
|
|
}
|
|
|
|
export function scrollIntoView () {
|
|
const id = window.location.hash.match(/#[^#\/]+$/g)
|
|
if (!id || !id.length) return
|
|
const section = document.querySelector(decodeURIComponent(id[0]))
|
|
|
|
if (section) section.scrollIntoView()
|
|
}
|
|
|
|
/**
|
|
* Acitve link
|
|
*/
|
|
export function activeLink (dom, activeParent) {
|
|
const host = window.location.href
|
|
|
|
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
|
if (!dom) return
|
|
|
|
;[].slice.call(dom.querySelectorAll('a')).forEach(node => {
|
|
if (node.href === host) {
|
|
activeParent
|
|
? node.parentNode.setAttribute('class', 'active')
|
|
: node.setAttribute('class', 'active')
|
|
} else {
|
|
activeParent
|
|
? node.parentNode.removeAttribute('class')
|
|
: node.removeAttribute('class')
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* sidebar toggle
|
|
*/
|
|
export function bindToggle (dom) {
|
|
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
|
if (!dom) return
|
|
const body = document.body
|
|
|
|
dom.addEventListener('click', () => body.classList.toggle('close'))
|
|
|
|
if (!/mobile/i.test(navigator.userAgent)) return
|
|
document.querySelector('aside').addEventListener('click', event => {
|
|
body.classList.toggle('close')
|
|
})
|
|
}
|
|
|
|
let cacheContentDOM
|
|
export function scroll2Top () {
|
|
if (!cacheContentDOM) {
|
|
const dom = isMobile() ? 'body' : 'section.content'
|
|
cacheContentDOM = document.querySelector(dom)
|
|
}
|
|
cacheContentDOM.scrollTop = 0
|
|
}
|