Просмотр исходного кода

句子模块增加更多译文和添加译文按钮

visuddhinanda 5 лет назад
Родитель
Сommit
b2393e0d8b
7 измененных файлов с 170 добавлено и 24 удалено
  1. 1 1
      .vscode/settings.json
  2. 1 10
      app/article/index.php
  3. 1 0
      app/term/add.svg
  4. 1 0
      app/term/expand.svg
  5. 1 0
      app/term/fold.svg
  6. 101 12
      app/term/note.js
  7. 64 1
      app/term/term.css

+ 1 - 1
.vscode/settings.json

@@ -1,7 +1,7 @@
 {
     "files.autoSave": "onFocusChange",
     "workbench.iconTheme": "vscode-icons",
-    "workbench.colorTheme": "Visual Studio Dark",
+    "workbench.colorTheme": "Visual Studio Light",
     "editor.formatOnSave": true,
     "editor.fontFamily": "source code pro",
     "editor.mouseWheelZoom": true,

+ 1 - 10
app/article/index.php

@@ -266,16 +266,7 @@ require_once "../pcdl/html_head.php";
 			<div style="display:flex;justify-content: space-between;">
 				<div class="title"><?php echo "Contributor" ?></div>
 				<div class="click_dropdown_div">
-					<div class="click_dropdown_button"><?php echo $_local->gui->more; ?></div>
-					<div class="click_dropdown_content">
-						<div class="click_dropdown_content_inner" id="channal_select">
-							<?php echo $_local->gui->channels; ?>
-						</div>
-						<div>
-						<button class="icon_btn click_dropdown_ok"><?php echo $_local->gui->confirm; ?></button>
-						<button class="icon_btn click_dropdown_cancel"><?php echo $_local->gui->cancel; ?></button>
-						</div>
-					</div>	
+					<div class="channel_select_button" onclick="onChannelMultiSelectStart()"><?php echo "Multi-Select"; ?></div>
 				</div>
 			</div>
 			<div id="channal_list" class="content" style="max-height:20em;">

+ 1 - 0
app/term/add.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605399923175" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M873.753974 149.961384A511.715358 511.715358 0 1 0 149.676742 874.038616 511.715358 511.715358 0 0 0 873.753974 149.961384zM831.537457 828.623878a447.750939 447.750939 0 1 1-633.247756-633.247756 447.750939 447.750939 0 0 1 633.247756 633.247756z" fill="" p-id="1948"></path><path d="M767.573037 480.01779H543.697568V256.142321a31.98221 31.98221 0 0 0-63.96442 0v223.875469H255.857679a31.98221 31.98221 0 0 0 0 63.96442h223.875469V767.857679a31.98221 31.98221 0 0 0 63.96442 0V543.98221H767.573037a31.98221 31.98221 0 0 0 0-63.96442z" fill="" p-id="1949"></path></svg>

+ 1 - 0
app/term/expand.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605398592854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1180" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 42.666667C251.733333 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667z m0 874.666666c-221.866667 0-405.333333-179.2-405.333333-405.333333 0-221.866667 179.2-405.333333 405.333333-405.333333s405.333333 179.2 405.333333 405.333333c0 221.866667-183.466667 405.333333-405.333333 405.333333z" p-id="1181"></path><path d="M512 550.4L345.6 384 298.666667 426.666667l213.333333 213.333333 213.333333-213.333333-46.933333-42.666667z" p-id="1182"></path></svg>

+ 1 - 0
app/term/fold.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605398633744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1159" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M981.333333 512c0-260.266667-209.066667-469.333333-469.333333-469.333333S42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333 469.333333-209.066667 469.333333-469.333333z m-64 0c0 221.866667-179.2 405.333333-405.333333 405.333333S106.666667 733.866667 106.666667 512 285.866667 106.666667 512 106.666667s405.333333 183.466667 405.333333 405.333333z" p-id="1160"></path><path d="M512 473.6L345.6 640 298.666667 597.333333l213.333333-213.333333 213.333333 213.333333-46.933333 42.666667z" p-id="1161"></path></svg>

+ 101 - 12
app/term/note.js

@@ -229,6 +229,7 @@ function note_refresh_new() {
 	}
 }
 
+//生成channel列表
 function note_channal_list() {
 	console.log("note_channal_list start");
 	let arrSentInfo = new Array();
@@ -264,6 +265,10 @@ function note_channal_list() {
 							}
 						}
 						let strHtml = "";
+						strHtml += "<div class='channel_select'>";
+						strHtml += "<button onclick='onChannelChange()'>确定</button>";
+						strHtml += "<button onclick='onChannelMultiSelectCancel()'>取消</button>";
+						strHtml += "</div>";
 						for (const iterator of _channalData) {
 							if (_channal.indexOf(iterator.id) >= 0) {
 								strHtml += render_channal_list(iterator);
@@ -276,15 +281,7 @@ function note_channal_list() {
 						}
 
 						$("#channal_list").html(strHtml);
-						$("[channal_id]").change(function () {
-							let channal_list = new Array();
-							$("[channal_id]").each(function () {
-								if (this.checked) {
-									channal_list.push($(this).attr("channal_id"));
-								}
-							});
-							set_channal(channal_list.join());
-						});
+						set_more_button_display();
 					} catch (e) {
 						console.error(e);
 					}
@@ -304,12 +301,16 @@ function find_channal(id) {
 }
 function render_channal_list(channalinfo) {
 	let output = "";
-	output += "<div class='list_with_head'>";
 	let checked = "";
+	let selected = "noselect";
 	if (_channal.indexOf(channalinfo.id) >= 0) {
 		checked = "checked";
+		selected = "selected";
 	}
-	output += '<div><input type="checkbox" ' + checked + " channal_id='" + channalinfo.id + "'></div>";
+	output += "<div class='list_with_head " + selected + "'>";
+
+	output +=
+		'<div class="channel_select"><input type="checkbox" ' + checked + " channal_id='" + channalinfo.id + "'></div>";
 	output += "<div class='head'>";
 	output += "<span class='head_img'>";
 	output += channalinfo.nickname.slice(0, 2);
@@ -383,6 +384,21 @@ function render_channal_list(channalinfo) {
 	return output;
 }
 
+function onChannelMultiSelectStart() {
+	$(".channel_select").show();
+}
+function onChannelMultiSelectCancel() {
+	$(".channel_select").hide();
+}
+function onChannelChange() {
+	let channal_list = new Array();
+	$("[channal_id]").each(function () {
+		if (this.checked) {
+			channal_list.push($(this).attr("channal_id"));
+		}
+	});
+	set_channal(channal_list.join());
+}
 //点击引用 需要响应的事件
 function note_ref_init() {
 	$("chapter").click(function () {
@@ -504,7 +520,9 @@ function note_json_html(in_json) {
 		//句子工具栏结束
 		output += "</div>";
 	}
-
+	output += "<div class='other_tran' sent='";
+	output += in_json.book + "-" + in_json.para + "-" + in_json.begin + "-" + in_json.end;
+	output += "'></div>";
 	output += "<div class='ref'>" + in_json.ref;
 	output +=
 		"<span class='sent_no'>" +
@@ -517,9 +535,80 @@ function note_json_html(in_json) {
 		in_json.end +
 		"<span>" +
 		"</div>";
+
+	output += "<div class='bottm_tool_button ' ";
+	output += "book='" + in_json.book + "' ";
+	output += "para='" + in_json.para + "' ";
+	output += "begin='" + in_json.begin + "' ";
+	output += "end='" + in_json.end + "' ";
+	output += " style='left:0;'>";
+	output += "<div class='add_new icon_add'></div>";
+	output += "<div class='more_tran icon_expand'></div>";
+	output += "</div>";
 	return output;
 }
 
+function set_more_button_display() {
+	$(".more_tran").each(function () {
+		let book = $(this).parent().attr("book");
+		let para = $(this).parent().attr("para");
+		let begin = $(this).parent().attr("begin");
+		let end = $(this).parent().attr("end");
+		let count = 0;
+		for (const iterator of _channalData) {
+			if (iterator.final) {
+				for (const onesent of iterator.final) {
+					let id = onesent.id.split("-");
+					if (book == id[0] && para == id[1] && begin == id[2] && end == id[3] && onesent.final) {
+						if (_channal.indexOf(iterator.id) == -1) {
+							count++;
+						}
+					}
+				}
+			}
+		}
+		if (count > 0) {
+			$(this).click(function () {
+				let book = $(this).parent().attr("book");
+				let para = $(this).parent().attr("para");
+				let begin = $(this).parent().attr("begin");
+				let end = $(this).parent().attr("end");
+				let sentId = book + "-" + para + "-" + begin + "-" + end;
+				$(".other_tran[sent='" + sentId + "']").slideToggle();
+
+				$.get(
+					"../usent/get.php",
+					{
+						book: book,
+						para: para,
+						begin: begin,
+						end: end,
+					},
+					function (data, status) {
+						let arrSent = JSON.parse(data);
+						let html = "";
+						for (const iterator of arrSent) {
+							if (_channal.indexOf(iterator.channal) == -1) {
+								html += "<div>" + marked(iterator.text) + "</div>";
+							}
+						}
+						let sentId =
+							arrSent[0].book +
+							"-" +
+							arrSent[0].paragraph +
+							"-" +
+							arrSent[0].begin +
+							"-" +
+							arrSent[0].end;
+						$(".other_tran[sent='" + sentId + "']").html(html);
+					}
+				);
+			});
+		}
+		//$(this).html("[" + count + "]");
+	});
+}
+
 function note_edit_sentence(book, para, begin, end, channal) {
 	let channalInfo;
 	for (const iterator of _channalData) {

+ 64 - 1
app/term/term.css

@@ -302,8 +302,57 @@ note {
 	line-height: 1.3em;
 	display: block;
 	background-color: #80808014;
+	position: relative;
+}
+note > .bottm_tool_button {
+	position: absolute;
+	display: none;
+}
+note:hover > .bottm_tool_button {
+	display: block;
+}
+.bottm_tool_button > .add_new {
+	width: 30px;
+	height: 30px;
+	margin-top: -26px;
+	display: inline-block;
+}
+.bottm_tool_button > .more_tran {
+	width: 30px;
+	height: 30px;
+	margin-top: -26px;
+	display: inline-block;
+}
+.icon_add {
+	width: auto;
+	min-width: 18px;
+	height: auto;
+	min-height: 18x;
+	cursor: pointer;
+	background: url(add.svg);
+	background-repeat: no-repeat;
+	background-size: contain;
+}
+.icon_expand {
+	width: auto;
+	min-width: 14px;
+	height: auto;
+	min-height: 14px;
+	cursor: pointer;
+	background: url(expand.svg);
+	background-repeat: no-repeat;
+	background-size: contain;
+}
+.icon_fold {
+	width: auto;
+	min-width: 14px;
+	height: auto;
+	min-height: 14px;
+	cursor: pointer;
+	background: url(fold.svg);
+	background-repeat: no-repeat;
+	background-size: contain;
 }
-
 .bg_color_1 {
 	background-color: #ebebeb66;
 }
@@ -370,3 +419,17 @@ note:hover .note_tool_bar {
 .note_tool_context:hover .icon {
 	fill: (--link-hover-color);
 }
+
+.channel_select {
+	display: none;
+}
+#channal_list .selected {
+	background: linear-gradient(to right, #6afdb033, #ebebeb66);
+	padding: 5px;
+	border-radius: 5px;
+}
+#channal_list .noselect {
+	background-color: unset;
+	padding: 5px;
+	border-radius: 5px;
+}