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

17
partials/landing/account/dashboard.php
View File

@@ -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 = [
</button>
<?php endforeach; ?>
</div>
<div class="avatar-loader" data-avatar-loader hidden>
<div class="avatar-loader__bar">
<span class="avatar-loader__fill" data-avatar-loader-fill style="width:0%"></span>
</div>
<div class="avatar-loader__meta">
<strong data-avatar-loader-label>Varianten werden geladen</strong>
<span class="muted small" data-avatar-loader-progress>0%</span>
</div>
</div>
<div class="avatar-component-panels">
<?php foreach (\App\Avatar\Lorelei::componentDefinitions() as $field => $meta): ?>
<section class="avatar-component-panel avatar-component-panel--<?= htmlspecialchars(str_replace(['avatar_lorelei_', '_variant'], '', (string)$field), ENT_QUOTES) ?> <?= $field === 'avatar_lorelei_eyes_variant' ? 'is-active' : '' ?>" data-avatar-component-panel="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>">
@@ -353,14 +343,11 @@ $sectionLinks = [
>
<span class="avatar-component-card__thumb">
<img
src="<?= htmlspecialchars($avatarPlaceholder, ENT_QUOTES) ?>"
src="<?= htmlspecialchars((string)$choice['image'], ENT_QUOTES) ?>"
alt="<?= htmlspecialchars((string)$choice['label'], ENT_QUOTES) ?>"
data-avatar-option-thumb
data-avatar-option-src="<?= htmlspecialchars((string)$choice['image'], ENT_QUOTES) ?>"
data-avatar-option-field="<?= htmlspecialchars((string)$field, ENT_QUOTES) ?>"
data-avatar-option-value="<?= htmlspecialchars((string)$choice['value'], ENT_QUOTES) ?>"
loading="lazy"
decoding="async"
>
</span>
<span class="avatar-component-card__label"><?= htmlspecialchars((string)$choice['label'], ENT_QUOTES) ?></span>
@@ -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' } }));
}
})();
<?php endif; ?>

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') {