85 lines
3.3 KiB
JavaScript
85 lines
3.3 KiB
JavaScript
const dialogContainerId = "#dialog-container"
|
|
|
|
window.addEventListener('load', () => {
|
|
document.querySelectorAll(".dropdown").forEach(el => {
|
|
const action = el.querySelector(".dropdown-action");
|
|
const content = el.querySelector(".dropdown-content");
|
|
|
|
action.addEventListener('click', () => {
|
|
content.classList.toggle('selected');
|
|
content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
|
|
})
|
|
})
|
|
|
|
// configure radio button groups
|
|
document.querySelectorAll("section.radio-group").forEach(el => {
|
|
const submittedInput = el.querySelector("input[type=hidden]");
|
|
el.querySelector(`input[value="${submittedInput.value}"]`).checked = true;
|
|
|
|
|
|
el.querySelectorAll("input[type=radio]").forEach(rb => {
|
|
if(rb?.checked) {
|
|
submittedInput.value = rb.value;
|
|
}
|
|
rb.addEventListener('click', () => {
|
|
submittedInput.value = rb.value;
|
|
})
|
|
})
|
|
})
|
|
// configure dialog buttons
|
|
document.querySelectorAll("button[data-type=dialog]").forEach(btn => {
|
|
const selector = btn.dataset.trigger;
|
|
btn.addEventListener('click', async () => {
|
|
let response = await fetch(btn.dataset.url);
|
|
if(response.ok) {
|
|
response = await response.text();
|
|
let container = document.querySelector(dialogContainerId);
|
|
if(container == null) {
|
|
const node = document.createElement('div');
|
|
node.id = "dialog-container";
|
|
document.querySelector("body").appendChild(node);
|
|
container = document.querySelector(dialogContainerId);
|
|
}
|
|
container.innerHTML = response;
|
|
const dialogReference = document.querySelector(selector);
|
|
dialogReference?.showModal();
|
|
} else {
|
|
// todo display alert
|
|
console.log("no dialog found");
|
|
}
|
|
});
|
|
});
|
|
// configure section selector
|
|
document.querySelectorAll("select[data-type=section-selector]").forEach(select => {
|
|
const sectionPrefix = select.dataset.selectorPrefix;
|
|
const options = [...select.options].map(o => o.value);
|
|
|
|
for(let option of options) {
|
|
const querySelector = "div[data-section-id=" + sectionPrefix + "-" + option + "]";
|
|
const section = document.querySelector(querySelector);
|
|
if(option === select.value) {
|
|
section?.classList?.remove('hide');
|
|
} else {
|
|
section?.classList?.add('hide');
|
|
}
|
|
}
|
|
|
|
select.addEventListener("change", () => {
|
|
for(let option of options) {
|
|
const querySelector = "div[data-section-id=" + sectionPrefix + "-" + option + "]";
|
|
const section = document.querySelector(querySelector);
|
|
if(option === select.value) {
|
|
section?.classList?.remove('hide');
|
|
} else {
|
|
section?.classList?.add('hide');
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
function closeDialog(selector) {
|
|
document.querySelector(selector).close();
|
|
document.querySelector(dialogContainerId).innerHTML="";
|
|
}
|