实现“无刷新” (#16)

Reviewed-on: study-area-cn/study-area-cn#16

src/learn_linux_basic/file_and_path/diskpart_and_filesystem.md

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

theme/index.hbs

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

theme/js/page.js

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

theme/js/tocrender.js

@@ -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,10 +58,11 @@ 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)
+function getResult(obj) {
+    var get_tree = createTree(obj)
     var n_str = `<mdui-list><mdui-collapse>`
     var i = 0
     get_tree.forEach(element => {
@@ -69,8 +70,10 @@ get_tree.forEach(element => {
         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()