From e1dc6f50c2f9521d535f7786a4630c69035e6b05 Mon Sep 17 00:00:00 2001
From: cxykevin <cxykevin@yeah.net>
Date: Sun, 11 Aug 2024 20:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E2=80=9C=E6=97=A0=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E2=80=9D=EF=BC=8C=E6=8F=90=E5=8D=87=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/index.hbs       | 19 +++++++-----
 theme/js/page.js      | 69 ++++++++++++++++++++++++++++++++++++++++++-
 theme/js/tocrender.js | 25 +++++++++-------
 3 files changed, 94 insertions(+), 19 deletions(-)

diff --git a/theme/index.hbs b/theme/index.hbs
index 50c96ab..c14c82b 100755
--- a/theme/index.hbs
+++ b/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>
diff --git a/theme/js/page.js b/theme/js/page.js
index 7597071..e23b8c1 100644
--- a/theme/js/page.js
+++ b/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);
+});
diff --git a/theme/js/tocrender.js b/theme/js/tocrender.js
index 30a6735..a776ea6 100644
--- a/theme/js/tocrender.js
+++ b/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,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()