95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
function tabs() {
|
|
for (const elm of document.querySelectorAll(".tabs")) {
|
|
let count = 0;
|
|
let selected = 0;
|
|
for (const child of elm.children) {
|
|
if (child.tagName == "BUTTON") {
|
|
count++;
|
|
if (child.classList.contains("selected")) {
|
|
selected++;
|
|
}
|
|
if (!child.getAttribute("data-armed")) {
|
|
child.addEventListener("click", () => {
|
|
if (!child.classList.contains("selected")) {
|
|
for (const elm of child.parentElement.children) {
|
|
elm.classList.remove("selected");
|
|
}
|
|
child.classList.add("selected");
|
|
document.querySelector(`.tabs .content[data-tab="${
|
|
child.getAttribute("data-tab")
|
|
}"]`)?.classList.add("selected");
|
|
}
|
|
});
|
|
child.setAttribute("data-armed", "true")
|
|
}
|
|
}
|
|
}
|
|
|
|
if (selected > 1 || selected == 0) {
|
|
for (const child of elm.children) {
|
|
child.classList.remove("selected");
|
|
}
|
|
for (const child of elm.children) {
|
|
if (child.tagName == "BUTTON") {
|
|
child.classList.add("selected");
|
|
document.querySelector(`.tabs .content[data-tab="${
|
|
child.getAttribute("data-tab")
|
|
}"]`)?.classList.add("selected");
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
function load() {
|
|
for (const elm of document.querySelectorAll("form > button")) {
|
|
elm.addEventListener('click', (e) => {
|
|
e.target.parentElement.classList.add("submitted");
|
|
});
|
|
}
|
|
for (const elm of document.querySelectorAll("button.icon")) {
|
|
elm.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
const input = document.querySelectorAll('form .file-upload input[type="file"]')[0];
|
|
if (input) {
|
|
input.click();
|
|
input.addEventListener('change', (e) => {
|
|
const file = input.files[0];
|
|
if (!file) return;
|
|
elm.setAttribute("disabled", "true");
|
|
|
|
const spanToReplace = document.querySelector('.file-upload .icon span');
|
|
const imgToReplace = document.querySelector('.file-upload .icon img');
|
|
if (!imgToReplace || !spanToReplace) return;
|
|
|
|
if (imgToReplace.getAttribute("replace")) {
|
|
const fileReader = new FileReader();
|
|
fileReader.onloadend = () => {
|
|
imgToReplace.setAttribute("src", fileReader.result)
|
|
elm.classList.add("adapt");
|
|
}
|
|
fileReader.readAsDataURL(file)
|
|
}
|
|
|
|
if (spanToReplace.getAttribute("replace")) {
|
|
spanToReplace.innerHTML = spanToReplace.getAttribute("replace")
|
|
}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
tabs();
|
|
}
|
|
window.onload = load;
|
|
htmx.on('htmx:afterSwap', load);
|
|
htmx.on('htmx:beforeSwap', (env) => {
|
|
if (env.detail.xhr.status === 401) {
|
|
window.location = "/login"
|
|
} else
|
|
// 309 is the code I selected for html to htmlfull change
|
|
if (env.detail.xhr.status === 309) {
|
|
env.detail.target = htmx.find(".app")
|
|
}
|
|
});
|