dawy_go/vnote
1
0
Fork 0
mirror of https://gitee.com/vnotex/vnote.git synced 2025-07-05 13:59:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add outline template for export html (#404)

Browse Source 
Draft for outline implementation in exported html file
This commit is contained in:
akkuman 2018-09-18 19:33:14 +08:00 committed by Le Tan
parent 55b835a97c
commit 03ff391948
3 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/resources/outline.css Normal file
View File

@ -0,0 +1,56 @@
.post-content {
width: 960px;
min-height: 200px;
margin-left: auto;
margin-right: auto;
}
.toc {
overflow: hidden;
color: #555;
border: 1px solid #d2d2d2;
border-radius: 3px;
min-width: 150px;
opacity: 1;
font-size: inherit;
z-index: 19941112;
}
.toc {
display: none;
margin-bottom: 2em;
line-height: 1.5em;
}
.toc a {
color: #333;
}
.toc a:hover{
color: #555;
background-color: #fff;
}
.toc .catalog-title {
cursor: move;
padding-left: 12px;
width: 100%;
height: 35px;
line-height: 36px;
border-bottom: 1px solid #eee;
font-size: 14px;
color: #555;
overflow: hidden;
}
.toc .catalog-close {
position: absolute;
right: 15px;
top: 6px;
cursor: pointer;
text-decoration: none;
}
.fixed {
position: fixed;
top: 20px;
right: 250px;
width: auto;
}
.blodtoc {
font-weight: bold;
}

27
src/resources/outline.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
/* STYLE_GLOBAL_PLACE_HOLDER */
</style>
<style type="text/css">
/* STYLE_PLACE_HOLDER */
</style>
<!-- EXTRA_PLACE_HOLDER -->
<!-- HEAD_PLACE_HOLDER -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="toc fixed">
<div class="catalog-title"><span>目录</span></div>
<a class="catalog-close"><span>X</span></a>
</div>
<div class="post-content">
<!-- BODY_PLACE_HOLDER -->
</div>
</body>
</html>

100
src/resources/outline.js Normal file
View File

@ -0,0 +1,100 @@
/**
* Convert item of header array to html in li
* @param item An element of header array
*/
var itemToHtml = function(item) {
return '<a href="#' + item.id + '" id="' + 'menu-'+ item.id + '" >' + item.innerText + '</a>';
};
/**
* Generate tree from header array
* @param toc_list An array containing header elements
* @param p_baseLevel The base level number of the toc you want to display
*/
var tocToTree = function(toc_list, p_baseLevel) {
let i;
let p_toc = [];
for (i in toc_list) {
let itemLevel = parseInt(toc_list[i].tagName.substring(1));
if (itemLevel >= p_baseLevel) {
p_toc.push(toc_list[i]);
}
}
let front = '<li>';
let ending = ['</li>'];
let curLevel = p_baseLevel;
let toclen = p_toc.length;
for (i in p_toc) {
let item = p_toc[i];
console.log(item.tagName);
let itemLevel = parseInt(item.tagName.substring(1));
if (item.tagName == curLevel) {
front += '</li>';
front += '<li>';
front += itemToHtml(item);
} else if (itemLevel > curLevel) {
// assert(item.level - curLevel == 1)
front += '<ul>';
ending.push('</ul>');
front += '<li>';
front += itemToHtml(item);
ending.push('</li>');
curLevel = itemLevel;
} else {
while (itemLevel < curLevel) {
let ele = ending.pop();
front += ele;
if (ele == '</ul>') {
curLevel--;
}
}
front += '</li>';
front += '<li>';
front += itemToHtml(item);
}
}
while (ending.length > 0) {
front += ending.pop();
}
front = front.replace("<li></li>", "");
front = '<ul>' + front + '</ul>';
return front;
};
let headerObjList = $(":header").toArray();
$('.toc').append(tocToTree( headerObjList, 2 ));
// scroll to display side outline
$(window).bind('scroll', function(){
if ($(document).scrollTop() >= 100) {
$('.toc').css("display", "block");
highToc();
} else {
$('.toc').css("display", "none");
}
});
// make the corresponding outline text blod
let highToc = function(){
$(":header").each(function(index, element) {
var wst = $(window).scrollTop();
let tag_id = $(this).attr("id");
if($("#"+tag_id).offset().top <= wst){
$('.toc a').removeClass("blodtoc");
$('#menu-'+tag_id).addClass("blodtoc");
}
});
}
// click to make outline text blod
$('.toc a').click(function(){
$('.toc a').removeClass("blodtoc");
$(this).addClass("blodtoc");
});
// button to close the outline
$('.toc .catalog-close').click(function(){
$('.toc').hide();
$(window).unbind('scroll');
});