实现“无刷新”，提升体验

2024-08-11 20:59:35 +08:00 · 2024-08-11 20:59:35 +08:00 · e1dc6f50c2
parent 60806217b8
commit e1dc6f50c2
3 changed files with 94 additions and 19 deletions
--- 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>
--- 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);
+});
--- 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 => {
+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>`
+    })
+    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()