support navigation of notebook

2324731962 · Nov 15, 2018 · 797992e · 797992e
1 parent 0a9ec6a
commit 797992e
Show file tree

Hide file tree

Showing 12 changed files with 526 additions and 75 deletions.
diff --git a/css/file.svg b/css/file.svg
diff --git a/css/folder.svg b/css/folder.svg
diff --git a/css/viki.css b/css/viki.css
@@ -284,12 +284,30 @@ x-eqs > span {
 }
 
 /* Tricks for sticky header. */
-.viki-content > h1[id]::before, .viki-content > h2[id]::before, .viki-content > h3[id]::before, .viki-content > h4[id]::before, .viki-content > h5[id]::before, .viki-content > h6[id]::before {
-    display: block;
-    height: 6rem;
-    margin-top: -6rem;
-    visibility: hidden;
-    content: "";
+@media (min-width: 768px) {
+    .viki-content > h1[id]::before, .viki-content > h2[id]::before, .viki-content > h3[id]::before, .viki-content > h4[id]::before, .viki-content > h5[id]::before, .viki-content > h6[id]::before {
+        display: block;
+        height: 6rem;
+        margin-top: -6rem;
+        visibility: hidden;
+        content: "";
+    }
+}
+
+.viki-content > h1[id], .viki-content > h2[id], .viki-content > h3[id], .viki-content > h4[id], .viki-content > h5[id], .viki-content > h6[id] {
+    pointer-events: none;
+}
+
+.viki-content > h1[id] > a, .viki-content > h2[id] > a, .viki-content > h3[id] > a, .viki-content > h4[id] > a, .viki-content > h5[id] > a, .viki-content > h6[id] > a {
+    pointer-events: auto;
+}
+
+.viki-content > h1[id] > div, .viki-content > h2[id] > div, .viki-content > h3[id] > div, .viki-content > h4[id] > div, .viki-content > h5[id] > div, .viki-content > h6[id] > div {
+    pointer-events: auto;
+}
+
+.viki-content {
+    margin-top: 1rem;
 }
 
 .viki-sidebar {
@@ -313,3 +331,49 @@ x-eqs > span {
         flex: 0 1 320px;
     }
 }
+
+.viki-search {
+    position: relative;
+    padding: 1rem 15px;
+    margin-right: -15px;
+    margin-left: -15px;
+    border-bottom: 1px solid rgba(0,0,0,.05);
+}
+
+.algolia-autocomplete {
+    display: block!important;
+    -ms-flex: 1;
+    flex: 1;
+}
+
+.viki-search-docs-toggle {
+    line-height: 1;
+    color: #212529;
+}
+
+.viki-links {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+@media (min-width: 768px) {
+    .viki-links {
+        max-height: calc(100vh - 9rem);
+        overflow-y: auto;
+        display: block!important;
+    }
+}
+
+.viki-jstree-folder-icon {
+    background-image: url('folder.svg') !important;
+    background-size: cover !important;
+    opacity: 0.6;
+}
+
+.viki-jstree-file-icon {
+    background-image: url('file.svg') !important;
+    background-size: cover !important;
+    opacity: 0.6;
+}
diff --git a/js/contentworker.js b/js/contentworker.js
@@ -4,6 +4,7 @@ import MarkdownRenderer from "./markdownrenderer.js";
 import TocRenderer from "./tocrenderer.js";
 import LinkRewriter from "./linkrewriter.js";
 import NavigationRenderer from "./navigationrenderer.js";
+import Utils from "./utils.js";
 
 // Render data from this.viki.info.data.
 // - Navigation Panel for notebook's note;
@@ -22,36 +23,20 @@ class ContentWorker extends Worker {
     run() {
         this.renderSkelecton();
 
-        let linkRewriter = new LinkRewriter();
+        this.renderContentAndToc();
 
         let info = this.viki.info;
-        if (this.isMarkdown(info.target)) {
-            let container = $('#' + info.contentContainerId);
-            let mder = new MarkdownRenderer(container);
-            mder.render(this.viki.config.markdown, info.data);
-            linkRewriter.rewriteLinks(container, info.target, info.baseUrl);
-        }
-
-        if (info.toc) {
-            let container = $('#' + info.tocContainerId);
-            let tocer = new TocRenderer(container);
-            tocer.render($('#' + info.contentContainerId));
-            linkRewriter.rewriteLinks(container, info.target, info.baseUrl);
-        }
-
-        // Scroll to anchor.
-        if (info.anchor) {
-            let header = $('#' + info.contentContainerId + ' #' + info.anchor);
-            if (header.length > 0) {
-                header[0].scrollIntoView();
-            }
-        }
-
         // Render the navigation tree.
-        if (info.naviFile) {
+        if (info.naviContainerId) {
             let container = $('#' + info.naviContainerId);
-            let navier = new NavigationRenderer(container);
-            navier.render(info.naviFile, info.target);
+            let navier = new NavigationRenderer(container, this);
+
+            if (info.naviIndex && info.naviFile === info.target) {
+                navier.render(info.naviFile, info.naviIndex, true);
+            } else {
+                // Otherwise, no need to let navier load target.
+                navier.render(info.naviFile, info.target, false);
+            }
         }
 
         this.viki.scheduleNext();
@@ -139,6 +124,51 @@ class ContentWorker extends Worker {
     isMarkdown(p_name) {
         return p_name.endsWith('.md');
     }
+
+    renderFileInternal(p_file) {
+        // Fetch p_file.
+        $.get(p_file, (p_data) => {
+            // Update the info.
+            let info = this.viki.info;
+            info.setTarget(p_file);
+            info.data = p_data;
+
+            let utils = new Utils();
+            utils.updateHashSilently('#!' + p_file);
+
+            this.renderContentAndToc();
+        });
+    }
+
+    renderContentAndToc() {
+        let info = this.viki.info;
+        let linkRewriter = new LinkRewriter();
+        if (info.contentContainerId) {
+            if (this.isMarkdown(info.target)) {
+                let container = $('#' + info.contentContainerId);
+                let mder = new MarkdownRenderer(container);
+                mder.render(this.viki.config.markdown, info.data);
+                linkRewriter.rewriteLinks(container, info.target, info.baseUrl);
+            }
+        }
+
+        if (info.tocContainerId) {
+            let container = $('#' + info.tocContainerId);
+            let tocer = new TocRenderer(container);
+            tocer.render($('#' + info.contentContainerId));
+            linkRewriter.rewriteLinks(container, info.target, info.baseUrl);
+        }
+
+        $(window).scrollTop(0);
+
+        // Scroll to anchor.
+        if (info.anchor) {
+            let header = $('#' + info.contentContainerId + ' #' + info.anchor);
+            if (header.length > 0) {
+                header[0].scrollIntoView();
+            }
+        }
+    }
 }
 
 export default ContentWorker;