69 lines
2.6 KiB
JavaScript
69 lines
2.6 KiB
JavaScript
|
const dialogContainerId = "#dialog-container"
|
||
|
|
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
// 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();
|
||
|
|
const 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="";
|
||
|
|
}
|