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

ycyxc
All checks were successful
Deploy / deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-27 23:47:21 +02:00
parent eed4c13a01
commit 6b1ee354c1
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -793,7 +793,7 @@ document.addEventListener('DOMContentLoaded', () => {
return activeTab?.getAttribute('data-avatar-component-tab') || 'avatar_lorelei_eyes_variant'; return activeTab?.getAttribute('data-avatar-component-tab') || 'avatar_lorelei_eyes_variant';
}; };
const setAvatarLoaderState = (form, active, loaded = 0, total = 0, label = 'Varianten werden geladen') => { const setAvatarLoaderState = (form, active, loaded = 0, total = 0, label = 'Varianten werden geladen', runId = '') => {
const loader = form.querySelector('[data-avatar-loader]'); const loader = form.querySelector('[data-avatar-loader]');
const fill = form.querySelector('[data-avatar-loader-fill]'); const fill = form.querySelector('[data-avatar-loader-fill]');
const progress = form.querySelector('[data-avatar-loader-progress]'); const progress = form.querySelector('[data-avatar-loader-progress]');
@@ -801,6 +801,10 @@ document.addEventListener('DOMContentLoaded', () => {
if (!loader || !fill || !progress || !labelNode) return; if (!loader || !fill || !progress || !labelNode) return;
if (!active) { if (!active) {
if (runId && form.dataset.avatarActiveLoadRun && form.dataset.avatarActiveLoadRun !== runId) {
return;
}
form.dataset.avatarActiveLoadRun = '';
loader.hidden = true; loader.hidden = true;
fill.style.width = '0%'; fill.style.width = '0%';
progress.textContent = '0%'; progress.textContent = '0%';
@@ -808,6 +812,9 @@ document.addEventListener('DOMContentLoaded', () => {
return; return;
} }
if (runId) {
form.dataset.avatarActiveLoadRun = runId;
}
const percent = total > 0 ? Math.max(0, Math.min(100, Math.round((loaded / total) * 100))) : 0; const percent = total > 0 ? Math.max(0, Math.min(100, Math.round((loaded / total) * 100))) : 0;
loader.hidden = false; loader.hidden = false;
fill.style.width = `${percent}%`; fill.style.width = `${percent}%`;
@@ -830,8 +837,8 @@ document.addEventListener('DOMContentLoaded', () => {
const label = activeField const label = activeField
? `Varianten fuer ${form.querySelector(`[data-avatar-component-tab="${activeField}"]`)?.textContent?.trim() || 'diesen Bereich'}` ? `Varianten fuer ${form.querySelector(`[data-avatar-component-tab="${activeField}"]`)?.textContent?.trim() || 'diesen Bereich'}`
: 'Varianten werden geladen'; : 'Varianten werden geladen';
setAvatarLoaderState(form, true, 0, images.length, label);
const loadRunId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; const loadRunId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
setAvatarLoaderState(form, true, 0, images.length, label, loadRunId);
images.forEach((image) => { images.forEach((image) => {
const field = image.getAttribute('data-avatar-option-field') || ''; const field = image.getAttribute('data-avatar-option-field') || '';
@@ -839,7 +846,7 @@ document.addEventListener('DOMContentLoaded', () => {
const params = buildAvatarParams(form, { [field]: value }); const params = buildAvatarParams(form, { [field]: value });
if (!params) { if (!params) {
loaded += 1; loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label); setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
return; return;
} }
@@ -847,9 +854,9 @@ document.addEventListener('DOMContentLoaded', () => {
image.dataset.avatarLoadRun = loadRunId; image.dataset.avatarLoadRun = loadRunId;
if (image.dataset.avatarLoadedSrc === src) { if (image.dataset.avatarLoadedSrc === src) {
loaded += 1; loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label); setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
if (loaded >= images.length) { if (loaded >= images.length) {
window.setTimeout(() => setAvatarLoaderState(form, false), 180); window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
} }
return; return;
} }
@@ -859,9 +866,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (finished || image.dataset.avatarLoadRun !== loadRunId) return; if (finished || image.dataset.avatarLoadRun !== loadRunId) return;
finished = true; finished = true;
loaded += 1; loaded += 1;
setAvatarLoaderState(form, true, loaded, images.length, label); setAvatarLoaderState(form, true, loaded, images.length, label, loadRunId);
if (loaded >= images.length) { if (loaded >= images.length) {
window.setTimeout(() => setAvatarLoaderState(form, false), 180); window.setTimeout(() => setAvatarLoaderState(form, false, 0, 0, 'Varianten werden geladen', loadRunId), 180);
} }
}; };