perf: support collapsed option #8

Author: aleen42

lib/index.js

@@ -49,9 +49,10 @@ const generateContent = (configs, content = '') => {
 		'copyright': 'Copyright © aleen42',
 		'minHeaderCount': '1',
 		'minHeaderDeep': '1',
+		'collapsed': false,
 	}, configs || {});
 
-	const renderContent = pageTreeview.initHeaders(content, options.minHeaderCount, options.minHeaderDeep);
+	const renderContent = pageTreeview.initHeaders(content, options);
 
 	/** check whether the option copyright is empty */
 	const copyRight = options.copyright ? (`
@@ -133,12 +134,11 @@ const pageTreeview = module.exports = {
 
 	/**
 	 * [initHeaders: get headers of a page]
-	 * @param  {string} content [description]
-	 * @param  {string} count   [description]
-	 * @param  {string} deep    [description]
-	 * @return {string}         [description]
+	 * @param  {string} content
+	 * @param  {object} options
+	 * @return {string}
 	 */
-	initHeaders: (content, count, deep) => {
+	initHeaders: (content, {minHeaderCount: count, minHeaderDeep: deep, collapsed}) => {
 		const minHeaderCount = _.isNUM(parseInt(count)) ? parseInt(count) : 1;
 		const minHeaderDeep = _.isNUM(parseInt(deep)) ? parseInt(deep) : 1;
 
@@ -238,24 +238,35 @@ const pageTreeview = module.exports = {
 				/** it's a parent node and replace it */
 				/** the length of "<div" is 4 */
 				const separatorIndex = '<i'.length;
+				const state = collapsed ? 'hidden' : 'opened';
 				generatedHTML = generatedHTML.substring(0, node.index + separatorIndex)
-					+ ' class="level__parent level__item level__parent--opened" state="opened" onclick="'
-					+ 'var curState = this.getAttribute(\'state\');'
-					+ 'var nextState = curState === \'opened\' ? \'hidden\' : \'opened\';'
-					+ 'this.setAttribute(\'state\', nextState);'
+					+ ` class="level__parent level__item level__parent--${state}" state="${state}" onclick="`
+					+ `var curState = this.getAttribute('state');`
+					+ `var nextState = curState === 'opened' ? 'hidden' : 'opened';`
+					+ `this.setAttribute('state', nextState);`
 					+ 'this.className = this.className.split(curState).join(nextState);'
 					+ ''
 					+ 'var list = this.parentNode.nextElementSibling;'
-					+ 'if (nextState === \'hidden\') {'
-					+ '    list.style.display = \'none\';'
+					+ `if (nextState === 'hidden') {`
+					+ `    list.style.display = 'none';`
 					+ '} else {'
-					+ '    list.style.display = \'block\';'
+					+ `    list.style.display = 'block';`
 					+ '}'
 					+ '"'
 					+ generatedHTML.substring(node.index + separatorIndex);
 			}
 		}
 
+		if (collapsed) {
+			const {parse: parseHtml} = require('node-html-parser');
+			const ast = parseHtml(generatedHTML);
+			ast.querySelectorAll('ul')
+				.forEach((node => node.parentNode && node.parentNode.tagName === 'li'
+					&& node.parentNode.childNodes[0].nodeType !== 3 // has hook for collapsing (not text node before)
+					&& (node.rawAttrs += `style="display: none;"`))) // collapse submenu
+			return ast.toString();
+		}
+
 		return generatedHTML;
 	},
 

package.json

@@ -29,7 +29,8 @@
   "homepage": "https://github.com/aleen42/gitbook-treeview#readme",
   "dependencies": {
     "remarkable": "^1.6.2",
-    "remove-markdown": "^0.1.0"
+    "remove-markdown": "^0.1.0",
+    "node-html-parser": "^1.2.20"
   },
   "devDependencies": {
     "chai": "^3.5.0",
@@ -51,6 +52,11 @@
         "type": "string",
         "default": "1",
         "description": "the minimum of the depth of headers"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "default": false,
+        "description": "whether collapse subheaders by default"
       }
     }
   }