实现“无刷新” #16
|
@ -0,0 +1 @@
|
|||
# 磁盘分区以及文件系统
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
Reference in New Issue