From 6e5f71b96b7b1a2215fd0293d2285624afe2c9bd Mon Sep 17 00:00:00 2001
From: Eyre_S <Sukazyo@outlook.com>
Date: Mon, 31 May 2021 16:05:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E5=88=87=E6=8D=A2=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BA=86(=E5=8D=8A=E4=B8=AA)pjax=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 现在在支持 javascript 的浏览器环境中，Book 和 Page 的链接将会采用异步局部更新的方式进行更新
  - 在进行更新时，内容区域的透明度会降为 20%
- 使 index 支持了请求部分页面内容
  - 在 raw=true 时，将会只输出内容容器内的内容
  - 在 nav=true 时，内容输出的前面会添加一行请求书籍的目录
- 给 page 和 book 链接添加了 'type/id' 格式的 id 和 'type-id' 的自定义属性
---
 assets/gitbook-fix.css                    |  8 ++
 assets/gitbook-fix.js                     | 92 ++++++++++++++++++++---
 index.php                                 | 18 ++++-
 src/Element/Book.php                      |  2 +-
 src/Element/BookContent/BookContented.php |  2 +-
 src/Element/BookContent/Page.php          |  2 +-
 template/footer.php                       |  6 +-
 7 files changed, 115 insertions(+), 15 deletions(-)

diff --git a/assets/gitbook-fix.css b/assets/gitbook-fix.css
index 29935b5..4559aba 100644
--- a/assets/gitbook-fix.css
+++ b/assets/gitbook-fix.css
@@ -102,3 +102,11 @@
 #book-search-input {
 	background-color: var(--color-nav-background-base);
 }
+
+#page-container {
+	transition-duration: 400ms;
+}
+
+#page-container.loading {
+	opacity: 0.2;
+}
diff --git a/assets/gitbook-fix.js b/assets/gitbook-fix.js
index b4fee80..41874cc 100644
--- a/assets/gitbook-fix.js
+++ b/assets/gitbook-fix.js
@@ -3,9 +3,14 @@ const WITH_SUMMARY_CLASS = "with-summary"
 const DROPDOWN_OPEN_CLASS = "open";
 
 let bookRoot;
+let pageContainer;
+let inBookNavContainer;
 
 let fontSettingDiv;
 
+let bookCurrentId;
+let pageCurrentId;
+
 function summaryOnOrOff () {
 	
 	if (bookRoot.classList.contains(WITH_SUMMARY_CLASS)) {
@@ -19,6 +24,8 @@ function summaryOnOrOff () {
 window.onload = function () {
 	
 	bookRoot = document.getElementsByClassName("book")[0];
+	pageContainer = document.getElementById("page-container");
+	inBookNavContainer = document.getElementById("in-book-nav-container");
 	
 	fontSettingDiv = document.getElementsByClassName("font-settings")[0].getElementsByClassName("dropdown-menu")[0];
 	
@@ -28,16 +35,17 @@ window.onload = function () {
 	
 };
 
-for (let node of document.getElementsByClassName("fold")) {
-	node.childNodes[0].addEventListener("click", function () {
-		if (node.classList.contains("on")) {
-			node.classList.remove("on");
-		} else node.classList.add("on");
-	});
-}
+function bindFolderClickEvent () {
+	for (let node of document.getElementsByClassName("fold")) {
+		node.childNodes[0].addEventListener("click", function () {
+			if (node.classList.contains("on")) {
+				node.classList.remove("on");
+			} else node.classList.add("on");
+		});
+	}
+} bindFolderClickEvent();
 
 for (const node of document.getElementsByClassName("summary-container")) {
-	
 	node.nextElementSibling.innerHTML = node.nextElementSibling.innerHTML + "<a class='summary-container-icon'><i class='fa'></i></a>";
 	node.nextElementSibling.getElementsByClassName("summary-container-icon")[0].addEventListener("click", function () {
 		if (node.classList.contains("on")) {
@@ -46,7 +54,6 @@ for (const node of document.getElementsByClassName("summary-container")) {
 			node.classList.add("on")
 		}
 	})
-	
 }
 
 function openOrCloseFontSettings () {
@@ -114,3 +121,70 @@ function setCookie(name, value) {
 	const expires = "expires=" + d.toGMTString()
 	document.cookie = name + "=" + value + "; " + expires;
 }
+
+function updatePage (bookId, pageId = "") {
+	
+	const isNavRefresh = bookId !== bookCurrentId;
+	const request = new XMLHttpRequest();
+	const url = (
+		"/" + bookId + "/" + pageId
+	);
+	const urlParam = (
+		"?raw=true" +
+		((isNavRefresh)?("&nav=true"):(""))
+	)
+	request.open("GET", url + urlParam, true);
+	console.log(url + urlParam);
+	request.onreadystatechange = function () {
+		if (request.readyState === 4 && request.status === 200) {
+			
+			// data
+			const data = request.responseText.split("\n", 2);
+			const nav = isNavRefresh?data[0]:"";
+			const content = request.responseText.substr(nav.length);
+			console.log(nav);
+			console.log(content);
+			// content
+			pageContainer.innerHTML = content;
+			if (!isNavRefresh) document.getElementById("page/"+pageCurrentId).classList.remove("active");
+			if (!isNavRefresh) pageCurrentId = pageId;
+			if (!isNavRefresh) document.getElementById("page/"+pageId).classList.add("active");
+			// nav
+			if (isNavRefresh) {
+				inBookNavContainer.innerHTML = nav;
+				if (bookCurrentId !== "%root")
+					document.getElementById("book/"+bookCurrentId).classList.remove("active");
+				bookCurrentId = bookId;
+				pageCurrentId = inBookNavContainer.getElementsByClassName("active")[0].getAttribute("page-id");
+				document.getElementById("book/"+bookId).classList.add("active");
+				bindFolderClickEvent();
+				bindPageLinkClickEvent();
+			}
+			// history
+			window.history.pushState(document.documentElement.innerHTML, document.title, url);
+			pageContainer.classList.remove("loading");
+			
+		}
+	}
+	request.send();
+	pageContainer.classList.add("loading");
+	
+}
+
+function bindBookLinkClickEvent () {
+	for (let node of document.getElementsByClassName("link-book")) {
+		node.children[0].removeAttribute("href");
+		node.childNodes[0].addEventListener("click", function () {
+			updatePage(node.getAttribute("book-id"));
+		}, true);
+	}
+} bindBookLinkClickEvent();
+
+function bindPageLinkClickEvent () {
+	for (let node of document.getElementsByClassName("link-page")) {
+		node.children[0].removeAttribute("href");
+		node.childNodes[0].addEventListener("click", function () {
+			updatePage(bookCurrentId, node.getAttribute("page-id"));
+		}, true);
+	}
+} bindPageLinkClickEvent();
diff --git a/index.php b/index.php
index 84d0f0b..28286a5 100644
--- a/index.php
+++ b/index.php
@@ -17,6 +17,10 @@ try {
 	
 	SiteMeta::load();
 	
+	// 检查是否为 ajax 请求
+	$rawContent = $_GET['raw']=="true";
+	$rawWithNav = $_GET['nav']=="true";
+	
 	// 格式化所给链接，并将链接转化为路径字符串数组
 	$req = $_GET['p'];
 	if (strlen($req) > 0 && $req[strlen($req) - 1] === '/')
@@ -66,6 +70,12 @@ try {
 		
 	}
 	
+	if ($rawContent && $rawWithNav) {
+		echo PageMeta::$book->getSummaryHtml() . "\n";
+	}
+	
+	if (!$rawContent) :
+	
 	require "./template/header.php";
 	
 	?>
@@ -123,11 +133,12 @@ try {
 				</div>
 				<h1>
 					<i class="fa fa-circle-o-notch fa-spin"></i>
-					<a><?= PageMeta::$book->getName() ?></a>
+					<a id="page-title"><?= PageMeta::$book->getName() ?></a>
 				</h1>
 			</div>
 			<div class="page-wrapper" tabindex="-1" role="main">
-				<div class="page-inner">
+				<div id="page-container" class="page-inner">
+					<?php endif; ?>
 					<div id="book-search-results">
 						<div class="search-noresults">
 							<section class="normal markdown-section">
@@ -136,6 +147,7 @@ try {
 							</section>
 						</div>
 					</div>
+					<?php if (!$rawContent) : ?>
 				</div>
 			</div>
 		</div>
@@ -145,6 +157,8 @@ try {
 	
 	require "./template/footer.php";
 	
+	endif;
+	
 } catch (Exception $e) {
 	
 	echo "<h1>ERROR</h1><p>" . $e->getMessage() . "</p>";
diff --git a/src/Element/Book.php b/src/Element/Book.php
index 8601f76..65c5f25 100644
--- a/src/Element/Book.php
+++ b/src/Element/Book.php
@@ -54,7 +54,7 @@ class Book {
 	}
 	
 	public function getHtml (): string {
-		return "<li class='link" . (PageMeta::$book->getId()==$this->id?" active":"") . "'><a class='link' " . (PageMeta::$book->getId()==$this->id?"":" href='/$this->id'") . ">$this->name</a></li>";
+		return "<li id='book/$this->id' book-id='$this->id' class='link link-book" . (PageMeta::$book->getId()==$this->id?" active":"") . "'><a class='link' " . (PageMeta::$book->getId()==$this->id?"":" href='/$this->id'") . ">$this->name</a></li>";
 	}
 	
 	/**
diff --git a/src/Element/BookContent/BookContented.php b/src/Element/BookContent/BookContented.php
index 6a3383b..187cf45 100644
--- a/src/Element/BookContent/BookContented.php
+++ b/src/Element/BookContent/BookContented.php
@@ -64,7 +64,7 @@ class BookContented {
 	}
 	
 	public function getSummaryHtml (): string {
-		return $this->childs->getSummaryHtml();
+		return "<div id='in-book-nav-container'>" . $this->childs->getSummaryHtml() . "</div>";
 	}
 	
 	public function getPage (string $id): ?Page {
diff --git a/src/Element/BookContent/Page.php b/src/Element/BookContent/Page.php
index ddb739e..9e6f8dc 100644
--- a/src/Element/BookContent/Page.php
+++ b/src/Element/BookContent/Page.php
@@ -73,7 +73,7 @@ class Page {
 	
 	public function getSummaryHtml (): string {
 		$str =
-			"<li class='page-contented chapter" .
+			"<li id='page/$this->id' page-id='$this->id' class='page-contented chapter link-page " .
 			(PageMeta::$page->getId()==$this->id?" active":"") .
 			"'><a class='page-contented' " .
 			(
diff --git a/template/footer.php b/template/footer.php
index c923dd1..c699f9c 100644
--- a/template/footer.php
+++ b/template/footer.php
@@ -11,7 +11,11 @@
 		}
 		?>
 		<script><?= SiteMeta::getCustomScriptContent("custom") ?></script>
+		<script>
+			bookCurrentId = "<?= PageMeta::$book->getId() ?>";
+			pageCurrentId = "<?= PageMeta::$page->getId() ?>";
+		</script>
 		
 	</body>
 	
-</html>
\ No newline at end of file
+</html>