Improve and cleanup ConditionalElementHandler
This commit is contained in:
parent
410f20acea
commit
d64ad125ff
|
@ -1,4 +1,9 @@
|
||||||
import { syncSelectInputUntilChanged, getEl, conditionalElementHandler } from "./utils.js";
|
import {
|
||||||
|
syncSelectInputUntilChanged,
|
||||||
|
getEl,
|
||||||
|
disableElementsWhenTrue,
|
||||||
|
disableElementsWhenFalse,
|
||||||
|
} from "./utils.js";
|
||||||
|
|
||||||
let syncData = [
|
let syncData = [
|
||||||
{
|
{
|
||||||
|
@ -11,21 +16,15 @@ let syncData = [
|
||||||
|
|
||||||
syncSelectInputUntilChanged(syncData, "form");
|
syncSelectInputUntilChanged(syncData, "form");
|
||||||
|
|
||||||
|
function setupElementHandlers() {
|
||||||
let myConfig = [
|
disableElementsWhenTrue("#id_type", "game", [
|
||||||
() => {
|
"#id_name",
|
||||||
return getEl("#id_type").value == "game";
|
"#id_related_purchase",
|
||||||
},
|
]);
|
||||||
["#id_name", "#id_related_purchase"],
|
disableElementsWhenFalse("#id_type", "game", ["#id_date_finished"]);
|
||||||
(el) => {
|
|
||||||
el.disabled = "disabled";
|
|
||||||
},
|
|
||||||
(el) => {
|
|
||||||
el.disabled = "";
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
document.DOMContentLoaded = conditionalElementHandler(...myConfig)
|
|
||||||
getEl("#id_type").onchange = () => {
|
|
||||||
conditionalElementHandler(...myConfig)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", setupElementHandlers);
|
||||||
|
getEl("#id_type").onchange = () => {
|
||||||
|
setupElementHandlers();
|
||||||
|
};
|
||||||
|
|
|
@ -99,37 +99,72 @@ function getEl(selector) {
|
||||||
return document.getElementsByClassName(selector)
|
return document.getElementsByClassName(selector)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
return document.getElementsByName(selector)
|
return document.getElementsByTagName(selector)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description Does something to elements when something happens.
|
* @description Applies different behaviors to elements based on multiple conditional configurations.
|
||||||
* @param {() => boolean} condition The condition that is being tested.
|
* Each configuration is an array containing a condition function, an array of target element selectors,
|
||||||
* @param {string[]} targetElements
|
* and two callback functions for handling matched and unmatched conditions.
|
||||||
* @param {(elementName: HTMLElement) => void} callbackfn1 Called when the condition matches.
|
* @param {...Array} configs Each configuration is an array of the form:
|
||||||
* @param {(elementName: HTMLElement) => void} callbackfn2 Called when the condition doesn't match.
|
* - 0: {function(): boolean} condition - Function that returns true or false based on a condition.
|
||||||
|
* - 1: {string[]} targetElements - Array of CSS selectors for target elements.
|
||||||
|
* - 2: {function(HTMLElement): void} callbackfn1 - Function to execute when condition is true.
|
||||||
|
* - 3: {function(HTMLElement): void} callbackfn2 - Function to execute when condition is false.
|
||||||
*/
|
*/
|
||||||
function conditionalElementHandler(condition, targetElements, callbackfn1, callbackfn2) {
|
function conditionalElementHandler(...configs) {
|
||||||
if (condition()) {
|
configs.forEach(([condition, targetElements, callbackfn1, callbackfn2]) => {
|
||||||
targetElements.forEach((elementName) => {
|
if (condition()) {
|
||||||
let el = getEl(elementName);
|
targetElements.forEach(elementName => {
|
||||||
if (el === null) {
|
let el = getEl(elementName);
|
||||||
console.error("Element ${elementName} doesn't exist.");
|
if (el === null) {
|
||||||
} else {
|
console.error(`Element ${elementName} doesn't exist.`);
|
||||||
callbackfn1(el);
|
} else {
|
||||||
}
|
callbackfn1(el);
|
||||||
});
|
}
|
||||||
} else {
|
});
|
||||||
targetElements.forEach((elementName) => {
|
} else {
|
||||||
let el = getEl(elementName);
|
targetElements.forEach(elementName => {
|
||||||
if (el === null) {
|
let el = getEl(elementName);
|
||||||
console.error("Element ${elementName} doesn't exist.");
|
if (el === null) {
|
||||||
} else {
|
console.error(`Element ${elementName} doesn't exist.`);
|
||||||
callbackfn2(el);
|
} else {
|
||||||
}
|
callbackfn2(el);
|
||||||
});
|
}
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export { toISOUTCString, syncSelectInputUntilChanged, getEl, conditionalElementHandler };
|
function disableElementsWhenFalse(targetSelect, targetValue, elementList) {
|
||||||
|
return conditionalElementHandler([
|
||||||
|
() => {
|
||||||
|
return getEl(targetSelect).value != targetValue;
|
||||||
|
},
|
||||||
|
elementList,
|
||||||
|
(el) => {
|
||||||
|
el.disabled = "disabled";
|
||||||
|
},
|
||||||
|
(el) => {
|
||||||
|
el.disabled = "";
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
|
||||||
|
return conditionalElementHandler([
|
||||||
|
() => {
|
||||||
|
return getEl(targetSelect).value == targetValue;
|
||||||
|
},
|
||||||
|
elementList,
|
||||||
|
(el) => {
|
||||||
|
el.disabled = "disabled";
|
||||||
|
},
|
||||||
|
(el) => {
|
||||||
|
el.disabled = "";
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { toISOUTCString, syncSelectInputUntilChanged, getEl, conditionalElementHandler, disableElementsWhenFalse, disableElementsWhenTrue, getValueFromProperty };
|
||||||
|
|
Loading…
Reference in New Issue