From e2a592ae64bcd501fc84bbed0f63d5315d303b65 Mon Sep 17 00:00:00 2001
From: Ayaka Mikazuki <ayaka@mail.shn.hk>
Date: Sat, 5 Sep 2020 16:11:36 +0800
Subject: [PATCH] Update converter

1. Add Chinese (Hong Kong) translation
2. Add a popup to disable/enable the automatic injection
---
 _locales/en/messages.json    |  6 ++++
 _locales/ja/messages.json    |  6 ++++
 _locales/zh_CN/messages.json |  6 ++++
 _locales/zh_HK/messages.json | 17 +++++++++
 _locales/zh_TW/messages.json |  6 ++++
 content_scripts/main.js      | 12 +++++--
 manifest.json                | 11 ++++--
 package.sh                   |  2 +-
 popup/index.css              | 70 ++++++++++++++++++++++++++++++++++++
 popup/index.html             | 18 ++++++++++
 popup/index.js               | 11 ++++++
 11 files changed, 158 insertions(+), 7 deletions(-)
 create mode 100644 _locales/zh_HK/messages.json
 mode change 100644 => 100755 package.sh
 create mode 100644 popup/index.css
 create mode 100644 popup/index.html
 create mode 100644 popup/index.js

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 6a67b49..13958d8 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "en"
+    },
     "extensionName": {
         "message": "Inject Jyutping"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "Inject Jyutping"
+    },
+    "popupCheckboxText": {
+        "message": "Inject automatically"
     }
 }
diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
index 5449b21..2acdeb7 100644
--- a/_locales/ja/messages.json
+++ b/_locales/ja/messages.json
@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "ja"
+    },
     "extensionName": {
         "message": "粵拼を注入"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "粵拼を注入"
+    },
+    "popupCheckboxText": {
+        "message": "オート注入"
     }
 }
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
index 2264d97..6244f71 100644
--- a/_locales/zh_CN/messages.json
+++ b/_locales/zh_CN/messages.json
@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "zh-CN"
+    },
     "extensionName": {
         "message": "注入粤拼"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "注入粤拼"
+    },
+    "popupCheckboxText": {
+        "message": "自动注入"
     }
 }
diff --git a/_locales/zh_HK/messages.json b/_locales/zh_HK/messages.json
new file mode 100644
index 0000000..3512c1e
--- /dev/null
+++ b/_locales/zh_HK/messages.json
@@ -0,0 +1,17 @@
+{
+    "langCode": {
+        "message": "zh-HK"
+    },
+    "extensionName": {
+        "message": "注入粵拼"
+    },
+    "extensionDescription": {
+        "message": "為漢字標註粵語發音（粵拼）。"
+    },
+    "contextMenuItemDoInjectJyutping": {
+        "message": "注入粵拼"
+    },
+    "popupCheckboxText": {
+        "message": "自動注入"
+    }
+}
diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json
index a9cce4a..77478f1 100644
--- a/_locales/zh_TW/messages.json
+++ b/_locales/zh_TW/messages.json
@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "zh-TW"
+    },
     "extensionName": {
         "message": "注入粵拼"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "注入粵拼"
+    },
+    "popupCheckboxText": {
+        "message": "自動注入"
     }
 }
diff --git a/content_scripts/main.js b/content_scripts/main.js
index e0c46d9..cf43d41 100644
--- a/content_scripts/main.js
+++ b/content_scripts/main.js
@@ -86,15 +86,21 @@ async function recursiveConvert(currentNode, langMatched) {
     }
 }
 
-async function startConvert() {
+async function init() {
     const lang = document.body.lang || document.documentElement.lang || 'en';
     await recursiveConvert(document.body, isTargetLang(lang));
 }
 
 browser.runtime.onMessage.addListener(msg => {
     if (msg.name === 'do-inject-jyutping') {
-        startConvert();
+        init();
     }
 });
 
-startConvert();
+async function autoInit() {
+    if ((await browser.storage.local.get('enabled'))['enabled'] !== false) {
+        init();
+    }
+}
+
+autoInit();
diff --git a/manifest.json b/manifest.json
index 8a64255..57d6361 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "__MSG_extensionName__",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "__MSG_extensionDescription__",
     "icons": {
         "96": "icons/96.png"
@@ -19,6 +19,11 @@
         "scripts": ["lib/browser-polyfill.js", "lib/MessageManager.js", "lib/Trie.js", "background_scripts/main.js"],
         "persistent": true
     },
-    "permissions": ["contextMenus"],
-    "default_locale": "en"
+    "permissions": ["contextMenus", "storage"],
+    "default_locale": "en",
+    "browser_action": {
+        "default_icon": "icons/96.png",
+        "default_title": "__MSG_extensionName__",
+        "default_popup": "popup/index.html"
+    }
 }
diff --git a/package.sh b/package.sh
old mode 100644
new mode 100755
index bcd40b8..0ce0aef
--- a/package.sh
+++ b/package.sh
@@ -1,2 +1,2 @@
 #!/bin/sh
-zip -r inject-jyutping.zip _locales background_scripts content_scripts icons lib manifest.json
+zip -r inject-jyutping.zip _locales background_scripts content_scripts icons lib popup manifest.json
diff --git a/popup/index.css b/popup/index.css
new file mode 100644
index 0000000..9d636bb
--- /dev/null
+++ b/popup/index.css
@@ -0,0 +1,70 @@
+.middle {
+    vertical-align: middle;
+}
+
+.large {
+    font-size: 120%;
+}
+
+/* Create a "toggle switch" (on/off button) with CSS.
+ * Taken from https://www.w3schools.com/howto/howto_css_switch.asp
+ */
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
diff --git a/popup/index.html b/popup/index.html
new file mode 100644
index 0000000..e092012
--- /dev/null
+++ b/popup/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <link rel="stylesheet" href="index.css">
+  <script src="../lib/browser-polyfill.js" defer></script>
+  <script src="index.js" defer></script>
+</head>
+<body>
+  <p>
+    <b id="checkboxText" class="middle large"></b>&nbsp;
+    <label class="middle switch">
+      <input id="extensionEnabled" type="checkbox">
+      <span class="slider round"></span>
+    </label>
+  </p>
+</body>
+</html>
diff --git a/popup/index.js b/popup/index.js
new file mode 100644
index 0000000..24b0d79
--- /dev/null
+++ b/popup/index.js
@@ -0,0 +1,11 @@
+/* Initialize state */
+(async () => {
+    document.documentElement.lang = browser.i18n.getMessage('langCode');
+    document.getElementById('checkboxText').innerText = browser.i18n.getMessage('popupCheckboxText');
+    document.getElementById('extensionEnabled').checked = ((await browser.storage.local.get('enabled'))['enabled'] !== false) ? true : false;
+})();
+
+/* Handle state change */
+document.getElementById('extensionEnabled').addEventListener('click', () => {
+    browser.storage.local.set({enabled: document.getElementById('extensionEnabled').checked});
+});