article 目录改为左侧

app/article/article.js

@@ -383,4 +383,51 @@ function to_article(){
 		title:_sent_data.title,
 		content:_sent_data.content,
 	});
+}
+
+function render_toc(){
+	$.getJSON(
+		"../api/pali_text.php",
+		{
+			_method:"index",
+			view:"toc",
+			book: _book,
+			par: _par,
+		}
+	).done(function (data) {
+			let arrToc = new Array();
+			for (const it of data.data) {
+				arrToc.push({article:it.paragraph,title:it.toc,level:it.level});
+			}
+			$("#toc_content").fancytree({
+				autoScroll: true,
+				source: tocGetTreeData(arrToc,_par),
+				activate: function(e, data) {
+					gotoChapter(data.node.key);
+					return false;
+				}
+			});
+	});
+}
+
+//跳转到另外一个文章
+function gotoChapter(paragraph) {
+	let url = "../article/index.php?view=chapter";
+
+	url += "&book=" + _book;
+	url += "&par=" + paragraph;
+
+	if (_channal != "") {
+		url += "&channal=" + _channal;
+	}
+	if (_display != "") {
+		url += "&display=" + _display;
+	}
+	if (_mode != "") {
+		url += "&mode=" + _mode;
+	}
+	if (_direction != "") {
+		url += "&direction=" + _direction;
+	}
+	location.assign(url);
 }

app/article/index.php

@@ -155,10 +155,7 @@ span.fancytree-title{
 span.fancytree-node{
 	display: flex;
 }
-#toc_content{
-	max-height: 25vw;
-    width: max-content;
-}
+
 
 #content_toc>ul>li>span.fancytree-node{
 	font-size: 120%;
@@ -259,6 +256,15 @@ span.fancytree-node{
 		</span>
 	</div>
 </div>
+
+<div id="left_pannal">
+	<div id="left_pannal_inner" class="fun_frame" >
+		<div id = "collect_title" class="title"><?php echo $_local->gui->contents; ?></div>
+		<div id = "toc_content" class="content" >
+		</div>
+	</div>
+</div>
+
 <div id="main_view" class="main_view">
 <div id="article_head" style="border-bottom: 1px solid gray;">
 	<div style="display:flex;">
@@ -291,11 +297,6 @@ span.fancytree-node{
 		</div>
 	</div>
 	<div id="right_pannal">
-		<div class="fun_frame" style="overflow-x: scroll;">
-			<div id = "collect_title" class="title"><?php echo $_local->gui->contents; ?></div>
-			<div id = "toc_content" class="content" >
-			</div>
-		</div>
 		<div class="fun_frame">
 			<div style="display:flex;justify-content: space-between;">
 				<div class="title"><?php echo $_local->gui->contributor; ?></div>
@@ -340,7 +341,7 @@ span.fancytree-node{
 		case "series":
 			palicanon_load();
 			reader_get_path();
-			
+			render_toc();
 		break;
 		case "simsent":
 			palicanon_load();

app/article/mobile.css

@@ -40,3 +40,11 @@
 }
 note:hover .ref {
 }
+
+#left_pannal{
+	display:none;
+}
+
+.main_view {
+	margin-left: auto;
+}

app/article/print.css

@@ -33,3 +33,10 @@ note > .tran {
 #contents_foot {
 	display: none;
 }
+#left_pannal{
+	display:none;
+}
+
+.main_view {
+	margin-left: auto;
+}

app/article/style.css

@@ -39,10 +39,26 @@
 	padding: 0 1em;
 	padding-top: 7em;
 	max-width: 1280px;
-	margin-left: auto;
+	margin-left: 300px;
 	margin-right: auto;
 }
 
+#left_pannal_inner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding-top: 90px;
+    height: 100%;
+	width:300px;
+	overflow-x: hidden;
+	overflow-y: hidden;
+}
+
+#toc_content{
+	max-height: 100%;
+    width: max-content;
+}
+
 .fun_frame {
 	border-bottom: 1px solid gray;
 	margin-right: 10px;