window.pageXOffset+document.documentElement.clientWidth&&(q=window.pageXOffset+document.documentElement.clientWidth-l);var s=0;if(s=document.documentElement.clientHeight>document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight,0===s&&(s=document.documentElement.clientHeight),d.top>=150){var t=s-o+10,u=t+1;k={left:q,bottom:t,arrowLeft:r,arrowBottom:u}}else k={left:q,top:o+d.height+12,arrowLeft:r,arrowTop:o+d.height+1};g.style.left=k.left+"px",h.style.left=k.arrowLeft+"px";var v,w,x=document.querySelectorAll(".ChaZD-arrow-outer"),y=document.querySelectorAll(".ChaZD-arrow-inner");if(k.bottom)for(g.style.bottom=k.bottom+"px",h.style.bottom=k.arrowBottom+"px",v=0,w=x.length;w>v;v++)x[v].classList.add("ChaZD-arrow-outer-down"),y[v].classList.add("ChaZD-arrow-inner-down");if(k.top)for(g.style.top=k.top+"px",h.style.top=k.arrowTop+"px",v=0,w=x.length;w>v;v++)x[v].classList.add("ChaZD-arrow-outer-up"),y[v].classList.add("ChaZD-arrow-inner-up");e.autoHide&&(c=setTimeout(function(){document.querySelector(".ChaZD-result-container")&&document.querySelector(".ChaZD-arrow-main")&&(document.documentElement.removeChild(g),document.documentElement.removeChild(h))},1e3*e.showDuration))},i=function(){var a=document.createElement("div");a.classList.add("ChaZD-arrow-main");var b=document.createElement("div");b.setAttribute("class","ChaZD-arrow-outer");var c=document.createElement("div");return c.setAttribute("class","ChaZD-arrow-inner"),a.appendChild(b),a.appendChild(c),a},j=function(b,c){var d=document.createElement("div");d.classList.add("ChaZD-result-container"),d.setAttribute("data-text",b);var e=document.createElement("div");return e.setAttribute("id","ChaZD-searching"),e.innerHTML="ψ(._. )>划词君正在翻译。。。",d.appendChild(e),chrome.runtime.sendMessage({queryWord:b,source:"select",useHttps:c},function(b){var c=b;if(e.innerHTML="","query success"===c.validMessage){d.innerHTML=c.titleBlock;var f=d.querySelector(".voice-container");a(f);var g=document.createElement("div");c.basicBlock?(g.innerHTML=c.basicBlock,d.appendChild(g)):c.haveTranslation?d.querySelector(".title-translation").style.display="block":c.haveWebTranslation?(g.innerHTML=c.webBlock,d.appendChild(g),d.querySelector(".web-title").innerHTML="网络释义"):d.innerHTML="╮(╯▽╰)╭划词君无能为力啊
还是右键问问谷歌君吧=>"}else d.innerHTML=20==c.errorCode?"这段文字太长，词典君无能为力了（┬_┬）
试试短一点的吧~
":40==c.errorCode?"对不起，这段文字太高深了，请饶过词典君吧（┬_┬）
":"词典君罢工啦（┬_┬）
是不是网络不太好？
稍后再试一次吧
"}),d},k=["ChaZD-result-container","title-container","title-word","title-translation","basic-container","phonetic-container","explains-container","explains-container","explains-list","property-container","explains-item","voice-container","us-phonetic-container","uk-phonetic-container","web-explains-container","web-explains-list","web-key","explains-item-value","web-value"];document.documentElement.addEventListener("mousedown",function(a){for(var b in k)if(a.target.classList.contains(k[b]))return;clearTimeout(c);var d,e,f=document.querySelectorAll(".ChaZD-result-container"),g=document.querySelectorAll(".ChaZD-arrow-main");if(f)for(d=0,e=f.length;e>d;d++)document.documentElement.removeChild(f[d]);if(g)for(d=0,e=g.length;e>d;d++)document.documentElement.removeChild(g[d]);chrome.storage.sync.set({currentWord:""})}),window.addEventListener("resize",function(){var a=document.querySelector(".ChaZD-result-container"),b=document.querySelector(".ChaZD-arrow-main");a&&document.documentElement.removeChild(a),b&&document.documentElement.removeChild(b)});var l=function(a){if("noSelect"!==e.selectMode){if("useCtrl"===e.selectMode)if("ctrl"===e.toggleKey){if(!a.ctrlKey&&!a.metaKey)return void(d.again=0)}else if("alt"===e.toggleKey){if(!a.altKey)return void(d.again=0)}else if("shift"===e.toggleKey&&!a.shiftKey)return void(d.again=0);f(a)}},m=null,n=function(a){e.linkQuery&&(m=a.target,a.shiftKey&&p(a))},o=function(a){e.linkQuery&&(m&&m.classList.contains("ChaZD-link")&&q(a,!0),m=null)},p=function(a){m&&a.shiftKey&&(r(a),m.setAttribute("ChaZD-href",m.getAttribute("href")),m.removeAttribute("href"),m.classList.add("ChaZD-link"))},q=function(a,b){m&&(b||16==a.keyCode)&&(m.setAttribute("href",m.getAttribute("ChaZD-href")),m.removeAttribute("ChaZD-href"),m.classList.remove("ChaZD-link"))},r=function(a){e.linkQuery&&a.shiftKey&&window.getSelection().empty()};document.documentElement.addEventListener("mouseup",l),document.documentElement.addEventListener("mouseover",function(a){("A"===a.target.nodeName||"a"===a.target.nodeName)&&n(a)}),document.documentElement.addEventListener("mouseout",function(a){("A"===a.target.nodeName||"a"===a.target.nodeName)&&o(a)}),document.documentElement.addEventListener("keydown",p),document.documentElement.addEventListener("keyup",q),document.documentElement.addEventListener("selectstart",l)}();
--------------------------------------------------------------------------------
/public/js/utility.min.js:
--------------------------------------------------------------------------------
1 | function isEmpty(a){for(var b in a)return!1;return!0}function fmt(){var a=arguments;return a[0].replace(/#{(.*?)}/g,function(b,c){return function(a,b){var c=/\d+/.test(b[0])?parseInt(b[0]):b[0];return b.length>1?arguments.callee(a[c],b.slice(1)):a[c]}("object"==typeof a[1]?a[1]:a,c.split(/\.|\[|\]\[|\]\./))})}function trim(a){return a.replace(/(^\s*)|(\s*$)/g,"")}var api={key:1116151381,keyfrom:"youdaocidian"},urls={dict:"http://fanyi.youdao.com/openapi.do?keyfrom="+api.keyfrom+"&key="+api.key+"&type=data&doctype=json&version=1.1&q=",voice:"http://dict.youdao.com/dictvoice?audio=",dictHttps:"https://fanyi.youdao.com/openapi.do?keyfrom="+api.keyfrom+"&key="+api.key+"&type=data&doctype=json&version=1.1&q=",voiceHttps:"https://dict.youdao.com/dictvoice?audio="},settings={selectMode:"mouseSelect",showPosition:"near",toggleKey:"ctrl",showTips:!0,currentWord:"",linkQuery:!1,autoAudio:!1,autoHide:!1,showDuration:3,defaultVoice:1,useHttps:!1},frame={titleContainer:'#{1}#{2}
',titleWord:'#{1}#{2}
',voiceContainer:'',titleTranslation:'#{1}
',basicContainer:'#{1}#{2}
',phoneticContainer:'#{1}#{2}
',ukPhoneticContainer:'#{1}
',usPhoneticContainer:'#{1}
',explainsContainer:'#{1}
',explainsList:'',explain:'#{1}#{2}',propertyContainer:'#{2}',webExplainsContainer:'',webExplainsList:'',webExplain:'#{1}#{2}'};
--------------------------------------------------------------------------------
/screenshoot/screenshoot1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/screenshoot/screenshoot1.jpg
--------------------------------------------------------------------------------
/screenshoot/screenshoot2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/screenshoot/screenshoot2.jpg
--------------------------------------------------------------------------------
/screenshoot/screenshoot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/screenshoot/screenshoot3.png
--------------------------------------------------------------------------------
/screenshoot/screenshoot4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/screenshoot/screenshoot4.png
--------------------------------------------------------------------------------
/src/assets/fonts/YDdict-Icon-font.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/src/assets/fonts/YDdict-Icon-font.eot
--------------------------------------------------------------------------------
/src/assets/fonts/YDdict-Icon-font.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/fonts/YDdict-Icon-font.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/src/assets/fonts/YDdict-Icon-font.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/YDdict-Icon-font.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ververcpp/ChaZD/f629959f7d24b8795b6ecf812857e7e183ef31f9/src/assets/fonts/YDdict-Icon-font.woff
--------------------------------------------------------------------------------
/src/inPage.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @-webkit-keyframes fade-in {
3 | from {
4 | opacity: 0;
5 | }
6 | to {
7 | opacity: 1;
8 | }
9 | }
10 | @-moz-keyframes fade-in {
11 | from {
12 | opacity: 0;
13 | }
14 | to {
15 | opacity: 1;
16 | }
17 | }
18 | @-o-keyframes fade-in {
19 | from {
20 | opacity: 0;
21 | }
22 | to {
23 | opacity: 1;
24 | }
25 | }
26 | @keyframes fade-in {
27 | from {
28 | opacity: 0;
29 | }
30 | to {
31 | opacity: 1;
32 | }
33 | }
34 | @-webkit-keyframes fade-out {
35 | from {
36 | opacity: 1;
37 | }
38 | to {
39 | opacity: 0;
40 | }
41 | }
42 | @-moz-keyframes fade-out {
43 | from {
44 | opacity: 1;
45 | }
46 | to {
47 | opacity: 0;
48 | }
49 | }
50 | @-o-keyframes fade-out {
51 | from {
52 | opacity: 1;
53 | }
54 | to {
55 | opacity: 0;
56 | }
57 | }
58 | @keyframes fade-out {
59 | from {
60 | opacity: 1;
61 | }
62 | to {
63 | opacity: 0;
64 | }
65 | }
66 | .ChaZD-result-side {
67 | position: fixed !important;
68 | right: 10px;
69 | top: 80px;
70 | }
71 |
72 | .ChaZD-result-container {
73 | width: 250px;
74 | overflow: auto;
75 | text-shadow: none;
76 | background-color: #ffffdd;
77 | text-align: left;
78 | color: #222222;
79 | padding: 10px;
80 | margin: 0px;
81 | opacity: 1;
82 | border: 1px solid #999999;
83 | border-radius: 4px;
84 | z-index: 999997;
85 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
86 | font-weight: normal;
87 | font-size: 14px;
88 | position: absolute;
89 | text-decoration: none;
90 | line-height: normal;
91 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
92 | -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
93 | -webkit-animation: fade-in 0.3s ease;
94 | -moz-animation: fade-in 0.3s ease;
95 | -o-animation: fade-in 0.3s ease;
96 | animation: fade-in 0.3s ease;
97 | }
98 | .ChaZD-result-container #ChaZD-searching {
99 | border: none;
100 | padding: 0;
101 | margin: 0;
102 | }
103 | .ChaZD-result-container .title-container {
104 | background-color: #ffffdd;
105 | border: none;
106 | color: #222222;
107 | display: block;
108 | max-width: 100%;
109 | }
110 | .ChaZD-result-container .title-container .title-word {
111 | position: relative;
112 | max-width: 100%;
113 | text-align: left;
114 | font-size: 18px;
115 | }
116 | .ChaZD-result-container .title-container .title-word .voice-container {
117 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcUlEQVQ4y2P4//8/AyUYQhAH3gNxA7IAIQPmo/H3g/QA8XkgFiBkwHyoYnRQABVfj88AmGZcTuuHyjlgMwBZM7IE3NlQGhQe65EN+I8Dw8MLGgYoFpFqADK/YUAMwOsFigORatFIlYRElaRMWmaiBAMAp0n+3U0kqkAAAAAASUVORK5CYII=");
118 | background-position: bottom center;
119 | background-repeat: no-repeat;
120 | cursor: pointer;
121 | opacity: 0.5;
122 | width: 16px;
123 | height: 16px;
124 | margin-left: 8px;
125 | display: inline-block;
126 | position: relative;
127 | top: 2px;
128 | }
129 | .ChaZD-result-container .title-container .title-word .voice-container:hover {
130 | opacity: 1;
131 | }
132 | .ChaZD-result-container .title-container .title-translation {
133 | display: none;
134 | color: #222222;
135 | margin-top: 10px;
136 | }
137 | .ChaZD-result-container .basic-container {
138 | background-color: #ffffdd;
139 | border: none;
140 | }
141 | .ChaZD-result-container .basic-container .phonetic-container .uk-phonetic-container, .ChaZD-result-container .basic-container .phonetic-container .us-phonetic-container {
142 | display: inline-block;
143 | color: red;
144 | margin-right: 5px;
145 | }
146 | .ChaZD-result-container .basic-container .phonetic-container .uk-phonetic-container:before {
147 | content: '英';
148 | color: #222222;
149 | font-size: 12px;
150 | margin-right: 2px;
151 | }
152 | .ChaZD-result-container .basic-container .phonetic-container .us-phonetic-container:before {
153 | content: '美';
154 | color: #222222;
155 | font-size: 12px;
156 | margin-right: 2px;
157 | }
158 | .ChaZD-result-container .basic-container .explains-container {
159 | font-size: 14px;
160 | margin-top: 10px;
161 | /*Result Block -- basic container -- explains container*/
162 | }
163 | .ChaZD-result-container .basic-container .explains-container .explains-list {
164 | list-style: none;
165 | margin: 0;
166 | padding: 0;
167 | }
168 | .ChaZD-result-container .basic-container .explains-container .explains-list .explains-item {
169 | padding: 0px;
170 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
171 | margin: 0 0 5px 0;
172 | list-style: none;
173 | font-size: 14px;
174 | background-color: transparent;
175 | }
176 | .ChaZD-result-container .basic-container .explains-container .explains-list .explains-item:before {
177 | display: none;
178 | }
179 | .ChaZD-result-container .basic-container .explains-container .explains-list .explains-item .property-container {
180 | display: block;
181 | float: left;
182 | font-weight: bold;
183 | color: #222222;
184 | margin-right: 5px;
185 | }
186 | .ChaZD-result-container .basic-container .explains-container .explains-list .explains-item .explains-item-value {
187 | display: block;
188 | overflow: hidden;
189 | }
190 | .ChaZD-result-container .basic-container .explains-container .voice-container {
191 | display: none;
192 | }
193 | .ChaZD-result-container .web-explains-container .web-title {
194 | font-weight: bold;
195 | opacity: 0.7;
196 | }
197 | .ChaZD-result-container .web-explains-container .web-explains-list {
198 | list-style: none;
199 | margin: 5px 0;
200 | padding: 0;
201 | }
202 | .ChaZD-result-container .web-explains-container .web-explains-list li .web-value {
203 | margin: 0 0 0 5px;
204 | }
205 | .ChaZD-result-container .unshow {
206 | display: none;
207 | }
208 |
209 | .ChaZD-arrow-main {
210 | position: absolute;
211 | z-index: 999997;
212 | -webkit-animation: fade-in 0.3s ease;
213 | -moz-animation: fade-in 0.3s ease;
214 | -o-animation: fade-in 0.3s ease;
215 | animation: fade-in 0.3s ease;
216 | }
217 |
218 | .ChaZD-arrow-outer-up, .ChaZD-arrow-outer-down {
219 | background: transparent;
220 | width: 0;
221 | border-left: 12px solid transparent;
222 | border-right: 12px solid transparent;
223 | position: absolute;
224 | left: 0;
225 | }
226 |
227 | .ChaZD-arrow-outer-up {
228 | border-bottom: 12px solid #999999;
229 | }
230 |
231 | .ChaZD-arrow-outer-down {
232 | border-top: 12px solid #999999;
233 | }
234 |
235 | .ChaZD-arrow-inner-up, .ChaZD-arrow-inner-down {
236 | background: transparent;
237 | width: 0;
238 | border-left: 10px solid transparent;
239 | border-right: 10px solid transparent;
240 | position: absolute;
241 | left: 2px;
242 | }
243 |
244 | .ChaZD-arrow-inner-up {
245 | border-bottom: 10px solid #ffffdd;
246 | top: 2px;
247 | }
248 |
249 | .ChaZD-arrow-inner-down {
250 | border-top: 10px solid #ffffdd;
251 | }
252 |
253 | a.ChaZD-link {
254 | text-decoration: none !important;
255 | cursor: text !important;
256 | }
257 |
258 | /*
259 | .ChaZD-result-container .voice-container::after {
260 | content: '\E803';
261 | font-family: "YDdict-Icon";
262 |
263 | -webkit-transition: color 0.2s linear;
264 | transition : color 0.2s linear;
265 | }
266 |
267 | .ChaZD-result-container .voice-container:hover {
268 | color: rgba(119, 110, 101, 1);
269 | }
270 | */
271 |
272 | /*# sourceMappingURL=inPage.css.map */
273 |
--------------------------------------------------------------------------------
/src/inPage.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["sass/inPage.scss"],
5 | "names": [],
6 | "file": "inPage.css"
7 | }
8 |
--------------------------------------------------------------------------------
/src/javascript/background.js:
--------------------------------------------------------------------------------
1 | function ChaZD(queryWord, useHttps, wordSource, sendResponse) {
2 | this.wordSource = wordSource;
3 | this.useHttps = useHttps;
4 | var url = (useHttps ? urls.dictHttps : urls.dict) + queryWord;
5 | //console.log("Query url: " + url);
6 | var queryResult = {};
7 | var self = this;
8 | var xhr = new XMLHttpRequest();
9 |
10 | xhr.open("GET", url, true);
11 | xhr.onreadystatechange = function() {
12 | if (xhr.readyState != 4) {return;}
13 | var result = JSON.parse(xhr.responseText);
14 |
15 | if (queryWord.indexOf("-") !== -1 && !self.checkErrorCode(result.errorCode).error && !self.haveTranslation(result)) {
16 | //优化使用连字符的词的查询结果
17 | new ChaZD(queryWord.replace(/-/g, " "), useHttps, wordSource, sendResponse);
18 | } else {
19 | var resultObj = self.parseResult.call(self, result);
20 | sendResponse(resultObj);
21 | }
22 | };
23 | xhr.send();
24 | }
25 |
26 | ChaZD.prototype.checkErrorCode = function (errorCode) {
27 | var response = {
28 | "message": "",
29 | "error": 0,
30 | "errorCode": 0
31 | };
32 | switch (errorCode) {
33 | case 0:
34 | response.message = "query success";
35 | break;
36 | case 20:
37 | response.message = "要翻译的文本过长";
38 | response.error = 1;
39 | response.errorCode = 20;
40 | break;
41 | case 30:
42 | response.message = "无法进行有效的翻译";
43 | response.error = 1;
44 | response.errorCode = 30;
45 | break;
46 | case 40:
47 | response.message = "不支持的语言类型";
48 | response.error = 1;
49 | response.errorCode = 40;
50 | break;
51 | case 50:
52 | response.message = "无效的key";
53 | response.error = 1;
54 | response.errorCode = 50;
55 | break;
56 | case 60:
57 | response.message = "无辞典结果";
58 | response.error = 1;
59 | response.errorCode = 60;
60 | break;
61 | default:
62 | }
63 | return response;
64 | };
65 |
66 | ChaZD.prototype.parseResult = function (result) {
67 | //console.log("Response Text: \n" + responseText);
68 | var resultObj = {};
69 | var validResult = this.checkErrorCode(result.errorCode);
70 | resultObj.haveWebTranslation = false;
71 | if (!validResult.error) {
72 | var title = this.initTitle(result);
73 | resultObj.titleBlock = title.titleBlock;
74 | resultObj.haveTranslation = this.haveTranslation(result);
75 | if (result.basic !== undefined) {
76 | var basicBlock = this.parseBasicResult(result);
77 | resultObj.basicBlock = basicBlock;
78 | }
79 |
80 | if (result.web !== undefined) {
81 | var webBlock = this.parseWebResult(result);
82 | resultObj.haveWebTranslation = true;
83 | resultObj.webBlock = webBlock;
84 | }
85 | } else {
86 | resultObj.errorCode = validResult.errorCode;
87 | }
88 | resultObj.validMessage = validResult.message;
89 |
90 | return resultObj;
91 | };
92 |
93 | ChaZD.prototype.haveTranslation = function (result) {
94 | if (this.checkErrorCode(result.errorCode).error) {
95 | return false;
96 | }
97 | var translation = result.translation;
98 | var queryWord = result.query;
99 | if (trim(queryWord.toLowerCase()) === trim(translation.toString().toLowerCase())) {
100 | return false;
101 | }
102 | return true;
103 | };
104 |
105 | ChaZD.prototype.initTitle = function (result) {
106 | var translation = result.translation;
107 | var queryWord = result.query;
108 | //console.log("[ChaZD] queryWord: %s, translation: %s.", queryWord, translation.toString());
109 | // var haveTranslation = true;
110 | // if (trim(queryWord.toLowerCase()) === trim(translation.toString().toLowerCase())) {
111 | // haveTranslation = false;
112 | // }
113 |
114 | var voiceContainer = this.initVoice(queryWord);
115 | //console.log("word length:", queryWord.length);
116 | //console.log("word source:", this.wordSource);
117 | queryWord = queryWord.length >= 50 && this.wordSource == "select" ? this.shortWord(queryWord) : queryWord;
118 |
119 | //console.log("word:", queryWord);
120 | var titleWord = fmt(frame.titleWord, queryWord, voiceContainer);
121 | var titleTranslation = fmt(frame.titleTranslation, translation.toString());
122 |
123 |
124 | return {
125 | titleBlock : fmt(frame.titleContainer, titleWord, titleTranslation, queryWord.length >=50 ? "long-text" : ""),
126 | //haveTranslation : haveTranslation
127 | };
128 | };
129 |
130 | ChaZD.prototype.shortWord = function (longWord) {
131 | return longWord.slice(0, longWord.lastIndexOf(" ", 50)).concat(" ...");
132 | };
133 |
134 | ChaZD.prototype.parseBasicResult = function (result) {
135 | var basic = result.basic;
136 | var queryWord = result.query;
137 |
138 | var phoneticBlock = this.parseBasicPhonetic(basic, queryWord);
139 | var explainsBlock = this.parseBasicExplains(basic, queryWord);
140 |
141 | var basicContainer = fmt(frame.basicContainer, phoneticBlock, explainsBlock);
142 | return basicContainer;
143 | };
144 |
145 | ChaZD.prototype.parseBasicPhonetic = function (basic, queryWord) {
146 | var ukPhonetic = basic["uk-phonetic"];
147 | var usPhonetic = basic["us-phonetic"];
148 |
149 | if (ukPhonetic !== undefined && usPhonetic !== undefined) {
150 | var ukVoice = this.initVoice(queryWord, 1);
151 | var ukPhoneticContainer = fmt(frame.ukPhoneticContainer, "[" + ukPhonetic + "]" + ukVoice);
152 |
153 | var usVoice = this.initVoice(queryWord, 2);
154 | var usPhoneticContainer = fmt(frame.usPhoneticContainer, "[" + usPhonetic + "]" + usVoice);
155 |
156 | return fmt(frame.phoneticContainer, ukPhoneticContainer, usPhoneticContainer);
157 | }
158 |
159 | return fmt(frame.phoneticContainer, "", "");
160 | };
161 |
162 | ChaZD.prototype.initVoice = function (queryWord, type) {
163 | var src = (this.useHttps ? urls.voiceHttps : urls.voice) + queryWord;
164 | if(type !== undefined) {
165 | src = src + "&type=" + type;
166 | }
167 | var title = "";
168 | if(type === 1){
169 | title = "英音";
170 | } else if (type === 2){
171 | title = "美音";
172 | } else {
173 | title = "真人发音";
174 | }
175 |
176 | return fmt(frame.voiceContainer, src, title);
177 | };
178 |
179 | ChaZD.prototype.parseBasicExplains = function (basic, queryWord) {
180 | var explains = basic.explains;
181 | var i;
182 | var explainsContent = "";
183 | for (i = 0; i < explains.length; i++) {
184 | var currentExplain = explains[i];
185 |
186 | var haveProperty = currentExplain.indexOf(". ");
187 | var property = (haveProperty !== -1) ? currentExplain.slice(0, haveProperty + 1) : "";
188 | var propertyTitle = this.parseProperty(property);
189 | var propertyContainer = fmt(frame.propertyContainer, propertyTitle, property);
190 | var explainText = (haveProperty !== -1) ? currentExplain.slice(haveProperty + 1) : currentExplain;
191 |
192 | var explain = fmt(frame.explain, propertyContainer, explainText);
193 | explainsContent += explain;
194 | }
195 |
196 | return fmt(frame.explainsContainer, fmt(frame.explainsList, explainsContent));
197 | };
198 |
199 | ChaZD.prototype.parseProperty = function (property) {
200 | var propertyText = "";
201 | switch (property) {
202 | case "adj." :
203 | propertyText = "形容词";
204 | break;
205 | case "adv." :
206 | propertyText = "副词";
207 | break;
208 | case "n." :
209 | propertyText = "名词";
210 | break;
211 | case "vi." :
212 | propertyText = "不及物动词";
213 | break;
214 | case "vt." :
215 | propertyText = "及物动词";
216 | break;
217 | case "prep." :
218 | propertyText = "介词";
219 | break;
220 | case "conj." :
221 | propertyText = "连词";
222 | break;
223 | case "int." :
224 | propertyText = "感叹词";
225 | break;
226 | case "abbr." :
227 | propertyText = "代词";
228 | break;
229 | case "pron." :
230 | propertyText = "";
231 | break;
232 | default :
233 | }
234 |
235 | return propertyText;
236 | };
237 |
238 |
239 |
240 | ChaZD.prototype.parseWebResult = function (result) {
241 | var web = result.web;
242 | var webExplainsContent = "";
243 | var i;
244 | for (i = 0; i < web.length ; i++) {
245 | var webExplain = fmt(frame.webExplain, web[i].key, web[i].value);
246 | webExplainsContent += webExplain;
247 | }
248 |
249 | return fmt(frame.webExplainsContainer, fmt(frame.webExplainsList, webExplainsContent));
250 | };
251 |
252 | //字符串预处理，解析驼峰命名法和下划线命名法的单词、词组
253 | function preprocessWord (originWord) {
254 | if (originWord.indexOf(" ") === -1) {
255 | originWord = originWord.replace(/_/g, " ");
256 | if (/[a-z]+/.test(originWord)) {
257 | originWord = trim(originWord.replace(/([A-Z])/g, " $1"));
258 | }
259 | }
260 | return originWord;
261 | }
262 |
263 | /*
264 | ChaZD.prototype.parsePhrase = function (queryWord, key) {
265 | var words = [];
266 | words = queryWord.split(/\s+/);
267 | }
268 | */
269 | window.Notifications = window.Notifications || window.webkitNotifications;
270 |
271 | function showNotification(note) {
272 | if (!Notifications) {
273 | //console.log("[ChaZD] Your browse don't support notification.");
274 | return;
275 | }
276 | var notification = null, havePermission = Notifications.checkPermission();
277 | if (havePermission === 0) {
278 | notification = Notifications.createNotification(
279 | note.icon || chrome.extension.getURL("icons/icon128.png"),
280 | note.title || "ChaZD 查字典",
281 | note.content
282 | );
283 | notification.onclick = function () {
284 | window.open("https://chrome.google.com/webstore/detail/chazd/nkiipedegbhbjmajlhpegcpcaacbfggp");
285 | };
286 | notification.show();
287 | } else {
288 | Notifications.requestPermission();
289 | }
290 |
291 | return notification;
292 | }
293 |
294 | chrome.runtime.onInstalled.addListener(
295 | function (details) {
296 | if (details.reason === "install") {
297 | //console.log("[ChaZD] first install.");
298 | showNotification({
299 | title : "感谢支持 ChaZD ！",
300 | content : "ChaZD 力求成为最简洁易用的 Chrome 词典扩展，欢迎提出您的意见或建议。" +
301 | "如果觉得 ChaZD 还不错，记得给5星好评哦:)"
302 | });
303 | //alert("Thank you for install my app:)");
304 | } else if (details.reason === "update") {
305 | //console.log("[ChaZD] update from version " + details.previousVersion);
306 | //alert("New version has updated!");
307 | chrome.storage.sync.set({"showTips" : true}, function() {
308 | //console.log("[ChaZD] Success update settings selectMode = mouseSelect");
309 | });
310 | showNotification({
311 | title : "ChaZD 更新到0.8.19版！",
312 | content : "修复若干 bug，如出现无法查词的问题，请在设置中关闭使用 HTTPS 接口"
313 | });
314 | }
315 | }
316 | );
317 |
318 | // chrome.contextMenus.create({"title": "在此页面禁用 ChaZD", "id": "deniedPage"});
319 | // chrome.contextMenus.create({"title": "在此站点禁用 ChaZD", "id": "deniedSite"});
320 | // chrome.contextMenus.create({"title": "管理禁用列表", "id": "deniedList"});
321 | // chrome.contextMenus.onClicked.addListener(function (info, tab){
322 | // console.log(JSON.stringify(info));
323 | // if (info.menuItemId === "deniedPage") {}
324 | // });
325 |
326 | chrome.storage.sync.get(null,function (items) {
327 | //console.log(JSON.stringify(items));
328 | if (items.showTips === undefined ) {
329 | //console.log("storage 是空的");
330 | chrome.storage.sync.set(settings);
331 | } else {
332 | //console.log("[ChaZD][Current Settings]");
333 | for (var key in items) {
334 | if (settings[key] === undefined) {
335 | chrome.storage.sync.remove(key);
336 | //console.log("Remove setting item '%s'", key);
337 | } else {
338 | settings[key] = items[key];
339 | }
340 | }
341 | chrome.storage.sync.set(settings);
342 | }
343 | });
344 |
345 | chrome.runtime.onMessage.addListener(
346 | function (message, sender, sendResponse) {
347 | //console.log("message from sender:" + JSON.stringify(message));
348 | //console.log("sender is " + JSON.stringify(sender));
349 | new ChaZD(preprocessWord(message.queryWord), message.useHttps, message.source, sendResponse);
350 |
351 | return true;
352 | });
353 |
--------------------------------------------------------------------------------
/src/javascript/popup.js:
--------------------------------------------------------------------------------
1 | var $button = document.querySelector("#search");
2 | //var $tipsContainer = document.querySelector("#tips");
3 | var $input = document.querySelector("#query-word");
4 | var $queryResultContainer = document.querySelector("#query-result");
5 |
6 | if (-1 !== window.navigator.platform.toLowerCase().indexOf("mac")) {
7 | document.querySelector("#ctrl-option").firstChild.nodeValue = "Command";
8 | }
9 | // if (!$tipsContainer.classList.contains("unshow")){
10 | // $tipsContainer.classList.add("unshow");
11 | // }
12 |
13 |
14 | function queryInPopup(queryText) {
15 | //$input.select();
16 | if ($queryResultContainer.classList.contains("unshow")){
17 | $queryResultContainer.classList.remove("unshow");
18 | }
19 | if ($input.value !== "") {
20 | $queryResultContainer.innerHTML = "ψ(._. )>词典君正在翻译。。。";
21 | }
22 | //console.log("input value: " + $input.value);
23 | //console.log("quertText: " + queryText);
24 | if (queryText) {
25 | $input.value = queryText;
26 | chrome.extension.sendMessage({queryWord: queryText, source: "popup", useHttps: useHttpsValue}, buildResult);
27 | }
28 | else {
29 | chrome.extension.sendMessage({queryWord: $input.value, source: "popup", useHttps: useHttpsValue}, buildResult);
30 | }
31 | }
32 |
33 | var buildResult = function(response) {
34 | //alert("response from xhr: " + JSON.stringify(response));
35 | var resultObj = response;
36 | var resultBlock = "";
37 | if (resultObj.validMessage == "query success") {
38 | resultBlock += resultObj.titleBlock;
39 | if (resultObj.basicBlock !== undefined) {
40 | resultBlock += resultObj.basicBlock;
41 | }
42 | if (resultObj.webBlock !== undefined) {
43 | resultBlock += resultObj.webBlock;
44 | }
45 | $queryResultContainer.innerHTML = resultBlock;
46 | var voiceCollection = document.querySelectorAll(".voice-container");
47 | //console.log("voiceCollection length: " + voiceCollection.length);
48 | var i, len;
49 | for (i = 0, len = voiceCollection.length; i < len; i++) {
50 | buildVoice(voiceCollection[i]);
51 | }
52 | } else {
53 | if (resultObj.errorCode == 20) {
54 | $queryResultContainer.innerHTML = "这段文字太长，词典君无能为力了（┬_┬）
试试短一点的吧~
";
55 | } else if (resultObj.errorCode == 40) {
56 | $queryResultContainer.innerHTML = "对不起，这段文字太高深了，请饶过词典君吧（┬_┬）
";
57 | } else {
58 | $queryResultContainer.innerHTML = "词典君罢工啦（┬_┬）
是不是网络不太好？
稍后再试一次吧
";
59 | }
60 | }
61 | };
62 |
63 | $button.addEventListener("click", function (event) {
64 | queryInPopup();
65 | });
66 |
67 | $input.select();
68 |
69 | $input.addEventListener("input", function (event) {
70 | var currentInput = $input.value;
71 | setTimeout(function () {
72 | if ($input.value === currentInput && $input.value !== "") {
73 | queryInPopup();
74 | }
75 | }, 500);
76 | });
77 |
78 | function buildVoice(voice) {
79 | var src = voice.getAttribute("data-src");
80 | //console.log("voice src: [] " + src);
81 | var audioBlock = document.createElement("audio");
82 | audioBlock.setAttribute("src", src);
83 | voice.appendChild(audioBlock);
84 | audioBlock.addEventListener("ended", function (event) {
85 | //console.log("loading src: " + this.getAttribute("src"));
86 | this.load();
87 | });
88 | voice.addEventListener("click", function (event) {
89 | //console.log("playing src: " + audioBlock.getAttribute("src"));
90 | audioBlock.play();
91 | });
92 | }
93 |
94 |
95 | function createLink(link, url) {
96 | link.addEventListener("click", function (event) {
97 | chrome.tabs.create({"url": url});
98 | });
99 | }
100 |
101 | var issue = document.querySelector("#issue");
102 | var email = document.querySelector("#email");
103 | var source = document.querySelector("#source");
104 | var keySet = document.querySelector("#key-set");
105 | var score = document.querySelector("#score");
106 |
107 | createLink(email, "mailto:ververcpp@gmail.com");
108 | createLink(source, "https://github.com/ververcpp/ChaZD");
109 | createLink(issue, "https://github.com/ververcpp/ChaZD/issues/new");
110 | createLink(keySet, "chrome://extensions/configureCommands");
111 | createLink(score, "https://chrome.google.com/webstore/detail/chazd/nkiipedegbhbjmajlhpegcpcaacbfggp");
112 |
113 | document.querySelector("#setting-button").addEventListener("click", function (event) {
114 | var settingBlock = document.getElementById("settings");
115 | settingBlock.classList.toggle("active");
116 | if (settingBlock.classList.contains("active")) {
117 | settingBlock.style.height = blockHeight + "px";
118 | } else {
119 | settingBlock.style.height = 0;
120 | }
121 | });
122 |
123 | function totalHeight(className) {
124 | var divs = document.getElementsByClassName(className);
125 | var length = divs.length;
126 | var sum = 0;
127 | for (var i = 0; i < length; i++) {
128 | sum += divs[i].scrollHeight;
129 | }
130 | return sum + 10;
131 | }
132 |
133 | var blockHeight = totalHeight("top-menu") + totalHeight("sub-menu") + totalHeight("carved") + 32;
134 | var linkQuery = document.querySelector("#linkQuery");
135 | var noSelect = document.querySelector("#noSelect");
136 | var mouseSelect = document.querySelector("#mouseSelect");
137 | var useCtrl = document.querySelector("#useCtrl");
138 | var autoAudio = document.querySelector("#autoAudio");
139 | var defaultUk = document.querySelector("#defaultUk");
140 | var defaultUs = document.querySelector("#defaultUs");
141 | var showPositionSide = document.querySelector("#showPositionSide");
142 | var showPositionNear = document.querySelector("#showPositionNear");
143 | var autoHide = document.querySelector("#autoHide");
144 | var showDuration = document.querySelector("#showDuration");
145 | var currentDuration = document.querySelector("#currentDuration");
146 | var turnOffTips = document.querySelector("#turn-off-tips");
147 | var tips = document.querySelector("#tips");
148 | var toggleKey = document.querySelector("#toggle-key");
149 | var useHttps = document.querySelector("#useHttps");
150 | var useHttpsValue = false;
151 |
152 | chrome.storage.sync.get(null, function (items) {
153 | if(items.currentWord !== "") {
154 | queryInPopup(items.currentWord);
155 | }
156 | if(items.linkQuery === true) {
157 | linkQuery.checked = true;
158 | linkQuery.nextSibling.classList.remove("unactive");
159 | } else {
160 | linkQuery.checked = false;
161 | linkQuery.nextSibling.classList.add("unactive");
162 | }
163 | if(items.useHttps === true) {
164 | useHttps.checked = true;
165 | useHttpsValue = true;
166 | useHttps.nextSibling.classList.remove("unactive");
167 | } else {
168 | useHttps.checked = false;
169 | useHttpsValue = false;
170 | useHttps.nextSibling.classList.add("unactive");
171 | }
172 | if(items.autoAudio === true) {
173 | autoAudio.checked = true;
174 | autoAudio.nextSibling.classList.remove("unactive");
175 | } else {
176 | autoAudio.checked = false;
177 | autoAudio.nextSibling.classList.add("unactive");
178 | }
179 | if(items.defaultVoice === 1) {
180 | defaultUk.checked = true;
181 | defaultUk.nextSibling.classList.remove("unactive");
182 | defaultUs.nextSibling.classList.add("unactive");
183 | } else if (items.defaultVoice === 2) {
184 | defaultUs.checked = true;
185 | defaultUs.nextSibling.classList.remove("unactive");
186 | defaultUk.nextSibling.classList.add("unactive");
187 | }
188 | if (items.selectMode === "noSelect") {
189 | noSelect.checked = true;
190 | noSelect.nextSibling.classList.remove("unactive");
191 | mouseSelect.nextSibling.classList.add("unactive");
192 | useCtrl.nextSibling.classList.add("unactive");
193 |
194 | toggleKey.disabled = true;
195 | autoAudio.disabled = true;
196 | }
197 | if (items.selectMode === "mouseSelect") {
198 | mouseSelect.checked = true;
199 | mouseSelect.nextSibling.classList.remove("unactive");
200 | noSelect.nextSibling.classList.add("unactive");
201 | useCtrl.nextSibling.classList.add("unactive");
202 |
203 | toggleKey.disabled = true;
204 | autoAudio.disabled = false;
205 | }
206 | if (items.selectMode === "useCtrl") {
207 | useCtrl.checked = true;
208 | useCtrl.nextSibling.classList.remove("unactive");
209 | noSelect.nextSibling.classList.add("unactive");
210 | mouseSelect.nextSibling.classList.add("unactive");
211 |
212 | toggleKey.disabled = false;
213 | autoAudio.disabled = false;
214 | }
215 | if (items.showTips) {
216 | tips.classList.remove("unshow");
217 | }
218 | if (items.showPosition === "side") {
219 | showPositionSide.checked = true;
220 | showPositionSide.nextSibling.classList.remove("unactive");
221 | showPositionNear.nextSibling.classList.add("unactive");
222 | } else if (items.showPosition === "near") {
223 | showPositionNear.checked = true;
224 | showPositionSide.nextSibling.classList.add("unactive");
225 | showPositionNear.nextSibling.classList.remove("unactive");
226 | }
227 | if (items.toggleKey === "ctrl") {
228 | toggleKey.selectedIndex = 0;
229 | } else if (items.toggleKey === "alt") {
230 | toggleKey.selectedIndex = 1;
231 | } else if (items.toggleKey === "shift") {
232 | toggleKey.selectedIndex = 2;
233 | }
234 | if (items.autoHide === true) {
235 | autoHide.checked = true;
236 | autoHide.nextSibling.classList.remove("unactive");
237 | showDuration.disabled = false;
238 | } else {
239 | autoHide.checked = false;
240 | autoHide.nextSibling.classList.add("unactive");
241 | showDuration.disabled = true;
242 | }
243 | currentDuration.innerHTML = showDuration.value = items.showDuration;
244 | });
245 |
246 | linkQuery.addEventListener("click", function (event) {
247 | var currentLinkQuery = linkQuery.checked;
248 | linkQuery.nextSibling.classList.toggle("unactive");
249 | chrome.storage.sync.set({"linkQuery": currentLinkQuery}, function() {
250 | //console.log("[ChaZD] Success update settings linkQuery = " + currentLinkQuery);
251 | });
252 | });
253 |
254 | useHttps.addEventListener("click", function (event) {
255 | var currentUseHttps = useHttps.checked;
256 | useHttps.nextSibling.classList.toggle("unactive");
257 | chrome.storage.sync.set({"useHttps": currentUseHttps});
258 | });
259 |
260 | autoAudio.addEventListener("click", function (event) {
261 | var currentAutoAudio = autoAudio.checked;
262 | if (currentAutoAudio) {
263 | autoAudio.nextSibling.classList.remove("unactive");
264 | } else {
265 | autoAudio.nextSibling.classList.add("unactive");
266 | }
267 | chrome.storage.sync.set({"autoAudio": currentAutoAudio}, function() {
268 | //console.log("[ChaZD] Success update settings autoAudio = " + currentAutoAudio);
269 | });
270 | });
271 |
272 | defaultUk.addEventListener("click", function (event) {
273 | defaultUk.nextSibling.classList.remove("unactive");
274 | defaultUs.nextSibling.classList.add("unactive");
275 | chrome.storage.sync.set({"defaultVoice": 1}, function() {
276 | //console.log("[ChaZD] Success update settings defaultVoice = 1");
277 | });
278 | });
279 |
280 | defaultUs.addEventListener("click", function (event) {
281 | defaultUs.nextSibling.classList.remove("unactive");
282 | defaultUk.nextSibling.classList.add("unactive");
283 | chrome.storage.sync.set({"defaultVoice": 2}, function() {
284 | //console.log("[ChaZD] Success update settings defaultVoice = 2");
285 | });
286 | });
287 |
288 | turnOffTips.addEventListener("click", function (event) {
289 | tips.classList.add("unshow");
290 | chrome.storage.sync.set({"showTips": false}, function() {
291 | //console.log("[ChaZD] Success update settings showTips = false");
292 | });
293 | });
294 |
295 | noSelect.addEventListener("click", function (event) {
296 | toggleKey.disabled = true;
297 | autoAudio.disabled = true;
298 |
299 | noSelect.nextSibling.classList.remove("unactive");
300 | mouseSelect.nextSibling.classList.add("unactive");
301 | useCtrl.nextSibling.classList.add("unactive");
302 | chrome.storage.sync.set({"selectMode" : "noSelect"}, function() {
303 | //console.log("[ChaZD] Success update settings selectMode = noSelect");
304 | });
305 | });
306 |
307 | mouseSelect.addEventListener("click", function (event) {
308 | toggleKey.disabled = true;
309 | autoAudio.disabled = false;
310 |
311 | noSelect.nextSibling.classList.add("unactive");
312 | mouseSelect.nextSibling.classList.remove("unactive");
313 | useCtrl.nextSibling.classList.add("unactive");
314 | chrome.storage.sync.set({"selectMode" : "mouseSelect"}, function() {
315 | //console.log("[ChaZD] Success update settings selectMode = mouseSelect");
316 | });
317 | });
318 |
319 | useCtrl.addEventListener("click", function (event) {
320 | //console.log(toggleKey.disabled);
321 | if (toggleKey.disabled) {
322 | toggleKey.disabled = false;
323 | }
324 | autoAudio.disabled = false;
325 | noSelect.nextSibling.classList.add("unactive");
326 | mouseSelect.nextSibling.classList.add("unactive");
327 | useCtrl.nextSibling.classList.remove("unactive");
328 | chrome.storage.sync.set({"selectMode" : "useCtrl"}, function() {
329 | //console.log("[ChaZD] Success update settings selectMode = useCtrl");
330 | });
331 | });
332 |
333 | showPositionSide.addEventListener("click", function (event) {
334 | showPositionSide.nextSibling.classList.remove("unactive");
335 | showPositionNear.nextSibling.classList.add("unactive");
336 | chrome.storage.sync.set({"showPosition" : "side"}, function() {
337 | //console.log("[ChaZD] Success update settings showPosition = side");
338 | });
339 | });
340 |
341 | showPositionNear.addEventListener("click", function (event) {
342 | showPositionSide.nextSibling.classList.add("unactive");
343 | showPositionNear.nextSibling.classList.remove("unactive");
344 | chrome.storage.sync.set({"showPosition" : "near"}, function() {
345 | //console.log("[ChaZD] Success update settings showPosition = near");
346 | });
347 | });
348 |
349 | autoHide.addEventListener("click", function (event) {
350 | var currentAutoHide = autoHide.checked;
351 | if (currentAutoHide) {
352 | autoHide.nextSibling.classList.remove("unactive");
353 | showDuration.disabled = false;
354 | } else {
355 | autoHide.nextSibling.classList.add("unactive");
356 | showDuration.disabled = true;
357 | }
358 | chrome.storage.sync.set({"autoHide" : currentAutoHide}, function() {
359 | //console.log("[ChaZD] Success update settings showPosition = near");
360 | });
361 | });
362 |
363 | showDuration.addEventListener("input", function (event) {
364 | currentDuration.innerHTML = showDuration.value;
365 | chrome.storage.sync.set({"showDuration" : showDuration.value}, function() {
366 | //console.log("[ChaZD] Success update settings toggleKey = " + this.value);
367 | });
368 | });
369 |
370 | toggleKey.onchange = function (event) {
371 | chrome.storage.sync.set({"toggleKey" : this.value}, function() {
372 | //console.log("[ChaZD] Success update settings toggleKey = " + this.value);
373 | });
374 | };
375 |
376 | // showDuration.addEventListener("onclick", function (event) {
377 | // currentDuration.innerHTML = event.target.value;
378 | // updateSetting("duration", event.target.value);
379 | // })
380 |
381 | //在popup页内 Enter键 查询选中部分
382 | document.addEventListener('keyup',function(e){
383 | if(document.activeElement.tagName=="BODY" && e.which==13){
384 | queryInPopup(window.getSelection().toString());
385 | }
386 | });
--------------------------------------------------------------------------------
/src/javascript/selection.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var preSelection = {
3 | top: 0,
4 | bottom: 0,
5 | left: 0,
6 | right: 0,
7 | again: 0
8 | };
9 |
10 | var timeout;
11 | var currentSettings = {};
12 | chrome.storage.sync.get(null, function(items) {
13 | for (var key in items) {
14 | currentSettings[key] = items[key];
15 | }
16 | });
17 |
18 | chrome.storage.onChanged.addListener(function(changes) {
19 | // for (var key in changes) {
20 | // console.log("[ChaZD]Settings Update, [%s] %s => %s", key, changes[key].oldValue, changes[key].newValue);
21 | // }
22 | if (changes.linkQuery !== undefined) {
23 | currentSettings.linkQuery = changes.linkQuery.newValue;
24 | }
25 | if (changes.useHttps !== undefined) {
26 | currentSettings.useHttps = changes.useHttps.newValue;
27 | }
28 | if (changes.autoAudio !== undefined) {
29 | currentSettings.autoAudio = changes.autoAudio.newValue;
30 | }
31 | if (changes.defaultVoice !== undefined) {
32 | currentSettings.defaultVoice = changes.defaultVoice.newValue;
33 | }
34 | if (changes.selectMode !== undefined) {
35 | currentSettings.selectMode = changes.selectMode.newValue;
36 | }
37 | if (changes.toggleKey !== undefined) {
38 | currentSettings.toggleKey = changes.toggleKey.newValue;
39 | }
40 | if (changes.autoHide !== undefined) {
41 | currentSettings.autoHide = changes.autoHide.newValue;
42 | }
43 | if (changes.showDuration !== undefined) {
44 | currentSettings.showDuration = changes.showDuration.newValue;
45 | }
46 | if (changes.showPosition !== undefined) {
47 | currentSettings.showPosition = changes.showPosition.newValue;
48 | }
49 | });
50 |
51 | var queryInPage = function(event) {
52 | var selection = window.getSelection && window.getSelection();
53 | if(selection && selection.rangeCount > 0) {
54 | var selectText = trim(selection.toString());
55 | var selectRange = selection.getRangeAt(0).getBoundingClientRect();
56 | if (isExist(selectRange, preSelection) && preSelection.again) {
57 | preSelection.again = 0;
58 | return;
59 | }
60 |
61 | if (selectText === "" || !(/^[^\u4e00-\u9fa5]+$/.test(selectText))) {return;}
62 | var haveResult = document.documentElement.querySelectorAll(".ChaZD-result-container");
63 | for (var i = 0, len = haveResult.length; i < len; i++) {
64 | if (haveResult[i].getAttribute("data-text").toLowerCase() === selectText.toLowerCase()){return;}
65 | }
66 | ////////if (currentQueryWord !== "" && selectText === currentQueryWord) {return;}
67 | chrome.storage.sync.set({"currentWord" : selectText}, function() {
68 | //console.log("[ChaZD] Success update settings currentWord = " + selectText);
69 | });
70 | for (var key in preSelection) {
71 | if (key == "again") {
72 | preSelection[key] = 1;
73 | }
74 | else {
75 | preSelection[key] = selectRange[key];
76 | }
77 | }
78 | if (currentSettings.showPosition === "side") {
79 | //console.log("in 1");
80 | showResultSide(selectText, currentSettings.useHttps);
81 | }
82 | if (currentSettings.showPosition === "near") {
83 | //console.log("in 2");
84 | showResultNear(selectText, currentSettings.useHttps, selectRange, event);
85 | }
86 | }
87 | };
88 |
89 | var showResultSide = function (text, useHttps) {
90 | //if(isExist(text)) return;
91 | var $resultSideContainer = makeResultContainer(text, useHttps);
92 | $resultSideContainer.classList.add("ChaZD-result-side");
93 | document.documentElement.appendChild($resultSideContainer);
94 |
95 | if (currentSettings.autoHide) {
96 | timeout = setTimeout(function () {
97 | if (document.querySelector(".ChaZD-result-container")) {
98 | document.documentElement.removeChild($resultSideContainer);
99 | ////////currentQueryWord = "";
100 | }
101 | }, 1000 * currentSettings.showDuration);
102 | }
103 | };
104 |
105 | var showResultNear = function (text, useHttps, range, event) {
106 | //if(isExist(text)) return;
107 | var resultNearContainer = makeResultContainer(text, useHttps);
108 | var arrowMain = makeArrowDiv();
109 | document.documentElement.appendChild(resultNearContainer);
110 | document.documentElement.appendChild(arrowMain);
111 |
112 | var showNearPosition = {};
113 | //文本框中选取的内容返回的left top 为0，此时采集鼠标的位置
114 | if (range.left === 0 && range.top === 0) {
115 | range = {
116 | left: event.clientX,
117 | top: event.clientY,
118 | height: 15
119 | };
120 | }
121 |
122 | var containerWidth = resultNearContainer.offsetWidth;
123 | //var arrowWidth = arrowMain.width();
124 | var rangeWidth = range.right - range.left;
125 | //console.log("arrow width: " + arrowWidth);
126 | var left = range.left + window.pageXOffset;
127 | var top = range.top + window.pageYOffset;
128 | var rangeMiddle = rangeWidth/2 + left;
129 | var containerLeft = left - (containerWidth - rangeWidth)/2;
130 | var arrowLeft = rangeMiddle - 12;
131 |
132 | if (containerLeft < window.pageXOffset) {
133 | containerLeft = window.pageXOffset;
134 | } else if (containerLeft + containerWidth > window.pageXOffset + document.documentElement.clientWidth) {
135 | containerLeft = window.pageXOffset + document.documentElement.clientWidth - containerWidth;
136 | }
137 |
138 | var clientHeight = 0;
139 | clientHeight = (document.documentElement.clientHeight > document.body.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
140 | if (clientHeight === 0) {
141 | clientHeight = document.documentElement.clientHeight;
142 | }
143 | //console.log("[ChaZD]clientHeight : " + clientHeight);
144 |
145 | if (range.top >= 150) {
146 | var bottom = clientHeight - top + 10;
147 | var arrowBottom = bottom + 1;
148 | showNearPosition = {
149 | left: containerLeft,
150 | bottom: bottom,
151 | arrowLeft: arrowLeft,
152 | arrowBottom: arrowBottom
153 | };
154 | } else {
155 | showNearPosition = {
156 | left: containerLeft,
157 | top: top + range.height + 12,
158 | arrowLeft: arrowLeft,
159 | arrowTop: top + range.height + 1
160 | };
161 | }
162 |
163 | // var arrowMain = $arrowMain;
164 | // var resultNearContainer = resultNearContainer[0];
165 | //resultNearContainer.style.position = "absolute";
166 | resultNearContainer.style.left = showNearPosition.left + "px";
167 | arrowMain.style.left = showNearPosition.arrowLeft + "px";
168 | var chazdArrowOuter = document.querySelectorAll(".ChaZD-arrow-outer");
169 | var chazdArrowInner = document.querySelectorAll(".ChaZD-arrow-inner");
170 | var i, len;
171 | if (showNearPosition.bottom) {
172 | resultNearContainer.style.bottom = showNearPosition.bottom + "px";
173 | arrowMain.style.bottom = showNearPosition.arrowBottom + "px";
174 | for (i = 0, len = chazdArrowOuter.length; i < len; i++) {
175 | chazdArrowOuter[i].classList.add("ChaZD-arrow-outer-down");
176 | chazdArrowInner[i].classList.add("ChaZD-arrow-inner-down");
177 | }
178 | }
179 | if (showNearPosition.top) {
180 | resultNearContainer.style.top = showNearPosition.top + "px";
181 | arrowMain.style.top = showNearPosition.arrowTop + "px";
182 | for (i = 0, len = chazdArrowOuter.length; i < len; i++) {
183 | chazdArrowOuter[i].classList.add("ChaZD-arrow-outer-up");
184 | chazdArrowInner[i].classList.add("ChaZD-arrow-inner-up");
185 | }
186 | }
187 |
188 | if (currentSettings.autoHide) {
189 | timeout = setTimeout(function () {
190 | if (document.querySelector(".ChaZD-result-container") && document.querySelector(".ChaZD-arrow-main")) {
191 | document.documentElement.removeChild(resultNearContainer);
192 | document.documentElement.removeChild(arrowMain);
193 | ////////currentQueryWord = "";
194 | }
195 | }, 1000 * currentSettings.showDuration);
196 | }
197 | // var t = setTimeout(function () {
198 | // document.body.removeChild(resultNearContainer);
199 | // }, 1000 * duration);
200 | };
201 |
202 | var makeArrowDiv = function () {
203 | // var arrowDivMain = document.createElement("div");
204 | // arrowDivMain.classList.add("ChaZD-arrow-main");
205 | var arrowDivMain = document.createElement("div");
206 | arrowDivMain.classList.add("ChaZD-arrow-main");
207 | var arrowDivOuter = document.createElement("div");
208 | arrowDivOuter.setAttribute("class", "ChaZD-arrow-outer");
209 | var arrowDivInner = document.createElement("div");
210 | arrowDivInner.setAttribute("class", "ChaZD-arrow-inner");
211 | arrowDivMain.appendChild(arrowDivOuter);
212 | arrowDivMain.appendChild(arrowDivInner);
213 |
214 | return arrowDivMain;
215 | };
216 |
217 | var makeResultContainer = function (text, useHttps) {
218 | var $resultContainer = document.createElement("div");
219 | $resultContainer.classList.add("ChaZD-result-container");
220 | $resultContainer.setAttribute("data-text", text);
221 | var $searchingNode = document.createElement("div");
222 | $searchingNode.setAttribute("id", "ChaZD-searching");
223 | $searchingNode.innerHTML = "ψ(._. )>划词君正在翻译。。。";
224 | $resultContainer.appendChild($searchingNode);
225 | chrome.runtime.sendMessage({
226 | queryWord: text,
227 | source: "select",
228 | useHttps: useHttps
229 | }, function(response) {
230 | var resultObj = response;
231 | $searchingNode.innerHTML = "";
232 | if (resultObj.validMessage === "query success") {
233 |
234 | $resultContainer.innerHTML = resultObj.titleBlock;
235 |
236 | var singleVoiceButton = $resultContainer.querySelector(".voice-container");
237 | buildVoice(singleVoiceButton);
238 |
239 | //console.log("inner onclick:" + singleVoiceButton.onclick);
240 | //console.log(document.querySelector(".voice-container") === singleVoiceButton);
241 |
242 | var temp = document.createElement("div");
243 | if (resultObj.basicBlock) {
244 | temp.innerHTML = resultObj.basicBlock;
245 | $resultContainer.appendChild(temp);
246 | }
247 | else if (resultObj.haveTranslation) {
248 | $resultContainer.querySelector(".title-translation").style.display = "block";
249 | } else if (resultObj.haveWebTranslation) {
250 | temp.innerHTML = resultObj.webBlock;
251 | $resultContainer.appendChild(temp);
252 | $resultContainer.querySelector(".web-title").innerHTML = "网络释义";
253 | } else {
254 | $resultContainer.innerHTML = "╮(╯▽╰)╭划词君无能为力啊
还是右键问问谷歌君吧=>";
255 | }
256 | } else {
257 | if (resultObj.errorCode == 20) {
258 | $resultContainer.innerHTML = "这段文字太长，词典君无能为力了（┬_┬）
试试短一点的吧~
";
259 | } else if (resultObj.errorCode == 40) {
260 | $resultContainer.innerHTML = "对不起，这段文字太高深了，请饶过词典君吧（┬_┬）
";
261 | } else {
262 | $resultContainer.innerHTML = "词典君罢工啦（┬_┬）
是不是网络不太好？
稍后再试一次吧
";
263 | }
264 | }
265 | });
266 |
267 | return $resultContainer;
268 | };
269 |
270 | function buildVoice(voice) {
271 | var src = voice.getAttribute("data-src");
272 | //console.log("voice src: [] " + src);
273 | var audioBlock = document.createElement("audio");
274 | audioBlock.setAttribute("src", src + "&type=" + currentSettings.defaultVoice);
275 | //audioBlock.setAttribute("ended", "this.load()");
276 | voice.appendChild(audioBlock);
277 | if (currentSettings.autoAudio === true) {
278 | audioBlock.play();
279 | }
280 | audioBlock.addEventListener("ended", function (event) {
281 | //console.log("loading src: " + this.getAttribute("src"));
282 | this.load();
283 | });
284 | voice.addEventListener("click", function (event) {
285 | //console.log("playing src: " + audioBlock.getAttribute("src"));
286 | audioBlock.play();
287 | });
288 | }
289 |
290 | function isExist(newRange, oldRange) {
291 | if (newRange.top === oldRange.top &&
292 | newRange.bottom === oldRange.bottom &&
293 | newRange.left === oldRange.left &&
294 | newRange.right === oldRange.right) {
295 | return true;
296 | }
297 | return false;
298 | }
299 |
300 | var classNameCollection = ["ChaZD-result-container", "title-container", "title-word", "title-translation", "basic-container", "phonetic-container", "explains-container", "explains-container", "explains-list", "property-container", "explains-item", "voice-container", "us-phonetic-container", "uk-phonetic-container", "web-explains-container", "web-explains-list", "web-key", "explains-item-value", "web-value"];
301 |
302 | document.documentElement.addEventListener("mousedown", function(event) {
303 | //console.log("event.target: " + event.target.className);
304 | for (var name in classNameCollection) {
305 | if (event.target.classList.contains(classNameCollection[name])) {
306 | //console.log("[ChaZD] don't remove");
307 | return;
308 | }
309 | }
310 | // var existResult = document.getElementsByClassName("ChaZD-result-container");
311 | // for (var i = 0; i < existResult.length; i++) {
312 | // existResult[i].parentNode.removeChild(existResult[i]);
313 | // }
314 | clearTimeout(timeout);
315 | var chazdResult = document.querySelectorAll(".ChaZD-result-container");
316 | var chazdArrow = document.querySelectorAll(".ChaZD-arrow-main");
317 | var i, len;
318 | if (chazdResult) {
319 | for (i = 0, len = chazdResult.length; i < len; i++) {
320 | document.documentElement.removeChild(chazdResult[i]);
321 | }
322 | }
323 | if (chazdArrow) {
324 | for (i = 0, len = chazdArrow.length; i < len; i++) {
325 | document.documentElement.removeChild(chazdArrow[i]);
326 | }
327 | }
328 | chrome.storage.sync.set({"currentWord" : ""});
329 | ////////currentQueryWord = "";
330 | //clearSelection(event);
331 | });
332 |
333 | window.addEventListener("resize", function(event) {
334 | var chazdResult = document.querySelector(".ChaZD-result-container");
335 | var chazdArrow = document.querySelector(".ChaZD-arrow-main");
336 | if (chazdResult) {
337 | document.documentElement.removeChild(chazdResult);
338 | }
339 | if (chazdArrow) {
340 | document.documentElement.removeChild(chazdArrow);
341 | }
342 | ////////currentQueryWord = "";
343 | });
344 |
345 | var queryEvent = function (event) {
346 | //console.log("[ChaZD] current useCtrl: " + useCtrl);
347 | if (currentSettings.selectMode === "noSelect") {return;}
348 | if (currentSettings.selectMode === "useCtrl") {
349 | //console.log("current togglekey: " + toggleKey);
350 | if (currentSettings.toggleKey === "ctrl") {
351 | //console.log("[ChaZD] In Ctrl");
352 | if (!event.ctrlKey && !event.metaKey) {
353 | //console.log("[ChaZD] Aho~~~");
354 | preSelection.again = 0;
355 | return;
356 | }
357 | } else if (currentSettings.toggleKey === "alt") {
358 | //console.log("[ChaZD] In Alt");
359 | if (!event.altKey) {
360 | preSelection.again = 0;
361 | //console.log("[ChaZD] Aho~~~");
362 | return;
363 | }
364 | } else if (currentSettings.toggleKey === "shift") {
365 | //console.log("[ChaZD] In Shift");
366 | if (!event.shiftKey) {
367 | preSelection.again = 0;
368 | //console.log("[ChaZD] Aho~~~");
369 | return;
370 | }
371 | }
372 | }
373 | queryInPage(event);
374 | };
375 |
376 | var link = null;
377 |
378 | var focusLink = function (event) {
379 | if (currentSettings.linkQuery) {
380 | //event.stopPropagation();
381 | //console.log("focusLink");
382 | link = event.target;
383 | //console.log(link);
384 | if(event.shiftKey) {
385 | // alert("have shift");
386 | disableLink(event);
387 | }
388 |
389 | }
390 | };
391 |
392 | var blurLink = function (event) {
393 | if (currentSettings.linkQuery) {
394 | //event.stopPropagation();
395 | if (link && link.classList.contains("ChaZD-link")) {
396 | enableLink(event, true);
397 | }
398 | link = null;
399 | }
400 | };
401 |
402 | var disableLink = function (event) {
403 | if (link && event.shiftKey) {
404 | clearSelection(event);
405 | link.setAttribute("ChaZD-href", link.getAttribute("href"));
406 | link.removeAttribute("href");
407 | link.classList.add("ChaZD-link");
408 | }
409 | };
410 |
411 | var enableLink = function (event, ignoreKey) {
412 | if (link && (ignoreKey || event.keyCode == 16)) {
413 | link.setAttribute("href", link.getAttribute("ChaZD-href"));
414 | link.removeAttribute("ChaZD-href");
415 | link.classList.remove("ChaZD-link");
416 | }
417 | };
418 |
419 | var clearSelection = function (event) {
420 | if (currentSettings.linkQuery && event.shiftKey) {
421 | window.getSelection().empty();
422 | }
423 | };
424 |
425 | document.documentElement.addEventListener("mouseup", queryEvent);
426 | document.documentElement.addEventListener("mouseover", function (e) {
427 | if (e.target.nodeName === "A" || e.target.nodeName === "a") {
428 | focusLink(e);
429 | }
430 | });
431 | document.documentElement.addEventListener("mouseout", function (e) {
432 | if (e.target.nodeName === "A" || e.target.nodeName === "a") {
433 | blurLink(e);
434 | }
435 | });
436 | // var links = document.querySelectorAll("a");
437 | // console.log(links);
438 | // for (var i = 0, len = links.length; i < len; i++) {
439 | // links[i].addEventListener("mouseover", function (e) {
440 | // console.log("heloo world");
441 | // });
442 | // //links[i].addEventListener("mouseleave", blurLink);
443 | // }
444 | document.documentElement.addEventListener("keydown", disableLink);
445 | document.documentElement.addEventListener("keyup", enableLink);
446 | document.documentElement.addEventListener("selectstart", queryEvent); //bug!!
447 | })();
448 |
--------------------------------------------------------------------------------
/src/javascript/utility.js:
--------------------------------------------------------------------------------
1 | var api = {
2 | key: 1116151381,
3 | keyfrom : "youdaocidian"
4 | };
5 |
6 | var urls = {
7 | dict : "http://fanyi.youdao.com/openapi.do?keyfrom=" + api.keyfrom +"&key="+ api.key +"&type=data&doctype=json&version=1.1&q=",
8 | voice : "http://dict.youdao.com/dictvoice?audio=",
9 | dictHttps : "https://fanyi.youdao.com/openapi.do?keyfrom=" + api.keyfrom +"&key="+ api.key +"&type=data&doctype=json&version=1.1&q=",
10 | voiceHttps : "https://dict.youdao.com/dictvoice?audio=",
11 | };
12 |
13 | var settings = {
14 | selectMode : "mouseSelect", //划词的形式：直接划词 or Ctrl + 划词
15 | showPosition : "near", //划词翻译结果显示的位置
16 | toggleKey : "ctrl",
17 | showTips : true, //是否显示 Tips
18 | currentWord: "", //当前划词查询的内容
19 | linkQuery: false, //在链接上划词
20 | autoAudio: false, //划词自动发音
21 | autoHide: false, //自动隐藏翻译结果
22 | showDuration: 3, //翻译结果显示持续时间
23 | defaultVoice: 1, //划词默认发音：1--英音；2--美音
24 | useHttps: false, //是否使用 HTTPS 的接口
25 | };
26 |
27 | var frame = {
28 | //title frame
29 | titleContainer : "#{1}#{2}
",
30 | titleWord : "#{1}#{2}
",
31 | voiceContainer : "",
32 | titleTranslation : "#{1}
",
33 |
34 | //basic frame
35 | basicContainer : "#{1}#{2}
",
36 |
37 | //basic phonetic frame
38 | phoneticContainer : "#{1}#{2}
",
39 | ukPhoneticContainer : "#{1}
",
40 | usPhoneticContainer : "#{1}
",
41 |
42 | //basic explain frame
43 | explainsContainer : "#{1}
",
44 | explainsList : "",
45 | explain : "#{1}#{2}",
46 | propertyContainer : "#{2}",
47 |
48 | //web explain frame
49 | webExplainsContainer : "",
50 | webExplainsList : "",
51 | webExplain : "#{1}#{2}"
52 | };
53 |
54 | //判断一个初始化后的对象是否为空
55 | function isEmpty(obj) {
56 | for (var name in obj) {
57 | return false;
58 | }
59 | return true;
60 | }
61 |
62 | /*
63 | * 文本模板函数fmt, @greatghoul
64 | * 参考TransIt。
65 | */
66 | function fmt() {
67 | var args = arguments;
68 | return args[0].replace(/#{(.*?)}/g, function (match, prop) {
69 | return function (obj, props) {
70 | var prop = /\d+/.test(props[0]) ? parseInt(props[0]) : props[0];
71 | if (props.length > 1) {
72 | return arguments.callee(obj[prop], props.slice(1));
73 | } else {
74 | return obj[prop];
75 | }
76 | }(typeof args[1] === "object" ? args[1] : args, prop.split(/\.|\[|\]\[|\]\./));
77 | });
78 | }
79 |
80 | function trim(str) {
81 | return str.replace(/(^\s*)|(\s*$)/g, "");
82 | }
--------------------------------------------------------------------------------
/src/sass/inPage.scss:
--------------------------------------------------------------------------------
1 | $font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
2 | $background-color : rgba(255, 255, 221, 1);
3 | $border-color : rgba(153, 153, 153, 1);
4 | $text-color : rgba(34, 34, 34, 1);
5 | $font-size : 14px;
6 | $gap: 10px;
7 |
8 | @mixin box-shadow($horizontal, $vertical, $radius, $color) {
9 | box-shadow: $horizontal $vertical $radius $color;
10 | -webkit-box-shadow: $horizontal $vertical $radius $color;
11 | }
12 |
13 | @mixin animation($animate) {
14 | -webkit-animation: #{$animate};
15 | -moz-animation: #{$animate};
16 | -o-animation: #{$animate};
17 | animation: #{$animate};
18 | }
19 |
20 | @mixin keyframes($animationName) {
21 | @-webkit-keyframes #{$animationName} {
22 | @content;
23 | }
24 | @-moz-keyframes #{$animationName} {
25 | @content;
26 | }
27 | @-o-keyframes #{$animationName} {
28 | @content;
29 | }
30 | @keyframes #{$animationName} {
31 | @content;
32 | }
33 | }
34 |
35 | @include keyframes(fade-in) {
36 | from {opacity: 0;}
37 | to {opacity: 1;}
38 | }
39 |
40 | @include keyframes(fade-out) {
41 | from {opacity: 1;}
42 | to {opacity: 0;}
43 | }
44 |
45 | .ChaZD-result-side {
46 | position: fixed !important;
47 | right: 10px;
48 | top: 80px;
49 | }
50 |
51 | .ChaZD-result-container {
52 | width: 250px;
53 | overflow: auto;
54 | text-shadow: none;
55 | background-color: $background-color;
56 | text-align: left;
57 | color: $text-color;
58 | padding: 10px;
59 | margin: 0px;
60 | opacity: 1;
61 | border: 1px solid $border-color;
62 | border-radius: 4px;
63 | z-index: 999997;
64 | font-family: $font-family;
65 | font-weight: normal;
66 | font-size: $font-size;
67 | position: absolute;
68 | text-decoration: none;
69 | line-height: normal;
70 | @include box-shadow(0px, 0px, 20px,rgba(0, 0, 0, 0.5));
71 | @include animation("fade-in 0.3s ease");
72 |
73 | #ChaZD-searching {
74 | border: none;
75 | padding: 0;
76 | margin: 0;
77 | }
78 |
79 | .title-container {
80 | background-color: $background-color;
81 | border: none;
82 | color: $text-color;
83 | display: block;
84 | max-width: 100%;
85 |
86 | .title-word {
87 | position: relative;
88 | max-width: 100%;
89 | text-align: left;
90 | font-size: $font-size + 4px;
91 |
92 | .voice-container {
93 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAcUlEQVQ4y2P4//8/AyUYQhAH3gNxA7IAIQPmo/H3g/QA8XkgFiBkwHyoYnRQABVfj88AmGZcTuuHyjlgMwBZM7IE3NlQGhQe65EN+I8Dw8MLGgYoFpFqADK/YUAMwOsFigORatFIlYRElaRMWmaiBAMAp0n+3U0kqkAAAAAASUVORK5CYII=");
94 | background-position: bottom center;
95 | background-repeat: no-repeat;
96 | cursor: pointer;
97 | opacity: 0.5;
98 | width: 16px;
99 | height: 16px;
100 | margin-left: 8px;
101 | display: inline-block;
102 | position: relative;
103 | top: 2px;
104 |
105 | &:hover {
106 | opacity: 1;
107 | }
108 | }
109 | }
110 |
111 | .title-translation {
112 | display: none;
113 | color: $text-color;
114 | margin-top: $gap;
115 | }
116 | }
117 |
118 | .basic-container {
119 | background-color: $background-color;
120 | border: none;
121 | //margin-top: $gap;
122 |
123 | .phonetic-container {
124 |
125 | //display: none;
126 | .uk-phonetic-container, .us-phonetic-container {
127 | display: inline-block;
128 | color: red;
129 | margin-right: 5px;
130 | }
131 |
132 | .uk-phonetic-container:before {
133 | content: '英';
134 | color: $text-color;
135 | font-size: $font-size - 2px;
136 | margin-right: 2px;
137 | }
138 |
139 | .us-phonetic-container:before {
140 | content: '美';
141 | color: $text-color;
142 | font-size: $font-size - 2px;
143 | margin-right: 2px;
144 | }
145 |
146 | }
147 |
148 | .explains-container {
149 | font-size: $font-size;
150 | margin-top: $gap;
151 |
152 | /*Result Block -- basic container -- explains container*/
153 | .explains-list {
154 | list-style: none;
155 | margin: 0;
156 | padding: 0;
157 |
158 | .explains-item {
159 | &:before {
160 | display: none;
161 | }
162 | padding: 0px;
163 | font-family: $font-family;
164 | margin: 0 0 $gap / 2 0;
165 | list-style: none;
166 | font-size: $font-size;
167 | background-color: transparent;
168 |
169 | .property-container {
170 | display: block;
171 | float: left;
172 | font-weight: bold;
173 | color: $text-color;
174 | margin-right: 5px;
175 | }
176 |
177 | .explains-item-value {
178 | display: block;
179 | overflow: hidden;
180 | }
181 | }
182 | }
183 |
184 | .voice-container {
185 | display: none;
186 | }
187 | }
188 | }
189 |
190 | .web-explains-container {
191 |
192 | .web-title {
193 | font-weight: bold;
194 | opacity: 0.7;
195 | }
196 |
197 | .web-explains-list {
198 | list-style: none;
199 | margin: 5px 0;
200 | padding: 0;
201 | li {
202 | .web-value {
203 | margin: 0 0 0 5px;
204 | }
205 | }
206 | }
207 | }
208 |
209 | .unshow {
210 | display: none;
211 | }
212 | }
213 |
214 | .ChaZD-arrow-main {
215 | position: absolute;
216 | z-index: 999997;
217 | @include animation("fade-in 0.3s ease");
218 | }
219 |
220 | .ChaZD-arrow-outer-up, .ChaZD-arrow-outer-down {
221 | background: transparent;
222 | width: 0;
223 | border-left: 12px solid transparent;
224 | border-right: 12px solid transparent;
225 | position: absolute;
226 | left: 0;
227 | }
228 |
229 | .ChaZD-arrow-outer-up {
230 | border-bottom: 12px solid $border-color;
231 | }
232 |
233 | .ChaZD-arrow-outer-down {
234 | border-top: 12px solid $border-color;
235 | }
236 |
237 | .ChaZD-arrow-inner-up, .ChaZD-arrow-inner-down {
238 | background: transparent;
239 | width: 0;
240 | border-left: 10px solid transparent;
241 | border-right: 10px solid transparent;
242 | position: absolute;
243 | left: 2px;
244 | // z-index: 999999;
245 | }
246 |
247 | .ChaZD-arrow-inner-up {
248 | border-bottom: 10px solid $background-color;
249 | top: 2px;
250 | }
251 |
252 | .ChaZD-arrow-inner-down {
253 | border-top: 10px solid $background-color;
254 | }
255 |
256 | a.ChaZD-link {
257 | text-decoration: none !important;
258 | cursor: text !important;
259 | }
260 | /*
261 | .ChaZD-result-container .voice-container::after {
262 | content: '\E803';
263 | font-family: "YDdict-Icon";
264 |
265 | -webkit-transition: color 0.2s linear;
266 | transition : color 0.2s linear;
267 | }
268 |
269 | .ChaZD-result-container .voice-container:hover {
270 | color: rgba(119, 110, 101, 1);
271 | }
272 | */
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "YDdict-Icon";
3 | src: url("fonts/YDdict-Icon-font.eot");
4 | src: url("fonts/YDdict-Icon-font.svg") format("svg"),
5 | url("fonts/YDdict-Icon-font.woff") format("woff");
6 | font-weight: normal;
7 | font-style: normal;
8 | }
9 |
10 | @keyframes slide-down {
11 | from {
12 | transform: scaleY(0);
13 | -webkit-transform: scaleY(0);
14 | }
15 | to {
16 | transform: scaleY(1);
17 | -webkit-transform: scaleY(1);
18 | }
19 | }
20 |
21 | @-webkit-keyframes slide-down {
22 | from {
23 | transform: scaleY(0);
24 | -webkit-transform: scaleY(0);
25 | }
26 | to {
27 | transform: scaleY(1);
28 | -webkit-transform: scaleY(1);
29 | }
30 | }
31 |
32 | @keyframes fade-in {
33 | from {
34 | opacity: 0;
35 | }
36 | to {
37 | opacity: 1;
38 | }
39 | }
40 |
41 | @-webkit-keyframes fade-in {
42 | from {
43 | opacity: 0;
44 | }
45 | to {
46 | opacity: 1;
47 | }
48 | }
49 |
50 | @keyframes fade-out {
51 | from {
52 | opacity: 1;
53 | }
54 | to {
55 | opacity: 0;
56 | visibility: hidden;
57 | }
58 | }
59 |
60 | @-webkit-keyframes fade-out {
61 | from {
62 | opacity: 1;
63 | }
64 | to {
65 | opacity: 0;
66 | visibility: hidden;
67 | }
68 | }
69 |
70 | @keyframes slide-up {
71 | from {
72 | transform: scaleY(1);
73 | -webkit-transform: scaleY(1);
74 | }
75 | to {
76 | transform: scaleY(0);
77 | -webkit-transform: scaleY(0);
78 | }
79 | }
80 |
81 | @-webkit-keyframes slide-up {
82 | from {
83 | transform: scaleY(1);
84 | -webkit-transform: scaleY(1);
85 | }
86 | to {
87 | transform: scaleY(0);
88 | -webkit-transform: scaleY(0);
89 | }
90 | }
91 |
92 | body {
93 | margin: 0.5em;
94 | padding: 0;
95 | width: 300px;
96 | background-color: #faf8ef;
97 | color: #776e65;
98 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
99 | font-size: 14px;
100 | }
101 |
102 | ul {
103 | list-style: none;
104 | margin: 0;
105 | padding: 0;
106 | }
107 |
108 | .input-container{
109 | position: relative;
110 | margin: 0;
111 | border: 1px solid #dbd8e4;
112 | box-shadow: -0.2px -0.2px 0.2px 0.2px ;
113 | border-radius: 3px;
114 | }
115 |
116 | .input-container:after {
117 | content: "";
118 | display: block;
119 | clear: both;
120 | }
121 |
122 | .input-area {
123 | display: block;
124 | padding: 2px;
125 | border: none;
126 | font-size: 1.3em;
127 | width: 270px;
128 | margin: 1px 0 0 20px;
129 | border-radius: 3px;
130 | }
131 |
132 | .input-area:focus {
133 | outline: none;
134 | }
135 |
136 | .query-button {
137 | display: block;
138 | height: 100%;
139 | position: absolute;
140 | top:0;
141 | left: 0;
142 | border: 0;
143 | border-radius: 1px;
144 | margin: 0;
145 | padding: 4px;
146 | background-color: transparent;
147 | line-height: 19px;
148 | color: rgba(0, 0, 0, 0.2);
149 |
150 | }
151 |
152 | .query-button:focus {
153 | outline-color: transparent;
154 | }
155 |
156 | .query-button:hover {
157 | color: rgba(0, 0, 0, 1);
158 | }
159 |
160 | .query-button:active {
161 | color: rgba(235, 0, 0, 1);
162 | }
163 |
164 | .query-button::after {
165 | content: '\E800';
166 | -webkit-transition: color 0.2s linear;
167 | transition: color 0.2s linear;
168 | font-size: 0.8em;
169 | font-family: "YDdict-Icon";
170 | }
171 |
172 |
173 |
174 | /*Result Block*/
175 | .result-container {
176 | margin-top: 10px;
177 | padding: 4px;
178 | }
179 |
180 | .unshow {
181 | display: none;
182 | }
183 |
184 | /*Result Block -- title contaniner*/
185 | .title-container {
186 | margin-left: 10px;
187 | display: flex;
188 | min-width: 50%;
189 | max-width: 100%;
190 | font-size: 22px;
191 | }
192 |
193 | .title-container.long-text {
194 | font-size: 16px;
195 | }
196 |
197 | .title-container .title-phonetic {
198 | display: none;
199 | }
200 |
201 | .title-container .title-word {
202 | position: relative;
203 | max-width: 50%;
204 | text-align: left;
205 | }
206 |
207 | .title-container .title-word .voice-container {
208 | display: inline-block;
209 | margin-left: 10px;
210 |
211 | }
212 |
213 | .title-container .title-word .voice-container::after {
214 | content: '\E804';
215 | font-family: "YDdict-Icon";
216 | font-size: 70%;
217 | }
218 |
219 | .title-container .title-translation {
220 | flex:1;
221 | margin-left: 10px;
222 | text-align: justify;
223 | max-width: 50%;
224 | }
225 |
226 |
227 | /*Result Block -- basic container*/
228 | .basic-container {
229 | margin-top: 10px;
230 | }
231 |
232 | /*Result Block -- basic container -- phonetic container*/
233 | .phonetic-container {
234 | margin-left: 10px;
235 | font-size: 1em;
236 | }
237 |
238 | .uk-phonetic-container::before {
239 | content: "英 ";
240 | color: #776e65;
241 | }
242 |
243 | .us-phonetic-container::before {
244 | content: "美 ";
245 | color: #776e65;
246 | }
247 |
248 | .uk-phonetic-container, .us-phonetic-container {
249 | display: inline-block;
250 | margin-right: 10px;
251 | color: red;
252 | }
253 |
254 | .voice-container {
255 | cursor: pointer;
256 | display: inline-block;
257 | margin-left: 10px;
258 | color: rgba(119, 110, 101, 0.2);
259 | }
260 |
261 | .voice-container::after {
262 | content: '\E803';
263 | font-family: "YDdict-Icon";
264 |
265 | -webkit-transition: color 0.2s linear;
266 | transition : color 0.2s linear;
267 | }
268 |
269 | .voice-container:hover {
270 | color: rgba(119, 110, 101, 1);
271 | }
272 |
273 |
274 | /*Result Block -- basic container -- explains container*/
275 | .explains-container {
276 | font-size: 14px;
277 | margin-top: 10px;
278 | }
279 |
280 | .explains-list {
281 | border: 1px solid #F0EFF0;
282 | border-radius: 1px;
283 | padding: 10px;
284 | }
285 |
286 | .explains-list li {
287 | margin-bottom: 5px;
288 | }
289 |
290 | .property-container {
291 | margin-right: 5px;
292 | }
293 |
294 | /*Result Block -- web explains container*/
295 | .web-explains-container {
296 | font-size: 14px;
297 | margin-top: 20px;
298 | position: relative;
299 | }
300 |
301 | .web-title {
302 | position: absolute;
303 | top: -5px;
304 | left: 10px;
305 | background-color: #faf8ef;
306 | font-weight: bold;
307 | }
308 |
309 | .web-title::before {
310 | content: '\E802';
311 | font-family: "YDdict-Icon";
312 | margin-right: 5px;
313 | color: #ccbb1e;
314 | }
315 |
316 | .web-explains-list {
317 | border: 1px solid #F0EFF0;
318 | border-radius: 1px;
319 | padding: 10px;
320 | padding-top: 20px;
321 | }
322 |
323 | .web-explains-list li {
324 | margin-bottom: 5px;
325 | }
326 |
327 | .web-explains-list li .web-key {
328 | font-weight: bold;
329 | }
330 |
331 | .web-explains-list li .web-value {
332 | margin-left: 5px;
333 | }
334 |
335 | .tips-container {
336 | position: relative;
337 | padding: 5px;
338 | font-size: 0.4em;
339 | color: rgba(0, 0, 0, 0.4);
340 | }
341 |
342 | .tips-container p {
343 | margin: 0;
344 | margin-top: 5px;
345 | padding: 0;
346 | }
347 |
348 | .tips-container .link {
349 | color: rgba(0, 161, 194, 1);
350 | cursor: pointer;
351 | -webkit-transition: color 0.2s linear;
352 | transition : color 0.2s linear;
353 | }
354 |
355 | #turn-off-tips {
356 | position: absolute;
357 | right: 5px;
358 | bottom: 5px;
359 | cursor: pointer;
360 | text-decoration: underline;
361 | }
362 |
363 | footer {
364 | font-size: 0.3em;
365 | text-align: center;
366 | position: relative;
367 | color: rgba(0, 0, 0, 0.2);
368 | }
369 |
370 | footer img {
371 | position: relative;
372 | top:4px;
373 | width: 50px;
374 | opacity: 0.6;
375 | }
376 |
377 | .contact-info {
378 | font-size: 0.3em;
379 | font-family: "YDdict-Icon";
380 | position: absolute;
381 | bottom:0;
382 | right: 0;
383 | }
384 |
385 | .link {
386 | cursor: pointer;
387 | text-decoration: none;
388 | color: rgba(0, 0, 0, 0.6);
389 | opacity: 0.5;
390 | }
391 |
392 | .link:hover {
393 | color: rgba(0, 0, 0, 1);
394 | }
395 |
396 | #score::after {
397 | content: '\E80B';
398 | -webkit-transition: color 0.2s linear;
399 | transition: color 0.2s linear;
400 | }
401 |
402 | #email::after {
403 | content: '\E806';
404 | -webkit-transition: color 0.2s linear;
405 | transition : color 0.2s linear;
406 | }
407 |
408 | #issue::after {
409 | content: '\E805';
410 |
411 | -webkit-transition: color 0.2s linear;
412 | transition : color 0.2s linear;
413 | }
414 |
415 | #source::after {
416 | content: '\E807';
417 |
418 | -webkit-transition: color 0.2s linear;
419 | transition : color 0.2s linear;
420 | }
421 |
422 | .setting-button {
423 | position: absolute;
424 | bottom:0;
425 | left: 0;
426 | cursor: pointer;
427 | font-size: 0.3em;
428 | font-family: "YDdict-Icon";
429 | }
430 |
431 | .setting-button-clicked {
432 | color: #000000;
433 | }
434 |
435 | .setting-button::after {
436 | content: "\E80A";
437 | -webkit-transition: color 0.2s linear;
438 | transition : color 0.2s linear;
439 | }
440 |
441 | .setting-block {
442 | margin: 5px 0;
443 | text-align: justify;
444 | border: 0px solid #F0EFF0;
445 | border-radius: 1px;
446 | background-color: #f2ecd4;
447 | max-height: 0;
448 | height: 0;
449 | overflow-y: hidden;
450 | color: #6e665e;
451 | transition: all .5s cubic-bezier(0, 1, 0.5, 1);
452 | -webkit-transition: all .5s cubic-bezier(0, 1, 0.5, 1);
453 | }
454 |
455 | .active {
456 | border: 1px solid #F0EFF0;
457 | max-height: 800px;
458 | }
459 |
460 | .setting-slide-up {
461 | animation: fade-out 0.4s ease forwards;
462 | -webkit-animation: fade-out 0.4s ease forwards;
463 | }
464 |
465 | .setting-slide-down {
466 | display: block;
467 | animation: fade-in 0.4s ease forwards;
468 | -webkit-animation: fade-in 0.4s ease forwards;
469 | }
470 |
471 | .setting-block div {
472 | margin-top: 5px;
473 | padding: 1px 10px;
474 | }
475 |
476 | .setting-block .top-menu {
477 | margin-bottom: 5px;
478 | }
479 |
480 | .setting-block .sub-menu {
481 | margin-top: 5px;
482 | }
483 |
484 | .setting-block .link-query {
485 | margin-left: 5px;
486 | }
487 |
488 | .setting-block .help {
489 | font-size: 12px;
490 | cursor: help;
491 | }
492 |
493 | .setting-block label {
494 | margin-left: 5px;
495 | }
496 |
497 | .setting-block label.unactive {
498 | color: rgba(0, 0, 0, 0.5);
499 | }
500 |
501 | .setting-block input {
502 | margin: 0;
503 | }
504 |
505 | .setting-block .sub-title {
506 | margin-left: 17px;
507 | font-size: 90%;
508 | }
509 |
510 | .setting-block .sub-button {
511 | margin-left: 5px;
512 | }
513 |
514 | .setting-block .sub-label{
515 | font-size: 90%;
516 | }
517 |
518 | #currentDuration {
519 | display: inline-block;
520 | width: 14px;
521 | text-align: center;
522 | }
523 |
524 | input[type="range"] {
525 | width: 100px;
526 | position: relative;
527 | top:3px;
528 | }
529 |
530 | #save {
531 | position: absolute;
532 | top: 0;
533 | right: 0;
534 | }
535 |
536 | #cancel {
537 | position: absolute;
538 | top: 25px;
539 | right: 0;
540 | }
541 |
542 | hr.carved {
543 | clear: both;
544 | float: none;
545 | width: 100%;
546 | height: 2px;
547 | line-height: 2px;
548 | font-size: 0;
549 | margin: 1.4em 0;
550 | border: none 0;
551 | background: #ddd;
552 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.5, rgb(221,221,221)),color-stop(0.5, rgb(255,255,255)));
553 | background-image: -webkit-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
554 | background-image: -o-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
555 | background-image: -moz-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
556 | }
--------------------------------------------------------------------------------