Refactor generation of ToC

This replaces the existing iterative implementation of the ToC
generation with an recursive one.

This also solves the problem of skipped headers which causes wrong
leveling of them.

Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>

public/vendor/md-toc.js

@@ -44,59 +44,69 @@
     }
   }
 
-  Toc.prototype._createTocContent = function () {
+  Toc.prototype._createTocContent = function recursiveToc(level = 0, titleElements = [], titleNames = [], ulClass = undefined) {
-    this._elTitleElementsLen = this.elTitleElements.length
+    // Inititalize our elements from the toc object
-    if (!this._elTitleElementsLen) return
+    // which is only available on level 0
-    this.tocContent = ''
+    if (level === 0) {
-    this._tempLists = []
+      titleElements = this.elTitleElements
+      titleNames = this._elTitlesNames
+      ulClass = this.ulClass
+    }
+    var titleElementsLen = titleElements.length
+    // No need to do anything for an empty ToC
+    if (!titleElementsLen) return
 
-    for (var i = 0; i < this._elTitleElementsLen; i++) {
+    this.tocContent = ''
-      var j = i + 1
+    var content = '<ul'
-      this._elTitleElement = this.elTitleElements[i]
+    if (ulClass) {
-      this._elTitleElementName = this._elTitleElement.tagName
+      content += ' class="' + ulClass + '"'
-      this._elTitleElementTitle = this._elTitleElement.textContent.replace(/"/g, '&quot;')
+    }
-      this._elTitleElementText = (typeof this.process === 'function' ? this.process(this._elTitleElement) : this._elTitleElement.innerHTML).replace(/<(?:.|\n)*?>/gm, '')
+    content += '>'
-      var id = this._elTitleElement.getAttribute('id')
+    var iterTag = titleNames[level]
+    var recurse = false
+
+    for (var element; element = titleElements.shift();) {
+      var elementTag = element.tagName.toLowerCase()
+
+      // We only care about tags on our level to add them as list item
+      if (elementTag == iterTag) {
+        // Let's do some cleaning
+        var elementTitle = element.textContent.replace(/"/g, '&quot;')
+        var elementText = (typeof this.process === 'function' ? this.process(element) : element.innerHTML).replace(/<(?:.|\n)*?>/gm, '')
+        var id = element.getAttribute('id')
         if (!id) {
-        this._elTitleElement.setAttribute('id', 'tip' + i)
+          element.setAttribute('id', 'tip' + i)
           id = '#tip' + i
         } else {
           id = '#' + id
         }
+        content += '<li><a href="' + id + '" title="'+ elementTitle +'">' + elementText + '</a>'
+        // Reset recursion. We need it for the next subsections
+        recurse = false
 
-      this.tocContent += '<li><a href="' + id + '" title="'+ this._elTitleElementTitle +'">' + this._elTitleElementText + '</a>'
+      // Check if the current element has a lower level than ours, if so, we have to go down the rabbithole!
-
+      } else if (!recurse && titleNames.indexOf(elementTag.toLowerCase()) > level) {
-      if (j !== this._elTitleElementsLen) {
+        recurse = true
-        this._elNextTitleElementName = this.elTitleElements[j].tagName
+        // This element is for the lower lever, we have to re-add it before we send the list down there.
-        if (this._elTitleElementName !== this._elNextTitleElementName) {
+        titleElements.unshift(element)
-          var checkColse = false
+        // Let's call ourself and get to the next level
-          var y = 1
+        content += recursiveToc(level + 1, titleElements, titleNames, ulClass)
-          for (var t = this._tempLists.length - 1; t >= 0; t--) {
+      } else {
-            if (this._tempLists[t].tagName === this._elNextTitleElementName) {
+        // When we end up here, met a higher level element
-              checkColse = true
+        // This is not our business so back into the list with the element and let's end this loop
+        titleElements.unshift(element)
         break
       }
-            y++
     }
-          if (checkColse) {
+
-            this.tocContent += new Array(y + 1).join('</li></ul>')
+    content += '</ul>'
-            this._tempLists.length = this._tempLists.length - y
+
+    // Set ToC content of the level 0 everything else pass things to the upper level!
+    if (level === 0) {
+      this.tocContent = content
     } else {
-            this._tempLists.push(this._elTitleElement)
+      return content
-            if (this.ulClass) { this.tocContent += '<ul class="' + this.ulClass + '">' } else { this.tocContent += '<ul>' }
     }
-        } else {
-          this.tocContent += '</li>'
-        }
-      } else {
-        if (this._tempLists.length) {
-          this.tocContent += new Array(this._tempLists.length + 1).join('</li></ul>')
-        } else {
-          this.tocContent += '</li>'
-        }
-      }
-    }
-    if (this.ulClass) { this.tocContent = '<ul class="' + this.ulClass + '">' + this.tocContent + '</ul>' } else { this.tocContent = '<ul>' + this.tocContent + '</ul>' }
   }
 
   Toc.prototype._showToc = function () {