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>
This commit is contained in:
Sheogorath 2018-07-04 02:22:48 +02:00
parent 4e38d1836e
commit 4fe0620853
No known key found for this signature in database
GPG key ID: 1F05CC3635CDDFFD

View file

@ -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) { if (!id) {
this._elTitleElement.setAttribute('id', 'tip' + i) element.setAttribute('id', 'tip' + i)
id = '#tip' + i id = '#tip' + i
} else { } else {
id = '#' + id 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 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 { } 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 () { Toc.prototype._showToc = function () {