study-area-cn
/
study-area-cn.old
Archived
2
1
Fork 3
Code Issues Pull Requests Actions Projects Releases Wiki Activity

修复手机端自动展开菜单的问题 #15

Merged
cxykevin merged 10 commits from :main into main 2024-08-11 15:02:17 +08:00
Conversation 0 Commits 10 Files Changed 3 +160 -39
4 changed files with 160 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 724e83636a - Show all commits

2
book.toml
View File

@ -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",
]

68
theme/css/page.css Normal file
View File

@ -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;
}

54
theme/index.hbs
View File

@ -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}}

75
theme/js/tocrender.js Normal file
View File

@ -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()