Merge pull request #9 from jeffreyxuan/master

ToneOZ 澳聲通字典工具整合:加入滑鼠圈選查詢功能
ButTaiwan · Jun 2, 2021 · 782cdc8 · 782cdc8
2 parents b82cb66 + edeb275
commit 782cdc8
Show file tree

Hide file tree

Showing 7 changed files with 1,150 additions and 1,443 deletions.
diff --git a/ime/README.md b/ime/README.md
@@ -26,6 +26,7 @@
 ## 字典
 
 在按下 「開始」 後的編輯模式中，點選右下角 「字典」 可開啟 《國語字典簡編本》 輔助查詢字義及標準讀音。
+請用滑鼠點擊或圈選任意字詞，字典工具會即時顯示查詢結果。
 
 ## 協作邀請 (詞庫)
 
@@ -66,9 +67,9 @@ poyin_db.txt 收錄了所有 phonetic/phonic_table_Z.txt 裡所有多音字的
 
 ## 協作邀請 (字典)
 
-本工具字典檔資料來自於教育部國語辭典公眾授權網 《<a href="https://language.moe.gov.tw/001/Upload/Files/site_content/M0001/respub/dict_concised_download.html">國語辭典簡編本</a>》，採用「CC BY-ND 3.0」授權。
+本工具字典檔資料來自於教育部國語辭典公眾授權網 《<a href="https://language.moe.gov.tw/001/Upload/Files/site_content/M0001/respub/dict_concised_download.html">國語辭典簡編本</a>》，採用 CC BY-ND 3.0 授權。
 
-字典工具來自於開源字典架構 「<a href="https://github.com/jeffreyxuan/ToneOZDic">ToneOZDic澳聲通字典</a>」 ，採用 MIT 授權。 此字典工具支援使用者自行製作字典檔，請參考 <a href="https://github.com/jeffreyxuan/ToneOZDic/blob/main/README.md">字典檔生成器使用說明</a>。
+字典工具來自開源的字典架構 <a href="https://github.com/jeffreyxuan/ToneOZDic">ToneOZ 澳聲通字典</a> ，採用 MIT 授權。 此字典工具支援使用者自行製作字典檔，請參考 <a href="https://github.com/jeffreyxuan/ToneOZDic/blob/main/README.md">ToneOZ Dictionary 字典檔生成器使用說明</a>。
 
 
 

diff --git a/ime/ime.js b/ime/ime.js
@@ -1,6 +1,7 @@
 var text = [];
 var curr = -1;
 var vsbase = 0xe01e0;
+window.textinfo = {};
 
 function chr(uni) {
 	if (String.fromCodePoint) return String.fromCodePoint(uni);	// ES6
@@ -21,25 +22,27 @@ function match(c, i, p, j, onlydic) {
 	var phrase = p.replace("*",c);
 	for (var x=0; x<p.length; x++) {
 		var a = i-pos+x;
-		var spobj = $('#sp' + a);
-		var phraseattr = spobj.attr("phrase");
-		if(phraseattr === undefined){
-			phraseattr = phrase;
-		} else {
-			var phrasearr = phraseattr.split(",");
-			if(phrasearr.indexOf(phrase)<0){
-				phrasearr.push(phrase);
-			}
-			phraseattr = phrasearr.join(",");
-		}
-
-		var spDom = spobj.attr({
-			"phrase":phraseattr
-		});
+		var spDom = $('#sp' + a);
+
+		// update ivs
 		if (p.charAt(x) == '*' && !onlydic) {
 			text[a] = c + (j > 0 ? chr(vsbase + j*1) : '');
 			spDom.text(text[a]).addClass('auto');
 		}
+
+		// update phrase for dic
+		if(!textinfo[a]){
+			textinfo[a] = {};
+		}
+		var ivsinfo = textinfo[a];
+		var phrasearr = ivsinfo.phrasearr;		
+		var phrasedata = {phrase:phrase,x:x,a:a};
+		if(phrasearr === undefined){
+			phrasearr = [phrasedata];
+		} else {
+			phrasearr.push(phrasedata);
+		} 
+		ivsinfo.phrasearr = phrasearr;
 	}
 }
 
@@ -109,6 +112,7 @@ function setEditorText(t) {
 	// [\ud800-\udfff] means surrogate pairs of UTF-16
 	// Here I wrote /(.|\n)/g because MS Edge doesn't support /(.)/s.
 	text = t.replace(/(.|\n)/g, "\x01$1").replace(/\x01([\ud800-\udfff])/g, "$1").split(/\x01/);
+	textinfo = {};
 
 	var editor = $('#editor');
 	$('#editor').empty();

diff --git a/ime/tzdic/tzdic.html b/ime/tzdic/tzdic.html
@@ -5,24 +5,24 @@
 Website : https://toneoz.com (Pinyin Zhuyin Graphical Editor)
 Github	: https://github.com/jeffreyxuan/ToneOZDic
 License	: MIT License. Free for both commercial and personal uses
-Usage example (with demo tzdic folder):
+Usage example :
 	tzdic.html?q=[{"id":1,"q":"和"},{"id":1,"q":"樂"}]
 -->
-<html lang="zh-hant-TW">
+<html lang="zh-hant-TW" style="height:100%;">
 <head>
 <meta charset="utf-8">
 <title>ToneOZ 澳聲通字典</title>
 <style>
 body{
 	color:#fff;
+	background-image: linear-gradient(45deg, rgba(16, 16, 16, 0.7) 0%, rgba(0,0,0,0.9) 40%,rgba(16,16,16,0.7) 100%);
 }
 .diccard{
 	padding: 5px 0 5px 0;
 	border-bottom:2px solid #fff;
 }
 .dicq{
 	font-size:2em;
-
 }
 .dicz{
 	font-size:1.5em;

diff --git a/ime/tzdic/tzdicui.js b/ime/tzdic/tzdicui.js
@@ -16,6 +16,7 @@ if(!window.tzdicidx){
 }
 
 function TZDicUI(){	
+	let thisObj = this;
 	// ToneOZDic Parameters
 	let tzparam = {
 		objInput : null 		
@@ -34,6 +35,8 @@ function TZDicUI(){
 		// Custeom lookup table to specify the IVS fonts (Ideographic Variation Sequences) displayed in the dictionary entry iframe
 		, strCssIframe : tzstrCssIframe
 		// Custom css object to decorate the objIframe outter position
+		, intMaxPhrase : 16
+		// Max phrases per query
 		, strVer : ""
 		// Version control string
 	};
@@ -73,10 +76,13 @@ function TZDicUI(){
 
 		// events init
 		tzparam.objInput.on('input selectionchange propertychange keydown click focus', function(event) {
-			tzUpdateEvent({event:event});
+			thisObj.tzUpdateEvent({event:event});
+		});
+		tzparam.objInput.on('DOMSubtreeModified', function(event) {
+			thisObj.tzUpdateEvent({event:event});
 		});			
 		$(document).on('mouseup', function(event) {
-			tzUpdateEvent({event:event});
+			thisObj.tzUpdateEvent({event:event});
 		});	
 
 		return tzparam;
@@ -98,82 +104,85 @@ function TZDicUI(){
 		return hash;
 	}
 
-	window.tzUpdateEvent = function(dicParam){		
-		if(tzparam.fnGetPhrases){
-			let phrasesInfo = tzparam.fnGetPhrases(dicParam);
-			if(!phrasesInfo.phrases){
-				// not a valid query
-				return;
+	let tmrUpdateEvent = null;
+	this.tzUpdateEvent = function(dicParam){	
+		if(tmrUpdateEvent){
+			clearTimeout(tmrUpdateEvent);
+			tmrUpdateEvent = null;
+		}	
+		tmrUpdateEvent = setTimeout(function(){
+			if(tzparam.fnGetPhrases){
+				let phrasesInfo = tzparam.fnGetPhrases(dicParam);
+				if(!phrasesInfo.phrases){
+					// not a valid query
+					return;
+				}
+				Object.assign(dicParam, phrasesInfo);
 			}
-			Object.assign(dicParam, phrasesInfo);
-		}
-		UpdateDic(dicParam);
+			UpdateDic(dicParam);
+		},200);
 	}
 
-	let tmrUpdateDic = null;
 	function UpdateDic(dicparam){				
-		if(tmrUpdateDic){
-			clearTimeout(tmrUpdateDic);
-			tmrUpdateDic = null;
-		}		
 		if(!dicparam){
 			dicparam = {};
 		}
 		let {event, phrases, rawstr} = dicparam;
-		tmrUpdateDic = setTimeout(function(){
-			let qArray = [];
-			let tmpq, id, hash, isChinese, objSrc;
+		let qArray = [];
+		let tmpq, id, hash, isChinese, objSrc;
 
-			if(!phrases && !rawstr){
-				if(event && event.target){
-					objSrc = $(event.target);
-				} else {
-					objSrc = tzparam.objInput;
-				}
-				// get selected string from a textarea
-				rawstr = GetSelectedString(objSrc);
+		if(!phrases && !rawstr){
+			if(event && event.target){
+				objSrc = $(event.target);
+			} else {
+				objSrc = tzparam.objInput;
 			}
-			if(rawstr){
-				rawstr = rawstr.trim();
-				// query each words in the selected string
-				let rawstrarr = splitx(rawstr);
-				if(!phrases){
-					phrases = [];
-				}
-				phrases = phrases.concat(rawstrarr);
-
-				// add selected string as the first query phrase
-				if(phrases.indexOf(rawstr)<0){
-					qArray.push(GetQuery({
-						phrase : rawstr
-					}));				
-				}
+			// get selected string from a textarea
+			rawstr = GetSelectedString(objSrc);
+		}
+		if(rawstr){
+			rawstr = rawstr.trim();
+			// query each words in the selected string
+			let rawstrarr = splitx(rawstr);
+			if(!phrases){
+				phrases = [];
 			}
+			phrases = phrases.concat(rawstrarr);
 
-			// get query parameters for ToneOZDic
-			for(let idxPhrase in phrases){
-				let phrase = phrases[idxPhrase];
+			// add selected string as the first query phrase
+			if(phrases.indexOf(rawstr)<0){
 				qArray.push(GetQuery({
-					phrase : phrase
-				}));
-			}
-
-			let dicURLParam = JSON.stringify(qArray);
-
-			// do dictionary query
-			let dicURLBase = tzDicEntryHTML + "?" 
-				+ (tzparam.strVer ? "v="+tzparam.strVer+"&" : "");
-			let URL = dicURLBase+"q="+dicURLParam;			
-			if(tzparam.pathCssDic){
-				URL += "&css=" + encodeURIComponent(tzparam.pathCssDic+".css");
+					phrase : rawstr
+				}));				
 			}
-			if(tzparam.pathJsIVSLookup){
-				URL += "&ivs=" + encodeURIComponent(tzparam.pathJsIVSLookup+".js");
+		}
+
+		// get query parameters for ToneOZDic
+		for(let idxPhrase in phrases){
+			let phrase = phrases[idxPhrase];
+			if(qArray.length >= tzparam.intMaxPhrase){
+				break;
 			}
-			tzparam.objIframe.attr("src", URL).show();
-			tmrUpdateDic = null;
-			console.log(URL);
-		},200);
+			qArray.push(GetQuery({
+				phrase : phrase
+			}));			
+		}
+
+		let dicURLParam = JSON.stringify(qArray);
+
+		// do dictionary query
+		let dicURLBase = tzDicEntryHTML + "?" 
+			+ (tzparam.strVer ? "v="+tzparam.strVer+"&" : "");
+		let URL = dicURLBase+"q="+dicURLParam;			
+		if(tzparam.pathCssDic){
+			URL += "&css=" + encodeURIComponent(tzparam.pathCssDic+".css");
+		}
+		if(tzparam.pathJsIVSLookup){
+			URL += "&ivs=" + encodeURIComponent(tzparam.pathJsIVSLookup+".js");
+		}
+		tzparam.objIframe.attr("src", URL).show();
+		tmrUpdateDic = null;
+		//console.log(URL);
 	};	
 
 	function GetQuery(param){