实现“无刷新” #16

Merged
cxykevin merged 13 commits from :main into main 2024-08-11 21:10:43 +08:00
4 changed files with 95 additions and 19 deletions

View File

@ -0,0 +1 @@
# 磁盘分区以及文件系统

View File

@ -32,10 +32,10 @@
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷!学园, netman, linux, mdbook, rockylinux">
{{#if favicon_svg}}
<link rel="icon" href="{{ path_to_root }}favicon.png">
<link rel="icon" href="favicon.png">
{{/if}}
{{#if favicon_png}}
<link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
<link rel="shortcut icon" href="favicon.png">
{{/if}}
{{#if print_enable}}
@ -69,10 +69,14 @@
<mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
{{#previous}}
<mdui-button id="previous—page" class="hideonmobile" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
<mdui-button id="previous—page" class="hideonmobile" href="javascript:void(0);"
onclick="prevPage()">上一章</mdui-button>
<a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_prevpage" class="helper"></a>
{{/previous}}
{{#next}}
<mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button>
<mdui-button id="next—page" class="next—page" href="javascript:void(0);"
onclick="nextPage()">下一章</mdui-button>
<a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_nextpage" class="next—pagehelper"></a>
{{/next}}
{{#if git_repository_url}}
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
@ -91,7 +95,7 @@
{{#unless is_print }}
<!-- Render toc -->
<div style="display:none;" id="helperframe">
<div style="display:none;" id="helperframe" class="helperframe">
{{#toc}}{{/toc}}
</div>
@ -100,6 +104,7 @@
{{/unless}}
{{#unless is_print }}
<script>
const navigationDrawer = document.querySelector(".toc-drawer");
@ -129,7 +134,7 @@
<div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<mdui-card clickable style="width:49%;height: 100%" href="javascript:void(0);" onclick="nextPage()">
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-left: 4px;">
<mdui-icon name="navigate_before" style="font-size:1.5em;"></mdui-icon> 上一章
</div>
@ -143,7 +148,7 @@
<div style="flex-grow:1"></div>
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<mdui-card clickable style="width:49%;height: 100%" href="javascript:void(0);" onclick="nextPage()">
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-right: 4px;">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next"
style="font-size:1.5em"></mdui-icon>

View File

@ -1,3 +1,70 @@
if (window.innerWidth > 640) {
document.getElementById("toc-drawer").setAttribute('open', true)
document.getElementById("toc-drawer").setAttribute('open', true);
}
function prevPage() {
var link = document.getElementById("helper_prevpage").href;
console.log("prev page:", link);
changePage(link);
}
function nextPage() {
var link = document.getElementById("helper_nextpage").href;
console.log("next page:", link);
changePage(link);
}
function setPage(url) {
if (url === "") {
return;
}
console.log("set page:", url);
changePage(url);
}
function changePage(url) {
var nextbtn = document.getElementsByClassName("next—page")[0]
if (nextbtn != undefined) {
nextbtn.setAttribute("loading", "");
}
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
var old_tag = document.getElementsByClassName("mdui-prose")[0];
var old_topbar_tag = document.getElementsByClassName("topbar")[0];
var virtualtag = document.createElement('div');
virtualtag.insertAdjacentHTML('beforeend', xhr.responseText);
var title = virtualtag.getElementsByTagName("title")[0].innerText;
old_tag.innerHTML = virtualtag.getElementsByClassName("mdui-prose")[0].innerHTML;
old_topbar_tag.innerHTML = virtualtag.getElementsByClassName("topbar")[0].innerHTML;
var elements = document.querySelectorAll('[active]');
elements.forEach(element => {
element.removeAttribute('active');
});
var elementshighliht = document.querySelectorAll('[search_link="' + url + '"]');
elementshighliht.forEach(element => {
element.setAttribute('active', "true");
});
virtualtag.remove();
history.pushState({ page: title }, title, url);
}
};
xhr.open('GET', url, true);
xhr.send(null);
}
window.addEventListener('popstate', function (event) {
console.log('pop state:', window.location.protocol + "//" + window.location.host + location.pathname);
changePage(window.location.protocol + "//" + window.location.host + location.pathname);
});

View File

@ -42,7 +42,7 @@ function loadTreeItem(treeitem, v) {
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>
<mdui-list-item rounded slot="header" search_link="` + treeitem.link + `" ` + active_str + `><a href="javascript:void(0);" onclick="setPage('` + 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>`
@ -58,19 +58,22 @@ function loadTreeItem(treeitem, v) {
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>`
return `<mdui-collapse-item><mdui-list-item rounded search_link="` + treeitem.link + `" ` + active_str + ` slot="header" ` + disabled + ` href="javascript:void(0);" onclick="setPage('` + 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>`
function getResult(obj) {
var get_tree = createTree(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>`
return n_str
}
document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', n_str);
document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', getResult(toc_obj));
document.getElementById("helperframe").remove()