Merge pull request #886 from SISheogorath/fix/ToCHeader

Refactor generation of ToC
This commit is contained in:
Christoph (Sheogorath) Kern 2018-07-04 21:13:14 +02:00 committed by GitHub
commit af26992b55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 46 deletions

View file

@ -93,6 +93,10 @@
color: #777; color: #777;
} }
.toc .invisable-node {
list-style-type: none;
}
.ui-toc { .ui-toc {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;

View file

@ -28,7 +28,7 @@
Toc.prototype._collectTitleElements = function () { Toc.prototype._collectTitleElements = function () {
this._elTitlesNames = [] this._elTitlesNames = []
this.elTitleElements = [] this.elTitleElements = []
for (var i = 1; i < 7; i++) { for (var i = 1; i < 6; i++) {
if (this.el.getElementsByTagName('h' + i).length) { if (this.el.getElementsByTagName('h' + i).length) {
this._elTitlesNames.push('h' + i) this._elTitlesNames.push('h' + i)
} }
@ -44,59 +44,79 @@
} }
} }
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
}
// No need to do anything for an empty ToC
if (!titleElements.length) return
for (var i = 0; i < this._elTitleElementsLen; i++) { var content = '<ul'
var j = i + 1 if (ulClass) {
this._elTitleElement = this.elTitleElements[i] content += ' class="' + ulClass + '"'
this._elTitleElementName = this._elTitleElement.tagName }
this._elTitleElementTitle = this._elTitleElement.textContent.replace(/"/g, '&quot;') content += '>\n'
this._elTitleElementText = (typeof this.process === 'function' ? this.process(this._elTitleElement) : this._elTitleElement.innerHTML).replace(/<(?:.|\n)*?>/gm, '') var iterTag = titleNames[level]
var id = this._elTitleElement.getAttribute('id') var recurse = false
var openTag = 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
} }
if (openTag) {
this.tocContent += '<li><a href="' + id + '" title="'+ this._elTitleElementTitle +'">' + this._elTitleElementText + '</a>' content += '</li>\n'
openTag = false
if (j !== this._elTitleElementsLen) { }
this._elNextTitleElementName = this.elTitleElements[j].tagName content += '<li><a href="' + id + '" title="'+ elementTitle +'">' + elementText + '</a>'
if (this._elTitleElementName !== this._elNextTitleElementName) { // Reset recursion. We need it for the next subsections
var checkColse = false recurse = false
var y = 1 openTag = true
for (var t = this._tempLists.length - 1; t >= 0; t--) { // Check if the current element has a lower level than ours, if so, we have to go down the rabbithole!
if (this._tempLists[t].tagName === this._elNextTitleElementName) { } else if (!recurse && titleNames.indexOf(elementTag.toLowerCase()) > level) {
checkColse = true recurse = true
if (!openTag) {
content += '<li class="invisable-node">'
openTag = true
}
// This element is for the lower lever, we have to re-add it before we send the list down there.
titleElements.unshift(element)
// Let's call ourself and get to the next level
content += recursiveToc(level + 1, titleElements, titleNames, ulClass)
} else {
// When we end up here, met a higher level element
// 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>') if (openTag) {
this._tempLists.length = this._tempLists.length - y content += '</li>\n'
}
content += '</ul>\n'
// 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 () {