projects/papa-kind-treff.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

yxcyxc
All checks were successful
Deploy / deploy (push) Successful in 50s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-28 00:17:12 +02:00
parent 6b1ee354c1
commit 3d7fa4d3a9
2 changed files with 11 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
public/assets/js/app.js
View File

@@ -788,114 +788,17 @@ document.addEventListener('DOMContentLoaded', () => {
image.src = url;
};
const getActiveAvatarField = (form) => {
const activeTab = form.querySelector('[data-avatar-component-tab].is-active');
return activeTab?.getAttribute('data-avatar-component-tab') || 'avatar_lorelei_eyes_variant';
};
const setAvatarLoaderState = (form, active, loaded = 0, total = 0, label = 'Varianten werden geladen', runId = '') => {
const loader = form.querySelector('[data-avatar-loader]');
const fill = form.querySelector('[data-avatar-loader-fill]');
const progress = form.querySelector('[data-avatar-loader-progress]');
const labelNode = form.querySelector('[data-avatar-loader-label]');
if (!loader || !fill || !progress || !labelNode) return;
if (!active) {
if (runId && form.dataset.avatarActiveLoadRun && form.dataset.avatarActiveLoadRun !== runId) {
return;
}
form.dataset.avatarActiveLoadRun = '';
loader.hidden = true;
fill.style.width = '0%';
progress.textContent = '0%';
labelNode.textContent = label;
return;
}
if (runId) {
form.dataset.avatarActiveLoadRun = runId;
}
const percent = total > 0 ? Math.max(0, Math.min(100, Math.round((loaded / total) * 100))) : 0;
loader.hidden = false;
fill.style.width = `${percent}%`;
progress.textContent = `${percent}%`;
labelNode.textContent = label;
};
const updateAvatarOptionPreviews = (form, activeField = null) => {
const selector = activeField
? `[data-avatar-component-panel="${activeField}"] [data-avatar-option-thumb]`
: '[data-avatar-option-thumb]';
const images = Array.from(form.querySelectorAll(selector));
if (!images.length) {
setAvatarLoaderState(form, false);
return;
}
let loaded = 0;
const label = activeField
? `Varianten fuer ${form.querySelector(`[data-avatar-component-tab="${activeField}"]`)?.textContent?.trim() || 'diesen Bereich'}`
: 'Varianten werden geladen';
const loadRunId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
setAvatarLoaderState(form, true, 0, images.length, label, loadRunId);
images.forEach((image) => {
const updateAvatarOptionPreviews = (form) => {
form.querySelectorAll('[data-avatar-option-thumb]').forEach((image) => {
const field = image.getAttribute('data-avatar-option-field') || '';
const value = image.getAttribute('data-avatar-option-value') || '';
const params = buildAvatarParams(form, { [field]: value });
if (!params) {
loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
return;
}
if (!params) return;
const src = `${avatarEndpoint}?${params.toString()}`;
image.dataset.avatarLoadRun = loadRunId;
if (image.dataset.avatarLoadedSrc === src) {
loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
if (loaded >= images.length) {
window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
}
return;
}
let finished = false;
const finalize = () => {
if (finished || image.dataset.avatarLoadRun !== loadRunId) return;
finished = true;
loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
if (loaded >= images.length) {
window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
}
};
const timeoutId = window.setTimeout(() => {
finalize();
}, 2500);
image.onload = () => {
window.clearTimeout(timeoutId);
image.dataset.avatarLoadedSrc = src;
finalize();
};
image.onerror = () => {
window.clearTimeout(timeoutId);
finalize();
};
image.src = src;
image.src = `${avatarEndpoint}?${params.toString()}`;
});
};
const ensureAvatarBuilderLoaded = (form) => {
if (form.dataset.avatarInitialized === 'true') return;
form.dataset.avatarInitialized = 'true';
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
};
const renderAvatarSeedChoices = (form, seeds) => {
const picker = form.querySelector('[data-avatar-seed-picker]');
const grid = form.querySelector('[data-avatar-seed-picker-grid]');
@@ -921,9 +824,8 @@ document.addEventListener('DOMContentLoaded', () => {
if (!(seedField instanceof HTMLInputElement)) return;
seedField.value = seed;
picker.hidden = true;
ensureAvatarBuilderLoaded(form);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
updateAvatarOptionPreviews(form);
});
grid.appendChild(card);
});
@@ -932,16 +834,16 @@ document.addEventListener('DOMContentLoaded', () => {
};
document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
updateAvatarPreview(form);
updateAvatarOptionPreviews(form);
form.querySelectorAll('[data-avatar-field]').forEach((field) => {
field.addEventListener('change', () => {
ensureAvatarBuilderLoaded(form);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
updateAvatarOptionPreviews(form);
});
field.addEventListener('input', () => {
ensureAvatarBuilderLoaded(form);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
updateAvatarOptionPreviews(form);
});
});
@@ -954,16 +856,12 @@ document.addEventListener('DOMContentLoaded', () => {
form.querySelectorAll('[data-avatar-component-panel]').forEach((panel) => {
panel.classList.toggle('is-active', panel.getAttribute('data-avatar-component-panel') === field);
});
updateAvatarOptionPreviews(form, field);
};
form.querySelectorAll('[data-avatar-component-tab]').forEach((button) => {
button.addEventListener('click', () => {
const field = button.getAttribute('data-avatar-component-tab');
if (field) {
ensureAvatarBuilderLoaded(form);
setActiveComponentPanel(field);
}
if (field) setActiveComponentPanel(field);
});
});
@@ -1015,21 +913,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
document.addEventListener('pkt:modal-open', (event) => {
if (event.detail?.id !== 'modalAvatar') return;
const form = document.querySelector('#modalAvatar [data-avatar-builder]');
if (!form) return;
ensureAvatarBuilderLoaded(form);
});
document.querySelectorAll('[data-modal-open="modalAvatar"]').forEach((button) => {
button.addEventListener('click', () => {
const form = document.querySelector('#modalAvatar [data-avatar-builder]');
if (!form) return;
window.setTimeout(() => ensureAvatarBuilderLoaded(form), 20);
});
});
document.querySelectorAll('[data-nav-events]').forEach(link => {
link.addEventListener('click', async () => {
if (window.location.pathname === '/' && window.location.hash === '#events') {