文集支持目录层级编辑和显示

app/article/article.js

@@ -26,6 +26,7 @@ function articel_load(id, collection_id) {
 					let result = JSON.parse(data);
 					if (result) {
 						$("#article_title").html(result.title);
+						$("#article_path_title").html(result.title);
 						$("#page_title").text(result.title);
 						$("#article_subtitle").html(result.subtitle);
 						$("#article_author").html(result.username.nickname + "@" + result.username.username);
@@ -67,7 +68,7 @@ function collect_load(id) {
 						$("#contents").html(marked(result.summary));
 
 						let article_list = JSON.parse(result.article_list);
-						render_article_list(article_list, id);
+						render_article_list(article_list);
 					}
 				} catch (e) {
 					console.error(e);
@@ -79,24 +80,26 @@ function collect_load(id) {
 	);
 }
 
-function articel_load_collect(article_id) {
+function articel_load_article_list(articleId,collectionId) {
 	$.get(
 		"../article/collect_get.php",
 		{
-			article: article_id,
+			id: collectionId,
 			setting: "",
 		},
 		function (data, status) {
 			if (status == "success") {
 				try {
 					let result = JSON.parse(data);
-					if (result && result.length > 0) {
-						//$("#collect_title").html(result[0].title);
-						let strTitle = "<a href='../article/?collect=" + result[0].id + "'>" + result[0].title + "</a>";
-						$("#pali_pedia").html(strTitle);
+					if (result) {
+						let article_list = JSON.parse(result.article_list);
+						render_article_list(article_list,collectionId,articleId);
 
-						let article_list = JSON.parse(result[0].article_list);
-						render_article_list(article_list, result[0].id);
+						let strTitle = "<a href='../article/?collection=" + result.id + "'>" + result.title + "</a> / ";
+						for (const iterator of tocActivePath) {
+							strTitle += "<a href='../article/?id="+iterator.key+"&collection=" + result.id + "'>" + iterator.title + "</a> / ";
+						}
+						$("#article_path").html(strTitle);						
 					}
 				} catch (e) {
 					console.error(e);
@@ -109,44 +112,15 @@ function articel_load_collect(article_id) {
 }
 
 //在collect 中 的article列表
-function render_article_list(article_list, collection_id) {
-	let html = "";
-	html += "<ul>";
-	let display = "";
-	if (_display == "para") {
-		display = "&display=para";
-	}
-	let prevArticle = "无";
-	let nextArticle = "无";
-	let urlCollection = "&collection=" + collection_id;
-	for (let index = 0; index < article_list.length; index++) {
-		const element = article_list[index];
-		if (element.article == _articel_id) {
-			if (index > 0) {
-				const prev = article_list[index - 1];
-				prevArticle = "<a onclick=\"gotoArticle('" + prev.article + "')\">" + prev.title + "</a>";
-			}
-			if (index < article_list.length - 1) {
-				const next = article_list[index + 1];
-				nextArticle = "<a onclick=\"gotoArticle('" + next.article + "')\">" + next.title + "</a>";
-			}
-			$("#contents_nav_left").html(prevArticle);
-			$("#contents_nav_right").html(nextArticle);
+function render_article_list(article_list,collectId="",articleId="") {
+	$("#toc_content").fancytree({
+		autoScroll: true,
+		source: tocGetTreeData(article_list,articleId),
+		activate: function(e, data) {
+			gotoArticle(data.node.key,collectId);
+			return false;
 		}
-		html +=
-			"<li class='level_" +
-			element.level +
-			"'>" +
-			"<a onclick=\"gotoArticle('" +
-			element.article +
-			"')\">" +
-			element.title +
-			"</a></li>";
-	}
-
-	html += "</ul>";
-
-	$("#toc_content").html(html);
+	});
 }
 
 function set_channal(channalid) {
@@ -188,6 +162,9 @@ function setMode(mode = "read") {
 //跳转到另外一个文章
 function gotoArticle(articleId) {
 	let url = "../article/index.php?id=" + articleId;
+	if (_collection_id != "") {
+		url += "&collection=" + _collection_id;
+	}
 	if (_channal != "") {
 		url += "&channal=" + _channal;
 	}

app/article/index.php

@@ -22,7 +22,7 @@ require_once "../pcdl/html_head.php";
 		echo "_articel_id='".$_GET["id"]."';";
 	}
 	if(isset($_GET["collect"])){
-		echo "_collect_id='".$_GET["collect"]."';";
+		echo "_collection_id='".$_GET["collect"]."';";
 	}
 	if(isset($_GET["collection"])){
 		echo "_collection_id='".$_GET["collection"]."';";
@@ -101,16 +101,40 @@ require_once "../pcdl/html_head.php";
 
 
 <link type="text/css" rel="stylesheet" href="style.css"  />
+<link type="text/css" rel="stylesheet" href="pad.css" media="screen and (max-width:1280px)" />
 <link type="text/css" rel="stylesheet" href="mobile.css" media="screen and (max-width:800px)" />
 <link type="text/css" rel="stylesheet" href="print.css" media="print" />
 
+<link href="../../node_modules/jquery.fancytree/dist/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css" class="skinswitcher">
+<script src="../tree/jquery.fancytree.js" type="text/javascript"></script>
+<script src="../article/my_collect.js" type="text/javascript"></script>
+
+<style>
+#toc_content ul.fancytree-container{
+	border:unset;
+}
+.fancytree-container .active {
+    font-weight: 700;
+    color: var(--main-color);
+	background: linear-gradient(to right, var(--link-color), var(--nocolor));
+    border-radius: 5px;
+}
+span.fancytree-title{
+	color: var(--main-color1);
+}
+span.fancytree-node{
+	display: flex;
+}
+</style>
 
 <?php
     require_once("../pcdl/head_bar.php");
 ?>
 <div id="head_bar" >
-	<div id="pali_pedia" style="display:flex;">
-		<span><?php echo $_local->gui->anthology; ?></span>
+	<div style="display:flex;">
+	<div id="article_path" >
+	</div>
+	<div id="article_path_title"></div>
 	</div>
 
 	<div style="margin: auto 0;">
@@ -189,12 +213,14 @@ require_once "../pcdl/html_head.php";
 	click_dropdown_init();
 	note_create();
 	historay_init();
-	if(_collect_id==""){
-		articel_load(_articel_id,_collection_id);
-		articel_load_collect(_articel_id);
+	if(_articel_id==""){
+		collect_load(_collection_id);
 	}
 	else{
-		collect_load(_collect_id);
+		articel_load(_articel_id,_collection_id);
+		if(_collection_id!=""){
+			articel_load_article_list(_articel_id,_collection_id);
+		}
 	}
 	});
 

app/article/my_collect.js

@@ -107,38 +107,7 @@ function my_collect_edit(id) {
 					html += "</div>";
 					html += "<div style='display:flex;'>";
 					html += "<div style='flex:4;'>";
-
-					_arrArticleList = JSON.parse(result.article_list);
-					let treeData = new Array()
 					html += "<div id='ul_article_list'>";
-					let treeParents = [];
-					let rootNode = {key:0,title:"root",level:0};
-					treeData.push(rootNode);
-					let lastInsNode = rootNode;
-					let iLastParentNodeLevel = 0;
-					let iLastParentNode = 0;
-					let iCurrLevel = 0;
-					for (let index = 0; index < _arrArticleList.length; index++) {
-						const element = _arrArticleList[index];
-						let newNode = {key:element.article,title:element.title,level:element.level};
-						
-						if(newNode.level>iCurrLevel){
-							treeParents.push(lastInsNode);					
-							lastInsNode.children = new Array();
-							lastInsNode.children.push(newNode);
-						}
-						else if(newNode.level==iCurrLevel){
-							treeParents[treeParents.length-1].children.push(newNode);
-						}
-						else{
-							// 小于
-							treeParents.pop();
-							treeParents[treeParents.length-1].children.push(newNode);
-							iLastParentNodeLevel = treeParents[treeParents.length-1].level;	
-						}
-						lastInsNode = newNode;
-						iCurrLevel = newNode.level;
-					}
 					html += "</div>";
 
 					html += "</div>";
@@ -152,10 +121,13 @@ function my_collect_edit(id) {
 					$("#article_list").html(html);
 					$("#collection_title").html(result.title);
 
+					_arrArticleList = JSON.parse(result.article_list);
+
+
 					$("#ul_article_list").fancytree({
 						autoScroll: true,
 						extensions: ["dnd"],
-						source: treeData[0].children,
+						source: tocGetTreeData(_arrArticleList),
 						click: function(e, data) {
 							if( e.ctrlKey ){
 							  window.open("../article/?id="+data.node.key,"_blank");
@@ -207,7 +179,57 @@ function my_collect_edit(id) {
 		}
 	);
 }
+var tocActivePath;
+function tocGetTreeData(articles,active=""){
+	let treeData = new Array()
+
+	let treeParents = [];
+	let rootNode = {key:0,title:"root",level:0};
+	treeData.push(rootNode);
+	let lastInsNode = rootNode;
+	let iLastParentNodeLevel = 0;
+	let currParentNode = null;
+	let iCurrLevel = 0;
+	for (let index = 0; index < articles.length; index++) {
+		const element = articles[index];
 
+		let newNode = {key:element.article,title:element.title,level:element.level};
+		if(active==element.article){
+			newNode["extraClasses"]="active";
+		}
+		if(newNode.level>iCurrLevel){
+			treeParents.push(lastInsNode);					
+			lastInsNode.children = new Array();
+			lastInsNode.children.push(newNode);
+			currParentNode = lastInsNode;
+		}
+		else if(newNode.level==iCurrLevel){
+			currParentNode = treeParents[treeParents.length-1];
+			treeParents[treeParents.length-1].children.push(newNode);
+		}
+		else{
+			// 小于
+			do {
+				treeParents.pop();
+			} while (treeParents[treeParents.length-1].level>=newNode.level);
+			
+			currParentNode = treeParents[treeParents.length-1];
+			treeParents[treeParents.length-1].children.push(newNode);
+			iLastParentNodeLevel = treeParents[treeParents.length-1].level;	
+		}
+		lastInsNode = newNode;
+		iCurrLevel = newNode.level;
+
+		if(active==element.article){
+			tocActivePath = new Array();
+			for (let index = 1; index < treeParents.length; index++) {
+				treeParents[index]["expanded"]=true;
+				tocActivePath.push(treeParents[index]);				
+			}
+		}
+	}
+	return treeData[0].children;
+}
 function editNode(node){
 	var prevTitle = node.title,
 	  tree = node.tree;
@@ -254,7 +276,7 @@ function getTreeNodeData(node){
 	if( typeof node.children != "undefined"){
 		children = node.children.length;
 	}
-	arrTocTree.push({article:node.key,title:node.title,level:iTocTreeCurrLevel});
+	arrTocTree.push({article:node.key,title:node.title,level:iTocTreeCurrLevel,children:children});
 	if(children>0){
 		iTocTreeCurrLevel++;
 		for (const iterator of node.children) {