Fix/1.0.2 (#25)

* Fix regular expression, fixed #23

* Fix repeat binding events

* Add content cache

* Add changelog

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.0.2
+### Bug fixes
+- Fix binding events bug, fixed #24
+- Fix regular expression, fixed #23
+
 ## 1.0.1
 ### Bug fixes
 - `img` style

src/event.js

@@ -39,10 +39,13 @@ export function scrollActiveSidebar () {
     }
   }
 
-  document.querySelector('main .content').addEventListener('scroll', highlight)
+  const dom = document.querySelector('main .content')
+  dom.removeEventListener('scroll', highlight)
+  dom.addEventListener('scroll', highlight)
   highlight()
+}
 
-  function scrollIntoView () {
+export function scrollIntoView () {
   const id = window.location.hash.match(/#[^#\/]+$/g)
   if (!id || !id.length) return
   const section = document.querySelector(id[0])
@@ -50,10 +53,6 @@ export function scrollActiveSidebar () {
   if (section) section.scrollIntoView()
 }
 
-  window.addEventListener('hashchange', scrollIntoView)
-  scrollIntoView()
-}
-
 /**
  * Acitve link
  */

src/index.js

@@ -1,4 +1,5 @@
 import { load, camel2kebab, isNil, getRoute } from './util'
+import { activeLink, scrollIntoView } from './event'
 import * as render from './render'
 
 const OPTIONS = {
@@ -29,25 +30,37 @@ render.config(OPTIONS)
 
 let cacheRoute = null
 
-const mainRender = function () {
+const mainRender = function (cb) {
   const route = getRoute()
-  if (cacheRoute === route) return
+  if (cacheRoute === route) return cb()
-
+  let wait
   let basePath = cacheRoute = route
 
   if (!/\//.test(basePath)) {
     basePath = ''
   } else if (basePath && !/\/$/.test(basePath)) {
-    basePath = basePath.match(/(\S+\/)[^\/]+$/)[1]
+    basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
   }
 
   // Render markdown file
   load((!route || /\/$/.test(route)) ? `${route}README.md` : `${route}.md`)
-    .then(render.renderArticle, _ => render.renderArticle(null))
+    .then(result => {
+      render.renderArticle(result)
+      if (OPTIONS.loadSidebar) {
+        if (wait === false) cb()
+        wait = false
+      } else {
+        cb()
+      }
+    }, _ => render.renderArticle(null))
 
   // Render sidebar
   if (OPTIONS.loadSidebar) {
-    load(basePath + OPTIONS.loadSidebar).then(render.renderSidebar)
+    load(basePath + OPTIONS.loadSidebar).then(result => {
+      render.renderSidebar(result)
+      if (wait === false) cb()
+      wait = false
+    })
   }
 
   // Render navbar
@@ -59,13 +72,19 @@ const mainRender = function () {
 const Docsify = function () {
   const dom = document.querySelector(OPTIONS.el) || document.body
   const replace = dom !== document.body
+  const main = function () {
+    mainRender(_ => {
+      activeLink('aside.sidebar', true)
+      scrollIntoView()
+    })
+  }
 
   // Render app
   render.renderApp(dom, replace)
-  mainRender()
+  main()
   if (OPTIONS.router) {
     if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
-    window.addEventListener('hashchange', mainRender)
+    window.addEventListener('hashchange', main)
   }
 }
 

src/render.js

@@ -5,6 +5,7 @@ import { activeLink, scrollActiveSidebar, bindToggle } from './event'
 import { genTree, getRoute } from './util'
 
 let OPTIONS = {}
+const CACHE = {}
 
 const renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
@@ -74,6 +75,8 @@ export function renderArticle (content) {
  * navbar
  */
 export function renderNavbar (content) {
+  if (CACHE['navbar'] === content) return
+  CACHE['navbar'] = content
   renderNavbar.rendered = true
 
   if (content) renderTo('nav', marked(content))
@@ -84,6 +87,8 @@ export function renderNavbar (content) {
  * sidebar
  */
 export function renderSidebar (content) {
+  if (CACHE['sidebar'] === content) return
+  CACHE['sidebar'] = content
   renderSidebar.rendered = true
 
   let isToc = false
@@ -98,7 +103,7 @@ export function renderSidebar (content) {
   }
 
   renderTo('aside.sidebar', content)
-  isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true)
+  if (isToc) scrollActiveSidebar()
   toc = []
 }
 

src/themes/vue.css

@@ -36,7 +36,7 @@ body {
 
   ul li.active>a {
     color: $color-primary;
-    font-weight: 500;
+    font-weight: 600;
   }
 }