From 03ff3919480c3d4e3bdf0f37245d09f8e8e6bcc2 Mon Sep 17 00:00:00 2001
From: akkuman <1075768094@qq.com>
Date: Tue, 18 Sep 2018 19:33:14 +0800
Subject: [PATCH] Add outline template for export html (#404)
Draft for outline implementation in exported html file
---
src/resources/outline.css | 56 +++++++++++++++++++++
src/resources/outline.html | 27 ++++++++++
src/resources/outline.js | 100 +++++++++++++++++++++++++++++++++++++
3 files changed, 183 insertions(+)
create mode 100644 src/resources/outline.css
create mode 100644 src/resources/outline.html
create mode 100644 src/resources/outline.js
diff --git a/src/resources/outline.css b/src/resources/outline.css
new file mode 100644
index 00000000..cf758e8b
--- /dev/null
+++ b/src/resources/outline.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/resources/outline.html b/src/resources/outline.html
new file mode 100644
index 00000000..2f664381
--- /dev/null
+++ b/src/resources/outline.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/resources/outline.js b/src/resources/outline.js
new file mode 100644
index 00000000..3e4eb40c
--- /dev/null
+++ b/src/resources/outline.js
@@ -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 '';
+ };
+ /**
+ * 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 = '';
+ let ending = [''];
+ 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 += '';
+ front += '';
+ front += itemToHtml(item);
+ } else if (itemLevel > curLevel) {
+ // assert(item.level - curLevel == 1)
+ front += '');
+ front += '';
+ front += itemToHtml(item);
+ ending.push('');
+ curLevel = itemLevel;
+ } else {
+ while (itemLevel < curLevel) {
+ let ele = ending.pop();
+ front += ele;
+ if (ele == '') {
+ curLevel--;
+ }
+ }
+ front += '';
+ front += '';
+ front += itemToHtml(item);
+ }
+ }
+ while (ending.length > 0) {
+ front += ending.pop();
+ }
+ front = front.replace("", "");
+ front = '';
+ 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');
+ });
\ No newline at end of file