avoid repeatedly saving the open state of a tab
This commit is contained in:
parent
4aaa9f6316
commit
78f04e04be
1 changed files with 49 additions and 13 deletions
|
@ -6,6 +6,7 @@ Collapsibles are also tabs.
|
|||
*/
|
||||
class Tabs {
|
||||
status = {};
|
||||
options = {};
|
||||
|
||||
/*
|
||||
Initialize the tabs.
|
||||
|
@ -13,6 +14,7 @@ class Tabs {
|
|||
@param {string} location The URL of the page.
|
||||
*/
|
||||
constructor(options = {}) {
|
||||
this.options = options;
|
||||
this.#get();
|
||||
this.#set();
|
||||
};
|
||||
|
@ -34,6 +36,12 @@ class Tabs {
|
|||
this[NAME][`elements`][`container`] = CONTAINER;
|
||||
this[NAME][`elements`][`tabs`] = {};
|
||||
|
||||
// Set the other options.
|
||||
(CONTAINER.getAttribute(`tabs-required`))
|
||||
? this[`options`] = nested.dictionary.set(this[`options`], [NAME, `required`], (([`true`, `false`].includes(CONTAINER.getAttribute(`tabs-required`))) ? Boolean(CONTAINER.getAttribute(`tabs-required`)) : CONTAINER.getAttribute(`tabs-required`)))
|
||||
: false;
|
||||
|
||||
|
||||
(CONTAINER.querySelector(`:scope > li`))
|
||||
? CONTAINER.querySelectorAll(`:scope > li`).forEach((TAB, INDEX) => {
|
||||
let ID = (TAB.getAttribute(`id`))
|
||||
|
@ -59,7 +67,9 @@ class Tabs {
|
|||
: false;
|
||||
|
||||
// Delete the attribute.
|
||||
CONTAINER.removeAttribute("tabs-group");
|
||||
[`group`, `required`].forEach((ATTRIBUTE) => {
|
||||
CONTAINER.removeAttribute(`tabs-`.concat(ATTRIBUTE));
|
||||
});
|
||||
}
|
||||
}))
|
||||
: false;
|
||||
|
@ -71,12 +81,16 @@ class Tabs {
|
|||
#set() {
|
||||
(Object.keys(this).length > 1)
|
||||
? (Object.keys(this).forEach((NAME) => {
|
||||
if (NAME != `status`) {
|
||||
if (![`status`, `options`].includes(NAME)) {
|
||||
// Add the events to each tab.
|
||||
(Object.keys(this[NAME][`elements`][`tabs`]).length)
|
||||
? (Object.keys(this[NAME][`elements`][`tabs`]).forEach((ID) => {
|
||||
this[NAME][`elements`][`tabs`][ID][`header`].addEventListener(`click`, () => {
|
||||
this.open(NAME, ID);
|
||||
((this[`status`][`read/write`]) >= 0)
|
||||
? (this[NAME][`elements`][`tabs`][ID][`container`].classList.contains(`active`) || this[`options`][NAME][`required`])
|
||||
? this.open(NAME, ID)
|
||||
: this.close(NAME)
|
||||
: false;
|
||||
});
|
||||
}))
|
||||
: false;
|
||||
|
@ -85,7 +99,7 @@ class Tabs {
|
|||
(global.read([`view`, `tabs`, NAME, `selected`])).then((SELECTED) => {
|
||||
if (SELECTED != null) {
|
||||
// Wait until page load is complete.
|
||||
this.open(NAME, SELECTED, {"don't save": true, "automatic": true});
|
||||
this.open(NAME, SELECTED, {"don't save": true});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
@ -105,19 +119,41 @@ class Tabs {
|
|||
if ((name && ID) && Object.keys(this).includes(name)) {
|
||||
// Update the variable.
|
||||
this[name][`selected`] = ID;
|
||||
if (!(((typeof options).includes(`obj`) && options) ? options[`don't save`] : false)) {
|
||||
this[`status`][`read/write`] = -1;
|
||||
this[`status`][`last`] = await global.write([`view`, `tabs`, name, `selected`], ID, 1, {"silent": true});
|
||||
this[`status`][`read/write`] = 0;
|
||||
};
|
||||
|
||||
(((typeof options).includes(`obj`) && options) ? options[`don't save`] : false)
|
||||
? false
|
||||
: this[`status`][`last`] = await global.write([`view`, `tabs`, name, `selected`], ID, 1, {"silent": true});
|
||||
// Select the tab.
|
||||
((nested.dictionary.get(this, [name, `elements`, `tabs`, ID, `header`]))
|
||||
? ((this[name][`elements`][`tabs`][ID][`container`].classList.contains(`active`)) ? false : this[name][`elements`][`tabs`][ID][`header`].click())
|
||||
: false);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
De-select any tab.
|
||||
|
||||
@param {string} name The name of the tab group.
|
||||
@param {object} options The options to be used.
|
||||
*/
|
||||
async close (name, options) {
|
||||
let ID = this[name][`selected`];
|
||||
if ((name && ID) && Object.keys(this).includes(name)) {
|
||||
// Update the variable.
|
||||
this[name][`selected`] = null;
|
||||
if (!(((typeof options).includes(`obj`) && options) ? options[`don't save`] : false)) {
|
||||
this[`status`][`read/write`] = -1;
|
||||
this[`status`][`last`] = await global.write([`view`, `tabs`, name, `selected`], null, 1, {"silent": true});
|
||||
this[`status`][`read/write`] = 0;
|
||||
};
|
||||
|
||||
// Select the tab.
|
||||
(((typeof options).includes(`obj`) && options) ? options[`automatic`] : false)
|
||||
? ((nested.dictionary.get(this, [name, `elements`, `tabs`, ID, `header`]))
|
||||
? this[name][`elements`][`tabs`][ID][`header`].click()
|
||||
: false)
|
||||
: false;
|
||||
((nested.dictionary.get(this, [name, `elements`, `tabs`, ID, `header`]))
|
||||
? ((this[name][`elements`][`tabs`][ID][`container`].classList.contains(`active`)) ? this[name][`elements`][`tabs`][ID][`header`].click() : false)
|
||||
: false);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue