Compare commits

..

No commits in common. "f0ac07dc6d4047d31fbe84e17c2aaa34765c39c8" and "600c0d284c48cc7edbb3ebb6a734440b1be5fa39" have entirely different histories.

5 changed files with 48 additions and 97 deletions

View File

@ -1,24 +1,24 @@
import { syncSelectInputUntilChanged } from "./utils.js"; import { syncSelectInputUntilChanged } from './utils.js';
let syncData = [ let syncData = [
{ {
source: "#id_game", "source": "#id_game",
source_value: "dataset.name", "source_value": "dataset.name",
target: "#id_name", "target": "#id_name",
target_value: "value", "target_value": "value"
}, },
{ {
source: "#id_game", "source": "#id_game",
source_value: "textContent", "source_value": "textContent",
target: "#id_sort_name", "target": "#id_sort_name",
target_value: "value", "target_value": "value"
}, },
{ {
source: "#id_game", "source": "#id_game",
source_value: "dataset.year", "source_value": "dataset.year",
target: "#id_year_released", "target": "#id_year_released",
target_value: "value", "target_value": "value"
}, },
]; ]
syncSelectInputUntilChanged(syncData, "form"); syncSelectInputUntilChanged(syncData, "form");

View File

@ -1,12 +1,12 @@
import { syncSelectInputUntilChanged } from "./utils.js"; import { syncSelectInputUntilChanged } from './utils.js'
let syncData = [ let syncData = [
{ {
source: "#id_name", "source": "#id_name",
source_value: "value", "source_value": "value",
target: "#id_sort_name", "target": "#id_sort_name",
target_value: "value", "target_value": "value"
}, }
]; ]
syncSelectInputUntilChanged(syncData, "form"); syncSelectInputUntilChanged(syncData, "form")

View File

@ -2,7 +2,7 @@ import {
syncSelectInputUntilChanged, syncSelectInputUntilChanged,
getEl, getEl,
disableElementsWhenTrue, disableElementsWhenTrue,
disableElementsWhenValueNotEqual, disableElementsWhenFalse,
} from "./utils.js"; } from "./utils.js";
let syncData = [ let syncData = [
@ -21,11 +21,7 @@ function setupElementHandlers() {
"#id_name", "#id_name",
"#id_related_purchase", "#id_related_purchase",
]); ]);
disableElementsWhenValueNotEqual( disableElementsWhenFalse("#id_type", "game", ["#id_date_finished"]);
"#id_type",
["game", "dlc"],
["#id_date_finished"]
);
} }
document.addEventListener("DOMContentLoaded", setupElementHandlers); document.addEventListener("DOMContentLoaded", setupElementHandlers);
@ -34,13 +30,13 @@ getEl("#id_type").onchange = () => {
setupElementHandlers(); setupElementHandlers();
}; };
document.body.addEventListener("htmx:beforeRequest", function (event) { document.body.addEventListener('htmx:beforeRequest', function(event) {
// Assuming 'Purchase1' is the element that triggers the HTMX request // Assuming 'Purchase1' is the element that triggers the HTMX request
if (event.target.id === "id_edition") { if (event.target.id === 'id_edition') {
var idEditionValue = document.getElementById("id_edition").value; var idEditionValue = document.getElementById('id_edition').value;
// Condition to check - replace this with your actual logic // Condition to check - replace this with your actual logic
if (idEditionValue != "") { if (idEditionValue != '') {
event.preventDefault(); // This cancels the HTMX request event.preventDefault(); // This cancels the HTMX request
} }
} }

View File

@ -7,14 +7,10 @@ for (let button of document.querySelectorAll("[data-target]")) {
button.addEventListener("click", (event) => { button.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
if (type == "now") { if (type == "now") {
targetElement.value = toISOUTCString(new Date()); targetElement.value = toISOUTCString(new Date);
} else if (type == "copy") { } else if (type == "copy") {
const oppositeName = const oppositeName = targetElement.name == "timestamp_start" ? "timestamp_end" : "timestamp_start";
targetElement.name == "timestamp_start" document.querySelector(`[name='${oppositeName}']`).value = targetElement.value;
? "timestamp_end"
: "timestamp_start";
document.querySelector(`[name='${oppositeName}']`).value =
targetElement.value;
} else if (type == "toggle") { } else if (type == "toggle") {
if (targetElement.type == "datetime-local") targetElement.type = "text"; if (targetElement.type == "datetime-local") targetElement.type = "text";
else targetElement.type = "datetime-local"; else targetElement.type = "datetime-local";

View File

@ -75,14 +75,7 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
* @param {string} property - The property to retrieve the value from. * @param {string} property - The property to retrieve the value from.
*/ */
function getValueFromProperty(sourceElement, property) { function getValueFromProperty(sourceElement, property) {
let source = let source = (sourceElement instanceof HTMLSelectElement) ? sourceElement.selectedOptions[0] : sourceElement
sourceElement instanceof HTMLSelectElement
? sourceElement.selectedOptions[0]
: sourceElement;
let source =
sourceElement instanceof HTMLSelectElement
? sourceElement.selectedOptions[0]
: sourceElement;
if (property.startsWith("dataset.")) { if (property.startsWith("dataset.")) {
let datasetKey = property.slice(8); // Remove 'dataset.' part let datasetKey = property.slice(8); // Remove 'dataset.' part
return source.dataset[datasetKey]; return source.dataset[datasetKey];
@ -100,11 +93,13 @@ function getValueFromProperty(sourceElement, property) {
*/ */
function getEl(selector) { function getEl(selector) {
if (selector.startsWith("#")) { if (selector.startsWith("#")) {
return document.getElementById(selector.slice(1)); return document.getElementById(selector.slice(1))
} else if (selector.startsWith(".")) { }
return document.getElementsByClassName(selector); else if (selector.startsWith(".")) {
} else { return document.getElementsByClassName(selector)
return document.getElementsByTagName(selector); }
else {
return document.getElementsByTagName(selector)
} }
} }
@ -121,7 +116,7 @@ function getEl(selector) {
function conditionalElementHandler(...configs) { function conditionalElementHandler(...configs) {
configs.forEach(([condition, targetElements, callbackfn1, callbackfn2]) => { 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.`);
@ -130,7 +125,7 @@ function conditionalElementHandler(...configs) {
} }
}); });
} 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.`);
@ -142,44 +137,16 @@ function conditionalElementHandler(...configs) {
}); });
} }
function disableElementsWhenValueNotEqual( function disableElementsWhenFalse(targetSelect, targetValue, elementList) {
targetSelect,
targetValue,
elementList
) {
return conditionalElementHandler([ return conditionalElementHandler([
() => { () => {
let target = getEl(targetSelect); return getEl(targetSelect).value != targetValue;
console.debug(
`${disableElementsWhenTrue.name}: triggered on ${target.id}`
);
console.debug(`
${disableElementsWhenTrue.name}: matching against value(s): ${targetValue}`);
if (targetValue instanceof Array) {
if (targetValue.every((value) => target.value != value)) {
console.debug(
`${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
);
return true;
}
} else {
console.debug(
`${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
);
return target.value != targetValue;
}
}, },
elementList, elementList,
(el) => { (el) => {
console.debug(
`${disableElementsWhenTrue.name}: evaluated true, disabling ${el.id}.`
);
el.disabled = "disabled"; el.disabled = "disabled";
}, },
(el) => { (el) => {
console.debug(
`${disableElementsWhenTrue.name}: evaluated false, NOT disabling ${el.id}.`
);
el.disabled = ""; el.disabled = "";
}, },
]); ]);
@ -200,12 +167,4 @@ function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
]); ]);
} }
export { export { toISOUTCString, syncSelectInputUntilChanged, getEl, conditionalElementHandler, disableElementsWhenFalse, disableElementsWhenTrue, getValueFromProperty };
toISOUTCString,
syncSelectInputUntilChanged,
getEl,
conditionalElementHandler,
disableElementsWhenFalse,
disableElementsWhenTrue,
getValueFromProperty,
};