diff --git a/partials/landing/account/dashboard.php b/partials/landing/account/dashboard.php index 289b06d..e1d50be 100755 --- a/partials/landing/account/dashboard.php +++ b/partials/landing/account/dashboard.php @@ -2,7 +2,6 @@ $app = app(); $vm = \App\AccountPages::dashboard($app); extract($vm, EXTR_OVERWRITE); -$avatarPlaceholder = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22%3E%3Crect width=%2212%22 height=%2212%22 fill=%22%23f7efe6%22/%3E%3C/svg%3E'; $editing = isset($editEvent) && $editEvent !== null; $actionEvent = $editing ? 'event_update' : 'event_add'; $startVal = $editEvent ? date('Y-m-d\TH:i', strtotime((string)$editEvent['starts_at'])) : ''; @@ -325,15 +324,6 @@ $sectionLinks = [ -
$meta): ?>
@@ -353,14 +343,11 @@ $sectionLinks = [ > <?= htmlspecialchars((string)$choice['label'], ENT_QUOTES) ?> @@ -608,7 +595,6 @@ $sectionLinks = [ const modal = document.getElementById(id); if (modal) { modal.classList.add('open'); - document.dispatchEvent(new CustomEvent('pkt:modal-open', { detail: { id } })); } }); }); @@ -777,7 +763,6 @@ $sectionLinks = [ const modal = document.getElementById('modalEvent'); if (modal) { modal.classList.add('open'); - document.dispatchEvent(new CustomEvent('pkt:modal-open', { detail: { id: 'modalEvent' } })); } })(); diff --git a/public/assets/js/app.js b/public/assets/js/app.js index a9415f8..f12bce3 100755 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -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') {