open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix/simplify dom::collapsible

Browse Source 
now it observes the `open` attribute as the `click` was too fragile due to dependency on timing
This commit is contained in:
tophf 2022-03-02 02:48:43 +03:00
parent 2e31cae71e
commit bcc98d913b
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
js/dom.js
View File

@ -412,38 +412,34 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
const dom = {}; const dom = {};
(() => { prefs.ready.then(() => {
waitForSelector('details[data-pref]', {
const Collapsible = { recur(elems) {
bindEvents(elems) {
const prefKeys = [];
for (const el of elems) { for (const el of elems) {
prefKeys.push(el.dataset.pref); prefs.subscribe(el.dataset.pref, updateOnPrefChange, {runNow: true});
($('h2', el) || el).on('click', Collapsible.saveOnClick); new MutationObserver(saveOnChange)
.observe(el, {attributes: true, attributeFilter: ['open']});
} }
prefs.subscribe(prefKeys, Collapsible.updateOnPrefChange, {runNow: true});
}, },
canSave(el) { });
function canSave(el) {
return !el.matches('.compact-layout .ignore-pref-if-compact'); return !el.matches('.compact-layout .ignore-pref-if-compact');
}, }
async saveOnClick(event) { /** @param {MutationRecord[]} _ */
if (event.target.closest('.intercepts-click')) { function saveOnChange([{target: el}]) {
event.preventDefault(); if (canSave(el)) {
} else {
const el = event.target.closest('details');
await new Promise(setTimeout);
if (Collapsible.canSave(el)) {
prefs.set(el.dataset.pref, el.open); prefs.set(el.dataset.pref, el.open);
} }
} }
}, function updateOnPrefChange(key, value) {
updateOnPrefChange(key, value) {
const el = $(`details[data-pref="${key}"]`); const el = $(`details[data-pref="${key}"]`);
if (el.open !== value && Collapsible.canSave(el)) { if (el.open !== value && canSave(el)) {
el.open = value; el.open = value;
} }
}, }
}; });
(() => {
const lazyScripts = [ const lazyScripts = [
'/js/dom-on-load', '/js/dom-on-load',
]; ];
@ -478,9 +474,6 @@ const dom = {};
})); }));
} }
} }
prefs.ready.then(() => {
waitForSelector('details[data-pref]', {recur: Collapsible.bindEvents});
});
window.requestIdleCallback(() => { window.requestIdleCallback(() => {
require(lazyScripts); require(lazyScripts);
}); });