Automatically open options if language is not set.

We check the language at each button click. Turned out to be tricker than I though but it's worth it I think.
Khan · Dec 5, 2019 · 516f6e1 · 516f6e1
1 parent b945c0e
commit 516f6e1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 28 deletions.
diff --git a/app.js b/app.js
@@ -1,15 +1,25 @@
 (function () {
-
     var $ = Zepto;
     var copySourceElemSelector = '#translation_container #action_copy_source';
-    // Amend translation Assistant with fake default locale so that we are
-    // backwards compatible with the old plugin
-    var lang = 'dec-comma';
-    MATH_RULES_LOCALES.DECIMAL_COMMA.push(lang);
+
     // Users need to set the lang manually in plugin options!
-    chrome.storage.sync.get(['locale'], function(result) {
-         lang = result.locale;
-    });
+    var openOptions = function () {
+        chrome.runtime.sendMessage({"action": "openOptionsPage"});
+    };
+
+    var getLocale = function(cb) {
+
+        function onGet(result) {
+            var lang = result.locale;
+            if (lang && lang != 'dec-comma') {
+                cb(lang);
+            } else {
+                openOptions();
+            }
+        }
+
+        chrome.storage.sync.get({'locale': null}, onGet);
+    };
 
     var whenElemIsReady = function (selector, cb) {
 
@@ -22,11 +32,6 @@
         }
     };
 
-    // This is where we actually translate math
-    // by calling a helper function from Translation Assistant (TA)
-    var translateMathWrapper = function (math, offset, fullString) {
-       return translateMath(math, lang);
-    }
 
     // This is needed since TA deals only with unescaped strings,
     // so we need to escape them afterwards. Equivalent code is part of 
@@ -40,18 +45,23 @@
 
     var initializePlugin = function() {
 
-        $menu = $(copySourceElemSelector).parent(),
-            $changeFormatBtn = $('<button tabindex="-1" title="Copy Source & translate math notation" class="btn btn-icon"><i class="static-icon-copy"></i></button>'),
-            $translation = $('#translation');
+        $menu = $(copySourceElemSelector).parent();
+        $changeFormatBtn = $('<button tabindex="-1" title="Copy Source & translate math notation" class="btn btn-icon"><i class="static-icon-copy"></i></button>');
+        $translation = $('#translation');
 
         commaURL = chrome.runtime.getURL("5commastyle.gif");
-
         $changeFormatBtn.css('background', `url("${commaURL}") 3px 7px no-repeat`);
-
         $menu.append($changeFormatBtn);
 
-        function copyAndTranslateMathInTranslation() {
+        var copyAndTranslateMath = function(lang) {
             $('#action_copy_source').click();
+
+            // This is where we actually translate math
+            // by calling a helper function from Translation Assistant (TA)
+            function translateMathWrapper(math, offset, fullString) {
+                return translateMath(math, lang);
+            }
+
             var source = $translation.val();
             // Unescape string to pass to TA (as happens in Khan Translation Editor)
             // Here we again use the actual code from KA codebase defined in jipt_hack.js
@@ -66,7 +76,11 @@
             $translation.val(translatedString);
         }
 
-        $changeFormatBtn.on('click', copyAndTranslateMathInTranslation);
+        var checkLocale = function() {
+            getLocale(copyAndTranslateMath);
+        }
+
+        $changeFormatBtn.on('click', checkLocale);
     };
 
     //Crowdin window is generated dynamically so we need to wait for the parent element to be built

diff --git a/background.js b/background.js
@@ -0,0 +1,19 @@
+// The following is needed to open option page automatically
+// if the locale is not set
+// https://stackoverflow.com/questions/49192636/how-can-i-open-my-options-html-currently-i-get-cannot-read-property-create-of
+//
+// This Js file is run in the background, see:
+// https://developer.chrome.com/extensions/background_pages
+chrome.runtime.onMessage.addListener(function(message) {
+    switch (message.action) {
+        case "openOptionsPage":
+            openOptionsPage();
+            break;
+        default:
+            break;
+    }
+});
+
+function openOptionsPage(){
+    chrome.runtime.openOptionsPage();
+}
diff --git a/manifest.json b/manifest.json
@@ -7,13 +7,14 @@
     "activeTab",
     "storage"
   ],
-   "options_ui": {
-    "page": "options.html",
-    "open_in_tab": true
-  },
+  "options_page": "options.html",
   "web_accessible_resources": [
     "5commastyle.gif"
   ],
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
   "content_scripts": [
     {
       "matches": [

diff --git a/options.html b/options.html
@@ -2,12 +2,14 @@
 <html>
 <head>
    <meta charset="utf-8">
-   <title>Khan Math Translations</title></head>
+   <title>KhanAcademyDots Math Translations</title></head>
 <body>
 
-Language
+  <h1>KhanAcademyDots plugin for automatic translations of math notation</h1>
+
+  <h2>Please select your language for Khan Academy translations</h2>
+
 <select id="locale">
- <option value="dec-comma">Translate decimal points to commas (default)</option>
  <option value="sq">Albanian</option>
  <option value="am">Amharic</option>
  <option value="ar">Arabic</option>
@@ -70,6 +72,17 @@
 <div id="status"></div>
 <button id="save">Save</button>
 
+<br>
+
+<div> Currently supported math notation that will be auto-translated:<br>
+  <ul>
+    <li>Decimal point to decimal comma</li>
+    <li>Thousand separator</li>
+    <li>Multiplication</li>
+    <li>Division</li>
+  </ul>
+</div>
+
 <script src="options.js"></script>
 </body>
 </html>
diff --git a/options.js b/options.js
@@ -19,7 +19,7 @@ function save_options() {
 // stored in chrome.storage.
 function restore_options() {
   chrome.storage.sync.get({
-    locale: 'dec-comma',
+    locale: 'not-set',
   }, function(items) {
     document.getElementById('locale').value = items.locale;
   });