add automatic enabling and disabling of UI elements based on existence of elements

This commit is contained in:
buzz-lightsnack-2007 2024-03-29 20:27:18 +08:00
parent 94b01ea25b
commit c4e4f5a29b
2 changed files with 40 additions and 2 deletions

View file

@ -44,7 +44,8 @@
<legend data-text="filters"></legend>
<label data-text="settings_filters_description"></label>
<div class="field-row action-buttons">
<button data-action="filters,update" data-text="settings_filters_update"></button>
<button data-action="filters,update" data-text="settings_filters_update"
data-enable="filters"></button>
<button href="settings/filters" tab-height="607.5" tab-width="1080"
data-text="settings_filters_open"></button>
</div>
@ -66,7 +67,8 @@
<legend data-text="storage"></legend>
<label data-text="settings_storage_description"></label>
<div class="field-row action-buttons">
<button data-text="settings_storage_clear" data-action="storage,clear"></button>
<button data-text="settings_storage_clear" data-enable="sites"
data-action="storage,clear"></button>
</div>
</fieldset>
</section>

View file

@ -307,9 +307,45 @@ class windowman {
links();
}
/*
Update the interface based on the storage data changes.
*/
async function updates() {
// Import the module.
const secretariat = await import(
chrome.runtime.getURL("scripts/secretariat.js")
);
// Get the storage data.
let storage_data = await secretariat.read();
async function update_interface() {
let input_elements = document.querySelectorAll("[data-enable]");
if (input_elements) {
input_elements.forEach((input_element) => {
(async () => {
input_element.disabled =
(await secretariat.read(
input_element.getAttribute("data-enable"),
)) == null;
})();
});
}
}
// Update the input elements.
secretariat.observe((what) => {
update_interface();
});
update_interface();
}
storage();
functionality();
actions();
updates();
}
}