This commit is contained in:
Ximi1970
2020-01-09 21:03:06 +01:00
parent c07fe897f0
commit 7ccbbe0e6b
10 changed files with 341 additions and 315 deletions

View File

@@ -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;
@@ -59,8 +60,9 @@ body {font-family: Arial;}
color: dodgerblue;
}
/* Remove default bullets */
ul, #myUL {
/* Remove default bullets */
ul,
#myUL {
list-style-type: none;
}
@@ -99,40 +101,39 @@ ul, #myUL {
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: "-";
}

View File

@@ -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 }
);

View File

@@ -1,7 +1,6 @@
var SysTrayX = {};
SysTrayX.Accounts = {
initialized: false,
init: function() {
@@ -31,49 +30,45 @@ SysTrayX.Accounts = {
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);
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});
};
accounts[mailAccount[i].type].push({
id: mailAccount[i].id,
name: mailAccount[i].name
});
}
console.debug("SysTrayX Storage: "+accounts.imap[0].name);
console.debug("SysTrayX Storage: " + accounts.imap[0].name);
for (let prop in accounts ) {
console.debug( prop + ": " + accounts[prop][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 typeLi = document.createElement('li');
let typeSpan = document.createElement('span');
typeSpan.setAttribute("class","caret");
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();

View File

@@ -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);
}
});

View File

@@ -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();
});

View File

@@ -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",
`<link rel=\"stylesheet\" href=${stylesheet} />`);
`<link rel=\"stylesheet\" href=${stylesheet} />`
);

View File

@@ -19,10 +19,7 @@
"default_locale": "en-US",
"permissions": [
"accountsRead",
"storage"
],
"permissions": ["accountsRead", "storage"],
"background": {
"scripts": ["background.js"]

View File

@@ -1,221 +1,243 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script src="js/styles.js" stylesheet="css/options.css"></script>
<script src="js/i18n.js"></script>
<script src="js/styles.js" stylesheet="css/options.css"></script>
<script src='js/i18n.js'></script>
<div class="tab">
<button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
<button class="tablinks" id="Icon">__MSG_tabIcon__</button>
<button class="tablinks" id="Mail">__MSG_tabMail__</button>
</div>
<div class="tab">
<button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
<button class="tablinks" id="Icon">__MSG_tabIcon__</button>
<button class="tablinks" id="Mail">__MSG_tabMail__</button>
</div>
<div id="WindowsContent" class="tabcontent" style="display:block">
<form>
<h3>Windows</h3>
<p>Windows options here</p>
<div id="WindowsContent" class="tabcontent" style="display:block">
<form>
<h3>Windows</h3>
<p>Windows options here</p>
<p>Please select your opton:</p>
<input type="radio" name="options_test" value="Option1" /> Option 1<br />
<input type="radio" name="options_test" value="Option2" /> Option 2<br />
<input type="radio" name="options_test" value="Option3" /> Option 3<br />
<p>Please select your opton:</p>
<input type="radio" name="options_test" value="Option1"> Option 1<br>
<input type="radio" name="options_test" value="Option2"> Option 2<br>
<input type="radio" name="options_test" value="Option3"> Option 3<br>
<p>Please check the boxes:</p>
<input type="checkbox" name="check1" value="Check1" /> Check 1<br />
<input type="checkbox" name="check2" value="Check2" /> Check 2<br />
<input type="checkbox" name="check3" value="Check3" /> Check 3<br />
</form>
</div>
<p>Please check the boxes:</p>
<input type="checkbox" name="check1" value="Check1"> Check 1<br>
<input type="checkbox" name="check2" value="Check2"> Check 2<br>
<input type="checkbox" name="check3" value="Check3"> Check 3<br>
<div id="IconContent" class="tabcontent">
<form>
<h3>Icon</h3>
<p>Icon options here.</p>
</form>
</div>
<div id="IconContent" class="tabcontent">
<form>
<h3>Icon</h3>
<p>Icon options here.</p>
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li><span class="box">Water</span></li>
<li><span class="box">Coffee</span></li>
<li><span class="caret">Tea</span>
<ul id="myUL">
<li>
<span class="caret">Beverages</span>
<ul class="nested">
<li><span class="box">Water</span></li>
<li><span class="box">Coffee</span></li>
<li>
<input type="checkbox" name="blacktea" value="BlackTea">Black Tea<br>
</li>
<li>
<input type="checkbox" name="blacktea" value="BlackTea">White Tea<br>
</li>
<li><span class="caret">Green Tea</span>
<span class="caret">Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
<li>
<input
type="checkbox"
name="blacktea"
value="BlackTea"
/>Black Tea<br />
</li>
<li>
<input
type="checkbox"
name="blacktea"
value="BlackTea"
/>White Tea<br />
</li>
<li>
<span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</form>
</div>
</form>
</div>
<div id="MailContent" class="tabcontent">
<form>
<h3>Mail</h3>
<p>Mail options here.</p>
<div id="MailContent" class="tabcontent">
<form>
<h3>Mail</h3>
<p>Mail options here.</p>
<p class="account">Account</p>
<p class="account">Account</p>
<ul class="accountstree"></ul>
<ul class="accountstree">
</ul>
<ul class="tree">
<li><a href="#">Part 1</a>
<ul>
<li><a href="#">Item A</a>
<ul class="tree">
<li>
<a href="#">Part 1</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item B</a>
<li>
<a href="#">Part 2</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item C</a>
<li>
<a href="#">Part 3</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</form>
</div>
<li><a href="#">Part 2</a>
<ul>
<li><a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
<form name="saveform">
<label>Save preferences</label>
<button type="submit">Save</button>
</form>
<li><a href="#">Part 3</a>
<ul>
<li><a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li><a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="js/options_tabbutton.js"></script>
<script src="js/options_treetable.js"></script>
<script src="js/options_treeview.js"></script>
</form>
</div>
<script src="js/options_accounts.js"></script>
<form name="saveform">
<label>Save preferences</label>
<button type="submit">Save</button>
</form>
<script src='js/options_tabbutton.js'></script>
<script src='js/options_treetable.js'></script>
<script src='js/options_treeview.js'></script>
<script src="js/options_accounts.js"></script>
<script src="options.js"></script>
</body>
<script src="options.js"></script>
</body>
</html>

View File

@@ -4,7 +4,9 @@ function saveOptions(e) {
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) {
@@ -37,10 +38,15 @@ function restoreOptions() {
var getting = browser.storage.sync.get("optionsRadioTest");
getting.then(setCurrentRadioChoice, onError);
var getting = browser.storage.sync.get(["optionsCheck1", "optionsCheck2", "optionsCheck3"]);
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);