From 34d776b29fbee1876aa6b41a930400037080a5ca Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Sun, 5 Jan 2020 00:54:40 +0100 Subject: [PATCH 01/11] Add basic setup --- webext/_locales/en-US/messages.json | 26 ++++++++++ webext/js/i18n.js | 43 ++++++++++++++++ webext/js/options_tabbutton.js | 27 ++++++++++ webext/manifest.json | 16 ++++-- webext/options.html | 77 +++++++++++++++++++++++++++++ webext/options.js | 23 +++++++++ 6 files changed, 207 insertions(+), 5 deletions(-) create mode 100644 webext/_locales/en-US/messages.json create mode 100644 webext/js/i18n.js create mode 100644 webext/js/options_tabbutton.js create mode 100644 webext/options.html create mode 100644 webext/options.js diff --git a/webext/_locales/en-US/messages.json b/webext/_locales/en-US/messages.json new file mode 100644 index 0000000..dc02b4a --- /dev/null +++ b/webext/_locales/en-US/messages.json @@ -0,0 +1,26 @@ +{ + "extensionName": { + "message": "SysTray-X", + "description": "Name of the webextension" + }, + + "extensionDescription": { + "message": "System tray control add-on", + "description": "Webextension descriptions" + }, + + "tabWindows": { + "message": "Windows", + "description": "Tab for Window options" + }, + + "tabIcon": { + "message": "Icon", + "description": "Tab for Icon options" + }, + + "tabMail": { + "message": "Mail", + "description": "Tab for Mail options" + } +} diff --git a/webext/js/i18n.js b/webext/js/i18n.js new file mode 100644 index 0000000..d4a1afc --- /dev/null +++ b/webext/js/i18n.js @@ -0,0 +1,43 @@ +/* + license: The MIT License, Copyright (c) 2016-2018 YUKI "Piro" Hiroshi + original: + http://github.com/piroor/webextensions-lib-l10n +*/ +var i18n = { + updateString(aString) { + return aString.replace(/__MSG_(.+?)__/g, (aMatched) => { + const key = aMatched.slice(6, -2); + return browser.i18n.getMessage(key) || aMatched; + }); + }, + + updateDocument() { + const texts = document.evaluate( + 'descendant::text()[contains(self::text(), "__MSG_")]', + document, + null, + XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, + null + ); + for (let i = 0, maxi = texts.snapshotLength; i < maxi; i++) { + const text = texts.snapshotItem(i); + text.nodeValue = this.updateString(text.nodeValue); + } + + const attributes = document.evaluate( + 'descendant::*/attribute::*[contains(., "__MSG_")]', + document, + null, + XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, + null + ); + for (let i = 0, maxi = attributes.snapshotLength; i < maxi; i++) { + const attribute = attributes.snapshotItem(i); + attribute.value = this.updateString(attribute.value); + } + } +}; + +document.addEventListener('DOMContentLoaded', () => { + i18n.updateDocument(); +}, { once: true }); diff --git a/webext/js/options_tabbutton.js b/webext/js/options_tabbutton.js new file mode 100644 index 0000000..c4ab10c --- /dev/null +++ b/webext/js/options_tabbutton.js @@ -0,0 +1,27 @@ +function openTab(evt) { + var i, tabcontent, tablinks, tabName; + tabName = evt.currentTarget.id; + + tabcontent = document.getElementsByClassName('tabcontent'); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = 'none'; + } + tablinks = document.getElementsByClassName('tablinks'); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(' active', ''); + } + + let el = document.getElementById(tabName+'Content'); + el.style.display = 'block'; + + evt.currentTarget.className += ' active'; +} + +document.addEventListener('DOMContentLoaded', function () { + let tablinks = document.getElementsByClassName('tablinks'); + for (i = 0; i < tablinks.length; i++) { + document.getElementById(tablinks[i].id) + .addEventListener('click', openTab); + } +}); + diff --git a/webext/manifest.json b/webext/manifest.json index 9b883ed..945ac45 100644 --- a/webext/manifest.json +++ b/webext/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, - "name": "SysTray-X", - "description": "System tray control add-on", + "name": "__MSG_extensionName__", + "description": "__MSG_extensionDescription__", "version": "0.1", "author": "Maxime Rijnders", "homepage_url": "https://github.com/Ximi1970/systray-x", @@ -17,11 +17,17 @@ "48": "icons/message.svg" }, + "default_locale": "en-US", + + "permissions": [ + "storage" + ], + "background": { "scripts": ["background.js"] }, - - "browser_action": { - "default_icon": "icons/message.svg" + + "options_ui": { + "page": "options.html" } } diff --git a/webext/options.html b/webext/options.html new file mode 100644 index 0000000..2836289 --- /dev/null +++ b/webext/options.html @@ -0,0 +1,77 @@ + + + + + + + + + + + +
+ + + +
+ +
+

Windows

+

Windows options here

+
+ +
+

Icon

+

Icon options here.

+
+ +
+

Mail

+

Mail options here.

+
+ + + + + + + diff --git a/webext/options.js b/webext/options.js new file mode 100644 index 0000000..7151fe7 --- /dev/null +++ b/webext/options.js @@ -0,0 +1,23 @@ +function saveOptions(e) { + e.preventDefault(); + browser.storage.sync.set({ +// color: document.querySelector("#color").value + }); +} + +function restoreOptions() { + + function setCurrentChoice(result) { +// document.querySelector("#color").value = result.color || "blue"; + } + + function onError(error) { + console.log(`Error: ${error}`); + } + + var getting = browser.storage.sync.get("color"); + getting.then(setCurrentChoice, onError); +} + +document.addEventListener("DOMContentLoaded", restoreOptions); +document.querySelector("form").addEventListener("submit", saveOptions); From 1b77e5aa935a356c50c36df7497110b9c97a3d78 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Sun, 5 Jan 2020 13:50:38 +0100 Subject: [PATCH 02/11] Cleanup style --- README.references | 6 ++++++ webext/css/options.css | 38 ++++++++++++++++++++++++++++++++++++++ webext/js/styles.js | 4 ++++ webext/options.html | 41 +---------------------------------------- 4 files changed, 49 insertions(+), 40 deletions(-) create mode 100644 README.references create mode 100644 webext/css/options.css create mode 100644 webext/js/styles.js diff --git a/README.references b/README.references new file mode 100644 index 0000000..12e89ec --- /dev/null +++ b/README.references @@ -0,0 +1,6 @@ +Arguments for
From c1d1bf40cd374739bb6493337090d650725d6717 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Sun, 5 Jan 2020 23:28:42 +0100 Subject: [PATCH 03/11] Add radiobutton en checkbox save test --- README.references | 7 +++++++ webext/options.html | 36 ++++++++++++++++++++++++++++++------ webext/options.js | 35 +++++++++++++++++++++++++++++------ 3 files changed, 66 insertions(+), 12 deletions(-) diff --git a/README.references b/README.references index 12e89ec..e284539 100644 --- a/README.references +++ b/README.references @@ -4,3 +4,10 @@ https://stackoverflow.com/questions/5292372/how-to-pass-parameters-to-a-script-t Loading css using + + diff --git a/webext/options.js b/webext/options.js index 7151fe7..832aa63 100644 --- a/webext/options.js +++ b/webext/options.js @@ -1,23 +1,46 @@ function saveOptions(e) { e.preventDefault(); + + console.debug("Save preferences"); + browser.storage.sync.set({ -// color: document.querySelector("#color").value + optionsRadioTest: document.querySelector('input[name="options_test"]:checked').value, + optionsCheck1: document.querySelector('input[name="check1"]').checked, + optionsCheck2: document.querySelector('input[name="check2"]').checked, + optionsCheck3: document.querySelector('input[name="check3"]').checked }); } function restoreOptions() { - function setCurrentChoice(result) { -// document.querySelector("#color").value = result.color || "blue"; + console.debug("Restore preferences"); + + function setCurrentRadioChoice(result) { + let selector = result.optionsRadioTest || "Option1"; + let radioButton = document.querySelector(`[value=${selector}]`) + radioButton.checked = true; + } + + function setCurrentCheckChoice(result) { + let checkbox1 = document.querySelector('[name="check1"]'); + checkbox1.checked = result.optionsCheck1 || false;; + let checkbox2 = document.querySelector('[name="check2"]'); + checkbox2.checked = result.optionsCheck2 || false;; + let checkbox3 = document.querySelector('[name="check3"]'); + checkbox3.checked = result.optionsCheck3 || false;; } function onError(error) { console.log(`Error: ${error}`); } - var getting = browser.storage.sync.get("color"); - getting.then(setCurrentChoice, onError); + var getting = browser.storage.sync.get("optionsRadioTest"); + getting.then(setCurrentRadioChoice, onError); + + var getting = browser.storage.sync.get(["optionsCheck1", "optionsCheck2", "optionsCheck3"]); + getting.then(setCurrentCheckChoice, onError); + } document.addEventListener("DOMContentLoaded", restoreOptions); -document.querySelector("form").addEventListener("submit", saveOptions); +document.querySelector('[name="saveform"]').addEventListener("submit", saveOptions); From 29f169174ca42ec6eca68266e9d1403ec4069d6a Mon Sep 17 00:00:00 2001 From: Linux Date: Wed, 8 Jan 2020 14:01:42 +0100 Subject: [PATCH 04/11] Add tree table --- webext/css/options.css | 37 ++++++++++ webext/js/options_treetable.js | 17 +++++ webext/options.html | 125 ++++++++++++++++++++++++++++++++- 3 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 webext/js/options_treetable.js diff --git a/webext/css/options.css b/webext/css/options.css index 67a4fbd..35bdf50 100644 --- a/webext/css/options.css +++ b/webext/css/options.css @@ -36,3 +36,40 @@ body {font-family: Arial;} border: 1px solid #ccc; border-top: none; } + +/* Style the tree */ +ul.tree li { + list-style-type: none; + position: relative; +} + +ul.tree li ul { + display: none; +} + +ul.tree li.open > ul { + display: block; +} + +ul.tree li a { + color: black; + text-decoration: none; +} + +ul.tree li a:before { + height: 1em; + padding:0 .1em; + font-size: .8em; + display: block; + position: absolute; + left: -1.3em; + top: .2em; +} + +ul.tree li > a:not(:last-child):before { + content: '+'; +} + +ul.tree li.open > a:not(:last-child):before { + content: '-'; +} diff --git a/webext/js/options_treetable.js b/webext/js/options_treetable.js new file mode 100644 index 0000000..4a1fb13 --- /dev/null +++ b/webext/js/options_treetable.js @@ -0,0 +1,17 @@ +var tree = document.querySelectorAll('ul.tree a:not(:last-child)'); +for(var i = 0; i < tree.length; i++){ + tree[i].addEventListener('click', function(e) { + var parent = e.target.parentElement; + var classList = parent.classList; + if(classList.contains("open")) { + classList.remove('open'); + var opensubs = parent.querySelectorAll(':scope .open'); + for(var i = 0; i < opensubs.length; i++){ + opensubs[i].classList.remove('open'); + } + } else { + classList.add('open'); + } + e.preventDefault(); + }); +} diff --git a/webext/options.html b/webext/options.html index 509907e..5a3245d 100644 --- a/webext/options.html +++ b/webext/options.html @@ -44,6 +44,129 @@

Mail

Mail options here.

+ + +
@@ -53,7 +176,7 @@ - + From 6142b81fee9c8c9b47beea529fc52a6f65ad9d58 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Wed, 8 Jan 2020 19:40:23 +0100 Subject: [PATCH 05/11] Add tree view test --- README.references => README.references.txt | 14 +++++ webext/css/options.css | 63 ++++++++++++++++++++++ webext/js/options_treeview.js | 17 ++++++ webext/manifest.json | 1 + webext/options.html | 31 ++++++++++- 5 files changed, 125 insertions(+), 1 deletion(-) rename README.references => README.references.txt (55%) create mode 100644 webext/js/options_treeview.js diff --git a/README.references b/README.references.txt similarity index 55% rename from README.references rename to README.references.txt index e284539..af8bac8 100644 --- a/README.references +++ b/README.references.txt @@ -11,3 +11,17 @@ https://www.w3schools.com/tags/tag_input.asp Input types https://www.w3schools.com/tags/att_input_type.asp + + +Tree view +https://www.w3schools.com/howto/howto_js_treeview.asp + +Nested table +https://codepen.io/st-iv/pen/xxbRxEj + + + +Tree table +https://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js +http://maxdesign.com.au/articles/tree-table/ + diff --git a/webext/css/options.css b/webext/css/options.css index 35bdf50..33b9524 100644 --- a/webext/css/options.css +++ b/webext/css/options.css @@ -37,6 +37,69 @@ body {font-family: Arial;} border-top: none; } + +/* check box tree view */ +.box { + cursor: pointer; + -webkit-user-select: none; /* Safari 3.1+ */ + -moz-user-select: none; /* Firefox 2+ */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; +} + +.box::before { + content: "\2610"; + color: grey; + display: inline-block; + margin-right: 6px; +} + +.check-box::before { + content: "\2611"; + color: dodgerblue; +} + + /* Remove default bullets */ +ul, #myUL { + list-style-type: none; +} + +/* Remove margins and padding from the parent ul */ +#myUL { + margin: 0; + padding: 0; +} + +/* Style the caret/arrow */ +.caret { + cursor: pointer; + user-select: none; /* Prevent text selection */ +} + +/* Create the caret/arrow with a unicode, and style it */ +.caret::before { + content: "\25B6"; + color: black; + display: inline-block; + margin-right: 6px; +} + +/* Rotate the caret/arrow icon when clicked on (using JavaScript) */ +.caret-down::before { + transform: rotate(90deg); +} + +/* Hide the nested list */ +.nested { + display: none; +} + +/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */ +.active { + display: block; +} + + /* Style the tree */ ul.tree li { list-style-type: none; diff --git a/webext/js/options_treeview.js b/webext/js/options_treeview.js new file mode 100644 index 0000000..c918819 --- /dev/null +++ b/webext/js/options_treeview.js @@ -0,0 +1,17 @@ +var toggler = document.getElementsByClassName("caret"); +var i; + +for (i = 0; i < toggler.length; i++) { + toggler[i].addEventListener("click", function() { + this.parentElement.querySelector(".nested").classList.toggle("active"); + this.classList.toggle("caret-down"); + }); +} + +var togglerBox = document.getElementsByClassName("box"); + +for (i = 0; i < toggler.length; i++) { + togglerBox[i].addEventListener("click", function() { + this.classList.toggle("check-box"); + }); +} diff --git a/webext/manifest.json b/webext/manifest.json index 945ac45..7a0c9d0 100644 --- a/webext/manifest.json +++ b/webext/manifest.json @@ -20,6 +20,7 @@ "default_locale": "en-US", "permissions": [ + "accountsRead", "storage" ], diff --git a/webext/options.html b/webext/options.html index 5a3245d..29a3cff 100644 --- a/webext/options.html +++ b/webext/options.html @@ -36,7 +36,35 @@

Icon

-

Icon options here.

+

Icon options here.

+ +
    +
  • Beverages +
      +
    • Water
      • +
    • Coffee
      • +
    • Tea +
        +
      • + Black Tea
        +
        • +
      • + White Tea
        +
        • +
      • Green Tea +
          +
        • Sencha
          • +
        • Gyokuro
          • +
        • Matcha
          • +
        • Pi Lo Chun
          • +
        +
        • +
      +
      • +
    +
    • +
+
@@ -177,6 +205,7 @@ + From c07fe897f09162f79776d21017cbacb23facf234 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Wed, 8 Jan 2020 23:36:19 +0100 Subject: [PATCH 06/11] Create tree basics --- webext/js/options_accounts.js | 79 +++++++++++++++++++++++++++++++++++ webext/js/options_treeview.js | 2 +- webext/options.html | 11 ++++- 3 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 webext/js/options_accounts.js diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js new file mode 100644 index 0000000..a496a73 --- /dev/null +++ b/webext/js/options_accounts.js @@ -0,0 +1,79 @@ +var SysTrayX = {}; + +SysTrayX.Accounts = { + + initialized: false, + + init: function() { + if (this.initialized) { + console.log("Accounts already initialized"); + return; + } + console.log("Enabling Accounts"); + + this.getAccounts().then(this.getAccountsCb); + + this.initialized = true; + }, + + /* + * Use the messages API to get the unread messages (Promise) + * Be aware that the data is only avaiable inside the callback + */ + getAccounts: async function() { + return await browser.accounts.list(); + }, + + /* + * Callback for getAccounts + */ + getAccountsCb: function(mailAccount) { + let accounts = new Object(); + let i; + + for (i=0 ; i < mailAccount.length; i++) { + console.debug("SysTrayX accounts id: "+mailAccount[i].id); + console.debug("SysTrayX accounts name: "+mailAccount[i].name); + console.debug("SysTrayX accounts type: "+mailAccount[i].type); + + accounts[mailAccount[i].type] = []; + accounts[mailAccount[i].type].push({id: mailAccount[i].id, name: mailAccount[i].name}); + }; + + console.debug("SysTrayX Storage: "+accounts.imap[0].name); + + for (let prop in accounts ) { + console.debug( prop + ": " + accounts[prop][0].name ); + } + + let p = document.getElementsByClassName("account"); + p[0].innerHTML = accounts.imap[0].name; + + + + // Get base + let treeBase = document.getElementsByClassName("accountstree"); + + for (let prop in accounts ) { + + console.debug( "Tree: " + prop + ": " + accounts[prop][0].name ); + + let typeLi = document.createElement('li'); + + let typeSpan = document.createElement('span'); + typeSpan.setAttribute("class","caret"); + let typeText = document.createTextNode(prop); + typeSpan.appendChild(typeText); + + typeLi.appendChild(typeSpan); + + + treeBase[0].appendChild(typeLi); + + }; + + }, + +}; + +SysTrayX.Accounts.init(); diff --git a/webext/js/options_treeview.js b/webext/js/options_treeview.js index c918819..baa44c3 100644 --- a/webext/js/options_treeview.js +++ b/webext/js/options_treeview.js @@ -10,7 +10,7 @@ for (i = 0; i < toggler.length; i++) { var togglerBox = document.getElementsByClassName("box"); -for (i = 0; i < toggler.length; i++) { +for (i = 0; i < togglerBox.length; i++) { togglerBox[i].addEventListener("click", function() { this.classList.toggle("check-box"); }); diff --git a/webext/options.html b/webext/options.html index 29a3cff..0525644 100644 --- a/webext/options.html +++ b/webext/options.html @@ -41,8 +41,8 @@
  • Beverages
      -
    • Water
      • -
    • Coffee
      • +
    • Water
      • +
    • Coffee
    • Tea
      • @@ -73,6 +73,11 @@

        Mail

        Mail options here.

        + + +
          +
        +
        • Part 1
            @@ -207,6 +212,8 @@ + + From 7ccbbe0e6bb45ea4c57cc83ed8644c737a60d2c2 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Thu, 9 Jan 2020 21:03:06 +0100 Subject: [PATCH 07/11] Prettify --- webext/_locales/en-US/messages.json | 2 +- webext/css/options.css | 81 +++--- webext/js/i18n.js | 12 +- webext/js/options_accounts.js | 63 ++--- webext/js/options_tabbutton.js | 34 ++- webext/js/options_treetable.js | 18 +- webext/js/styles.js | 9 +- webext/manifest.json | 9 +- webext/options.html | 398 +++++++++++++++------------- webext/options.js | 30 ++- 10 files changed, 341 insertions(+), 315 deletions(-) diff --git a/webext/_locales/en-US/messages.json b/webext/_locales/en-US/messages.json index dc02b4a..53d755b 100644 --- a/webext/_locales/en-US/messages.json +++ b/webext/_locales/en-US/messages.json @@ -23,4 +23,4 @@ "message": "Mail", "description": "Tab for Mail options" } -} +} diff --git a/webext/css/options.css b/webext/css/options.css index 33b9524..09a6463 100644 --- a/webext/css/options.css +++ b/webext/css/options.css @@ -1,43 +1,44 @@ -body {font-family: Arial;} +body { + font-family: Arial; +} /* Style the tab */ .tab { - overflow: hidden; - border: 1px solid #ccc; - background-color: #f1f1f1; + overflow: hidden; + border: 1px solid #ccc; + background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tab button { - background-color: inherit; - float: left; - border: none; - outline: none; - cursor: pointer; - padding: 14px 16px; - transition: 0.3s; - font-size: 17px; + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { - background-color: #ddd; + background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { - background-color: #ccc; + background-color: #ccc; } /* Style the tab content */ .tabcontent { - display: none; - padding: 6px 12px; - border: 1px solid #ccc; - border-top: none; + display: none; + padding: 6px 12px; + border: 1px solid #ccc; + border-top: none; } - /* check box tree view */ .box { cursor: pointer; @@ -55,12 +56,13 @@ body {font-family: Arial;} } .check-box::before { - content: "\2611"; + content: "\2611"; color: dodgerblue; } - /* Remove default bullets */ -ul, #myUL { +/* Remove default bullets */ +ul, +#myUL { list-style-type: none; } @@ -97,42 +99,41 @@ ul, #myUL { /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */ .active { display: block; -} - +} /* Style the tree */ ul.tree li { - list-style-type: none; - position: relative; + list-style-type: none; + position: relative; } ul.tree li ul { - display: none; + display: none; } ul.tree li.open > ul { - display: block; + display: block; } ul.tree li a { - color: black; - text-decoration: none; + color: black; + text-decoration: none; } ul.tree li a:before { - height: 1em; - padding:0 .1em; - font-size: .8em; - display: block; - position: absolute; - left: -1.3em; - top: .2em; + height: 1em; + padding: 0 0.1em; + font-size: 0.8em; + display: block; + position: absolute; + left: -1.3em; + top: 0.2em; } ul.tree li > a:not(:last-child):before { - content: '+'; + content: "+"; } ul.tree li.open > a:not(:last-child):before { - content: '-'; -} + content: "-"; +} diff --git a/webext/js/i18n.js b/webext/js/i18n.js index d4a1afc..424fcc6 100644 --- a/webext/js/i18n.js +++ b/webext/js/i18n.js @@ -5,7 +5,7 @@ */ var i18n = { updateString(aString) { - return aString.replace(/__MSG_(.+?)__/g, (aMatched) => { + return aString.replace(/__MSG_(.+?)__/g, aMatched => { const key = aMatched.slice(6, -2); return browser.i18n.getMessage(key) || aMatched; }); @@ -38,6 +38,10 @@ var i18n = { } }; -document.addEventListener('DOMContentLoaded', () => { - i18n.updateDocument(); -}, { once: true }); +document.addEventListener( + "DOMContentLoaded", + () => { + i18n.updateDocument(); + }, + { once: true } +); diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index a496a73..0096664 100644 --- a/webext/js/options_accounts.js +++ b/webext/js/options_accounts.js @@ -1,9 +1,8 @@ var SysTrayX = {}; SysTrayX.Accounts = { - initialized: false, - + init: function() { if (this.initialized) { console.log("Accounts already initialized"); @@ -23,57 +22,53 @@ SysTrayX.Accounts = { getAccounts: async function() { return await browser.accounts.list(); }, - + /* * Callback for getAccounts */ getAccountsCb: function(mailAccount) { let accounts = new Object(); let i; - - for (i=0 ; i < mailAccount.length; i++) { - console.debug("SysTrayX accounts id: "+mailAccount[i].id); - console.debug("SysTrayX accounts name: "+mailAccount[i].name); - console.debug("SysTrayX accounts type: "+mailAccount[i].type); - - accounts[mailAccount[i].type] = []; - accounts[mailAccount[i].type].push({id: mailAccount[i].id, name: mailAccount[i].name}); - }; - - console.debug("SysTrayX Storage: "+accounts.imap[0].name); - for (let prop in accounts ) { - console.debug( prop + ": " + accounts[prop][0].name ); + for (i = 0; i < mailAccount.length; i++) { + console.debug("SysTrayX accounts id: " + mailAccount[i].id); + console.debug("SysTrayX accounts name: " + mailAccount[i].name); + console.debug("SysTrayX accounts type: " + mailAccount[i].type); + + accounts[mailAccount[i].type] = []; + accounts[mailAccount[i].type].push({ + id: mailAccount[i].id, + name: mailAccount[i].name + }); } - + + console.debug("SysTrayX Storage: " + accounts.imap[0].name); + + for (let prop in accounts) { + console.debug(prop + ": " + accounts[prop][0].name); + } + let p = document.getElementsByClassName("account"); p[0].innerHTML = accounts.imap[0].name; - - // Get base let treeBase = document.getElementsByClassName("accountstree"); - for (let prop in accounts ) { + for (let prop in accounts) { + console.debug("Tree: " + prop + ": " + accounts[prop][0].name); - console.debug( "Tree: " + prop + ": " + accounts[prop][0].name ); - - let typeLi = document.createElement('li'); - - let typeSpan = document.createElement('span'); - typeSpan.setAttribute("class","caret"); + let typeLi = document.createElement("li"); + + let typeSpan = document.createElement("span"); + typeSpan.setAttribute("class", "caret"); let typeText = document.createTextNode(prop); typeSpan.appendChild(typeText); - + typeLi.appendChild(typeSpan); - - + treeBase[0].appendChild(typeLi); - - }; - - }, - + } + } }; SysTrayX.Accounts.init(); diff --git a/webext/js/options_tabbutton.js b/webext/js/options_tabbutton.js index c4ab10c..66d82d0 100644 --- a/webext/js/options_tabbutton.js +++ b/webext/js/options_tabbutton.js @@ -1,27 +1,25 @@ function openTab(evt) { - var i, tabcontent, tablinks, tabName; - tabName = evt.currentTarget.id; + var i, tabcontent, tablinks, tabName; + tabName = evt.currentTarget.id; - tabcontent = document.getElementsByClassName('tabcontent'); - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = 'none'; - } - tablinks = document.getElementsByClassName('tablinks'); - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(' active', ''); - } + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + tablinks = document.getElementsByClassName("tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } - let el = document.getElementById(tabName+'Content'); - el.style.display = 'block'; + let el = document.getElementById(tabName + "Content"); + el.style.display = "block"; - evt.currentTarget.className += ' active'; + evt.currentTarget.className += " active"; } -document.addEventListener('DOMContentLoaded', function () { - let tablinks = document.getElementsByClassName('tablinks'); +document.addEventListener("DOMContentLoaded", function() { + let tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { - document.getElementById(tablinks[i].id) - .addEventListener('click', openTab); + document.getElementById(tablinks[i].id).addEventListener("click", openTab); } }); - diff --git a/webext/js/options_treetable.js b/webext/js/options_treetable.js index 4a1fb13..9f505b7 100644 --- a/webext/js/options_treetable.js +++ b/webext/js/options_treetable.js @@ -1,16 +1,16 @@ -var tree = document.querySelectorAll('ul.tree a:not(:last-child)'); -for(var i = 0; i < tree.length; i++){ - tree[i].addEventListener('click', function(e) { +var tree = document.querySelectorAll("ul.tree a:not(:last-child)"); +for (var i = 0; i < tree.length; i++) { + tree[i].addEventListener("click", function(e) { var parent = e.target.parentElement; var classList = parent.classList; - if(classList.contains("open")) { - classList.remove('open'); - var opensubs = parent.querySelectorAll(':scope .open'); - for(var i = 0; i < opensubs.length; i++){ - opensubs[i].classList.remove('open'); + if (classList.contains("open")) { + classList.remove("open"); + var opensubs = parent.querySelectorAll(":scope .open"); + for (var i = 0; i < opensubs.length; i++) { + opensubs[i].classList.remove("open"); } } else { - classList.add('open'); + classList.add("open"); } e.preventDefault(); }); diff --git a/webext/js/styles.js b/webext/js/styles.js index 901b69e..4303d46 100644 --- a/webext/js/styles.js +++ b/webext/js/styles.js @@ -1,4 +1,7 @@ -var stylesheet = document.currentScript.getAttribute('stylesheet'); -document.getElementsByTagName("head")[0].insertAdjacentHTML( +var stylesheet = document.currentScript.getAttribute("stylesheet"); +document + .getElementsByTagName("head")[0] + .insertAdjacentHTML( "beforeend", - ``); + `` + ); diff --git a/webext/manifest.json b/webext/manifest.json index 7a0c9d0..9e852e5 100644 --- a/webext/manifest.json +++ b/webext/manifest.json @@ -19,15 +19,12 @@ "default_locale": "en-US", - "permissions": [ - "accountsRead", - "storage" - ], - + "permissions": ["accountsRead", "storage"], + "background": { "scripts": ["background.js"] }, - + "options_ui": { "page": "options.html" } diff --git a/webext/options.html b/webext/options.html index 0525644..b799205 100644 --- a/webext/options.html +++ b/webext/options.html @@ -1,221 +1,243 @@ - - - - - + + + + + + + - - +
            + + + +
            -
            - - - -
            +
            +
            +

            Windows

            +

            Windows options here

            -
            - -

            Windows

            -

            Windows options here

            +

            Please select your opton:

            + Option 1
            + Option 2
            + Option 3
            -

            Please select your opton:

            - Option 1
            - Option 2
            - Option 3
            +

            Please check the boxes:

            + Check 1
            + Check 2
            + Check 3
            + +
            -

            Please check the boxes:

            - Check 1
            - Check 2
            - Check 3
            +
            +
            +

            Icon

            +

            Icon options here.

            -
            -
            - -
            -
            -

            Icon

            -

            Icon options here.

            - -
              -
            • Beverages -
                -
              • Water
                • -
              • Coffee
                • -
              • Tea +
                  +
                • + Beverages
                    +
                  • Water
                    • +
                  • Coffee
                  • - Black Tea
                    -
                    • -
                  • - White Tea
                    -
                    • -
                  • Green Tea + Tea
                      -
                    • Sencha
                      • -
                    • Gyokuro
                      • -
                    • Matcha
                      • -
                    • Pi Lo Chun
                      • +
                    • + Black Tea
                      +
                      • +
                    • + White Tea
                      +
                      • +
                    • + Green Tea +
                        +
                      • Sencha
                        • +
                      • Gyokuro
                        • +
                      • Matcha
                        • +
                      • Pi Lo Chun
                        • +
                      +
                -
                • -
              +
              • +
            - -
            +
            +
            +

            Mail

            +

            Mail options here.

            -
            -
          • Part 2 - -
            • +
            + + +
            -
          • Part 3 - -
            • -
          - - - + + + -
          - - -
          + - - - - - - - - - - - + + + diff --git a/webext/options.js b/webext/options.js index 832aa63..86ca917 100644 --- a/webext/options.js +++ b/webext/options.js @@ -2,9 +2,11 @@ function saveOptions(e) { e.preventDefault(); console.debug("Save preferences"); - + browser.storage.sync.set({ - optionsRadioTest: document.querySelector('input[name="options_test"]:checked').value, + optionsRadioTest: document.querySelector( + 'input[name="options_test"]:checked' + ).value, optionsCheck1: document.querySelector('input[name="check1"]').checked, optionsCheck2: document.querySelector('input[name="check2"]').checked, optionsCheck3: document.querySelector('input[name="check3"]').checked @@ -12,22 +14,21 @@ function saveOptions(e) { } function restoreOptions() { - console.debug("Restore preferences"); function setCurrentRadioChoice(result) { let selector = result.optionsRadioTest || "Option1"; - let radioButton = document.querySelector(`[value=${selector}]`) + let radioButton = document.querySelector(`[value=${selector}]`); radioButton.checked = true; } function setCurrentCheckChoice(result) { let checkbox1 = document.querySelector('[name="check1"]'); - checkbox1.checked = result.optionsCheck1 || false;; + checkbox1.checked = result.optionsCheck1 || false; let checkbox2 = document.querySelector('[name="check2"]'); - checkbox2.checked = result.optionsCheck2 || false;; + checkbox2.checked = result.optionsCheck2 || false; let checkbox3 = document.querySelector('[name="check3"]'); - checkbox3.checked = result.optionsCheck3 || false;; + checkbox3.checked = result.optionsCheck3 || false; } function onError(error) { @@ -35,12 +36,17 @@ function restoreOptions() { } var getting = browser.storage.sync.get("optionsRadioTest"); - getting.then(setCurrentRadioChoice, onError); - - var getting = browser.storage.sync.get(["optionsCheck1", "optionsCheck2", "optionsCheck3"]); - getting.then(setCurrentCheckChoice, onError); + getting.then(setCurrentRadioChoice, onError); + var getting = browser.storage.sync.get([ + "optionsCheck1", + "optionsCheck2", + "optionsCheck3" + ]); + getting.then(setCurrentCheckChoice, onError); } document.addEventListener("DOMContentLoaded", restoreOptions); -document.querySelector('[name="saveform"]').addEventListener("submit", saveOptions); +document + .querySelector('[name="saveform"]') + .addEventListener("submit", saveOptions); From 5134cf83fa6e830263f15796b75e5c71675db56b Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Thu, 9 Jan 2020 23:37:33 +0100 Subject: [PATCH 08/11] Add included account tree --- webext/css/options.css | 45 +------- webext/js/options_accounts.js | 49 +++++++-- webext/options.html | 190 +--------------------------------- 3 files changed, 48 insertions(+), 236 deletions(-) diff --git a/webext/css/options.css b/webext/css/options.css index 09a6463..6d90408 100644 --- a/webext/css/options.css +++ b/webext/css/options.css @@ -60,16 +60,16 @@ body { color: dodgerblue; } -/* Remove default bullets */ ul, -#myUL { +#accountsTree { list-style-type: none; } /* Remove margins and padding from the parent ul */ -#myUL { +#accountsTree { + border-style: solid; margin: 0; - padding: 0; + padding: 10px; } /* Style the caret/arrow */ @@ -100,40 +100,3 @@ ul, .active { display: block; } - -/* Style the tree */ -ul.tree li { - list-style-type: none; - position: relative; -} - -ul.tree li ul { - display: none; -} - -ul.tree li.open > ul { - display: block; -} - -ul.tree li a { - color: black; - text-decoration: none; -} - -ul.tree li a:before { - height: 1em; - padding: 0 0.1em; - font-size: 0.8em; - display: block; - position: absolute; - left: -1.3em; - top: 0.2em; -} - -ul.tree li > a:not(:last-child):before { - content: "+"; -} - -ul.tree li.open > a:not(:last-child):before { - content: "-"; -} diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index 0096664..c4e2c1f 100644 --- a/webext/js/options_accounts.js +++ b/webext/js/options_accounts.js @@ -35,7 +35,9 @@ SysTrayX.Accounts = { console.debug("SysTrayX accounts name: " + mailAccount[i].name); console.debug("SysTrayX accounts type: " + mailAccount[i].type); - accounts[mailAccount[i].type] = []; + if (!accounts[mailAccount[i].type]) { + accounts[mailAccount[i].type] = []; + } accounts[mailAccount[i].type].push({ id: mailAccount[i].id, name: mailAccount[i].name @@ -48,25 +50,54 @@ SysTrayX.Accounts = { console.debug(prop + ": " + accounts[prop][0].name); } - let p = document.getElementsByClassName("account"); - p[0].innerHTML = accounts.imap[0].name; + /* + * Build tree + */ // Get base - let treeBase = document.getElementsByClassName("accountstree"); + let treeBase = document.getElementById("accountsTree"); for (let prop in accounts) { - console.debug("Tree: " + prop + ": " + accounts[prop][0].name); - let typeLi = document.createElement("li"); let typeSpan = document.createElement("span"); - typeSpan.setAttribute("class", "caret"); + if (accounts[prop]) { + typeSpan.setAttribute("class", "caret"); + } let typeText = document.createTextNode(prop); typeSpan.appendChild(typeText); - typeLi.appendChild(typeSpan); - treeBase[0].appendChild(typeLi); + if (accounts[prop]) { + let typeUl = document.createElement("ul"); + typeUl.setAttribute("class", "nested"); + + for (let i = 0; i < accounts[prop].length; ++i) { + let typeLi = document.createElement("li"); + let typeInput = document.createElement("input"); + typeInput.setAttribute("type", "checkbox"); + typeInput.setAttribute("name", accounts[prop][i].name); + typeInput.setAttribute("value", accounts[prop][i].id); + typeLi.appendChild(typeInput); + let typeText = document.createTextNode(" " + accounts[prop][i].name); + typeLi.appendChild(typeText); + typeUl.appendChild(typeLi); + } + typeLi.appendChild(typeUl); + } + + treeBase.appendChild(typeLi); + } + + /* + * Activate tree + */ + let toggler = document.getElementsByClassName("caret"); + for (let i = 0; i < toggler.length; i++) { + toggler[i].addEventListener("click", function() { + this.parentElement.querySelector(".nested").classList.toggle("active"); + this.classList.toggle("caret-down"); + }); } } }; diff --git a/webext/options.html b/webext/options.html index b799205..f404ee3 100644 --- a/webext/options.html +++ b/webext/options.html @@ -8,6 +8,8 @@ + +
          @@ -35,195 +37,14 @@

          Icon

          Icon options here.

          - -
            -
          • - Beverages -
              -
            • Water
              • -
            • Coffee
              • -
            • - Tea -
                -
              • - Black Tea
                -
                • -
              • - White Tea
                -
                • -
              • - Green Tea -
                  -
                • Sencha
                  • -
                • Gyokuro
                  • -
                • Matcha
                  • -
                • Pi Lo Chun
                  • -
                -
                • -
              -
              • -
            -
            • -
          -

          Mail

          -

          Mail options here.

          +

          Included accounts

          - - -
            - - +
              @@ -233,11 +54,8 @@ - - - From e8560f774f79b07389fa9b123e85c5fe946255e3 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Thu, 9 Jan 2020 23:46:07 +0100 Subject: [PATCH 09/11] Cleanup --- webext/js/options_accounts.js | 6 ------ webext/js/options_treetable.js | 17 ----------------- webext/js/options_treeview.js | 17 ----------------- webext/options.html | 2 +- 4 files changed, 1 insertion(+), 41 deletions(-) delete mode 100644 webext/js/options_treetable.js delete mode 100644 webext/js/options_treeview.js diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index c4e2c1f..5f8ef42 100644 --- a/webext/js/options_accounts.js +++ b/webext/js/options_accounts.js @@ -44,12 +44,6 @@ SysTrayX.Accounts = { }); } - console.debug("SysTrayX Storage: " + accounts.imap[0].name); - - for (let prop in accounts) { - console.debug(prop + ": " + accounts[prop][0].name); - } - /* * Build tree */ diff --git a/webext/js/options_treetable.js b/webext/js/options_treetable.js deleted file mode 100644 index 9f505b7..0000000 --- a/webext/js/options_treetable.js +++ /dev/null @@ -1,17 +0,0 @@ -var tree = document.querySelectorAll("ul.tree a:not(:last-child)"); -for (var i = 0; i < tree.length; i++) { - tree[i].addEventListener("click", function(e) { - var parent = e.target.parentElement; - var classList = parent.classList; - if (classList.contains("open")) { - classList.remove("open"); - var opensubs = parent.querySelectorAll(":scope .open"); - for (var i = 0; i < opensubs.length; i++) { - opensubs[i].classList.remove("open"); - } - } else { - classList.add("open"); - } - e.preventDefault(); - }); -} diff --git a/webext/js/options_treeview.js b/webext/js/options_treeview.js deleted file mode 100644 index baa44c3..0000000 --- a/webext/js/options_treeview.js +++ /dev/null @@ -1,17 +0,0 @@ -var toggler = document.getElementsByClassName("caret"); -var i; - -for (i = 0; i < toggler.length; i++) { - toggler[i].addEventListener("click", function() { - this.parentElement.querySelector(".nested").classList.toggle("active"); - this.classList.toggle("caret-down"); - }); -} - -var togglerBox = document.getElementsByClassName("box"); - -for (i = 0; i < togglerBox.length; i++) { - togglerBox[i].addEventListener("click", function() { - this.classList.toggle("check-box"); - }); -} diff --git a/webext/options.html b/webext/options.html index f404ee3..bcb4323 100644 --- a/webext/options.html +++ b/webext/options.html @@ -47,7 +47,7 @@
                - +
                From 5ad7ecf007565d25768e2b01af68f2345d8c6e61 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Thu, 9 Jan 2020 23:47:47 +0100 Subject: [PATCH 10/11] Cleanup --- webext/options.html | 1 - 1 file changed, 1 deletion(-) diff --git a/webext/options.html b/webext/options.html index bcb4323..cae3755 100644 --- a/webext/options.html +++ b/webext/options.html @@ -54,7 +54,6 @@ - From 86fe0b67e3ea1b6b93284f0c3d0aa15fe90013f6 Mon Sep 17 00:00:00 2001 From: Ximi1970 Date: Sat, 11 Jan 2020 17:17:01 +0100 Subject: [PATCH 11/11] Add save / restore for accountsTree --- webext/js/options_accounts.js | 26 ++++++++++++++++++++++++++ webext/options.js | 24 ++++++++++++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index 5f8ef42..6369aa9 100644 --- a/webext/js/options_accounts.js +++ b/webext/js/options_accounts.js @@ -72,6 +72,7 @@ SysTrayX.Accounts = { typeInput.setAttribute("type", "checkbox"); typeInput.setAttribute("name", accounts[prop][i].name); typeInput.setAttribute("value", accounts[prop][i].id); + typeInput.setAttribute("checked", "true"); typeLi.appendChild(typeInput); let typeText = document.createTextNode(" " + accounts[prop][i].name); typeLi.appendChild(typeText); @@ -81,6 +82,31 @@ SysTrayX.Accounts = { } treeBase.appendChild(typeLi); + + // Restore saved selection + function setAccounts(result) { + console.debug("Restore account selection"); + + let treeBase = document.getElementById("accountsTree"); + let accounts = result.accounts || []; + for (let i = 0; i < accounts.length; ++i) { + let checkbox = treeBase.querySelector( + `input[value=${accounts[i].id}]` + ); + if (checkbox) { + checkbox.checked = accounts[i].checked; + } + } + + console.debug("Restore account selection done"); + } + + function onError(error) { + console.log(`GetAccounts Error: ${error}`); + } + + let getAccounts = browser.storage.sync.get("accounts"); + getAccounts.then(setAccounts, onError); } /* diff --git a/webext/options.js b/webext/options.js index 86ca917..abf237e 100644 --- a/webext/options.js +++ b/webext/options.js @@ -11,6 +11,30 @@ function saveOptions(e) { optionsCheck2: document.querySelector('input[name="check2"]').checked, optionsCheck3: document.querySelector('input[name="check3"]').checked }); + + /* + * Get accounts + */ + + console.debug("Store accounts"); + + let treeBase = document.getElementById("accountsTree"); + let inputs = treeBase.querySelectorAll("input"); + let accounts = []; + for (let i = 0; i < inputs.length; ++i) { + accounts.push({ + id: inputs[i].value, + name: inputs[i].name, + checked: inputs[i].checked + }); + } + + // Store accounts + browser.storage.sync.set({ + accounts: accounts + }); + + console.debug("Store accounts done"); } function restoreOptions() {