Finishes v1.3.0, finalises sidebar

Fixes #23, #27, #19.
seeba8 · Oct 13, 2017 · f3b8522 · f3b8522
1 parent 252e4c1
commit f3b8522
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -41,11 +41,23 @@ Does not send any data anywhere, as far as I know (except to pinboard, of course
 * To [lostsnow](https://github.com/lostsnow/pinboard-firefox) for the cool addon and for the bug motivating me to look into WebExtensions.
 * To [weinshel](https://github.com/weinshel) for the [commit](https://github.com/seeba8/yet-another-pinboard-extension/commit/3a2c969389d40c357646d0ce97a4425a737c31c6) in his fork which I took the liberty of [bringing into my version](https://github.com/seeba8/yet-another-pinboard-extension/commit/d285bf935facea7a397bab503256e24f1a45c257)
 * To [alerque](https://github.com/alerque) for your suggestion in #25 to add regex parsing
-* To [Google](https://material.io/icons) for some of the icons used
+* To [Google](https://material.io/icons) for some of the icons used, under [Apache License v2.0](https://www.apache.org/licenses/LICENSE-2.0)
 * To [vurtomatic](https://github.com/vurtomatic) for suggesting dark mode and new icons (#27)
 
 ### Changelog (incomplete)
 
+#### v1.3.0:
+* Adds customisable colours: Set the addon to dark mode, light mode, or any colour scheme your heart desires
+* **Firefox only**: Adds a sidebar containing a searchable list of all your bookmarks.
+* Updates icons in the popup
+* Backend stuff:
+  * Updated to v1.2.0 of Mozilla's webextension-polyfill
+  * Streamlined some more code
+  * The icons were unicode characters before, now they are embedded SVG
+  * Moved the filter functionality into appropriate class to try and reduce code duplication
+  * Made background scripts not persistent (https://developer.chrome.com/extensions/event_pages)
+
+
 #### v1.2.6 - v1.2.9:
 * Adds the option to run a regex on the tab title (might be useful when using an addon to modify the tab title). Thanks @alerque for the suggestion (see #25)!
 * Adds css scaling on the popup for firefox when using two screens with different DPI (see issue #3)

diff --git a/src/css/popup.css b/src/css/popup.css
@@ -121,6 +121,7 @@ button {
 }
 
 #toprow a, #toprow a:visited {
+    display: block;
     text-decoration: none;
     color: var(--text-color);
     padding: .25em;

diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -1,3 +1,12 @@
+:root {
+    /* Variables set by javascript */
+    --text-color: #000000;
+    --link-color: #0000ee;
+    --visited-color: #551A8B;
+    --background-color: #ffffff;
+    --disabled-color: #808080;
+}
+
 li {
     list-style-type: none;
     overflow: hidden; 
@@ -22,9 +31,23 @@ ul {
     overflow-y: auto;
 }
 
+a {
+    color: var(--link-color);
+}
+
+a:visited {
+    color: var(--visited-color);
+}
+
 body {
     height: 100%;
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
 .hidden {
     display:none;
 }
+
+#noapikey {
+    z-index: 1;
+}
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!-- 
+  EMBEDDED SVG ICONS FROM https://material.io/icons/ (Apache License Version 2.0)
+  License can be found here: https://www.apache.org/licenses/LICENSE-2.0
+-->
 <html>
 
 <head>

diff --git a/src/html/sidebar.html b/src/html/sidebar.html
@@ -1,18 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Sidebar</title>
     <link rel="stylesheet" href="../css/sidebar.css">
 </head>
+
 <body>
-    <input type="search" id="search" placeholder="Search"/>
-    <ul id="pins"><li id="templateli"><a href="" class="pinlink"></a></li></ul>
+    <div id="noapikey" class="hidden">
+        <h1>Your API key is missing.</h1>
+        <p>Go to the
+            <a class="optionslink" id="optionspage" href="#">options</a> to set your API key.</p>
+    </div>
+    <input type="search" id="search" placeholder="Search" />
+    <ul id="pins">
+        <li id="templateli">
+            <a href="" class="pinlink"></a>
+        </li>
+    </ul>
     <script src="../vendor/webextension-polyfill/browser-polyfill.min.js"></script>
     <script src="../js/pin.js"></script>
     <script src="../js/pins.js"></script>
+    <script src="../js/options.js"></script>
     <script src="../js/sidebar.js"></script>
 </body>
+
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -15,8 +15,8 @@
       "js/connector.js",
       "js/background.js",
       "js/omnibox.js"
-      
-    ]
+    ],
+    "persistent": false
   },
   "omnibox": { 
     "keyword" : "pin" 

diff --git a/src/ts/sidebar.ts b/src/ts/sidebar.ts
@@ -1,11 +1,17 @@
 /// <reference path="pins.ts" />
 /// <reference path="pin.ts" />
+/// <reference path="options.ts" />
 
 namespace Sidebar {
     let pins: Pins;
+    let options: Options;
     const PINSLIST = document.getElementById("pins") as HTMLUListElement;
     const SEARCH = document.getElementById("search") as HTMLInputElement;
-    const TEMPLATELI = document.getElementById("templateli");
+    const TEMPLATELI = document.getElementById("templateli") as HTMLLIElement;
+    const NOAPIKEYDIV = document.getElementById("noapikey") as HTMLDivElement;
+    document.getElementById("optionspage").addEventListener("click", (e) => {
+        browser.runtime.openOptionsPage();
+    })
     SEARCH.addEventListener("input", onSearchInput);
     SEARCH.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
@@ -18,15 +24,42 @@ namespace Sidebar {
     startup();
 
     async function startup() {
+        options = await Options.getObject();
+        setColorVariables(options.style);
         pins = await Pins.getObject();
         showPins();
         browser.storage.onChanged.addListener(onStorageChanged);
+        checkAPIKey();
+    }
+
+    function setColorVariables(style: IStyle) {
+        document.documentElement.style.setProperty("--text-color", style.textColor);
+        document.documentElement.style.setProperty("--background-color", style.backgroundColor);
+        document.documentElement.style.setProperty("--link-color", style.linkColor);
+        document.documentElement.style.setProperty("--visited-color", style.visitedColor);
+        document.documentElement.style.setProperty("--disabled-color", style.disabledColor);
     }
 
     async function onStorageChanged(changes: browser.storage.ChangeDict, areaName: browser.storage.StorageName) {
         if (Object.keys(changes).includes("pins")) {
             pins = await Pins.getObject();
             showPins();
+        } else if (Object.keys(changes).includes("options")) {
+            options = await Options.getObject();
+            setColorVariables(options.style);
+        } else if (Object.keys(changes).includes("apikey")) {
+            checkAPIKey();
+        }
+    }
+
+    async function checkAPIKey() {
+        const token = await browser.storage.local.get("apikey");
+        if (!token.hasOwnProperty("apikey") || token.apikey === "") {
+            NOAPIKEYDIV.classList.remove("hidden");
+            SEARCH.classList.add("hidden");
+        } else {
+            NOAPIKEYDIV.classList.add("hidden");
+            SEARCH.classList.remove("hidden");
         }
     }