2020 08 add pleco link4 firefox android

README.md

@@ -32,6 +32,7 @@ It also contains useful features for learners of the Chinese language.
   queue.
 
 
+
 ## Installation
 
 ### Chrome
@@ -46,7 +47,7 @@ The Zhongwen Firefox extension is available via the Firefox Add-Ons site:
 https://addons.mozilla.org/en-US/firefox/addon/zhongwen
 
 Simply click on the "Add to Firefox" button to start the installation.
-
+Note that the Addon works both on the PC and Android version of Firefox.
 
 ## How Does It Work?
 Once Zhongwen is installed on your computer you'll see a little icon showing

background.js

@@ -54,18 +54,35 @@ let isActivated = false;
 
 let tabIDs = {};
 
+let zhongwenOptions={};
+
 let dict;
+
+loadOptionsPreferences();
+
+
+function loadOptionsPreferences(){
+   //need platform info for some features
+    chrome.runtime.getPlatformInfo(function(info){
+
+    zhongwenOptions = window.zhongwenOptions = {
+        css: localStorage['popupcolor'] || 'yellow',
+        tonecolors: localStorage['tonecolors'] || 'yes',
+        fontSize: localStorage['fontSize'] || 'small',
+        skritterTLD: localStorage['skritterTLD'] || 'com',
+        zhuyin: localStorage['zhuyin'] || 'no',
+        grammar: localStorage['grammar'] || 'yes',
+        simpTrad: localStorage['simpTrad'] || 'classic',
+        toneColorScheme: localStorage['toneColorScheme'] || 'standard',
+        platform: localStorage['platform'] || info.os
+        };  
+
+    if(info.os=='android'){
+        zhongwenOptions.openInPlecoOnAndroid=window.zhongwenOptions.openInPlecoOnAndroid=localStorage['openInPlecoOnAndroid'] || 'yes';
+    }
+    });
+ }
 
-let zhongwenOptions = window.zhongwenOptions = {
-    css: localStorage['popupcolor'] || 'yellow',
-    tonecolors: localStorage['tonecolors'] || 'yes',
-    fontSize: localStorage['fontSize'] || 'small',
-    skritterTLD: localStorage['skritterTLD'] || 'com',
-    zhuyin: localStorage['zhuyin'] || 'no',
-    grammar: localStorage['grammar'] || 'yes',
-    simpTrad: localStorage['simpTrad'] || 'classic',
-    toneColorScheme: localStorage['toneColorScheme'] || 'standard'
-};
 
 function activateExtension(tabId, showHelp) {
 

content.js

@@ -917,6 +917,21 @@ function makeHtml(result, showToneColors) {
         html += '&hellip;<br/>';
     }
 
+    if (config.openInPlecoOnAndroid == 'yes') {
+        let plecoSymbol = document.createElement('span');
+            let img = document.createElement('IMG');
+            let url=chrome.runtime.getURL("images/pleco25.png");
+            img.src=url;  
+            img.className='imgPleco';
+            let a = document.createElement('a');
+            a.className="surrImgPleco";
+            a.href = 'plecoapi://x-callback-url/s?q='+result.data[0][1];
+            a.appendChild(img);
+            plecoSymbol.appendChild(a);
+            html+=plecoSymbol.outerHTML;
+    }
+
+
     savedSearchResults = texts;
     savedSearchResults.grammar = result.grammar;
 

css/content.css

@@ -221,3 +221,15 @@
 #zhongwen-window.tonecolor-hanping .tone5 {
   color: #a0a0a0;
 }
+
+#zhongwen-window .imgPleco {
+  float:right;
+  margin-left:2em;
+  margin-top:2em; 
+  margin-right:0.4em;
+  height:150%;
+}
+
+#zhongwen-window .surrImgPleco {
+  float:right;
+}

js/options.js

@@ -36,6 +36,15 @@ function loadVals() {
 
     const skritterTLD = localStorage['skritterTLD'] || 'com';
     document.querySelector(`input[name="skritterTLD"][value="${skritterTLD}"]`).checked = true;
+
+    //On Android display Open in Pleco feature
+    if(chrome.extension.getBackgroundPage().zhongwenOptions.platform == "android"){
+    const openInPlecoOnAndroid = localStorage['openInPlecoOnAndroid'] || 'yes';
+    document.querySelector('#openInPlecoOnAndroid').checked = openInPlecoOnAndroid !== 'no';
+    }
+    else {
+        document.querySelector('#openInPlecoOnAndroidContainer').style.display='none'
+    }       
 }
 
 function setPopupColor(popupColor) {
@@ -99,6 +108,9 @@ window.addEventListener('load', () => {
         input.addEventListener('change',
             () => setOption('skritterTLD', input.getAttribute('value')));
     });
+
+    document.querySelector('#openInPlecoOnAndroid').addEventListener('change',
+        (event) => setBooleanOption('openInPlecoOnAndroid', event.target.checked));
 });
 
 loadVals();

options.html

@@ -158,6 +158,14 @@ <h2 class="mb-3">Other Options</h2>
             <label class="custom-control-label" for="skritterTLDcn">skritter.cn</label>
         </div>
     </div>
+
+    <div class="form-group mb-4" id="openInPlecoOnAndroidContainer">
+        <label>Redirect to Pleco </label>
+        <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="openInPlecoOnAndroid" name="openInPlecoOnAndroid">
+            <label class="custom-control-label" for="openInPlecoOnAndroid">Show the clickable Pleco symbol. A long click is needed to be redirected to the Pleco Application</label>
+        </div>     
+    </div>
 </div>
 <script src="js/options.js" type="text/javascript"></script>
 </body>