mirror of
https://github.com/Ximi1970/systray-x.git
synced 2025-11-10 15:26:09 +01:00
Prettify
This commit is contained in:
@@ -1,43 +1,44 @@
|
|||||||
body {font-family: Arial;}
|
body {
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
|
||||||
/* Style the tab */
|
/* Style the tab */
|
||||||
.tab {
|
.tab {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style the buttons inside the tab */
|
/* Style the buttons inside the tab */
|
||||||
.tab button {
|
.tab button {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
float: left;
|
float: left;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Change background color of buttons on hover */
|
/* Change background color of buttons on hover */
|
||||||
.tab button:hover {
|
.tab button:hover {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Create an active/current tablink class */
|
/* Create an active/current tablink class */
|
||||||
.tab button.active {
|
.tab button.active {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style the tab content */
|
/* Style the tab content */
|
||||||
.tabcontent {
|
.tabcontent {
|
||||||
display: none;
|
display: none;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* check box tree view */
|
/* check box tree view */
|
||||||
.box {
|
.box {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -59,8 +60,9 @@ body {font-family: Arial;}
|
|||||||
color: dodgerblue;
|
color: dodgerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove default bullets */
|
/* Remove default bullets */
|
||||||
ul, #myUL {
|
ul,
|
||||||
|
#myUL {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -99,40 +101,39 @@ ul, #myUL {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Style the tree */
|
/* Style the tree */
|
||||||
ul.tree li {
|
ul.tree li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li ul {
|
ul.tree li ul {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li.open > ul {
|
ul.tree li.open > ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li a {
|
ul.tree li a {
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li a:before {
|
ul.tree li a:before {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
padding:0 .1em;
|
padding: 0 0.1em;
|
||||||
font-size: .8em;
|
font-size: 0.8em;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1.3em;
|
left: -1.3em;
|
||||||
top: .2em;
|
top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li > a:not(:last-child):before {
|
ul.tree li > a:not(:last-child):before {
|
||||||
content: '+';
|
content: "+";
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.tree li.open > a:not(:last-child):before {
|
ul.tree li.open > a:not(:last-child):before {
|
||||||
content: '-';
|
content: "-";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
var i18n = {
|
var i18n = {
|
||||||
updateString(aString) {
|
updateString(aString) {
|
||||||
return aString.replace(/__MSG_(.+?)__/g, (aMatched) => {
|
return aString.replace(/__MSG_(.+?)__/g, aMatched => {
|
||||||
const key = aMatched.slice(6, -2);
|
const key = aMatched.slice(6, -2);
|
||||||
return browser.i18n.getMessage(key) || aMatched;
|
return browser.i18n.getMessage(key) || aMatched;
|
||||||
});
|
});
|
||||||
@@ -38,6 +38,10 @@ var i18n = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener(
|
||||||
i18n.updateDocument();
|
"DOMContentLoaded",
|
||||||
}, { once: true });
|
() => {
|
||||||
|
i18n.updateDocument();
|
||||||
|
},
|
||||||
|
{ once: true }
|
||||||
|
);
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
var SysTrayX = {};
|
var SysTrayX = {};
|
||||||
|
|
||||||
SysTrayX.Accounts = {
|
SysTrayX.Accounts = {
|
||||||
|
|
||||||
initialized: false,
|
initialized: false,
|
||||||
|
|
||||||
init: function() {
|
init: function() {
|
||||||
@@ -31,49 +30,45 @@ SysTrayX.Accounts = {
|
|||||||
let accounts = new Object();
|
let accounts = new Object();
|
||||||
let i;
|
let i;
|
||||||
|
|
||||||
for (i=0 ; i < mailAccount.length; i++) {
|
for (i = 0; i < mailAccount.length; i++) {
|
||||||
console.debug("SysTrayX accounts id: "+mailAccount[i].id);
|
console.debug("SysTrayX accounts id: " + mailAccount[i].id);
|
||||||
console.debug("SysTrayX accounts name: "+mailAccount[i].name);
|
console.debug("SysTrayX accounts name: " + mailAccount[i].name);
|
||||||
console.debug("SysTrayX accounts type: "+mailAccount[i].type);
|
console.debug("SysTrayX accounts type: " + mailAccount[i].type);
|
||||||
|
|
||||||
accounts[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 ) {
|
for (let prop in accounts) {
|
||||||
console.debug( prop + ": " + accounts[prop][0].name );
|
console.debug(prop + ": " + accounts[prop][0].name);
|
||||||
}
|
}
|
||||||
|
|
||||||
let p = document.getElementsByClassName("account");
|
let p = document.getElementsByClassName("account");
|
||||||
p[0].innerHTML = accounts.imap[0].name;
|
p[0].innerHTML = accounts.imap[0].name;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Get base
|
// Get base
|
||||||
let treeBase = document.getElementsByClassName("accountstree");
|
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);
|
let typeText = document.createTextNode(prop);
|
||||||
typeSpan.appendChild(typeText);
|
typeSpan.appendChild(typeText);
|
||||||
|
|
||||||
typeLi.appendChild(typeSpan);
|
typeLi.appendChild(typeSpan);
|
||||||
|
|
||||||
|
|
||||||
treeBase[0].appendChild(typeLi);
|
treeBase[0].appendChild(typeLi);
|
||||||
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
SysTrayX.Accounts.init();
|
SysTrayX.Accounts.init();
|
||||||
|
|||||||
@@ -1,27 +1,25 @@
|
|||||||
function openTab(evt) {
|
function openTab(evt) {
|
||||||
var i, tabcontent, tablinks, tabName;
|
var i, tabcontent, tablinks, tabName;
|
||||||
tabName = evt.currentTarget.id;
|
tabName = evt.currentTarget.id;
|
||||||
|
|
||||||
tabcontent = document.getElementsByClassName('tabcontent');
|
tabcontent = document.getElementsByClassName("tabcontent");
|
||||||
for (i = 0; i < tabcontent.length; i++) {
|
for (i = 0; i < tabcontent.length; i++) {
|
||||||
tabcontent[i].style.display = 'none';
|
tabcontent[i].style.display = "none";
|
||||||
}
|
}
|
||||||
tablinks = document.getElementsByClassName('tablinks');
|
tablinks = document.getElementsByClassName("tablinks");
|
||||||
for (i = 0; i < tablinks.length; i++) {
|
for (i = 0; i < tablinks.length; i++) {
|
||||||
tablinks[i].className = tablinks[i].className.replace(' active', '');
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||||
}
|
}
|
||||||
|
|
||||||
let el = document.getElementById(tabName+'Content');
|
let el = document.getElementById(tabName + "Content");
|
||||||
el.style.display = 'block';
|
el.style.display = "block";
|
||||||
|
|
||||||
evt.currentTarget.className += ' active';
|
evt.currentTarget.className += " active";
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
let tablinks = document.getElementsByClassName('tablinks');
|
let tablinks = document.getElementsByClassName("tablinks");
|
||||||
for (i = 0; i < tablinks.length; i++) {
|
for (i = 0; i < tablinks.length; i++) {
|
||||||
document.getElementById(tablinks[i].id)
|
document.getElementById(tablinks[i].id).addEventListener("click", openTab);
|
||||||
.addEventListener('click', openTab);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
|
var tree = document.querySelectorAll("ul.tree a:not(:last-child)");
|
||||||
for(var i = 0; i < tree.length; i++){
|
for (var i = 0; i < tree.length; i++) {
|
||||||
tree[i].addEventListener('click', function(e) {
|
tree[i].addEventListener("click", function(e) {
|
||||||
var parent = e.target.parentElement;
|
var parent = e.target.parentElement;
|
||||||
var classList = parent.classList;
|
var classList = parent.classList;
|
||||||
if(classList.contains("open")) {
|
if (classList.contains("open")) {
|
||||||
classList.remove('open');
|
classList.remove("open");
|
||||||
var opensubs = parent.querySelectorAll(':scope .open');
|
var opensubs = parent.querySelectorAll(":scope .open");
|
||||||
for(var i = 0; i < opensubs.length; i++){
|
for (var i = 0; i < opensubs.length; i++) {
|
||||||
opensubs[i].classList.remove('open');
|
opensubs[i].classList.remove("open");
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
classList.add('open');
|
classList.add("open");
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
var stylesheet = document.currentScript.getAttribute('stylesheet');
|
var stylesheet = document.currentScript.getAttribute("stylesheet");
|
||||||
document.getElementsByTagName("head")[0].insertAdjacentHTML(
|
document
|
||||||
|
.getElementsByTagName("head")[0]
|
||||||
|
.insertAdjacentHTML(
|
||||||
"beforeend",
|
"beforeend",
|
||||||
`<link rel=\"stylesheet\" href=${stylesheet} />`);
|
`<link rel=\"stylesheet\" href=${stylesheet} />`
|
||||||
|
);
|
||||||
|
|||||||
@@ -19,10 +19,7 @@
|
|||||||
|
|
||||||
"default_locale": "en-US",
|
"default_locale": "en-US",
|
||||||
|
|
||||||
"permissions": [
|
"permissions": ["accountsRead", "storage"],
|
||||||
"accountsRead",
|
|
||||||
"storage"
|
|
||||||
],
|
|
||||||
|
|
||||||
"background": {
|
"background": {
|
||||||
"scripts": ["background.js"]
|
"scripts": ["background.js"]
|
||||||
|
|||||||
@@ -1,221 +1,243 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<div class="tab">
|
||||||
<script src='js/i18n.js'></script>
|
<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">
|
<div id="WindowsContent" class="tabcontent" style="display:block">
|
||||||
<button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
|
<form>
|
||||||
<button class="tablinks" id="Icon">__MSG_tabIcon__</button>
|
<h3>Windows</h3>
|
||||||
<button class="tablinks" id="Mail">__MSG_tabMail__</button>
|
<p>Windows options here</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="WindowsContent" class="tabcontent" style="display:block">
|
<p>Please select your opton:</p>
|
||||||
<form>
|
<input type="radio" name="options_test" value="Option1" /> Option 1<br />
|
||||||
<h3>Windows</h3>
|
<input type="radio" name="options_test" value="Option2" /> Option 2<br />
|
||||||
<p>Windows options here</p>
|
<input type="radio" name="options_test" value="Option3" /> Option 3<br />
|
||||||
|
|
||||||
<p>Please select your opton:</p>
|
<p>Please check the boxes:</p>
|
||||||
<input type="radio" name="options_test" value="Option1"> Option 1<br>
|
<input type="checkbox" name="check1" value="Check1" /> Check 1<br />
|
||||||
<input type="radio" name="options_test" value="Option2"> Option 2<br>
|
<input type="checkbox" name="check2" value="Check2" /> Check 2<br />
|
||||||
<input type="radio" name="options_test" value="Option3"> Option 3<br>
|
<input type="checkbox" name="check3" value="Check3" /> Check 3<br />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Please check the boxes:</p>
|
<div id="IconContent" class="tabcontent">
|
||||||
<input type="checkbox" name="check1" value="Check1"> Check 1<br>
|
<form>
|
||||||
<input type="checkbox" name="check2" value="Check2"> Check 2<br>
|
<h3>Icon</h3>
|
||||||
<input type="checkbox" name="check3" value="Check3"> Check 3<br>
|
<p>Icon options here.</p>
|
||||||
|
|
||||||
</form>
|
<ul id="myUL">
|
||||||
</div>
|
<li>
|
||||||
|
<span class="caret">Beverages</span>
|
||||||
<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 class="nested">
|
<ul class="nested">
|
||||||
|
<li><span class="box">Water</span></li>
|
||||||
|
<li><span class="box">Coffee</span></li>
|
||||||
<li>
|
<li>
|
||||||
<input type="checkbox" name="blacktea" value="BlackTea">Black Tea<br>
|
<span class="caret">Tea</span>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="checkbox" name="blacktea" value="BlackTea">White Tea<br>
|
|
||||||
</li>
|
|
||||||
<li><span class="caret">Green Tea</span>
|
|
||||||
<ul class="nested">
|
<ul class="nested">
|
||||||
<li>Sencha</li>
|
<li>
|
||||||
<li>Gyokuro</li>
|
<input
|
||||||
<li>Matcha</li>
|
type="checkbox"
|
||||||
<li>Pi Lo Chun</li>
|
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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</form>
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
</form>
|
<div id="MailContent" class="tabcontent">
|
||||||
</div>
|
<form>
|
||||||
|
<h3>Mail</h3>
|
||||||
|
<p>Mail options here.</p>
|
||||||
|
|
||||||
<div id="MailContent" class="tabcontent">
|
<p class="account">Account</p>
|
||||||
<form>
|
|
||||||
<h3>Mail</h3>
|
|
||||||
<p>Mail options here.</p>
|
|
||||||
|
|
||||||
<p class="account">Account</p>
|
<ul class="accountstree"></ul>
|
||||||
|
|
||||||
<ul class="accountstree">
|
<ul class="tree">
|
||||||
</ul>
|
<li>
|
||||||
|
<a href="#">Part 1</a>
|
||||||
<ul class="tree">
|
|
||||||
<li><a href="#">Part 1</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Item A</a>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Sub-item 1</a></li>
|
<li>
|
||||||
<li><a href="#">Sub-item 2</a></li>
|
<a href="#">Item A</a>
|
||||||
<li><a href="#">Sub-item 3</a></li>
|
<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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#">Item B</a>
|
|
||||||
|
<li>
|
||||||
|
<a href="#">Part 2</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Sub-item 1</a></li>
|
<li>
|
||||||
<li><a href="#">Sub-item 2</a></li>
|
<a href="#">Item A</a>
|
||||||
<li><a href="#">Sub-item 3</a></li>
|
<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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#">Item C</a>
|
|
||||||
|
<li>
|
||||||
|
<a href="#">Part 3</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Sub-item 1</a></li>
|
<li>
|
||||||
<li><a href="#">Sub-item 2</a></li>
|
<a href="#">Item A</a>
|
||||||
<li><a href="#">Sub-item 3</a></li>
|
<ul>
|
||||||
</ul>
|
<li><a href="#">Sub-item 1</a></li>
|
||||||
</li>
|
<li><a href="#">Sub-item 2</a></li>
|
||||||
<li><a href="#">Item D</a>
|
<li><a href="#">Sub-item 3</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li><a href="#">Sub-item 1</a></li>
|
</li>
|
||||||
<li><a href="#">Sub-item 2</a></li>
|
<li>
|
||||||
<li><a href="#">Sub-item 3</a></li>
|
<a href="#">Item B</a>
|
||||||
</ul>
|
<ul>
|
||||||
</li>
|
<li><a href="#">Sub-item 1</a></li>
|
||||||
<li><a href="#">Item E</a>
|
<li><a href="#">Sub-item 2</a></li>
|
||||||
<ul>
|
<li><a href="#">Sub-item 3</a></li>
|
||||||
<li><a href="#">Sub-item 1</a></li>
|
</ul>
|
||||||
<li><a href="#">Sub-item 2</a></li>
|
</li>
|
||||||
<li><a href="#">Sub-item 3</a></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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<li><a href="#">Part 2</a>
|
<form name="saveform">
|
||||||
<ul>
|
<label>Save preferences</label>
|
||||||
<li><a href="#">Item A</a>
|
<button type="submit">Save</button>
|
||||||
<ul>
|
</form>
|
||||||
<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="#">Part 3</a>
|
<script src="js/options_tabbutton.js"></script>
|
||||||
<ul>
|
<script src="js/options_treetable.js"></script>
|
||||||
<li><a href="#">Item A</a>
|
<script src="js/options_treeview.js"></script>
|
||||||
<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>
|
|
||||||
|
|
||||||
</form>
|
<script src="js/options_accounts.js"></script>
|
||||||
</div>
|
|
||||||
|
|
||||||
<form name="saveform">
|
<script src="options.js"></script>
|
||||||
<label>Save preferences</label>
|
</body>
|
||||||
<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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,9 @@ function saveOptions(e) {
|
|||||||
console.debug("Save preferences");
|
console.debug("Save preferences");
|
||||||
|
|
||||||
browser.storage.sync.set({
|
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,
|
optionsCheck1: document.querySelector('input[name="check1"]').checked,
|
||||||
optionsCheck2: document.querySelector('input[name="check2"]').checked,
|
optionsCheck2: document.querySelector('input[name="check2"]').checked,
|
||||||
optionsCheck3: document.querySelector('input[name="check3"]').checked
|
optionsCheck3: document.querySelector('input[name="check3"]').checked
|
||||||
@@ -12,22 +14,21 @@ function saveOptions(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function restoreOptions() {
|
function restoreOptions() {
|
||||||
|
|
||||||
console.debug("Restore preferences");
|
console.debug("Restore preferences");
|
||||||
|
|
||||||
function setCurrentRadioChoice(result) {
|
function setCurrentRadioChoice(result) {
|
||||||
let selector = result.optionsRadioTest || "Option1";
|
let selector = result.optionsRadioTest || "Option1";
|
||||||
let radioButton = document.querySelector(`[value=${selector}]`)
|
let radioButton = document.querySelector(`[value=${selector}]`);
|
||||||
radioButton.checked = true;
|
radioButton.checked = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCurrentCheckChoice(result) {
|
function setCurrentCheckChoice(result) {
|
||||||
let checkbox1 = document.querySelector('[name="check1"]');
|
let checkbox1 = document.querySelector('[name="check1"]');
|
||||||
checkbox1.checked = result.optionsCheck1 || false;;
|
checkbox1.checked = result.optionsCheck1 || false;
|
||||||
let checkbox2 = document.querySelector('[name="check2"]');
|
let checkbox2 = document.querySelector('[name="check2"]');
|
||||||
checkbox2.checked = result.optionsCheck2 || false;;
|
checkbox2.checked = result.optionsCheck2 || false;
|
||||||
let checkbox3 = document.querySelector('[name="check3"]');
|
let checkbox3 = document.querySelector('[name="check3"]');
|
||||||
checkbox3.checked = result.optionsCheck3 || false;;
|
checkbox3.checked = result.optionsCheck3 || false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError(error) {
|
function onError(error) {
|
||||||
@@ -37,10 +38,15 @@ function restoreOptions() {
|
|||||||
var getting = browser.storage.sync.get("optionsRadioTest");
|
var getting = browser.storage.sync.get("optionsRadioTest");
|
||||||
getting.then(setCurrentRadioChoice, onError);
|
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);
|
getting.then(setCurrentCheckChoice, onError);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", restoreOptions);
|
document.addEventListener("DOMContentLoaded", restoreOptions);
|
||||||
document.querySelector('[name="saveform"]').addEventListener("submit", saveOptions);
|
document
|
||||||
|
.querySelector('[name="saveform"]')
|
||||||
|
.addEventListener("submit", saveOptions);
|
||||||
|
|||||||
Reference in New Issue
Block a user