article 添加上一个下一个按钮

app/article/article.js

@@ -109,6 +109,7 @@ function articel_load_article_list(articleId,collectionId) {
 					if (result) {
 						let article_list = JSON.parse(result.article_list);
 						render_article_list(article_list,collectionId,articleId);
+						articleFillFootNavButton(article_list,articleId);
 						let strTitle = "<a href='../article/?view=collection&collection=" + result.id + "'>" + result.title + "</a> / ";
 						for (const iterator of tocActivePath) {
 							strTitle += "<a href='../article/?view=article&id="+iterator.key+"&collection=" + result.id + "'>" + iterator.title + "</a> / ";
@@ -124,6 +125,89 @@ function articel_load_article_list(articleId,collectionId) {
 		}
 	);
 }
+var prevArticle=0,nextArticle=0;
+function articleFillFootNavButton(article_list,curr_article){
+	for (let index = 0; index < article_list.length; index++) {
+		const element = article_list[index];
+		if(element.article==curr_article){
+			if(index!=0){
+				$("#contents_nav_left").html(article_list[index-1].title);
+				prevArticle = article_list[index-1].article;
+			}else{
+				$("#contents_nav_left").html("无");
+			}
+			if(index!=article_list.length-1){
+				$("#contents_nav_right").html(article_list[index+1].title);
+				nextArticle = article_list[index+1].article;
+			}else{
+				$("#contents_nav_right").html("无");
+			}
+		}
+	}
+}
+function goto_prev() {
+	switch (_view) {
+		case "article":
+			if(prevArticle==0){
+				alert("已经到达开始");
+			}else{
+				gotoArticle(prevArticle);
+			}
+			break;
+		case "collection":
+
+		break;
+		case "sent":
+		case "para":
+		case "chapter":
+			if(prevChapter>0){
+				gotoChapter(prevChapter);
+			}else{
+				alert("已经到达开始");
+			}
+			break;
+		case "book":
+		case "series":
+		break;
+		case "simsent":
+		case "sim":
+			break;
+		default:
+			break;
+	}
+}
+function goto_next() {
+	switch (_view) {
+		case "article":
+			if(nextArticle==0){
+				alert("已经到达最后");
+			}else{
+				gotoArticle(nextArticle);
+			}
+			break;
+		case "collection":
+		break;
+		case "sent":
+		case "para":
+			break;
+		case "chapter":
+			if(nextChapter>0){
+				gotoChapter(nextChapter);
+			}else{
+				alert("已经到达最后");
+			}
+			
+			break;
+		case "book":
+		case "series":
+		break;
+		case "simsent":
+		case "sim":
+			break;
+		default:
+			break;
+	}
+}
 
 //在collect 中 的article列表
 function render_article_list(article_list,collectId="",articleId="") {
@@ -385,7 +469,8 @@ function to_article(){
 		content:_sent_data.content,
 	});
 }
-
+var prevChapter=0,nextChapter=0;
+var strPrevChapter,strNextChapter;
 function render_toc(){
 	$.getJSON(
 		"../api/pali_text.php",
@@ -398,6 +483,10 @@ function render_toc(){
 	).done(function (data) {
 			let arrToc = new Array();
 			for (const it of data.data) {
+				if(_par==it.paragraph){
+					nextChapter = it.next_chapter;
+					prevChapter = it.prev_chapter;
+				}
 				arrToc.push({article:it.paragraph,title:it.toc,level:it.level});
 			}
 			$("#toc_content").fancytree({
@@ -408,8 +497,42 @@ function render_toc(){
 					return false;
 				}
 			});
+			fill_chapter_nav();
 	});
 }
+function fill_chapter_nav(){
+	if(prevChapter>0){
+		$.getJSON(
+			"../api/pali_text.php",
+			{
+				_method:"show",
+				view:"toc",
+				book: _book,
+				par: prevChapter,
+			}
+		).done(function (data) {
+			$("#contents_nav_left").html(data.data.toc);
+		});		
+	}else{
+		$("#contents_nav_left").html("无");
+	}
+	if(nextChapter>0){
+		$.getJSON(
+			"../api/pali_text.php",
+			{
+				_method:"show",
+				view:"toc",
+				book: _book,
+				par: nextChapter,
+			}
+		).done(function (data) {
+			$("#contents_nav_right").html(data.data.toc);
+		});		
+	}else{
+		$("#contents_nav_right").html("无");
+
+	}
+}
 
 //跳转到另外一个文章
 function gotoChapter(paragraph) {

app/article/index.php

@@ -343,8 +343,8 @@ function set_toc_visible(isVisible){
 			</div>
 			<div id="contents_foot">
 				<div id="contents_nav" style="display:flex;justify-content: space-between;">
-					<div id="contents_nav_left"></div>
-					<div id="contents_nav_right"></div>
+					<div id="contents_nav_left" class="nav_bnt nav_left" onclick="goto_prev()">上一个</div>
+					<div id="contents_nav_right"  class="nav_bnt nav_right" onclick="goto_next()">下一个</div>
 				</div>
 				<div id="contents_dicuse">
 				

app/article/mobile.css

@@ -84,4 +84,11 @@ note:hover .ref {
     border: unset;
     border-radius: unset;
     border-bottom: 1px solid var(--border-line-color);
+}
+
+#contents_nav{
+	flex-direction: column-reverse;
+}
+.nav_bnt{
+	width: 100%;
 }

app/article/style.css

@@ -274,4 +274,26 @@ img {
 
 #head_nav_right{
 	display: flex;
+}
+
+.nav_bnt{
+	min-width: 20em;
+    padding: 15px;
+    border: 1px solid var(--border-line-color);
+    border-radius: 5px;
+	cursor: pointer;
+	margin: 10px;
+}
+.nav_right{
+	text-align: right;
+}
+
+.nav_bnt:hover {
+    background-color: var(--tool-link-hover-color);
+    color: var(--btn-hover-color);
+}
+
+#contents_nav{
+	display: flex;
+    justify-content: space-between;
 }