add tag <b> in Collins, add deckname in quickoption, minor css fix

ninja33 · Mar 9, 2018 · 47d905a · 47d905a
1 parent 84d7d8e
commit 47d905a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 6 deletions.
diff --git a/src/bg/css/popup.css b/src/bg/css/popup.css
@@ -4,7 +4,7 @@ body {
     width: 158px;
     border-radius: 8px;
     margin: 2px 4px;
-    padding:0;
+    padding: 0;
 }
 
 .container {
@@ -37,6 +37,10 @@ section {
     padding: 5px;
 }
 
+section+section {
+    margin-top: 5px;
+}
+
 label,
 input[type=text],
 select {
@@ -50,6 +54,7 @@ select {
     box-sizing: border-box;
 }
 
+.anki-options select,
 .dictionary-options select {
     width: 140px;
 }

diff --git a/src/bg/js/popup.js b/src/bg/js/popup.js
@@ -1,16 +1,36 @@
 /* global odhback, localizeHtmlPage, utilAsync, optionsLoad, optionsSave */
+async function populateAnkiDeckAndModel(opts) {
+    let names = [];
+    $('#deckname').empty();
+    names = await odhback().opt_getDeckNames();
+    if (names !== null) {
+        names.forEach(name => $('#deckname').append($('<option>', { value: name, text: name })));
+    }
+    $('#deckname').val(opts.deckname);
+}
+
 function populateDictionary(dicts) {
     $('#dict').empty();
     dicts.forEach(name => $('#dict').append($('<option>', { value: name, text: name })));
 }
 
+async function updateAnkiStatus() {
+    let version = await odhback().opt_getVersion();
+    if (version === null) {
+        $('.anki-options').hide();
+    } else {
+        $('.anki-options').show();
+    }
+}
+
 async function onOptionChanged(e) {
     if (!e.originalEvent) return;
 
     let options = await optionsLoad();
 
     options.enabled = $('#enabled').prop('checked');
     options.hotkey = $('#hotkey').val();
+    options.deckname = $('#deckname').val();
     options.dictSelected = $('#dict').val();
     odhback().opt_optionsChanged(options);
 }
@@ -28,13 +48,20 @@ async function onReady() {
     let opts = await optionsLoad();
     $('#enabled').prop('checked', opts.enabled);
     $('#hotkey').val(opts.hotkey);
+    $('#deckname').val(opts.deckname);
     populateDictionary(opts.dictNamelist);
     $('#dict').val(opts.dictSelected);
 
     $('#enabled').change(onOptionChanged);
     $('#hotkey').change(onOptionChanged);
+    $('#deckname').change(onOptionChanged);
     $('#dict').change(onOptionChanged);
     $('#more').click(onMoreOptions);
+
+    $('.anki-options').hide();
+    updateAnkiStatus();
+    populateAnkiDeckAndModel(opts);
+
 }
 
 $(document).ready(utilAsync(onReady));
diff --git a/src/bg/popup.html b/src/bg/popup.html
@@ -32,7 +32,11 @@
                 </select>
             </section>
 
-            <hr>
+            <section class="anki-options">
+                <select id="deckname">
+                    <option value=""></option>
+                </select>
+            </section>
 
             <section class="dictionary-options">
                 <select id="dict">

diff --git a/src/dict/cncn_Zdic.js b/src/dict/cncn_Zdic.js
@@ -136,7 +136,7 @@ class cncn_Zdic {
     renderCSS(style) {
         let ciCss = 'a,a:hover,input:focus,select:focus,textarea:focus{color:#369}.gc_fy,.gc_jy,.gc_lz,.gc_sy,.gc_yx,.gc_yy{clear:both;display:block}.cdnr .jiaru_s,.footer,ruby{text-align:center}blockquote,body,dd,div,dl,dt,fieldset,h1,h2,h3,h4,h5,img,label,li,ol,p,select,span,td,textarea,th,ul{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:14px;color:#333;line-height:25px;background:#fff}a{font-size:12px;text-decoration:none}.cdnr,input{font-size:14px}a:hover{text-decoration:underline}blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,img,label,li,ol,p,span,td,th,ul{margin:0;padding:0;list-style:none;border:none}li{padding:5px 0}hr{border:1px solid #CCC}.cdnr{font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;padding:5px}.cdnr h1,.cdnr h2{font-weight:700;margin-right:5px;padding:2px 0 2px 10px}.cdnr h1{color:#600;font-size:18px}.cdnr h2{color:#333;font-size:16px}.cdnr .dicpy{color:#903}.cdnr .diczy{color:#009}.cdnr td{padding:0;margin:0}.cdnr .info{color:#999;font-size:14px;margin-right:5px;padding-left:10px}.cdnr .mut_jies{padding:10px 20px 20px;font-size:14px;color:#444;line-height:22px}.cdnr .yf_all{background:url(/imgs/tbg_r.gif) right no-repeat;padding:3px 4px 4px}.cdnr .if_all{color:#fff;background:url(/imgs/tbg_l.gif) left no-repeat;padding:3px 4px 4px 6px}.cdnr .mut_lvs{color:#090;font-weight:bolder}.cdnr h3{padding-left:15px;color:#000;line-height:26px;font-size:14px;background:url(/imgs/dotline_h.gif) center bottom repeat-x}.cdnr .mut_ol{margin:10px 6px 10px 35px}.cdnr .mut_ol li{list-style-position:outside;list-style-type:decimal}.cdnr .mut_ol .ty{color:gray}.cdnr .mut_ol .ty a{color:#2b919f}.cdnr .mut_h3s{color:#090;font-weight:bolder;padding:10px 20px 0 15px}.cdnr .jiaru_s{margin:10px 0}.cdnr .more{margin:10px 10px 10px 15px;font-size:13px}.cdnr .mutti_pp{padding:10px}.cdnr .diczx1{color:#036}.cdnr .diczx2{color:#900}.cdnr .diczx3{color:#006}.cdnr .diczx4{color:#060}.cdnr p{border-bottom:1px dotted #999;line-height:25px}.footer .copyright{font-size:8px;color:#CCC}.gycd ul,ol{margin-bottom:10px;margin-top:0}.gc_uono{list-style:none;/*margin-left:1.5em*/}.gycd{font-size:100%;line-height:1.5;padding-bottom:5px}.gc_sy{margin-bottom:2pt;font-weight:700}.gc_yy{font-size:92%;color:#674f4f}.gc_fy,.gc_jy{font-size:85%;margin-top:2px;font-weight:700;color:#666}.gc_jfy_i{background-color:#633;border-radius:4px;color:#fff;font-size:100%;line-height:1;padding:2px;margin-right:5px}.pz{border-bottom:1px dashed #F1E9E7}.pz ruby{/*margin-left:20px*/}.pz ruby rbc{font-size:150%;line-height:30px;font-weight:700}.pz ruby rtc{font-size:80%;color:#8F6652;line-height:30px}ruby{display:inline-table;white-space:nowrap;text-indent:0;margin:0;vertical-align:-20%}ruby>rb,ruby>rbc{display:table-row-group;line-height:90%}ruby>rbc+rtc,ruby>rbc+rtc+rtc,ruby>rt{font-size:60%;line-height:40%;letter-spacing:0}ruby>rbc+rtc,ruby>rt{display:table-header-group}ruby>rbc+rtc+rtc{display:table-footer-group}rbc>rb,rtc>rt{display:table-cell;letter-spacing:0}rtc>rt[rbspan]{display:table-caption}rp{display:none}';
 
-        let ziCss = 'a,a:hover,input:focus,select:focus,textarea:focus{color:#369}#con,#tags{WIDTH:100%}#con,#tags LI .ff{FONT-SIZE:14px}#tags LI,#tags LI A,.swxz{FLOAT:left}.hb,.swjs1,.swjs2{clear:both}body{overflow-x:hidden}blockquote,body,dd,div,dl,dt,fieldset,h1,h2,h3,h4,h5,img,label,li,ol,p,select,span,td,textarea,th,ul{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:14px;color:#333;line-height:25px;background:#fff}a{font-size:12px;text-decoration:none}.tagContent,input{font-size:14px}a:hover{text-decoration:underline}blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,img,label,li,ol,p,span,td,th,ul{margin:0;padding:0;list-style:none;border:none}li{padding:5px 0}hr{border:1px solid #CCC}.tagContent{font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;padding:5px;width:100%}.tagContent h1,.tagContent h2{margin-right:5px;padding:2px 0 2px 10px;font-weight:700}.tagContent h1{color:#600;font-size:18px}.tagContent h2{color:#333;font-size:16px}.tagContent td{padding:0;margin:0}.tagContent .diczx1{color:#036}.tagContent .diczx2{color:#900}.tagContent .diczx3{color:#006}.tagContent .diczx4{color:#845247}.tagContent .dicpy,.tagContent .diczy{font-size:14px;font-family:pinyin;color:#600}.tagContent .diczx6{font-weight:700;color:#48623C}.tagContent .diczx7{font-weight:700;color:#303E59}.tagContent p{line-height:25px}.footer{text-align:center}.footer .copyright{font-size:8px;color:#CCC}OL LI{MARGIN:8px}#con{MARGIN:0 auto}#tags{PADDING-RIGHT:0;PADDING-LEFT:0;PADDING-BOTTOM:0;MARGIN:0 10px 10px 0;PADDING-TOP:0;HEIGHT:23px}#tags LI A,.tagContent{PADDING-RIGHT:5px;PADDING-LEFT:5px;PADDING-BOTTOM:0;PADDING-TOP:0}#tags LI{MARGIN-RIGHT:1px;LIST-STYLE-TYPE:none;HEIGHT:23px}#tags LI A{COLOR:#999;LINE-HEIGHT:23px;HEIGHT:23px;TEXT-DECORATION:none}#tags LI.selectTag{BACKGROUND-POSITION:left top;MARGIN-BOTTOM:-2px;POSITION:relative;HEIGHT:23px}#tags LI.selectTag A{BACKGROUND-POSITION:right top;COLOR:#000;LINE-HEIGHT:23px;HEIGHT:23px}.tagContent{DISPLAY:none;COLOR:#474747}#tagContent DIV.selectTag{DISPLAY:block}.jbjs_ol{margin:10px 6px 10px 35px}.zui,.zuib{margin:0;padding:0;height:58px}.jbjs_ol li{list-style-position:outside;list-style-type:decimal;line-height:14px}.zui{/*width:100%*/}.zuib{background:url(http://www.zdic.net/images/z_b.gif) no-repeat;width:58px}.hb{border-top:1px solid transparent!important;margin-top:-1px!important;visibility:hidden}.jieshi{font-weight:700}.swjs2{text-align:left}.sound{width:20px;height:20px;margin-left:.5em;display:inline-block;cursor:pointer;overflow:hidden;top:2px;position:relative;background:url(http://img.zdic.net/zdicpic/images/mp3ico.png) -20px 2px no-repeat}.sound:hover{text-decoration:none;background-position:0 2px}';
+        let ziCss = 'a,a:hover,input:focus,select:focus,textarea:focus{color:#369}#con,#tags{WIDTH:100%}#con,#tags LI .ff{FONT-SIZE:14px}#tags LI,#tags LI A,.swxz{FLOAT:left}.hb,.swjs1,.swjs2{clear:left}body{overflow-x:hidden}blockquote,body,dd,div,dl,dt,fieldset,h1,h2,h3,h4,h5,img,label,li,ol,p,select,span,td,textarea,th,ul{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:14px;color:#333;line-height:25px;background:#fff}a{font-size:12px;text-decoration:none}.tagContent,input{font-size:14px}a:hover{text-decoration:underline}blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,img,label,li,ol,p,span,td,th,ul{margin:0;padding:0;list-style:none;border:none}li{padding:5px 0}hr{border:1px solid #CCC}.tagContent{font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;padding:5px;width:100%}.tagContent h1,.tagContent h2{margin-right:5px;padding:2px 0 2px 10px;font-weight:700}.tagContent h1{color:#600;font-size:18px}.tagContent h2{color:#333;font-size:16px}.tagContent td{padding:0;margin:0}.tagContent .diczx1{color:#036}.tagContent .diczx2{color:#900}.tagContent .diczx3{color:#006}.tagContent .diczx4{color:#845247}.tagContent .dicpy,.tagContent .diczy{font-size:14px;font-family:pinyin;color:#600}.tagContent .diczx6{font-weight:700;color:#48623C}.tagContent .diczx7{font-weight:700;color:#303E59}.tagContent p{line-height:25px}.footer{text-align:center}.footer .copyright{font-size:8px;color:#CCC}OL LI{MARGIN:8px}#con{MARGIN:0 auto}#tags{PADDING-RIGHT:0;PADDING-LEFT:0;PADDING-BOTTOM:0;MARGIN:0 10px 10px 0;PADDING-TOP:0;HEIGHT:23px}#tags LI A,.tagContent{PADDING-RIGHT:5px;PADDING-LEFT:5px;PADDING-BOTTOM:0;PADDING-TOP:0}#tags LI{MARGIN-RIGHT:1px;LIST-STYLE-TYPE:none;HEIGHT:23px}#tags LI A{COLOR:#999;LINE-HEIGHT:23px;HEIGHT:23px;TEXT-DECORATION:none}#tags LI.selectTag{BACKGROUND-POSITION:left top;MARGIN-BOTTOM:-2px;POSITION:relative;HEIGHT:23px}#tags LI.selectTag A{BACKGROUND-POSITION:right top;COLOR:#000;LINE-HEIGHT:23px;HEIGHT:23px}.tagContent{DISPLAY:none;COLOR:#474747}#tagContent DIV.selectTag{DISPLAY:block}.jbjs_ol{margin:10px 6px 10px 35px}.zui,.zuib{margin:0;padding:0;height:58px}.jbjs_ol li{list-style-position:outside;list-style-type:decimal;line-height:14px}.zui{/*width:100%*/}.zuib{background:url(http://www.zdic.net/images/z_b.gif) no-repeat;width:58px}.hb{border-top:1px solid transparent!important;margin-top:-1px!important;visibility:hidden}.jieshi{font-weight:700}.swjs2{text-align:left}.sound{width:20px;height:20px;margin-left:.5em;display:inline-block;cursor:pointer;overflow:hidden;top:2px;position:relative;background:url(http://img.zdic.net/zdicpic/images/mp3ico.png) -20px 2px no-repeat}.sound:hover{text-decoration:none;background-position:0 2px}';
 
         return style == 'ciCSS' ? ciCss : (style == 'ziCSS' ? ziCss : '');
     }

diff --git a/src/dict/encn_Collins.js b/src/dict/encn_Collins.js
@@ -74,15 +74,18 @@ class encn_Collins {
                     let chn_tran = tran_entry.tran.match(/([\u4e00-\u9fa5]|;|( ?\()|(\) ?))+/gi).join(' ').trim();
                     let eng_tran = tran_entry.tran.replace(/([\u4e00-\u9fa5]|;|( ?\()|(\) ?))+/gi, '').trim();
                     chn_tran = chn_tran ? `<span class="chn_tran">${chn_tran}</span>` : '';
+                    eng_tran = eng_tran ? eng_tran.replace(RegExp(expression,'gi'),'<b>$&</b>'):''; //surround expression with <b> in eng_translation.
                     eng_tran = eng_tran ? `<span class="eng_tran">${eng_tran}</span>` : '';
                     definition += `${pos}<span clas="tran">${eng_tran}${chn_tran}</span>`;
                     // make exmaple sentence segement
                     let sents = tran_entry.exam_sents ? tran_entry.exam_sents.sent : [];
                     if (sents.length > 0 && this.maxexample > 0) {
                         definition += '<ul class="sents">';
                         for (const [index, sent] of sents.entries()) {
-                            if (index > this.maxexample - 1) break; // to control only 2 example sentence.
-                            definition += `<li class='sent'><span class='eng_sent'>${sent.eng_sent}</span><span class='chn_sent'>${sent.chn_sent}</span></li>`;
+                            if (index > this.maxexample - 1) break; // to control only n example sentences defined in option.
+                            let chn_sent = sent.chn_sent;
+                            let eng_sent = sent.eng_sent ? sent.eng_sent.replace(RegExp(expression,'gi'),'<b>$&</b>'):''; //surround expression with <b> in eng_example.
+                            definition += `<li class='sent'><span class='eng_sent'>${eng_sent}</span><span class='chn_sent'>${chn_sent}</span></li>`;
                         }
                         definition += '</ul>';
                     }

diff --git a/src/dict/enen_Collins.js b/src/dict/enen_Collins.js
@@ -71,6 +71,7 @@ class enen_Collins {
             let eng_tran = T(defblock.querySelector('.sense .def'));
             if (!eng_tran) continue;
             let definition = '';
+            eng_tran = eng_tran.replace(RegExp(expression,'gi'),'<b>$&</b>'); 
             eng_tran = `<span class='eng_tran'>${eng_tran}</span>`;
             let tran = `<span class='tran'>${eng_tran}</span>`;
             definition += `${pos}${tran}`;
@@ -81,7 +82,8 @@ class enen_Collins {
                 definition += '<ul class="sents">';
                 for (const [index, examp] of examps.entries()) {
                     if (index > this.maxexample - 1) break; // to control only 2 example sentence.
-                    definition += T(examp) ? `<li class='sent'><span class='eng_sent'>${T(examp)}</span></li>` : '';
+                    let eng_examp = T(examp) ? T(examp).replace(RegExp(expression,'gi'),'<b>$&</b>'):'';
+                    definition += eng_examp ? `<li class='sent'><span class='eng_sent'>${eng_examp}</span></li>` : '';
                 }
                 definition += '</ul>';
             }

diff --git a/src/fg/css/frame.css b/src/fg/css/frame.css
@@ -53,6 +53,7 @@
   padding: 5px;
   margin-top: 5px;
   word-wrap: break-word;
+  overflow: auto;  
 }
 
 .odh-sentence {