完成menu
This commit is contained in:
parent
19520b78ec
commit
724e83636a
|
|
@ -10,10 +10,12 @@ additional-css = [
|
|||
"theme/css/icons.css",
|
||||
"theme/css/mdui.css",
|
||||
"theme/css/highlight.min.css",
|
||||
"theme/css/page.css",
|
||||
"theme/font/icons.woff2",
|
||||
]
|
||||
additional-js = [
|
||||
"theme/js/mdui.global.js",
|
||||
"theme/js/highlight.min.js",
|
||||
"theme/js/mathjax.js",
|
||||
"theme/js/tocrender.js",
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
ol,
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.part-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: rgb(var(--mdui-color-primary));
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
|
||||
background-color: rgb(var(--mdui-color-primary))
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.preset {
|
||||
min-height: 1rem !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 1rem !important;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: rgb(var(--mdui-color-on-surface));
|
||||
}
|
||||
|
||||
.menu-link:after {
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: rgb(var(--mdui-color-primary));
|
||||
transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-link:hover:after {
|
||||
width: calc(100% - 20px);
|
||||
left: 20px;
|
||||
}
|
||||
|
|
@ -53,40 +53,7 @@
|
|||
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
|
||||
{{/if}}
|
||||
|
||||
<style>
|
||||
ol,
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.part-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: rgb(var(--mdui-color-primary));
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
|
||||
background-color: rgb(var(--mdui-color-primary))
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
|
||||
</head>
|
||||
|
||||
<body style="margin:0;padding:0;min-height:100%;width:100%">
|
||||
|
|
@ -106,10 +73,18 @@
|
|||
{{/if}}
|
||||
</mdui-top-app-bar>
|
||||
|
||||
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer">
|
||||
{{#toc}}{{/toc}}
|
||||
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer">
|
||||
</mdui-navigation-drawer>
|
||||
|
||||
<!-- Render toc -->
|
||||
<div style="display:none;" id="helperframe">
|
||||
{{#toc}}{{/toc}}
|
||||
</div>
|
||||
|
||||
<script src="{{ ../path_to_root }}theme/js/tocrender.js"></script>
|
||||
<!-- Render toc finish -->
|
||||
|
||||
|
||||
<script>
|
||||
const navigationDrawer = document.querySelector(".toc-drawer");
|
||||
const openButton = document.getElementById("open-drawer");
|
||||
|
|
@ -118,11 +93,12 @@
|
|||
</script>
|
||||
|
||||
<mdui-layout-main class="example-layout-main" style="min-height: 100%">
|
||||
<div class="mdui-prose" style="margin-left:20px;margin-right:20px;">
|
||||
<div class="mdui-prose" style="margin-left:50px;margin-right:50px;">
|
||||
{{{ content }}}
|
||||
</div>
|
||||
|
||||
<mdui-dialog headline="Study Env" close-on-esc id="study-env-dialog">
|
||||
<!--
|
||||
<mdui-dialog headline="Study Env (press esc to close)" close-on-esc id="study-env-dialog">
|
||||
<iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
|
||||
</mdui-dialog>
|
||||
|
||||
|
|
@ -131,7 +107,7 @@
|
|||
document.getElementById("study-env-dialog").open = true
|
||||
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
|
||||
});
|
||||
</script>
|
||||
</script>-->
|
||||
|
||||
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
|
||||
{{#previous}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
var toc_obj = document.getElementById("helperframe").getElementsByTagName("ol")[0]
|
||||
function createTree(elements) {
|
||||
let result = [];
|
||||
last = 0
|
||||
elements.childNodes.forEach(element => {
|
||||
if (element.childNodes.length > 0 && (!element.classList.contains("part-title"))) {
|
||||
let a = element.childNodes[0]
|
||||
let link = a.tagName === 'A' ? a.href : ''
|
||||
if (link == '') {
|
||||
if (a.tagName === 'DIV') {
|
||||
result.push({
|
||||
link: "#",
|
||||
text: a.textContent,
|
||||
child: [],
|
||||
avtive: false
|
||||
})
|
||||
} else {
|
||||
result[result.length - 1].child = createTree(element.getElementsByTagName("ol")[0])
|
||||
}
|
||||
} else {
|
||||
result.push({
|
||||
link: link,
|
||||
text: a.innerText,
|
||||
child: [],
|
||||
active: element.childNodes[0].classList.contains("active")
|
||||
})
|
||||
}
|
||||
} else if (element.classList.contains("part-title")) {
|
||||
result.push({
|
||||
link: "",
|
||||
text: `<h3 style="margin-top: 0px;margin-bottom:0;margin-left:0rem;"><strong>` + element.textContent + "</strong></h3>",
|
||||
child: [],
|
||||
active: false
|
||||
})
|
||||
}
|
||||
});
|
||||
return result
|
||||
}
|
||||
function loadTreeItem(treeitem, v) {
|
||||
var active_str = treeitem.active ? "active" : ""
|
||||
|
||||
if (treeitem.child.length > 0) {
|
||||
var i_str = `<mdui-collapse-item value=item"` + v.toString() + `">
|
||||
<mdui-list-item rounded slot="header" `+ active_str + `><a href="` + treeitem.link + `" class="menu-link">` + treeitem.text + `</a><mdui-icon slot="end-icon" name="keyboard_arrow_down"></mdui-icon></mdui-list-item>
|
||||
<div style="margin-left: 1rem">
|
||||
<mdui-list-item rounded>
|
||||
<mdui-collapse>`
|
||||
var i = 0
|
||||
treeitem.child.forEach(element => {
|
||||
i_str = i_str + loadTreeItem(element, i)
|
||||
i++
|
||||
})
|
||||
i_str = i_str + `</mdui-collapse>
|
||||
</mdui-list-item>
|
||||
</div>
|
||||
</mdui-collapse-item>`
|
||||
return i_str
|
||||
} else {
|
||||
disabled = treeitem.link === '#' ? "disabled" : ""
|
||||
return `<mdui-collapse-item><mdui-list-item rounded ` + active_str + ` slot="header" ` + disabled + ` href="` + treeitem.link + `">` + treeitem.text + `</mdui-list-item></mdui-collapse-item>`
|
||||
}
|
||||
}
|
||||
var get_tree = createTree(toc_obj)
|
||||
var n_str = `<mdui-list><mdui-collapse>`
|
||||
var i = 0
|
||||
get_tree.forEach(element => {
|
||||
n_str = n_str + loadTreeItem(element, i)
|
||||
i++
|
||||
})
|
||||
n_str = n_str + `</mdui-collapse></mdui-list>`
|
||||
|
||||
document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', n_str);
|
||||
|
||||
getElementById("helperframe").remove()
|
||||
Reference in New Issue