Compare commits
No commits in common. "f0ac07dc6d4047d31fbe84e17c2aaa34765c39c8" and "600c0d284c48cc7edbb3ebb6a734440b1be5fa39" have entirely different histories.
f0ac07dc6d
...
600c0d284c
|
@ -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");
|
||||||
|
|
|
@ -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")
|
||||||
|
|
|
@ -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,14 +30,14 @@ 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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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,
|
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in New Issue