Support titles with trailing hashes, add UI to specify max ToC level

Author: luciopaiva

index.html

@@ -52,6 +52,55 @@
             grid-column: 1 / 2;
             grid-row: 2 / 3;
         }
+        .output-box {
+            grid-column: 2 / 3;
+            grid-row: 3 / 4;
+            display: flex;
+            flex-direction: column;
+        }
+        .output-level-bar {
+            display: flex;
+            flex-direction: row;
+            border: 1px solid #666;
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .output-level-bar > * {
+            margin-right: 4px;
+        }
+        .form-component {
+            box-shadow: inset 0 1px 3px 0 #91b8b3;
+            border: 1px solid #566963;
+            border-radius: 5px;
+            display: inline-block;
+            font-size: 15px;
+            font-weight: bold;
+            padding: 4px 20px;
+        }
+        #levels-to-show {
+            padding: 0 10px;
+            width: 30px;
+        }
+        .button {
+            background-color: #768d87;
+            cursor: pointer;
+            color: #ffffff;
+            text-decoration: none;
+            text-shadow: 0 -1px 0 #2b665e;
+        }
+        .button:hover {
+            background-color: #6c7c7c;
+        }
+        .button:active {
+            position: relative;
+            top: 1px;
+        }
+        .label {
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+        }
         #output-header {
             grid-column: 2 / 3;
             grid-row: 2 / 3;
@@ -61,8 +110,7 @@
             grid-row: 3 / 4;
         }
         #output-area {
-            grid-column: 2 / 3;
-            grid-row: 3 / 4;
+            height: 100%;
         }
         .footer {
             grid-column: 1 / 3;
@@ -111,9 +159,17 @@
 ## Barbar
 
 Praesent fringilla pulvinar pellentesque. Ut elementum ultrices tortor, ut hendrerit diam tempor vitae.
-</textarea>
-    <textarea name="output-area" class="area" id="output-area" readonly></textarea>
-    <div class="footer"><a href="//luciopaiva.com" target="_blank">Lucio Paiva</a> 2018</div>
+    </textarea>
+    <div class="output-box">
+        <div class="output-level-bar">
+            <label class="label" for="levels-to-show">How many levels to show:</label>
+            <input name="levels-to-show" type="number" min="1" max="10" id="levels-to-show" class="form-component" value="2">
+            <div class="form-component button" id="level-up">⇧</div>
+            <div class="form-component button" id="level-down">⇩</div>
+        </div>
+        <textarea name="output-area" class="area" id="output-area" readonly></textarea>
+    </div>
+    <div class="footer"><a href="//luciopaiva.com" target="_blank">Lucio Paiva</a> 2018-2019</div>
 </div>
 
 <script src="index.js"></script>

index.js

@@ -4,15 +4,35 @@ class MarkdownToc {
     constructor () {
         this.inputArea = document.getElementById("input-area");
         this.outputArea = document.getElementById("output-area");
+        this.levelUpButton = document.getElementById("level-up");
+        this.levelUpButton.addEventListener("click", this.changeLevel.bind(this, +1));
+        this.levelDownButton = document.getElementById("level-down");
+        this.levelDownButton.addEventListener("click", this.changeLevel.bind(this, -1));
+        this.levelsToShowElement = document.getElementById("levels-to-show");
+        this.levelsToShow = 2;
 
         this.inputArea.addEventListener("input", this.process.bind(this));
         this.process();
     }
 
+    changeLevel(delta) {
+        this.levelsToShow += delta;
+        if (this.levelsToShow < 1) {
+            this.levelsToShow = 1;
+        } else if (this.levelsToShow > 10) {
+            this.levelsToShow = 10;
+        } else if (typeof this.levelsToShow !== "number") {
+            this.levelsToShow = 2;
+        }
+        this.levelsToShowElement.setAttribute("value", this.levelsToShow);
+        this.process();
+    }
+
     process() {
         const input = this.inputArea.value;
         const menus = ["# Table of contents", ""];
         let isCodeBlock = false;
+        let topLevel = NaN;
 
         for (let line of input.split("\n")) {
 
@@ -25,13 +45,21 @@ class MarkdownToc {
             }
 
             if (line.startsWith("#")) {
-                const match = line.match(/(#+)\s*(.*)/);
-                const level = match[1].length - 1;
-                const title = match[2];
+                const match = line.match(/(#+)\s*(.*?)#*\s*$/);
+                const level = match[1].length;
+                if (isNaN(topLevel)) {
+                    topLevel = level;
+                }
+
+                if (level - topLevel >= this.levelsToShow) {
+                    continue;
+                }
+
+                const title = match[2].trim();
                 const link = title.toLocaleLowerCase()
                     .replace(/\s/g, "-")
                     .replace(/[^A-Za-z0-9-]/g, "");
-                const menu = `${"  ".repeat(level)}- [${title}](#${link})`;
+                const menu = `${"  ".repeat(level - topLevel)}- [${title}](#${link})`;
                 menus.push(menu);
             }
         }