Merge pull request #886 from SISheogorath/fix/ToCHeader
Refactor generation of ToC
This commit is contained in:
commit
af26992b55
2 changed files with 70 additions and 46 deletions
|
@ -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;
|
||||||
|
|
106
public/vendor/md-toc.js
vendored
106
public/vendor/md-toc.js
vendored
|
@ -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, '"')
|
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, '"')
|
||||||
|
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 () {
|
||||||
|
|
Loading…
Reference in a new issue