mirror of https://github.com/status-im/codimd.git
ToC: Some HTML improvements and style fixes
The ToC generated broken HTML with unclosed `<li>` tags. This got fixed as well as some minor optimisation and adding list elements for the subentries so the elements appear in the ToC while scrolling. Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
This commit is contained in:
parent
cf934a4e51
commit
df05bff82a
|
@ -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;
|
||||||
|
|
|
@ -52,18 +52,17 @@
|
||||||
titleNames = this._elTitlesNames
|
titleNames = this._elTitlesNames
|
||||||
ulClass = this.ulClass
|
ulClass = this.ulClass
|
||||||
}
|
}
|
||||||
var titleElementsLen = titleElements.length
|
|
||||||
// No need to do anything for an empty ToC
|
// No need to do anything for an empty ToC
|
||||||
if (!titleElementsLen) return
|
if (!titleElements.length) return
|
||||||
|
|
||||||
this.tocContent = ''
|
|
||||||
var content = '<ul'
|
var content = '<ul'
|
||||||
if (ulClass) {
|
if (ulClass) {
|
||||||
content += ' class="' + ulClass + '"'
|
content += ' class="' + ulClass + '"'
|
||||||
}
|
}
|
||||||
content += '>'
|
content += '>\n'
|
||||||
var iterTag = titleNames[level]
|
var iterTag = titleNames[level]
|
||||||
var recurse = false
|
var recurse = false
|
||||||
|
var openTag = false
|
||||||
|
|
||||||
for (var element; element = titleElements.shift();) {
|
for (var element; element = titleElements.shift();) {
|
||||||
var elementTag = element.tagName.toLowerCase()
|
var elementTag = element.tagName.toLowerCase()
|
||||||
|
@ -80,13 +79,21 @@
|
||||||
} else {
|
} else {
|
||||||
id = '#' + id
|
id = '#' + id
|
||||||
}
|
}
|
||||||
|
if (openTag) {
|
||||||
|
content += '</li>\n'
|
||||||
|
openTag = false
|
||||||
|
}
|
||||||
content += '<li><a href="' + id + '" title="'+ elementTitle +'">' + elementText + '</a>'
|
content += '<li><a href="' + id + '" title="'+ elementTitle +'">' + elementText + '</a>'
|
||||||
// Reset recursion. We need it for the next subsections
|
// Reset recursion. We need it for the next subsections
|
||||||
recurse = false
|
recurse = false
|
||||||
|
openTag = true
|
||||||
// Check if the current element has a lower level than ours, if so, we have to go down the rabbithole!
|
// 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) {
|
} else if (!recurse && titleNames.indexOf(elementTag.toLowerCase()) > level) {
|
||||||
recurse = 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.
|
// This element is for the lower lever, we have to re-add it before we send the list down there.
|
||||||
titleElements.unshift(element)
|
titleElements.unshift(element)
|
||||||
// Let's call ourself and get to the next level
|
// Let's call ourself and get to the next level
|
||||||
|
@ -99,7 +106,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
content += '</ul>'
|
if (openTag) {
|
||||||
|
content += '</li>\n'
|
||||||
|
}
|
||||||
|
content += '</ul>\n'
|
||||||
|
|
||||||
// Set ToC content of the level 0 everything else pass things to the upper level!
|
// Set ToC content of the level 0 everything else pass things to the upper level!
|
||||||
if (level === 0) {
|
if (level === 0) {
|
||||||
|
|
Loading…
Reference in New Issue