56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
|
(function(document) {
|
||
|
|
|
||
|
|
function updateOutline() {
|
||
|
|
var arrAllHeader = document.querySelectorAll("#markdown-container h1,#markdown-container h2,#markdown-container h3,#markdown-container h4,#markdown-container h5,#markdown-container h6");
|
||
|
|
var arrOutline = ['<ul>'];
|
||
|
|
var header, headerText;
|
||
|
|
var id = 0;
|
||
|
|
var level = 0,
|
||
|
|
lastLevel = 1;
|
||
|
|
var levelCount = 0;
|
||
|
|
for (var i = 0, c = arrAllHeader.length; i < c; i++) {
|
||
|
|
header = arrAllHeader[i];
|
||
|
|
headerText = header.innerText;
|
||
|
|
|
||
|
|
header.setAttribute('id', id);
|
||
|
|
|
||
|
|
level = header.tagName.match(/^h(\d)$/i)[1];
|
||
|
|
levelCount = level - lastLevel;
|
||
|
|
|
||
|
|
if (levelCount > 0) {
|
||
|
|
for (var j = 0; j < levelCount; j++) {
|
||
|
|
arrOutline.push('<ul>');
|
||
|
|
}
|
||
|
|
} else if (levelCount < 0) {
|
||
|
|
levelCount *= -1;
|
||
|
|
for (var j = 0; j < levelCount; j++) {
|
||
|
|
arrOutline.push('</ul>');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
arrOutline.push('<li>');
|
||
|
|
arrOutline.push('<a href="#' + id + '">' + headerText + '</a>');
|
||
|
|
arrOutline.push('</li>');
|
||
|
|
lastLevel = level;
|
||
|
|
id++;
|
||
|
|
}
|
||
|
|
arrOutline.push('</ul>')
|
||
|
|
var outline = document.getElementById('markdown-outline');
|
||
|
|
if(arrOutline.length > 2){
|
||
|
|
outline.innerHTML = arrOutline.join('');
|
||
|
|
showOutline();
|
||
|
|
}
|
||
|
|
else outline.style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
function showOutline() {
|
||
|
|
var outline = document.getElementById('markdown-outline');
|
||
|
|
var markdownContainer = document.getElementById('markdown-container');
|
||
|
|
// outline.style.left = markdownContainer.offsetLeft + markdownContainer.offsetWidth + 10 + 'px';
|
||
|
|
outline.style.maxHeight = document.body.clientHeight - 30;
|
||
|
|
outline.style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
updateOutline();
|
||
|
|
|
||
|
|
}(document));
|