0.6.0 (#12)

* Fix ineffective option, fixed #10

* Feat: dropdown list, #6

* Fix repo url

* Feat: sidebar with toggle

* Update doc

src/event.js

@@ -70,3 +70,14 @@ export function activeLink (dom, activeParent) {
     }
   })
 }
+
+/**
+ * sidebar toggle
+ */
+export function bindToggle (dom) {
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom)
+  if (!dom) return
+  const main = document.querySelector('main')
+
+  dom.addEventListener('click', () => main.classList.toggle('close'))
+}

src/index.js

@@ -6,6 +6,7 @@ const OPTIONS = {
   repo: '',
   maxLevel: 6,
   sidebar: '',
+  sidebarToggle: false,
   loadSidebar: null,
   loadNavbar: null
 }
@@ -15,7 +16,7 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
 if (script) {
   for (const prop in OPTIONS) {
     const val = script.getAttribute('data-' + camel2kebab(prop))
-    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
+    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
   }
   if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
   if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
@@ -34,7 +35,8 @@ const Docsify = function () {
 
   // Render markdown file
   load(`${loc}.md`)
-    .then(render.renderArticle, _ => render.renderArticle())
+    .then(content => render.renderArticle(content, OPTIONS),
+      _ => render.renderArticle(null, OPTIONS))
 
   // Render sidebar
   if (OPTIONS.loadSidebar) {

src/render.js

@@ -1,7 +1,7 @@
 import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
-import { activeLink, scrollActiveSidebar } from './event'
+import { activeLink, scrollActiveSidebar, bindToggle } from './event'
 import { genTree } from './util'
 
 const renderTo = function (dom, content) {
@@ -38,17 +38,20 @@ marked.setOptions({ renderer })
 export function renderApp (dom, replace, opts) {
   const nav = document.querySelector('nav') || document.createElement('nav')
 
-  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
+  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(opts.sidebarToggle) + tpl.corner(opts.repo) + tpl.main()
   document.body.insertBefore(nav, document.body.children[0])
+
+  // bind toggle
+  bindToggle('button.sidebar-toggle')
 }
 
 /**
  * article
  */
-export function renderArticle (content = 'not found') {
+export function renderArticle (content = 'not found', OPTIONS) {
   renderTo('article', marked(content))
-  if (!renderSidebar.rendered) renderSidebar(null)
-  if (!renderNavbar.rendered) renderNavbar(null)
+  if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
+  if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
 }
 
 /**

src/tpl.js

@@ -7,6 +7,7 @@
 export function corner (data) {
   if (!data) return ''
   if (!/\/\//.test(data)) data = 'https://github.com/' + data
+  data = data.replace(/^git\+/, '')
 
   return `
   <a href="${data}" class="github-corner" aria-label="View source on Github">
@@ -31,6 +32,13 @@ export function main () {
   </main>`
 }
 
+export function toggle (bool) {
+  if (!bool) return ''
+  return `<button class="sidebar-toggle">
+    <span></span><span></span><span></span>
+  </button>`
+}
+
 /**
  * Render tree
  * @param  {Array} tree