Ver código fonte

字典手机模式

visuddhinanda 5 anos atrás
pai
commit
0c10ed9cdd

+ 37 - 20
app/dict/css/style.css

@@ -1,29 +1,46 @@
 #dict_ref_search_result {
-    margin: 4em 5px 5px 1em;
-    width: 100%;
-    padding: 1.5em 10px 0 10px;
+	margin: 4em 5px 5px 1em;
+	width: 100%;
+	padding: 1.5em 10px 0 10px;
 }
-.dict_word .pali{
-    font-size: 110%;
-    font-weight: 700;
+.dict_word .pali {
+	font-size: 110%;
+	font-weight: 700;
 }
-.dict_word .dict{
-    font-size: 100%;
-    font-style: normal;
+.dict_word .dict {
+	font-size: 100%;
+	font-style: normal;
 }
 
-.dict_word .mean{
-    font-size:90%;
-    margin: 2px 0;
-    line-height: 130%;
-    font-weight: 300;
-    display: inline-block;
-    font-style: normal;
- 
+.dict_word .mean {
+	font-size: 90%;
+	margin: 2px 0;
+	line-height: 130%;
+	font-weight: 300;
+	display: inline-block;
+	font-style: normal;
 }
 
-.dict_word input,select,textarea{
-	background-color:white;
-    color:rgb(0, 0, 0);
+.dict_word input,
+select,
+textarea {
+	background-color: white;
+	color: rgb(0, 0, 0);
+}
+
+#dict_ref_search_input {
+	margin-left: 0.5em;
+	width: 100%;
+	font-size: 140%;
+	padding: 0.6em;
+	color: var(--btn-hover-bg-color);
+	background-color: var(--btn-color);
+}
+#left_menu_button {
+	display: none;
+}
 
+#trubo_split {
+	height: fit-content;
+	font-size: 1.2em;
 }

+ 43 - 0
app/dict/css/style_mobile.css

@@ -5,7 +5,36 @@
 body {
 
 }
+#dict_list_shell{
+	display:none;
+	position: fixed;
+    top: 0;
+	width:100%;
+	height:100%;
+	background-color:#020202d9;
+	z-index: 100;
+	padding-top: 60px;
+}
+#dict_list{
+	width:300px;	
+	text-align:left;
+    -webkit-transition-duration: 0.4s;
+	transition-duration: 0.4s;		
+}
+.dict_list_off{
+	-webkit-transform:translateX(-100%);
+	-moz-transform:translateX(-100%);
+	transform:translateX(-100%);
+}
+.dict_list_on{
+	-webkit-transform:translateX(0);
+	-moz-transform:translateX(0);
+	transform:translateX(0);
+}
 
+#dict_user{
+	display:none;
+}
 .left_nav_bar{
 	display:none;
 }
@@ -87,4 +116,18 @@ body {
 #para_res_list_header{
 	display:block;
 	padding: 8px;
+}
+
+#dict_ref_search_input {
+	margin-left: 0.1em;
+	font-size: 120%;
+	padding: 0.3em;
+}
+
+#left_menu_button{
+	display: block;
+}
+
+#trubo_split {
+	font-size: unset;
 }

+ 62 - 54
app/dict/dict.js

@@ -20,17 +20,19 @@ function dict_search(word) {
 	}
 	word = standardize(word);
 
-	$.get("dict_lookup.php",
+	$.get(
+		"dict_lookup.php",
 		{
 			op: "search",
-			word: word
+			word: word,
 		},
 		function (data, status) {
 			$("#dict_search_result").html(data);
 			$("#dict_list").html($("#dictlist").html());
 			$("#dictlist").html("");
 			guide_init();
-		});
+		}
+	);
 }
 function standardize(word) {
 	let word_end = word.slice(-1);
@@ -38,26 +40,29 @@ function standardize(word) {
 		word_end = "ṃ";
 		word = word.slice(0, -1) + word_end;
 	}
-	return (word);
+	return word;
 }
 
 function dict_pre_search(word) {
-	if (dict_pre_searching == true) { return; }
+	if (dict_pre_searching == true) {
+		return;
+	}
 	dict_pre_searching = true;
 	dict_pre_search_curr_word = word;
 
-	$.get("dict_lookup.php",
+	$.get(
+		"dict_lookup.php",
 		{
 			op: "pre",
-			word: word
+			word: word,
 		},
 		function (data, status) {
 			dict_pre_searching = false;
 			dict_pre_search_curr_word = "";
 			$("#pre_search_word_content").html(data);
 			$("#pre_search_result").css("display", "block");
-		});
-
+		}
+	);
 }
 
 function dict_pre_word_click(word) {
@@ -76,39 +81,33 @@ function dict_input_onfocus() {
 	}
 }
 
-
 function dict_input_keyup(e, obj) {
-	var keynum
-	var keychar
-	var numcheck
+	var keynum;
+	var keychar;
+	var numcheck;
 
 	if ($("#dict_ref_search_input").val() == "") {
 		dict_show_history();
 		return;
 	}
-	if (window.event) // IE
-	{
-		keynum = e.keyCode
+	if (window.event) {
+		// IE
+		keynum = e.keyCode;
+	} else if (e.which) {
+		// Netscape/Firefox/Opera
+		keynum = e.which;
 	}
-	else if (e.which) // Netscape/Firefox/Opera
-	{
-		keynum = e.which
-	}
-	var keychar = String.fromCharCode(keynum)
+	var keychar = String.fromCharCode(keynum);
 	if (keynum == 13) {
 		dict_search(obj.value);
-	}
-	else {
+	} else {
 		dict_input_split(obj.value);
 		if (obj.value.indexOf("+") == -1) {
-
 			dict_pre_search(obj.value);
-		}
-		else {
+		} else {
 			dict_input_split(obj.value);
 			$("#pre_search_result").hide();
 		}
-
 	}
 }
 
@@ -120,13 +119,12 @@ function dict_input_split(word) {
 			//strParts += "<div class='part_list'><a onclick='dict_search(\"" + wordParts[i] + "\")'>" + wordParts[i] + "</a></div>";
 			strParts += "<part><a onclick='dict_search(\"" + wordParts[i] + "\")'>" + wordParts[i] + "</a></part>";
 		}
-		strParts = "<div class='dropdown_ctl'><div class='content'><div class='main_view' >" + strParts + "</div></div></div>";
+		strParts =
+			"<div class='dropdown_ctl'><div class='content'><div class='main_view' >" + strParts + "</div></div></div>";
 		$("#input_parts").html(strParts);
-	}
-	else {
+	} else {
 		$("#input_parts").html("");
 	}
-
 }
 
 function dict_show_history() {
@@ -136,7 +134,7 @@ function dict_show_history() {
 	var arrHistory = localStorage.searchword.split(",");
 	var strHistory = "";
 	if (arrHistory.length > 0) {
-		strHistory += "<a onclick=\"cls_word_search_history()\">清空历史记录</a>";
+		strHistory += '<a onclick="cls_word_search_history()">清空历史记录</a>';
 	}
 	for (var i = 0; i < arrHistory.length; i++) {
 		var word = arrHistory[i];
@@ -150,15 +148,14 @@ function dict_show_history() {
 function cls_word_search_history() {
 	localStorage.searchword = "";
 	$("#dict_ref_search_result").html("");
-
 }
 
-
 function trubo_split() {
 	$("#pre_search_result").hide();
-	$.post("split.php",
+	$.post(
+		"split.php",
 		{
-			word: $("#dict_ref_search_input").val()
+			word: $("#dict_ref_search_input").val(),
 		},
 		function (data, status) {
 			try {
@@ -168,15 +165,20 @@ function trubo_split() {
 					for (const part of result[0]["data"]) {
 						html += '<div class="dropdown_ctl">';
 						html += '<div class="content">';
-						html += '<div class="main_view">' + "<part>" + part[0].word.replace(/\+/g, "</part><part>") + "</part>" + '</div>';
-						html += '<div class="more_button">' + part.length + '</div>';
-						html += '</div>';
+						html +=
+							'<div class="main_view">' +
+							"<part>" +
+							part[0].word.replace(/\+/g, "</part><part>") +
+							"</part>" +
+							"</div>";
+						html += '<div class="more_button">' + part.length + "</div>";
+						html += "</div>";
 						html += '<div class="menu" >';
 						for (const one_part of part) {
-							html += '<div class="part_list">' + one_part.word + '</div>';
+							html += '<div class="part_list">' + one_part.word + "</div>";
 						}
-						html += '</div>';
-						html += '</div>';
+						html += "</div>";
+						html += "</div>";
 					}
 				}
 				html += "</div>";
@@ -184,8 +186,7 @@ function trubo_split() {
 
 				$(".more_button").click(function () {
 					$(this).parent().siblings(".menu").toggle();
-				}
-				);
+				});
 
 				$(".part_list").click(function () {
 					let html = "<part>" + $(this).text().replace(/\+/g, "</part><part>") + "</part>";
@@ -194,17 +195,24 @@ function trubo_split() {
 					$("part").click(function () {
 						dict_search($(this).text());
 					});
-				}
-				);
+				});
 
 				$("part").click(function () {
 					dict_search($(this).text());
-				}
-				);
-
-			}
-			catch (e) {
+				});
+			} catch (e) {}
+		}
+	);
+}
 
-			}
-		});
-}
+function setNaviVisibility(strObjId = "") {
+	var objNave = document.getElementById("dict_list");
+	var objblack = document.getElementById("dict_list_shell");
+	if (strObjId == "") {
+		objblack.style.display = "none";
+		objNave.className = "dict_list_off";
+	} else {
+		objblack.style.display = "block";
+		objNave.className = "dict_list_on";
+	}
+}

+ 1 - 1
app/dict/dict_lookup.php

@@ -156,7 +156,7 @@ switch($op){
 		echo "</div>";
 		break;
 	case "search":
-		echo "<div id='dict_list'></div>";
+		echo "<div id='dict_list_shell' onclick='setNaviVisibility()'><div id='dict_list' class='dict_list_off'></div></div>";
 		echo "<div id='dict_ref'>";	
 		$dict_list_a = [];
 		//社区字典开始

+ 10 - 0
app/dict/icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" >
+	<symbol id="icon_toc" viewBox="0 0 32 32">
+		<defs>
+			<style>.a{fill:#cdcdcd;}</style>
+		</defs>
+		<g transform="translate(-4 -4)">
+			<path class="a" d="M6.881,16.04a1.764,1.764,0,1,0,0,3.52,1.764,1.764,0,1,0,0-3.52Zm0-7.04A1.821,1.821,0,0,0,5,10.76a1.821,1.821,0,0,0,1.881,1.76,1.821,1.821,0,0,0,1.881-1.76A1.821,1.821,0,0,0,6.881,9Zm0,14.08a1.764,1.764,0,1,0,0,3.52,1.764,1.764,0,1,0,0-3.52Zm3.762,2.933H28.2V23.667H10.643Zm0-7.04H28.2V16.627H10.643Zm0-9.387v2.347H28.2V9.587Z" transform="translate(3 2.2)"/>
+		</g>
+	</symbol>
+</svg>

+ 20 - 9
app/dict/index.php

@@ -5,7 +5,10 @@ require_once "../pcdl/html_head.php";
 <body>
 	<a name="toc_root"></a>
 	<?php
-	require_once("../pcdl/head_bar.php");
+	if(!(isset($_GET["inline"]) && $_GET["inline"]=='1')){
+		require_once("../pcdl/head_bar.php");
+	}
+	
 	?>
 
 	<style>
@@ -212,21 +215,29 @@ require_once "../pcdl/html_head.php";
 			justify-content: center;
 		}
 	</style>
-	<!-- <link type="text/css" rel="stylesheet" href="css/style_mobile.css" media="screen and (max-width:800px)">-->
+	<link type="text/css" rel="stylesheet" href="./css/style.css" >
+	<link type="text/css" rel="stylesheet" href="./css/style_mobile.css" media="screen and (max-width:800px)">
 
 
 	<!-- tool bar begin-->
 	<div id='search_toolbar' class="search_toolbar">
 		<div style="display:flex;justify-content: space-between;">
-			<div style="flex:2;">
-				<div style="width: fit-content; margin-right: 0; margin-left: auto; margin-top: 1em; margin-bottom: 1em;">
-					<guide gid="dict_search_input"></guide>
-				</div>
+			<div id="left_menu_button">
+				<button id="left_toc" type="button" class="icon_btn" onclick="setNaviVisibility('table_of_content')" title="Dict List">
+				<svg class="icon">
+					<use xlink:href="./icon.svg#icon_toc"></use>
+				</svg>
+				<span class="icon_notify" id="icon_notify_table_of_content">
+				</span>
+				</button>
+			</div>
+			<div >
+				<guide gid="dict_search_input"></guide>
 			</div>
 			<div style="flex:6;">
 				<div>
 					<div>
-						<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="dict_input_keyup(event,this)" style="    margin-left: 0.5em;width: 40em;max-width: 100%;font-size:140%;padding: 0.6em;color: var(--btn-hover-bg-color);background-color: var(--btn-color);" onfocus="dict_input_onfocus()" />
+						<input id="dict_ref_search_input" type="input" placeholder="<?php echo $_local->gui->search; ?>" onkeyup="dict_input_keyup(event,this)" style="" onfocus="dict_input_onfocus()" />
 					</div>
 					<div id="word_parts">
 						<div id="input_parts" style="font-size: 1.1em;padding: 2px 1em;"></div>
@@ -244,8 +255,8 @@ require_once "../pcdl/html_head.php";
 					</div>
 				</div>
 			</div>
-			<span style="flex:2;">
-				<button onclick="trubo_split()" style="height: fit-content;border: 1px solid var(--btn-border-color);background: var(--btn-color);border-radius: 4px;font-size: 1.2em;padding: 0.5em;">
+			<span style="display:flex;">
+				<button id="trubo_split" onclick="trubo_split()" >
 					<?php echo $_local->gui->turbo_split; //强力拆分
 					?>
 				</button>

+ 0 - 0
app/dict/mobile.css


+ 2 - 1
app/public/casesuf.inc

@@ -3134,7 +3134,8 @@ array("oti","o",".2p.$.sg.$.aor."),
 array("oti","ā",".2p.$.sg.$.aor."),
 array("oti","ttha",".2p.$.pl.$.aor."),
 array("oti","se",".2p.$.sg.$.aor."),
-array("oti","vhaṃ",".2p.$.pl.$.aor.")
+array("oti","vhaṃ",".2p.$.pl.$.aor."),
+array("ati","ittha",".2p.$.pl.$.aor.")