fix(scroll) highlight bug

This commit is contained in:
qingwei.li 2017-02-19 22:29:35 +08:00
commit 6b08546654
3 changed files with 56 additions and 53 deletions

View file

@ -2,17 +2,62 @@ import { isMobile } from '../util/env'
import * as dom from '../util/dom'
import { parse } from '../route/hash'
const nav = {}
let hoverOver = false
function highlight () {
const sidebar = dom.getNode('.sidebar')
const anchors = dom.findAll('.anchor')
const wrap = dom.find(sidebar, '.sidebar-nav')
let active = dom.find(sidebar, 'li.active')
const top = dom.body.scrollTop
let last
for (let i = 0, len = anchors.length; i < len; i += 1) {
const node = anchors[i]
if (node.offsetTop > top) {
if (!last) last = node
break
} else {
last = node
}
}
if (!last) return
const li = nav[last.getAttribute('data-id')]
if (!li || li === active) return
active && active.classList.remove('active')
li.classList.add('active')
active = li
// scroll into view
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
if (!hoverOver && dom.body.classList.contains('sticky')) {
const height = sidebar.clientHeight
const curOffset = 0
const cur = active.offsetTop + active.clientHeight + 40
const isInView = (
active.offsetTop >= wrap.scrollTop &&
cur <= wrap.scrollTop + height
)
const notThan = cur - curOffset < height
const top = isInView
? wrap.scrollTop
: notThan
? curOffset
: cur - height
sidebar.scrollTop = top
}
}
export function scrollActiveSidebar () {
if (isMobile) return
let hoverOver = false
const anchors = dom.findAll('.anchor')
const sidebar = dom.find('.sidebar')
const wrap = dom.find(sidebar, '.sidebar-nav')
const nav = {}
const sidebar = dom.getNode('.sidebar')
const lis = dom.findAll(sidebar, 'li')
let active = dom.find(sidebar, 'li.active')
for (let i = 0, len = lis.length; i < len; i += 1) {
const li = lis[i]
@ -27,50 +72,6 @@ export function scrollActiveSidebar () {
nav[decodeURIComponent(href)] = li
}
function highlight () {
const top = dom.body.scrollTop
let last
for (let i = 0, len = anchors.length; i < len; i += 1) {
const node = anchors[i]
if (node.offsetTop > top) {
if (!last) last = node
break
} else {
last = node
}
}
if (!last) return
const li = nav[last.getAttribute('data-id')]
if (!li || li === active) return
active && active.classList.remove('active')
li.classList.add('active')
active = li
// scroll into view
// https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
if (!hoverOver && dom.body.classList.contains('sticky')) {
const height = sidebar.clientHeight
const curOffset = 0
const cur = active.offsetTop + active.clientHeight + 40
const isInView = (
active.offsetTop >= wrap.scrollTop &&
cur <= wrap.scrollTop + height
)
const notThan = cur - curOffset < height
const top = isInView
? wrap.scrollTop
: notThan
? curOffset
: cur - height
sidebar.scrollTop = top
}
}
dom.off('scroll', highlight)
dom.on('scroll', highlight)
dom.on(sidebar, 'mouseover', () => { hoverOver = true })

View file

@ -31,10 +31,12 @@ function renderMain (html) {
// execute script
this.config.executeScript && executeScript()
if (!this.config.executeScript &&
if (this.config.executeScript !== false &&
typeof window.Vue !== 'undefined' &&
!executeScript()) {
setTimeout(_ => {
const vueVM = window.__EXECUTE_RESULT__
vueVM && vueVM.$destroy && vueVM.$destroy()
window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main')
}, 0)
}

View file

@ -17,7 +17,7 @@ div#app {
text-align: center;
font-size: 30px;
font-weight: lighter;
margin: 40vw auto;
margin: 40vh auto;
&:empty::before {
content: "Loading...";