diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js index 67f2965..98197ef 100644 --- a/src/core/event/scroll.js +++ b/src/core/event/scroll.js @@ -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 }) diff --git a/src/core/render/index.js b/src/core/render/index.js index 45eaea0..bce6e7b 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -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) } diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index 6241ffd..bdfe476 100644 --- a/src/themes/basic/_layout.css +++ b/src/themes/basic/_layout.css @@ -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...";