Add control logic

This commit is contained in:
Ximi1970
2020-05-03 23:39:02 +02:00
parent 6ddbe294dd
commit 5860d2c1ad
6 changed files with 179 additions and 100 deletions

View File

@@ -9,9 +9,7 @@
<h3>Background</h3>
<p>Background HTML</p>
<div id="accounts" data-accounts="[]">
<div id="filters" data-filters=undefined></div>
</div>
<div id="filters" data-filters="undefined"></div>
<script src="js/defaults.js"></script>
<div id="icon" data-icon-mime="" data-icon=""></div>

View File

@@ -1,6 +1,4 @@
var SysTrayX = {
debugAccounts: false,
startupState: undefined,
pollTiming: {
@@ -16,14 +14,11 @@ var SysTrayX = {
};
SysTrayX.Messaging = {
unreadFiltersTest: [
{ unread: true },
{ unread: true, folder: { accountId: "account1", path: "/INBOX" } },
],
accounts: [],
init: function () {
// Get the accounts from the storage
SysTrayX.Messaging.getAccounts();
// Get the filters from the storage
SysTrayX.Messaging.getFilters();
// Lookout for storage changes
browser.storage.onChanged.addListener(SysTrayX.Messaging.storageChanged);
@@ -43,8 +38,7 @@ SysTrayX.Messaging = {
// Send preferences to app
SysTrayX.Messaging.sendPreferences();
// this.unReadMessages(this.unreadFiltersTest).then(this.unreadCb);
// window.setInterval(SysTrayX.Messaging.pollAccounts, 1000);
// Start polling the accounts
window.setTimeout(
SysTrayX.Messaging.pollAccounts,
SysTrayX.pollTiming.pollStartupDelay * 1000
@@ -59,7 +53,7 @@ SysTrayX.Messaging = {
//
storageChanged: function (changes, area) {
// Get the new preferences
SysTrayX.Messaging.getAccounts();
SysTrayX.Messaging.getFilters();
if ("pollStartupDelay" in changes && changes["pollStartupDelay"].newValue) {
SysTrayX.pollTiming = {
@@ -109,9 +103,34 @@ SysTrayX.Messaging = {
SysTrayX.Link.postSysTrayXMessage({ unreadMail: 0 });
}
} else {
SysTrayX.Messaging.unReadMessages([{ unread: true }]).then(
SysTrayX.Messaging.unreadCb
);
// Never saved anything, construct temporary filters
if (SysTrayX.Messaging.accounts.length > 0) {
// Construct inbox filters for all accounts
let filters = [];
SysTrayX.Messaging.accounts.forEach((account) => {
const inbox = account.folders.filter(
(folder) => folder.type == "inbox"
);
if (inbox.length > 0) {
filters.push({
unread: true,
folder: inbox[0],
});
}
});
// Store them in the background HTML
const filtersDiv = document.getElementById("filters");
filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
SysTrayX.Messaging.unReadMessages(filters).then(
SysTrayX.Messaging.unreadCb
);
} else {
// No accounts, no mail
SysTrayX.Link.postSysTrayXMessage({ unreadMail: 0 });
}
}
// Next round...
@@ -227,34 +246,18 @@ SysTrayX.Messaging = {
},
//
// Get the accounts from the storage
// Get the filters from the storage
//
getAccounts: function () {
const getter = browser.storage.sync.get(["accounts", "filters"]);
getter.then(this.getAccountsStorage, this.onGetAccountsStorageError);
if (SysTrayX.debugAccounts) {
const accountsDiv = document.getElementById("accounts");
const accountsAttr = accountsDiv.getAttribute("data-accounts");
console.debug(`Accounts attr: ${accountsAttr}`);
const accounts = JSON.parse(accountsAttr);
console.debug(`Accounts poll: ${accounts.length}`);
}
getFilters: function () {
const getter = browser.storage.sync.get("filters");
getter.then(this.getFiltersStorage, this.onGetFiltersStorageError);
},
//
// Get the accounts from the storage and
// Get the filters from the storage and
// make them available in the background HTML
//
getAccountsStorage: function (result) {
const accounts = result.accounts || undefined;
// Store them in the background HTML
const accountsDiv = document.getElementById("accounts");
accountsDiv.setAttribute("data-accounts", JSON.stringify(accounts));
getFiltersStorage: function (result) {
const filters = result.filters || undefined;
// Store them in the background HTML
@@ -448,6 +451,9 @@ async function start() {
.getCurrent()
.then((currentWindow) => currentWindow);
// Get all accounts
SysTrayX.Messaging.accounts = await browser.accounts.list();
// Setup the link first
SysTrayX.Link.init();

View File

@@ -88,7 +88,7 @@ ul,
}
/* Style the caret/arrow filler */
.noncaret::before {
.caretfiller::before {
user-select: none; /* Prevent text selection */
content: "\25B6";
visibility: hidden;

View File

@@ -30,7 +30,12 @@ SysTrayX.Accounts = {
.reduce((r, name, i, a) => {
if (!r[name]) {
r[name] = { result: [] };
r.result.push({ name: folder.name, children: r[name].result });
r.result.push({
name: folder.name,
accountId: folder.accountId,
path: folder.path,
children: r[name].result,
});
}
return r[name];
@@ -43,7 +48,7 @@ SysTrayX.Accounts = {
let accounts = new Object();
for (let i = 0; i < mailAccount.length; i++) {
if (true) {
if (false) {
console.debug("SysTrayX accounts id: " + mailAccount[i].id);
console.debug("SysTrayX accounts name: " + mailAccount[i].name);
console.debug("SysTrayX accounts type: " + mailAccount[i].type);
@@ -98,11 +103,8 @@ SysTrayX.Accounts = {
const typeInput = document.createElement("input");
typeInput.setAttribute("type", "checkbox");
typeInput.setAttribute("name", accounts[prop][i].id);
typeInput.setAttribute("value", JSON.stringify(accounts[prop][i]));
// typeInput.setAttribute("checked", "true");
// typeInput.setAttribute("indeterminate", "true");
typeInput.setAttribute("name", accounts[prop][i].id);
typeLi.appendChild(typeInput);
const typeText = document.createTextNode(
@@ -119,23 +121,31 @@ SysTrayX.Accounts = {
typeLevelUl.setAttribute("class", "nested");
level.forEach((element) => {
console.debug("Name: " + element.name);
const typeEleLi = document.createElement("li");
const typeEleSpan = document.createElement("span");
if (element.children.length > 0) {
typeEleSpan.setAttribute("class", "caret");
} else {
typeEleSpan.setAttribute("class", "noncaret");
typeEleSpan.setAttribute("class", "caretfiller");
}
typeEleLi.appendChild(typeEleSpan);
const typeEleInput = document.createElement("input");
typeEleInput.setAttribute("type", "checkbox");
typeEleInput.setAttribute("name", element.name);
// typeEleInput.setAttribute("value", JSON.stringify(element.name));
// typeEleInput.setAttribute("checked", "true");
typeEleInput.setAttribute(
"value",
JSON.stringify({
accountId: element.accountId,
path: element.path,
})
);
if (element.children.length > 0) {
typeEleInput.setAttribute("name", "parent-" + element.name);
} else {
typeEleInput.setAttribute("name", "child-" + element.name);
}
typeEleLi.appendChild(typeEleInput);
const typeEleText = document.createTextNode(" " + element.name);
typeEleLi.appendChild(typeEleText);
@@ -160,35 +170,11 @@ SysTrayX.Accounts = {
treeBase.appendChild(typeLi);
// Restore saved selection
function setAccounts(result) {
const treeBase = document.getElementById("accountsTree");
const accounts = result.accounts || [];
for (let i = 0; i < accounts.length; ++i) {
const checkbox = treeBase.querySelector(
`input[name=${accounts[i].id}]`
);
if (checkbox) {
checkbox.checked = accounts[i].checked;
}
}
}
function onError(error) {
console.log(`GetAccounts Error: ${error}`);
}
/*
const getAccounts = browser.storage.sync.get("accounts");
getAccounts.then(setAccounts, onError);
*/
let checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Setup checkbox control
let checkboxes = treeBase.querySelectorAll('input[type="checkbox"]');
for (let x = 0; x < checkboxes.length; x++) {
checkboxes[x].addEventListener("change", function (e) {
console.debug("Change detect");
let parentNode = this.parentNode;
const cbDescendants = parentNode.querySelectorAll(

View File

@@ -176,6 +176,8 @@
</table>
</form>
<div id="filters" data-filters="undefined"></div>
<script src="js/options_mailform.js"></script>
</div>

View File

@@ -12,33 +12,38 @@ SysTrayX.SaveOptions = {
// Save accounts and filters
//
const treeBase = document.getElementById("accountsTree");
const inputs = treeBase.querySelectorAll("input");
let accounts = [];
let filters = [];
for (let i = 0; i < inputs.length; ++i) {
const account = JSON.parse(inputs[i].value);
const checked = inputs[i].checked;
accounts.push({ ...account, checked: checked });
const accounts = treeBase.querySelectorAll(
'input[type="checkbox"][name*="account"]'
);
if (checked) {
let inboxMailFolder = account.folders.find(
(obj) => obj.type === "inbox"
);
let checkedFolders = [];
accounts.forEach((account) => {
if (account.checked || account.indeterminate) {
// Find all selected folders
const folders = Array.from(
account.parentNode.querySelectorAll(
'input[type="checkbox"]:not([name^="account"]):not([name^="parent-"])'
)
).filter((folder) => folder.checked);
if (inboxMailFolder) {
filters.push({
unread: true,
folder: inboxMailFolder,
});
}
checkedFolders = checkedFolders.concat(folders);
}
}
// Store accounts
browser.storage.sync.set({
accounts: accounts,
});
let filters = [];
checkedFolders.forEach((folder) => {
const mailFolder = JSON.parse(folder.value);
filters.push({
unread: true,
folder: mailFolder,
});
});
// Store them in the options HTML
const filtersDiv = document.getElementById("filters");
filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
// Store query filters
browser.storage.sync.set({
filters: filters,
@@ -186,6 +191,15 @@ SysTrayX.RestoreOptions = {
SysTrayX.RestoreOptions.onIconError
);
//
// Restore filters
//
const getFilters = browser.storage.sync.get("filters");
getFilters.then(
SysTrayX.RestoreOptions.setFilters,
SysTrayX.RestoreOptions.onFiltersError
);
//
// Restore poll startup delay state
//
@@ -373,6 +387,79 @@ SysTrayX.RestoreOptions = {
console.log(`numberColor Error: ${error}`);
},
//
// Restore filters callbacks
//
setFilters: function (result) {
let filters = result.filters || undefined;
// No filters stored?
if (filters == undefined) {
// Create default filters
const treeBase = document.getElementById("accountsTree");
const accountsBoxes = treeBase.querySelectorAll(
'input[type="checkbox"][name*="account"]'
);
let accounts = [];
accountsBoxes.forEach((acoountbox) => {
const value = JSON.parse(acoountbox.value);
accounts.push({ folders: value.folders });
});
filters = [];
accounts.forEach((account) => {
const inbox = account.folders.filter(
(folder) => folder.type == "inbox"
);
if (inbox.length > 0) {
filters.push({
unread: true,
folder: inbox[0],
});
}
});
}
if (filters) {
const treeBase = document.getElementById("accountsTree");
filters.forEach((filter) => {
const folder = filter.folder;
const account = treeBase.querySelector(
`input[name=${folder.accountId}]`
);
const checkboxes = Array.from(
account.parentNode.querySelectorAll(
'input[type="checkbox"]:not([name^="account"]):not([name^="parent-"])'
)
);
checkboxes.forEach((checkbox) => {
const value = JSON.parse(checkbox.value);
if (value.path === folder.path) {
checkbox.checked = true;
const event = document.createEvent("HTMLEvents");
event.initEvent("change", false, true);
checkbox.dispatchEvent(event);
}
});
});
}
// Store them in the options HTML
const filtersDiv = document.getElementById("filters");
filtersDiv.setAttribute("data-filters", JSON.stringify(filters));
},
onFiltersError: function (error) {
console.log(`Filters Error: ${error}`);
},
//
// Restore poll startup delay state callbacks
//