Added setting box to exclude words (#82)

hrai · Feb 6, 2021 · 47ee295 · 47ee295
1 parent 3af3ba8
commit 47ee295
Show file tree

Hide file tree

Showing 25 changed files with 401 additions and 137 deletions.
diff --git a/README.md b/README.md
@@ -11,11 +11,21 @@ Firefox/Microsoft Edge Chromium add-on to automatically capitalise words while t
 - Capitalise common [names](src/name-constants.js#L1)
 - Add apostrophe to common [English words](src/constants.js#L81)
 
-## Configuration
+## Configuration/Settings
 
-If you don't want the extension to auto-capitalise on a particular website, you can configure it in the settings window.
+There are 3 sections to configure the extension.
 
-![Settings](imgs/settings.png)
+- Excluded words: If you want to exclude words from being auto-capitalised, you can add the words in the textarea and save it.
+
+  ![excluded-words](imgs/excluded-words.png)
+
+- Excluded websites: If you don't want the words to be auto-capitalised, you can add the website's name in the textarea and save it.
+
+  ![excluded-websites](imgs/excluded-websites.png)
+
+- Enable/disable features: If you don't want any of the features provided by this extension, you can disable it here.
+
+  ![features](imgs/features.png)
 
 ## Add-on download links
 

diff --git a/distribution/dependencies/bootstrap.min.css b/distribution/dependencies/bootstrap.min.css
diff --git a/distribution/dependencies/bootstrap.min.js b/distribution/dependencies/bootstrap.min.js
diff --git a/distribution/dependencies/bootstrap.min.js.LICENSE.txt b/distribution/dependencies/bootstrap.min.js.LICENSE.txt
@@ -0,0 +1,5 @@
+/*!
+  * Bootstrap v4.6.0 (https://getbootstrap.com/)
+  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
diff --git a/distribution/lib/background.bundle.js b/distribution/lib/background.bundle.js
diff --git a/distribution/lib/main.bundle.js b/distribution/lib/main.bundle.js
diff --git a/distribution/lib/settings.bundle.js b/distribution/lib/settings.bundle.js
diff --git a/distribution/manifest.json b/distribution/manifest.json
@@ -18,9 +18,11 @@
       "matches": ["<all_urls>"],
       "js": [
         "dependencies/jquery.min.js",
+        "dependencies/bootstrap.min.js",
         "lib/main.bundle.js",
         "lib/settings.bundle.js"
-      ]
+      ],
+      "css": ["dependencies/bootstrap.min.css"]
     }
   ],
   "icons": {

diff --git a/distribution/popup/settings.html b/distribution/popup/settings.html
@@ -1,42 +1,84 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/dependencies/bootstrap.min.css" type="text/css" charset="utf-8">
-    </head>
-    <body>
-        <div class="container" id="settings">
-            <div class="form-group" style="margin-top:5%">
-                <textarea id="sites" rows="4" class="form-control" placeholder="Add sites to exclude" ></textarea>
-                <small class="form-text text-muted">Add each site in a separate row</small>
-                <span class="input-group-btn">
-                    <input type="button" value="Save" id="submitButton" class="btn btn-primary btn-block" disabled>
-                    <input type="button" value="Add current site to ignore list" id="ignoreSiteButton" class="btn btn-secondary btn-block">
-                </span>
+
+<head>
+    <meta charset="utf-8">
+    <script charset="utf-8" src="/dependencies/jquery.min.js"></script>
+    <script charset="utf-8" src="/dependencies/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="/dependencies/bootstrap.min.css" type="text/css" charset="utf-8">
+</head>
+
+<body>
+    <div class="container" id="settings">
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a href="#excluded_words" class="nav-link active" data-toggle="tab">Excluded words</a>
+            </li>
+            <li class="nav-item">
+                <a href="#excluded_sites" class="nav-link" data-toggle="tab">Excluded websites</a>
+            </li>
+            <li class="nav-item">
+                <a href="#checkboxes" class="nav-link" data-toggle="tab">Enable/disable features</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane fade show active" id="excluded_words">
+                <div class="form-group">
+                    <p class="form-text">Enter words which you don't want to be capitalised.</p>
+                    <textarea id="excluded_words_textbox" rows="4" class="form-control"
+                        placeholder="Add words to exclude"></textarea>
+                    <small class="form-text text-muted">Note: Add each word in a separate row</small>
+                    <span class="input-group-btn">
+                        <input type="button" value="Save" id="submitButtonExcludedWords"
+                            class="btn btn-primary btn-block" disabled>
+                    </span>
+                </div>
             </div>
-            <div class="form-group" style="margin-top:5%">
-                <input type="checkbox" id="shouldCapitaliseI" name="shouldCapitaliseI" checked>
-                <label for="shouldCapitaliseI">Should capitalise 'I'?</label><br>
+            <div class="tab-pane fade" id="excluded_sites">
+                <div class="form-group">
+                    <p class="form-text">Enter websites where you want the capitalising to be disabled.</p>
+                    <textarea id="sites" rows="4" class="form-control" placeholder="Add sites to exclude"></textarea>
+                    <small class="form-text text-muted">Note: Add each site in a separate row</small>
+                    <span class="input-group-btn">
+                        <input type="button" value="Save" id="submitButton" class="btn btn-primary btn-block" disabled>
+                        <input type="button" value="Add current site to ignore list" id="ignoreSiteButton"
+                            class="btn btn-secondary btn-block">
+                    </span>
+                </div>
+            </div>
+            <div class="tab-pane fade" id="checkboxes">
+                <div class="form-group">
+                    <input type="checkbox" id="shouldCapitaliseI" name="shouldCapitaliseI" checked>
+                    <label for="shouldCapitaliseI">Should capitalise 'I'?</label><br>
+
+                    <input type="checkbox" id="shouldCapitaliseAbbreviations" name="shouldCapitaliseAbbreviations"
+                        checked>
+                    <label for="shouldCapitaliseAbbreviations">Should capitalise abbreviations?</label><br>
 
-                <input type="checkbox" id="shouldCapitaliseAbbreviations" name="shouldCapitaliseAbbreviations" checked>
-                <label for="shouldCapitaliseAbbreviations">Should capitalise abbreviations?</label><br>
-
-                <input type="checkbox" id="shouldCapitaliseNames" name="shouldCapitaliseNames" checked>
-                <label for="shouldCapitaliseNames">Should capitalise names?</label><br>
+                    <input type="checkbox" id="shouldCapitaliseNames" name="shouldCapitaliseNames" checked>
+                    <label for="shouldCapitaliseNames">Should capitalise names?</label><br>
 
+                </div>
             </div>
+
         </div>
-    </body>
-    <script charset="utf-8" src="/dependencies/jquery.min.js"></script>
+    </div>
     <script charset="utf-8" src="/lib/settings.bundle.js"></script>
+</body>
+
 </html>
 
-<style type="text/css" >
-#submitButton {
-    margin-top: 3px;
-}
+<style type="text/css">
+    .btn {
+        padding-top: 3px;
+    }
+
+    #settings {
+        width: 550px;
+        padding-top: 3%;
+    }
 
-#settings{
-    width: 400px;
-}
+    .tab-content {
+        padding-top: 3%;
+    }
 </style>
diff --git a/imgs/excluded-websites.png b/imgs/excluded-websites.png
diff --git a/imgs/excluded-words.png b/imgs/excluded-words.png
diff --git a/imgs/features.png b/imgs/features.png
diff --git a/imgs/settings.png b/imgs/settings.png
diff --git a/imgs/settings.xcf b/imgs/settings.xcf
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "start": "run-script-os",
     "start:win32": "yarn build && web-ext run --firefox=\"c:/Program Files/Firefox Developer Edition/firefox.exe\"",
-    "start:darwin:linux": "yarn webpack && web-ext run --firefox=firefox-developer",
-    "start:chrome": "cd distribution && web-ext run -t chromium",
+    "start:darwin:linux": "yarn build && web-ext run --firefox=firefox-developer",
+    "start:chrome": "yarn build && cd distribution && web-ext run -t chromium",
     "build": "yarn webpack",
     "watch": "yarn webpack --watch",
     "web": "nodemon app.js",
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
+    "bootstrap": "^4.6.0",
     "copy-webpack-plugin": "^6.3.2",
     "daily-version": "^2.0.0",
     "dot-json": "^1.2.1",

diff --git a/src/background.js b/src/background.js
@@ -1,8 +1,12 @@
-import { constants_key_val, names_key_val, abbreviations_key_val } from './constants';
-import browser from 'webextension-polyfill';
+import {
+  constantsKeyValuePairs,
+  namesKeyValuePairs,
+  abbreviationsKeyValuePairs,
+} from './constants'
+import browser from 'webextension-polyfill'
 
 browser.storage.local.set({
-  constants_key_val: constants_key_val,
-  names_key_val: names_key_val,
-  abbreviations_key_val: abbreviations_key_val,
-});
+  constants_key_val: constantsKeyValuePairs,
+  names_key_val: namesKeyValuePairs,
+  abbreviations_key_val: abbreviationsKeyValuePairs,
+})
diff --git a/src/constants.js b/src/constants.js
@@ -24,67 +24,75 @@ const months = [
   'December',
 ]
 
-const common_tech_words = [
+const commonTechWords = [
   'API',
   'APIs',
   'Artifactory',
+  'Baidu',
+  'BigQuery',
+  'BitTorrent',
+  'Bluetooth',
   'CLI',
   'CSS',
+  'Compaq',
+  'CompuServe',
   'CosmosDB',
   'DevOps',
+  'DI',
+  'Drupal',
   'DynamoDB',
   'ECMAScript',
-  'GitHub',
-  'Google',
+  'Emacs',
   'HBase',
   'Instagram',
   'JavaScript',
+  'Jekyll',
   'Jenkins',
+  'LibreOffice',
   'MVC',
   'MariaDB',
-  'Microsoft',
   'MongoDB',
-  'Motorola',
-  'Mozilla',
   'MySQL',
-  'MySpace',
+  'Netscape',
   'NuGet',
   'NuGets',
   'Ocaml',
-  'OpenOffice',
   'PHP',
   'PR',
   'PRs',
-  'PayPal',
   'Perl',
   'PostgreSQL',
   'PowerPC',
   'PowerPoint',
   'PyTorch',
-  'Qualcomm',
   'Redis',
   'Redshift',
   'S3',
   'SQLite',
   'SUSE',
   'SVN',
   'Scala',
-  'Sega',
+  'SharePoint',
+  'TensorFlow',
   'UI',
   'UIs',
   'URL',
   'URLs',
   'Ubuntu',
+  'Unicode',
   'VoIP',
-  'eBay',
+  'WiFi',
+  'Wii',
+  'WordPress',
+  'Xamarin',
   'iOS',
   'iPad',
   'iPhone',
   'iPod',
   'iTunes',
 ]
 
-let words_with_apostrophe = {
+let wordsWithApostrophe = {
   arent: "aren't",
   doesnt: "doesn't",
   cant: "can't",
@@ -101,17 +109,22 @@ let words_with_apostrophe = {
   wouldnt: "wouldn't",
 }
 
-let constants = days.concat(months, common_tech_words)
+let commonLocalAbbreviations = ['Syd', 'Melb']
 
-let string_to_key_val = (obj, val) => {
+let constants = days.concat(months, commonTechWords, commonLocalAbbreviations)
+
+let stringToKeyValuePairs = (obj, val) => {
   obj[val.toLowerCase()] = val
   return obj
 }
 
-let constants_map = constants.reduce(string_to_key_val, {})
+let constantsMap = constants.reduce(stringToKeyValuePairs, {})
 
 //convert array to key-value pairs
-export let constants_key_val = { ...constants_map, ...words_with_apostrophe }
+export let constantsKeyValuePairs = { ...constantsMap, ...wordsWithApostrophe }
 
-export let names_key_val = names.reduce(string_to_key_val, {})
-export let abbreviations_key_val = abbreviations.reduce(string_to_key_val, {})
+export let namesKeyValuePairs = names.reduce(stringToKeyValuePairs, {})
+export let abbreviationsKeyValuePairs = abbreviations.reduce(
+  stringToKeyValuePairs,
+  {}
+)
diff --git a/src/content.js b/src/content.js
@@ -9,6 +9,7 @@ import {
   constants_key_val,
   names_key_val,
   abbreviations_key_val,
+  words_to_exclude,
 } from './plugin-constants';
 
 const errorMsg = 'breaking loop';
@@ -23,11 +24,12 @@ browser.storage.local
     constants_key_val,
     names_key_val,
     abbreviations_key_val,
+    words_to_exclude,
   ])
   .then(processResponse, utils.onError);
 
 /* Updating the value of this local storage variable in settings.js happens AFTER content.js.
- * The browser doesn't register the change and doesn't capitalise I by dfeault after installing the extension.
+ * The browser doesn't register the change and doesn't capitalise I by default after installing the extension.
  * This block will capture the event and update the value of 'should_capitalise_i'.
  */
 browser.storage.onChanged.addListener(function (
@@ -58,6 +60,16 @@ browser.storage.onChanged.addListener(function (
         utils.setShouldCapitaliseAbbreviations(newValue);
       }
     }
+
+    if (changes.words_to_exclude != null) {
+      const newValue = changes.words_to_exclude.newValue;
+
+      if (newValue != null) {
+        utils.setWordsToExclude(newValue);
+      }
+    }
+
+    //browser.runtime.reload() - reload browser
   }
 });
 
@@ -98,6 +110,8 @@ function processResponse(item) {
   utils.setConstantsKeyVal(item.constants_key_val);
   utils.setNamesKeyVal(item.names_key_val);
   utils.setAbbreviationsKeyVal(item.abbreviations_key_val);
+  console.log(item.words_to_exclude);
+  utils.setWordsToExclude(item.words_to_exclude);
 
   if (item && sitesToExclude) {
     //https://stackoverflow.com/questions/406192/get-current-url-with-jquery