Merge commit '483a68378e5695743818c33c59c48215217eb80e' of http://192.168.8.117/mint/

app/article/add_to_collect_dlg.js

@@ -1,120 +1,120 @@
 function add_to_collect_dlg_init() {
-  $("[vui='collect-dlg']").each(function () {
-    $(this).css("position", "relative");
-    let html = "";
-    html +=
-      "<button class='button_add_to_collect icon_btn' title='" +
-      gLocal.gui.add_to +
-      gLocal.gui.anthology +
-      "'>";
-    html +=
-      "<svg class='icon'><use xlink:href='../studio/svg/icon.svg#add_to_anthology'></use></svg></button><div class='float_dlg' style='left:0;'></div>";
+	$("[vui='collect-dlg']").each(function () {
+		$(this).css("position", "relative");
+		let html = "";
+		html += '<span class="icon_btn_div">';
+		html += '<span class="icon_btn_tip">' + gLocal.gui.add_to + gLocal.gui.anthology + "</span>";
+		html += "<button class='button_add_to_collect icon_btn' >";
+		html += "<svg class='icon'>";
+		html += "<use xlink:href='../studio/svg/icon.svg#add_to_anthology'></use>";
+		html += "</svg>";
+		html += "</button>";
+		html += "<span class='float_dlg' style='top: 20px;' ></span>";
+		html += "</span>";
+		$(this).html(html);
+	});
 
-    $(this).html(html);
-  });
+	$(".button_add_to_collect").click(function () {
+		let html = "";
+		let article_id = $(this).parent().attr("a_id");
+		html += "<div id='add_to_collect_dlg_" + article_id + "'>";
+		html += "<div >";
+		html += "<input type='input'  placeholder='" + gLocal.gui.search + "' />";
+		html += "</div>";
+		html += "<div>";
+		html += "<div class='exist'>";
+		html += "</div>";
+		html += "<div class='others'>";
+		html += "</div>";
+		html += "<div id='add_to_collection_msg'>";
+		html += "<a href='../article/my_collect_index.php' target='_blank'>添加新的文集</a>";
+		html += "</div>";
+		html += "</div>";
+		html += "<div style='display:flex;justify-content: space-between;'>";
+		html +=
+			"<button onclick=\"article_add_to_collect_cancel('" +
+			article_id +
+			"')\">" +
+			gLocal.gui.cancel +
+			"</button>";
+		html +=
+			"<button onclick=\"article_add_to_collect_ok('" + article_id + "')\">" + gLocal.gui.finish + "</button>";
+		html += "</div>";
+		html += "</div>";
+		$(this).siblings(".float_dlg").first().html(html);
+		$(this).siblings(".float_dlg").first().show();
+		$.get(
+			"../article/list_article_in_collect.php",
+			{
+				id: article_id,
+			},
+			function (data, status) {
+				let collect_list = JSON.parse(data);
 
-  $(".button_add_to_collect").click(function () {
-    let html = "";
-    let article_id = $(this).parent().attr("a_id");
-    html += "<div id='add_to_collect_dlg_" + article_id + "'>";
-    html += "<div >";
-    html += "<input type='input'  placeholder='" + gLocal.gui.search + "' />";
-    html += "</div>";
-    html += "<div>";
-    html += "<div class='exist'>";
-    html += "</div>";
-    html += "<div class='others'>";
-    html += "</div>";
-    html += "</div>";
-    html += "<div style='display:flex;justify-content: space-evenly;'>";
-    html += "<button onclick='collect_new()'>" + gLocal.gui.new_composition + "</button>";
-    html +=
-      "<button onclick=\"article_add_to_collect_cancel('" +
-      article_id +
-      "')\">" + gLocal.gui.cancel + "</button>";
-    html +=
-      "<button onclick=\"article_add_to_collect_ok('" +
-      article_id +
-      "')\">" + gLocal.gui.finish + "</button>";
-    html += "</div>";
-    html += "</div>";
-    $(this).siblings(".float_dlg").first().html(html);
-    $(this).siblings(".float_dlg").first().show();
-    $.get(
-      "../article/list_article_in_collect.php",
-      {
-        id: article_id,
-      },
-      function (data, status) {
-        let collect_list = JSON.parse(data);
+				let id = collect_list.article_id;
+				let html_exist = "";
 
-        let id = collect_list.article_id;
-        let html_exist = "";
-        for (const iterator of collect_list.exist) {
-          html_exist +=
-            "<div><input type='checkbox' class='collect' collect_id='" +
-            iterator.id +
-            "' checked />";
-          html_exist += iterator.title;
-          html_exist += "</div>";
-        }
-        $("#add_to_collect_dlg_" + id)
-          .find(".exist")
-          .first()
-          .html(html_exist);
+				for (const iterator of collect_list.exist) {
+					html_exist +=
+						"<div><input type='checkbox' class='collect' collect_id='" + iterator.id + "' checked />";
+					html_exist += iterator.title;
+					html_exist += "</div>";
+				}
+				$("#add_to_collect_dlg_" + id)
+					.find(".exist")
+					.first()
+					.html(html_exist);
 
-        if (collect_list.others) {
-          let html_others = "";
-          for (const iterator of collect_list.others) {
-            html_others +=
-              "<div><input type='checkbox' class='collect' collect_id='" +
-              iterator.id +
-              "' />";
-            html_others += iterator.title;
-            html_others += "</div>";
-          }
-          $("#add_to_collect_dlg_" + id)
-            .find(".others")
-            .first()
-            .html(html_others);
-        }
-      }
-    );
-  });
+				if (collect_list.others) {
+					let html_others = "";
+					for (const iterator of collect_list.others) {
+						html_others +=
+							"<div><input type='checkbox' class='collect' collect_id='" + iterator.id + "' />";
+						html_others += iterator.title;
+						html_others += "</div>";
+					}
+					$("#add_to_collect_dlg_" + id)
+						.find(".others")
+						.first()
+						.html(html_others);
+				}
+			}
+		);
+	});
 }
 
 function article_add_to_collect_ok(article_id) {
-  let obj = document.querySelectorAll(".collect");
-  let collect_id = new Array();
-  for (const iterator of obj) {
-    if (iterator.checked == true) {
-      collect_id.push(iterator.getAttributeNode("collect_id").value);
-    }
-  }
-  $.post(
-    "../article/add_article_to_collect.php",
-    {
-      id: article_id,
-      title: $("#input_article_title").val(),
-      data: JSON.stringify(collect_id),
-    },
-    function (data) {
-      let result = JSON.parse(data);
-      if (result.status > 0) {
-        alert(result.message);
-      } else {
-        add_to_collect_dlg_close(result.id);
-      }
-    }
-  );
+	let obj = document.querySelectorAll(".collect");
+	let collect_id = new Array();
+	for (const iterator of obj) {
+		if (iterator.checked == true) {
+			collect_id.push(iterator.getAttributeNode("collect_id").value);
+		}
+	}
+	$.post(
+		"../article/add_article_to_collect.php",
+		{
+			id: article_id,
+			title: $("#input_article_title").val(),
+			data: JSON.stringify(collect_id),
+		},
+		function (data) {
+			let result = JSON.parse(data);
+			if (result.status > 0) {
+				alert(result.message);
+			} else {
+				add_to_collect_dlg_close(result.id);
+			}
+		}
+	);
 }
 
 function article_add_to_collect_cancel(article_id) {
-  add_to_collect_dlg_close(article_id);
+	add_to_collect_dlg_close(article_id);
 }
 
 function add_to_collect_dlg_close(article_id) {
-  $("#add_to_collect_dlg_" + article_id)
-    .parent()
-    .hide();
+	$("#add_to_collect_dlg_" + article_id)
+		.parent()
+		.hide();
 }

app/article/article.js

@@ -173,6 +173,12 @@ function set_channal(channalid) {
 	if (_display != "") {
 		url += "&display=" + _display;
 	}
+	if (_mode != "") {
+		url += "&mode=" + _mode;
+	}
+	if (_direction != "") {
+		url += "&direction=" + _direction;
+	}
 	location.assign(url);
 }
 function setMode(mode = "read") {

app/article/index.php

@@ -27,9 +27,7 @@ require_once "../pcdl/html_head.php";
 	if(isset($_GET["collection"])){
 		echo "_collection_id='".$_GET["collection"]."';";
 	}
-	if(isset($_GET["display"])){
-		echo "_display='".$_GET["display"]."';";
-	}
+
 	if(isset($_GET["channal"])){
 		echo "_channal='".$_GET["channal"]."';";
 	}
@@ -47,6 +45,35 @@ require_once "../pcdl/html_head.php";
 		$_mode = "read";
 		echo "_mode='read';";
 	}
+	if(isset($_GET["display"])){
+		$_display = $_GET["display"];
+		echo "_display='".$_GET["display"]."';";
+	}
+	else{
+		if($_mode=="read"){
+			$_display = "para";
+			echo "_display='para';";
+		}
+		else{
+			$_display = "sent";
+			echo "_display='sent';";			
+		}
+
+	}	
+	if(isset($_GET["direction"])){
+		$_direction = $_GET["direction"];
+		echo "_direction='".$_GET["direction"]."';";
+	}
+	else{
+		if($_mode=="read"){
+			$_direction = "row";
+			echo "_direction='row';";
+		}
+		else{
+			$_direction = "col";
+			echo "_direction='col';";
+		}
+	}
 	?>
 	</script>
 
@@ -94,16 +121,22 @@ require_once "../pcdl/html_head.php";
 </div>
 <div id="contents_view">
 	<div id="contents_div">
-		<div id="contents" 
-		<?php
-				if($_mode=="read"){
-					echo 'class="para_mode horizontal"';
+		<div id="contents" class="
+				<?php
+				if($_direction=="row"){
+					echo ' horizontal ';
+				}
+				else{
+					echo ' vertical ';
+				}
+				if($_display=="para"){
+					echo ' para_mode ';
 				}
 				else{
-					echo 'class="sent_mode vertical"';
+					echo ' sent_mode ';
 				}
 				?>
-		>
+		">
 		<?php echo $_local->gui->loading; ?>...
 		</div>
 		<div id="contents_foot">

app/article/my_article.js

@@ -39,10 +39,12 @@ function my_article_list() {
 						html +=
 							"<div style='flex:1;'><a href='../article/my_article_edit.php?id=" +
 							iterator.id +
-							"' title='"+gLocal.gui.edit+"'>";
+							"' title='" +
+							gLocal.gui.edit +
+							"'>";
 						html += "<button class='icon_btn'>";
 						html += "<svg class='icon'>";
-						html += "<use xlink:href='../studio/svg/icon.svg#ic_mode_edit'></use>"
+						html += "<use xlink:href='../studio/svg/icon.svg#ic_mode_edit'></use>";
 						html += "</svg>";
 						html += "</button>";
 
@@ -50,24 +52,36 @@ function my_article_list() {
 						html +=
 							"<div style='flex:1;'><a href='../article/?id=" +
 							iterator.id +
-							"' target='_blank' title='"+gLocal.gui.preview+"' >";
+							"' target='_blank' title='" +
+							gLocal.gui.preview +
+							"' >";
 						html += "<button class='icon_btn'>";
 						html += "<svg class='icon'>";
-						html += "<use xlink:href='../studio/svg/icon.svg#preview'></use>"
+						html += "<use xlink:href='../studio/svg/icon.svg#preview'></use>";
 						html += "</svg>";
 						html += "</button>";
 						html += "</a></div>";
-						html += "<div style='flex:1;'>"
-						html += "<button class='icon_btn' onclick=\"copy_to_clipboard('www.wikipali.org/mint/app/article/?id="+iterator.id+"')\" title='"+gLocal.gui.copy_link+"'>";
+						html += "<div style='flex:1;'>";
+						html +=
+							"<button class='icon_btn' onclick=\"copy_to_clipboard('www.wikipali.org/mint/app/article/?id=" +
+							iterator.id +
+							"')\" title='" +
+							gLocal.gui.copy_link +
+							"'>";
 						html += "<svg class='icon'>";
-						html += "<use xlink:href='../studio/svg/icon.svg#copy'></use>"
+						html += "<use xlink:href='../studio/svg/icon.svg#copy'></use>";
 						html += "</svg>";
 						html += "</button>";
 						html += "</div>";
 						html += "<div style='flex:1;'>";
-						html += "<button title='"+gLocal.gui.share_to+"' class='icon_btn' onclick=\"article_share('" + iterator.id + "')\">";
+						html +=
+							"<button title='" +
+							gLocal.gui.share_to +
+							"' class='icon_btn' onclick=\"article_share('" +
+							iterator.id +
+							"')\">";
 						html += "<svg class='icon'>";
-						html += "<use xlink:href='../studio/svg/icon.svg#share_to'></use>"
+						html += "<use xlink:href='../studio/svg/icon.svg#share_to'></use>";
 						html += "</svg>";
 						html += "</button>";
 						html += "</div>";
@@ -185,10 +199,14 @@ function my_article_edit(id) {
 					html += "<div>";
 					//html += "<div id='article_collect' vui='collect-dlg' ></div>"
 					html += "<div style='display:flex;'>";
-					html += "<span style='flex:3;margin:auto;'>" + gLocal.gui.title + "</span>";
-					html += '<span id="article_title" style="flex:7;"></span></div>';
+					html += "<span style='flex:1;'>" + gLocal.gui.title + "</span>";
+					html += '<span id="article_title" style="flex:7;"></span>';
+					html += "</div>";
 					html += "<div id='channal_selector' form_name='channal' style='display:none;'></div>";
-					html += "<div id='aritcle_status' style='display: flex; '></div>";
+					html += "<div style='display:flex;'>";
+					html += "<span style='flex:1;'>" + gLocal.gui.status + "</span>";
+					html += '<span id="aritcle_status" style="flex:7;"></span>';
+					html += "</div>";
 					html +=
 						'<div style="display:none;width:100%;" ><span style="flex:3;margin: auto;">' +
 						gLocal.gui.language_select +
@@ -204,13 +222,13 @@ function my_article_edit(id) {
 						result.lang +
 						'" > <input id="article_lang" type="hidden" name="lang" value=""></div>';
 					html += "<div style='display:flex;'>";
-					html += "<span style='flex:3;margin:auto;'>" + gLocal.gui.introduction + "</span>";
+					html += "<span style='flex:1;margin:auto;'>" + gLocal.gui.introduction + "</span>";
 					html += "<textarea style='flex:7;' name='summary' >" + result.summary + "</textarea></div>";
 					html += "</div>";
 					html += "</div>";
 
 					html +=
-						"<textarea id='article_content' name='content' style='height:500px;max-height: 40vh;'>" +
+						"<textarea id='article_content' name='content' style='height:480px;resize: vertical;'>" +
 						result.content +
 						"</textarea>";
 					html += "</div>";

app/article/my_article_edit.php

@@ -55,7 +55,9 @@ require_once '../studio/index_head.php';
 #preview_inner{
 	background-color: var(--bg-color);
 	color: var(--main-color);
+	padding: 0.5em;
 }
+
 	</style>
 
 	<?php
@@ -65,7 +67,7 @@ require_once '../studio/index_head.php';
 	<div class="index_inner " >
 	<form id="article_edit" action="##" onsubmit="return false"  method="POST" >
 	<div class="file_list_block">
-		<div class="tool_bar" style="width:50%;">
+		<div class="tool_bar" >
 			<div style="display:flex;">
 
 				<span class="icon_btn_div">
@@ -88,18 +90,20 @@ require_once '../studio/index_head.php';
 					</button>
 				</span>
 
-				<div id="article_collect" vui='collect-dlg' ></div>
+				
 			</div>
 			<div style="display:flex;">
-				<div>
-					<button class="icon_btn" title=<?php echo $_local->gui->scan_in_reader ;?>>
+				<div id="article_collect" vui='collect-dlg' ></div>
+				<span class="icon_btn_div">
+					<span class="icon_btn_tip"><?php echo $_local->gui->scan_in_reader ;?></span>
+					<button type="button" class="icon_btn" >
 						<a href="../article/index.php?id=<?php echo $_GET["id"];?>" target="_blank">
 							<svg class="icon">
 								<use xlink:href="../studio/svg/icon.svg#library"></use>
 							</svg>
 						</a>
 					</button>
-				</div>
+				</span>
 
 				<span class="icon_btn_div">
 					<span class="icon_btn_tip"><?php echo $_local->gui->save ;?></span>

app/palicanon/palicanon.js

@@ -101,7 +101,7 @@ function tag_changed() {
 					}
 				}
 
-				if (arrBookList.length < 100 || (arrBookList.length > 100 && iterator.level == 1)) {
+				if (arrBookList.length < 50 || (arrBookList.length > 50 && iterator.level == 1)) {
 					arrChapter.push(iterator);
 				}
 			}
@@ -117,6 +117,11 @@ function tag_changed() {
 			tag_render_others();
 			palicanon_chapter_list_apply(0);
 			$("#list-1").html(render_chapter_list(arrChapter));
+			if (arrBookList.length < 50) {
+				$("#list_shell_1").removeClass("book_view");
+			} else {
+				$("#list_shell_1").addClass("book_view");
+			}
 		}
 	);
 }
@@ -407,11 +412,10 @@ function sortNumber(a, b) {
 }
 
 function tag_list_slide_toggle(element) {
-	if($(element).html().indexOf("⮟")!= -1){
-		$(element).html("⮝")
-	}
-	else{
-		$(element).html("⮟")
+	if ($(element).html().indexOf("⮟") != -1) {
+		$(element).html("⮝");
+	} else {
+		$(element).html("⮟");
 	}
 	$("#tag_list").slideToggle();
 }

app/palicanon/style.css

@@ -163,6 +163,7 @@ tag {
 }
 .chapter_list ul li:hover {
 	background-color: darkorange;
+	cursor: pointer;
 }
 .chapter_list .resource {
 	display: flex;
@@ -170,6 +171,7 @@ tag {
 	margin-bottom: auto;
 }
 .chapter_list .title .title_1 {
+	color: var(--main-color);
 	font-weight: 700;
 	font-size: 110%;
 }
@@ -215,11 +217,7 @@ tag {
 	text-align: center;
 }
 .chapter_head .title .title_1 {
-	font-size: 120%;
-	padding: 1em 0 0.5em 0;
-	font-weight: 700;
-}
-.chapter_head .title .title_1 {
+	color: var(--main-color);
 	font-size: 120%;
 	padding: 1em 0 0.5em 0;
 	font-weight: 700;
@@ -256,3 +254,20 @@ tag {
 	display: flex;
 	justify-content: space-between;
 }
+
+.book_view .grid {
+	width: 100%;
+}
+.book_view ul {
+	border-right: unset;
+}
+.book_view ul li {
+	width: 180px;
+	height: 250px;
+	margin: 1em;
+	border: 10px solid wheat;
+}
+.book_view ul {
+	display: flex;
+	flex-flow: wrap;
+}

app/public/lang/zh-cn.json

@@ -464,7 +464,7 @@
 		"optional": "选填",
 		"comment": "评论",
 		"my_term": "我的术语",
-		"scan_in_reader": "去藏经阁中阅览",
+		"scan_in_reader": "藏经阁阅览",
 		"selected": "已选",
 		"to_be_selected": "待选",
 		"text_without_title": "有正文缺标题",

app/reader/index.php

@@ -35,10 +35,6 @@ require_once "../pcdl/html_head.php";
 	if(isset($_GET["end"])){
 		echo "_reader_end='".$_GET["end"]."';";
 	}
-
-	if(isset($_GET["display"])){
-		echo "_display='".$_GET["display"]."';";
-	}
 	
 	if(isset($_GET["channal"])){
 		echo "_channal='".$_GET["channal"]."';";
@@ -57,6 +53,35 @@ require_once "../pcdl/html_head.php";
 		$_mode = "read";
 		echo "_mode='read';";
 	}
+	if(isset($_GET["display"])){
+		$_display = $_GET["display"];
+		echo "_display='".$_GET["display"]."';";
+	}
+	else{
+		if($_mode=="read"){
+			$_display = "para";
+			echo "_display='para';";
+		}
+		else{
+			$_display = "sent";
+			echo "_display='sent';";			
+		}
+
+	}	
+	if(isset($_GET["direction"])){
+		$_direction = $_GET["direction"];
+		echo "_direction='".$_GET["direction"]."';";
+	}
+	else{
+		if($_mode=="read"){
+			$_direction = "row";
+			echo "_direction='row';";
+		}
+		else{
+			$_direction = "col";
+			echo "_direction='col';";
+		}
+	}
 	?>
 	</script>
 
@@ -108,16 +133,23 @@ require_once "../pcdl/html_head.php";
 		</div>
 		<div id="contents_view">
 			<div id="contents_div" >
-				<div id="contents" 
+			<div id="contents" class="
 				<?php
-				if($_mode=="read"){
-					echo 'class="para_mode horizontal"';
+				if($_direction=="row"){
+					echo ' horizontal ';
+				}
+				else{
+					echo ' vertical ';
+				}
+				if($_display=="para"){
+					echo ' para_mode ';
 				}
 				else{
-					echo 'class="sent_mode vertical"';
+					echo ' sent_mode ';
 				}
 				?>
-				><?php echo $_local->gui->loading; ?>...</div>
+		">
+				<?php echo $_local->gui->loading; ?>...</div>
 				<div id="contents_toc"></div>
 				<div id="contents_foot">
 					<div id="contents_nav" style="display:flex;justify-content: space-between;">

app/reader/reader.js

@@ -249,6 +249,12 @@ function set_channal(channalid) {
 	if (_display != "") {
 		url += "&display=" + _display;
 	}
+	if (_mode != "") {
+		url += "&mode=" + _mode;
+	}
+	if (_direction != "") {
+		url += "&direction=" + _direction;
+	}
 	location.assign(url);
 }
 

app/reader/style.css

@@ -172,3 +172,7 @@ note:hover chapter {
 #para_path_next_level {
 	display: inline-block;
 }
+
+#path_div chapter {
+	display: inline-block;
+}

app/studio/js/editor.js

@@ -3779,78 +3779,21 @@ function edit_un_split(parentId) {
 		}
 	}
 }
-
+//添加连音词拆分html块
 function edit_un_AddNewHtmlNode(nextNodeId, strInsert, guid, id) {
-	var xWord = gXmlBookDataBody.getElementsByTagName("word");
-	var iWordIndex = getWordIndex(guid);
-	var parentId = guid.split("_")[0];
-	var parentElement = document.getElementById("wb" + parentId);
-	var element = document.getElementById("wb" + nextNodeId);
-
-	var divWord = document.createElement("div");
-	var typ = document.createAttribute("class");
-
-	if (strInsert.length <= 1) {
-		typ.nodeValue = "word_punc";
-	} else {
-		typ.nodeValue = "word";
-	}
-	divWord.attributes.setNamedItem(typ);
-
-	var typId = document.createAttribute("id");
-	typId.nodeValue = "wb" + guid;
-	divWord.attributes.setNamedItem(typId);
-
-	var txtOut = "";
-	/*word block begin*/
-	//add more class string for union word
-	sUnParent = getNodeText(xWord[iWordIndex], "un");
-	sWordCase = getNodeText(xWord[iWordIndex], "case");
-	txtUnClass = "";
-	if (sUnParent.length > 0) {
-		switch (sWordCase) {
-			case ".un:begin.":
-				txtUnClass = " un_begin";
-				break;
-			case ".un:begin.":
-				txtUnClass = " un_end";
-				break;
-			default:
-				txtUnClass = " un_pali";
-				break;
-		}
-	}
-	//word head being
-	/*长度为1的为标点符号*/
-	if (strInsert.length <= 1) {
-		txtOut = txtOut + "<p class='pali " + txtUnClass + "' name='wPali'>";
-		txtOut = txtOut + "<span class='paliword'  name=\"spali\">" + strInsert + "</span>";
-		txtOut = txtOut + "<span class='paliword2' name=\"spali\"></span>";
-		txtOut = txtOut + "</p>\n";
-	} else {
-		txtOut = txtOut + "<p class='pali " + txtUnClass + "' name='wPali'>";
-		txtOut = txtOut + "<a name='w" + guid + '\' title="" onclick=\'on_word_click("' + guid + "\")'>";
-		txtOut = txtOut + "<span class='paliword' name=\"spali\">" + strInsert + "</span>";
-		txtOut = txtOut + "<span class='paliword2' name=\"spali\"></span>";
-		txtOut = txtOut + "</a>";
-		txtOut = txtOut + "</p>\n";
-	}
-	//word head end
-	/*Detail being*/
-
-	txtOut = txtOut + "<div id='detail" + guid + "'>";
-	txtOut = txtOut + renderWordDetailById(guid);
-	txtOut = txtOut + "</div>";
-	//detail end
-
-	//word block end
+	let xWord = gXmlBookDataBody.getElementsByTagName("word");
+	let iWordIndex = getWordIndex(guid);
+	let parentId = guid.split("_")[0];
+	let parentElement = document.getElementById("wb" + parentId);
+	let element = document.getElementById("wb" + nextNodeId);
 
-	divWord.innerHTML = txtOut;
-	//如果下一个词不存在。
+	let htmlNewWord = renderWordBlock(xWord[iWordIndex]);
 	if (element) {
-		element.parentNode.insertBefore(divWord, element);
+		//下一个词存在。
+		$(element).before(htmlNewWord);
 	} else {
-		parentElement.parentNode.appendChild(divWord);
+		//下一个词不存在。
+		$(parentElement).append(htmlNewWord);
 	}
 }
 

app/studio/js/render.js

@@ -1245,14 +1245,66 @@ function render_sent_tool_bar(elementBlock, begin) {
 	output += "</div>";
 	return output;
 }
+function renderWordBlock(element) {
+	let output = "";
+	let Note_Mark = 0;
+	let wID = getNodeText(element, "id");
+	let wPali = getNodeText(element, "pali");
+	let wReal = getNodeText(element, "real");
+	let wType = getNodeText(element, "type");
+	let wGramma = getNodeText(element, "gramma");
+	let wCase = getNodeText(element, "case");
+	let wUn = getNodeText(element, "un");
+	if ((wType == "" || wType == "?") && wCase != "") {
+		wType = wCase.split("#")[0];
+	}
 
+	//渲染单词块
+	//word div class
+	let wordclass;
+	let strMouseEvent = ' onmouseover="on_word_mouse_enter()" onmouseout="on_word_mouse_leave()"';
+	if (wType == ".ctl." && wGramma == ".a.") {
+		wordclass = "ctrl";
+	} else if (Note_Mark == 1) {
+		wordclass = "word org_note";
+	} else {
+		if (wReal == "") {
+			wordclass = "word word_punc un_parent "; //符號
+		} else {
+			if (wType == ".un.") {
+				wordclass = "word un_parent"; //粘音詞
+			} else if (wType == ".comp.") {
+				wordclass = "word comp_parent"; //複合詞
+			} else {
+				wordclass = "word"; //普通
+			}
+		}
+	}
+	output += '<div id="wb' + wID + "\" class='" + wordclass + "'> <a name='" + wPali + "'></a>";
+	//head div class
+	output += "	<div id='ws_" + wID + "' class='word_head_shell' >";
+	let wordheadclass;
+	if (wUn.length > 0) {
+		wordheadclass = "word_head un_pali";
+	} else {
+		wordheadclass = "word_head";
+	}
+	output += "	<div class='" + wordheadclass + "' id=\"whead_" + wID + '">';
+	output += renderWordHeadInner(element);
+	output += "	</div>";
+	output += "	</div>"; //word_head_shell
+	output += '	<div id="detail' + wID + '" class="wbody">';
+	output += renderWordBodyInner(element);
+	output += "	</div>";
+
+	output += "</div>";
+	return output;
+}
 var arr_par_sent_num = new Array();
 var g_arr_Para_ID = new Array();
 function renderWordParBlockInner(elementBlock) {
 	var output = "<div style='display:block;width:100%'>";
 	var Note_Mark = 0;
-	var sent_gramma_i = 0;
-	var word_length_count = 0;
 	var sent_num = 0;
 
 	var arr_Para_ID = new Array();
@@ -1260,7 +1312,6 @@ function renderWordParBlockInner(elementBlock) {
 	let book = getNodeText(xmlParInfo, "book");
 	let paragraph = getNodeText(xmlParInfo, "paragraph");
 	let par_num = paragraph - 1;
-	let type = getNodeText(xmlParInfo, "type");
 	let allWord = elementBlock.getElementsByTagName("word");
 	output += "<div class='sent_wbw_trans'>";
 	output += render_sent_tool_bar(elementBlock, 0);
@@ -1276,83 +1327,61 @@ function renderWordParBlockInner(elementBlock) {
 		let wType = getNodeText(allWord[iWord], "type");
 		let wGramma = getNodeText(allWord[iWord], "gramma");
 		let wCase = getNodeText(allWord[iWord], "case");
-		let wMean = getNodeText(allWord[iWord], "mean");
-		let wParent = getNodeText(allWord[iWord], "parent");
 		let wUn = getNodeText(allWord[iWord], "un");
-		let wStyle = getNodeText(allWord[iWord], "style");
 		let wEnter = getNodeText(allWord[iWord], "enter");
-
 		if ((wType == "" || wType == "?") && wCase != "") {
 			wType = wCase.split("#")[0];
 		}
 
-		word_id = parseInt(wID.split("-")[2]);
-		if (sent_begin == 0) {
-			sent_begin = word_id;
-		}
-
 		//渲染单词块
+		output += renderWordBlock(allWord[iWord]);
+		/*
 		//word div class
+		let wordclass;
 		let strMouseEvent = ' onmouseover="on_word_mouse_enter()" onmouseout="on_word_mouse_leave()"';
 		if (wType == ".ctl." && wGramma == ".a.") {
-			//output += "<div><a name='"+wPali+"'></a></div>";
-			output +=
-				'<div id="wb' +
-				wID +
-				"\" class='ctrl sent_gramma_" +
-				(sent_gramma_i % 3) +
-				"'> <a name='" +
-				wPali +
-				"'></a>";
+			wordclass = "ctrl";
 		} else if (Note_Mark == 1) {
-			output +=
-				'<div id="wb' +
-				wID +
-				"\" class='word org_note sent_gramma_" +
-				(sent_gramma_i % 3) +
-				"'> <a name='" +
-				wPali +
-				"'></a>";
+			wordclass = "word org_note";
 		} else {
 			if (wReal == "") {
-				output +=
-					'<div id="wb' +
-					wID +
-					'" class="word word_punc un_parent sent_gramma_' +
-					(sent_gramma_i % 3) +
-					'" >'; //符號
+				wordclass = "word word_punc un_parent "; //符號
 			} else {
 				if (wType == ".un.") {
-					output +=
-						'<div id="wb' + wID + '" class="word un_parent sent_gramma_' + (sent_gramma_i % 3) + '" >'; //粘音詞
+					wordclass = "word un_parent"; //粘音詞
 				} else if (wType == ".comp.") {
-					output +=
-						'<div id="wb' + wID + '" class="word comp_parent sent_gramma_' + (sent_gramma_i % 3) + '" >'; //複合詞
+					wordclass = "word comp_parent"; //複合詞
 				} else {
-					output += '<div id="wb' + wID + '" class="word sent_gramma_' + (sent_gramma_i % 3) + '" >'; //普通
+					wordclass = "word"; //普通
 				}
 			}
 		}
-
+		output += '<div id="wb' + wID + "\" class='" + wordclass + "'> <a name='" + wPali + "'></a>";
 		//head div class
 		output += "	<div id='ws_" + wID + "' class='word_head_shell' >";
+		let wordheadclass;
 		if (wUn.length > 0) {
-			output += "	<div class='word_head un_pali' id=\"whead_" + wID + '">';
+			wordheadclass = "word_head un_pali";
 		} else {
-			output += "	<div class='word_head' id=\"whead_" + wID + '">';
+			wordheadclass = "word_head";
 		}
-
+		output += "	<div class='" + wordheadclass + "' id=\"whead_" + wID + '">';
 		output += renderWordHeadInner(allWord[iWord]);
 		output += "	</div>";
-		output += "	</div>";
+		output += "	</div>"; //word_head_shell
 		output += '	<div id="detail' + wID + '" class="wbody">';
 		output += renderWordBodyInner(allWord[iWord]);
 		output += "	</div>";
-		output += "</div>";
 
+		output += "</div>";
+*/
 		//渲染单词块结束
 
-		word_length_count += wPali.length;
+		word_id = parseInt(wID.split("-")[2]);
+		if (sent_begin == 0) {
+			sent_begin = word_id;
+		}
+
 		if (iWord >= 1) {
 			var pre_pali_spell = getNodeText(allWord[iWord - 1], "pali");
 			var pre_pali_type = getNodeText(allWord[iWord - 1], "type");
@@ -1551,8 +1580,6 @@ function renderWordParBlockInner(elementBlock) {
 				output += "<div class='sent_wbw'>";
 			}
 			sent_num += 1;
-			word_length_count = 0;
-			sent_gramma_i = 0;
 			arr_Para_ID.push(wID);
 		}
 	} //循環結束

app/term/term.css

@@ -835,3 +835,7 @@ w:hover {
 .sent_tran li {
 	line-height: normal;
 }
+.note_foot {
+	display: flex;
+	justify-content: space-between;
+}