lukas
/
timetracker
1
0
Fork 0
Code Issues 17 Pull Requests 4 Actions Packages Projects 1 Releases 20 Wiki Activity

Improve and cleanup ConditionalElementHandler

This commit is contained in:
Lukáš Kucharczyk 2023-11-14 21:09:43 +01:00
parent 410f20acea
commit d64ad125ff
2 changed files with 79 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
games/static/js/add_purchase.js
View File

@ -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();
};

59
games/static/js/utils.js
View File

@ -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) {
configs.forEach(([condition, targetElements, callbackfn1, callbackfn2]) => {
if (condition()) { if (condition()) {
targetElements.forEach((elementName) => { targetElements.forEach(elementName => {
let el = getEl(elementName); let el = getEl(elementName);
if (el === null) { if (el === null) {
console.error("Element ${elementName} doesn't exist."); console.error(`Element ${elementName} doesn't exist.`);
} else { } else {
callbackfn1(el); callbackfn1(el);
} }
}); });
} else { } else {
targetElements.forEach((elementName) => { targetElements.forEach(elementName => {
let el = getEl(elementName); let el = getEl(elementName);
if (el === null) { if (el === null) {
console.error("Element ${elementName} doesn't exist."); console.error(`Element ${elementName} doesn't exist.`);
} else { } else {
callbackfn2(el); 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 };