Skip to content

Commit

Permalink
support toc
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamlok
tamlok committed Nov 11, 2018
1 parent b8dcdd7 commit 0cb90b1
Show file tree
Hide file tree
Showing 7 changed files with 501 additions and 15 deletions.
114 changes: 109 additions & 5 deletions css/viki.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
body {
font-family: "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "Hiragino Sans GB", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体";
color: #222222;
background: #F5F5F5;
}

a {
word-break: break-all;
}

.viki-img-package {
text-align: center;
}
Expand Down Expand Up @@ -35,8 +45,8 @@ span.viki-img-caption {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(68, 68, 68);
background-color: rgba(68, 68, 68, 0.95);
background-color: rgb(234, 234, 234);
background-color: rgba(234, 234, 234, 0.95);
z-index: 2000;
}

Expand Down Expand Up @@ -69,27 +79,61 @@ span.viki-img-caption {
/* The Close Button */
span.viki-modal-close {
position: absolute;
z-index: 1000;
z-index: 2002;
top: 15px;
right: 35px;
color: #DADADA;
color: #666666;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

span.viki-modal-close:hover,
span.viki-modal-close:focus {
color: #EEEEEE;
color: #222222;
text-decoration: none;
cursor: pointer;
}
/* View Image */

pre {
display: block;
overflow-y: hidden;
overflow-x: auto;
}

code {
font-family: Consolas, Monaco, Monospace, Courier;
color: #8E24AA;
word-break: break-all;
}

pre code {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #222222;
background-color: #E0E0E0;
border-left: .5em solid #00897B;
font-family: Consolas, Monaco, Monospace, Courier;
white-space: pre;
}

pre code.viki-markdown-metadata {
border-left: .5rem solid #80CBC4;
}

blockquote {
color: #666;
border-left: .5em solid #7a7a7a;
padding: 0 1em;
margin-left: 0;
}

blockquote p {
color: #666;
}

div.viki-mermaid-diagram {
margin: 16px 0px 16px 0px;
overflow-y: hidden;
Expand All @@ -109,6 +153,43 @@ div.viki-plantuml-diagram {
overflow: hidden;
}

table {
padding: 0;
border-collapse: collapse;
}

table tr {
border-top: 2px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

table tr th {
font-weight: bold;
border: 2px solid #cccccc;
margin: 0;
padding: 6px 13px;
}

table tr td {
border: 2px solid #cccccc;
margin: 0;
padding: 6px 13px;
}

table tr th :first-child, table tr td :first-child {
margin-top: 0;
}

table tr th :last-child, table tr td :last-child {
margin-bottom: 0;
}

/* For Highlight.js Line Number */
table.hljs-ln tr {
border: none;
Expand Down Expand Up @@ -158,3 +239,26 @@ x-eqs > span {
text-align:right;
}
/* Mathjax */

.bd-toc {
position: -webkit-sticky;
position: sticky;
top: 4rem;
height: calc(100vh - 4rem);
overflow-y: auto;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
font-size: .875rem;
}

.bd-toc > ul {
border-left: 1px solid #ddd;
}

.bd-toc ul {
list-style-type: none;
}

.bd-toc a {
color: #808080;
}
84 changes: 74 additions & 10 deletions js/contentworker.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import logger from "./logger.js";
import Worker from "./worker.js";
import MarkdownRenderer from "./markdownrenderer.js";
import TocRenderer from "./tocrenderer.js";

// Render data from this.viki.info.data.
// - Navigation Panel for notebook's note;
Expand All @@ -19,29 +20,92 @@ class ContentWorker extends Worker {
run() {
this.renderSkelecton();

if (this.isMarkdown(this.viki.info.target)) {
let mder = new MarkdownRenderer($('#' + this.viki.info.contentContainerId));
mder.render(this.viki.config.markdown, this.viki.info.data);
let info = this.viki.info;
if (this.isMarkdown(info.target)) {
let mder = new MarkdownRenderer($('#' + info.contentContainerId));
mder.render(this.viki.config.markdown, info.data);
}

if (info.toc) {
let tocer = new TocRenderer($('#' + info.tocContainerId));
tocer.render($('#' + info.contentContainerId));
}

this.viki.scheduleNext();
}

// Render the container to hold contents.
renderSkelecton() {
this.viki.info.contentContainerId = 'viki-content';
this.viki.info.tocContainerId = 'viki-toc';
let info = this.viki.info;
info.contentContainerId = 'viki-content';
if (info.toc) {
info.tocContainerId = 'viki-toc';
}

if (info.navi) {
info.naviContainerId = 'viki-navi';
}

let mainDiv = $(`<div class="container-fluid" style="padding-top: 3rem;"></div>`);
let containerDiv = $(`<div id="viki-content-container" class="row flex-xl-nowrap"></div>`);

let containerDivClass = 'row flex-xl-nowrap';
if (!info.navi) {
containerDivClass += ' justify-content-md-center';
}

let containerDiv = $(`<div id="viki-content-container" class="${containerDivClass}"></div>`);
mainDiv.append(containerDiv);

let contentDiv = $(`<main id="${this.viki.info.contentContainerId}" class="col-12 col-lg-9 py-md-3 pl-md-5 bd-content" role="main"></main>`);
let naviDivClass = null;
let contentDivClass = null;
let tocDivClass = null;

if (info.toc) {
if (info.navi) {
// Three panels.
// TODO.
} else {
// Two panels.
contentDivClass = "col-12 col-md-9 col-lg-8 col-xl-8 py-md-3 pl-md-5 bd-content";
tocDivClass = "d-none d-md-block col-md-3 col-lg-3 col-xl-2 bd-toc";
}
} else {
if (info.navi) {
// Two panels.
// TODO.
} else {
// Single panels.
contentDivClass = "col-12 col-md-9 py-md-3 pl-md-5 bd-content";
}
}

let naviDiv = null;
let contentDiv = null;
let tocDiv = null;

let tocDiv = $(`<div id="${this.viki.info.tocContainerId}" class="d-none d-lg-block col-lg-3 bd-toc"></div>`);
if (naviDivClass) {

containerDiv.append(contentDiv);
containerDiv.append(tocDiv);
}

if (contentDivClass) {
contentDiv = $(`<main id="${info.contentContainerId}" class="${contentDivClass}" role="main"></main>`);
}

if (tocDivClass) {
tocDiv = $(`<div id="${info.tocContainerId}" class="${tocDivClass}"></div>`);
}

if (naviDiv) {
containerDiv.append(naviDiv);
}

if (contentDiv) {
containerDiv.append(contentDiv);
}

if (tocDiv) {
containerDiv.append(tocDiv);
}

$('body').append(mainDiv);
}
Expand Down
14 changes: 14 additions & 0 deletions js/markdownit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,8 @@ class MarkdownIt {

this.renderPlantUML(p_containerNode, this.config.langPrefix + 'puml');

this.makeImageFluid(p_containerNode);

this.addClassToCodeBlock(p_containerNode);

if (this.config.codeBlockLineNumber) {
Expand Down Expand Up @@ -554,6 +556,18 @@ class MarkdownIt {
console.log("err", err);
}
}

makeImageFluid(p_node) {
let imgs = p_node.find('img');
for (let i = 0; i < imgs.length; ++i) {
let img = imgs[i];
if (img.id === 'image-view') {
continue;
}

img.classList.add('img-fluid');
}
}
}

export default MarkdownIt;
11 changes: 11 additions & 0 deletions js/naviworker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ class NaviItem {
constructor() {
this.text = "";
this.target = "";
this.toc = true;

// Only 2 levels.
this.children = [];
Expand All @@ -14,6 +15,10 @@ class NaviItem {
this.text = p_jobj.text;
this.target = p_jobj.target;

if (p_jobj.toc != null) {
this.toc = p_jobj.toc;
}

if (!this.target) {
if (!p_jobj.children || p_jobj.children.length == 0) {
return false;
Expand All @@ -27,6 +32,10 @@ class NaviItem {
return false;
}

if (p_jobj.children[i].toc != null) {
child.toc = p_jobj.children[i].toc;
}

this.children.push(child);
}
}
Expand Down Expand Up @@ -148,6 +157,8 @@ class NaviWorker extends Worker {
var it = items[i].matchTarget(this.viki.info.target);
if (it) {
activeItem = it;

this.viki.info.toc = it.toc;
}
}

Expand Down
Loading

0 comments on commit 0cb90b1

Please sign in to comment.