This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
$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'])) : '';
|
||||
@@ -343,11 +344,14 @@ $sectionLinks = [
|
||||
>
|
||||
<span class="avatar-component-card__thumb">
|
||||
<img
|
||||
src="<?= htmlspecialchars((string)$choice['image'], ENT_QUOTES) ?>"
|
||||
src="<?= htmlspecialchars($avatarPlaceholder, 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>
|
||||
@@ -593,7 +597,10 @@ $sectionLinks = [
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.getAttribute('data-modal-open');
|
||||
const modal = document.getElementById(id);
|
||||
if (modal) modal.classList.add('open');
|
||||
if (modal) {
|
||||
modal.classList.add('open');
|
||||
document.dispatchEvent(new CustomEvent('pkt:modal-open', { detail: { id } }));
|
||||
}
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('[data-modal-close]').forEach(btn => {
|
||||
@@ -759,7 +766,10 @@ $sectionLinks = [
|
||||
<?php if ($editing): ?>
|
||||
(function(){
|
||||
const modal = document.getElementById('modalEvent');
|
||||
if (modal) { modal.classList.add('open'); }
|
||||
if (modal) {
|
||||
modal.classList.add('open');
|
||||
document.dispatchEvent(new CustomEvent('pkt:modal-open', { detail: { id: 'modalEvent' } }));
|
||||
}
|
||||
})();
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
@@ -788,17 +788,34 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
image.src = url;
|
||||
};
|
||||
|
||||
const updateAvatarOptionPreviews = (form) => {
|
||||
form.querySelectorAll('[data-avatar-option-thumb]').forEach((image) => {
|
||||
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 updateAvatarOptionPreviews = (form, activeField = null) => {
|
||||
const selector = activeField
|
||||
? `[data-avatar-component-panel="${activeField}"] [data-avatar-option-thumb]`
|
||||
: '[data-avatar-option-thumb]';
|
||||
|
||||
form.querySelectorAll(selector).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) return;
|
||||
|
||||
image.dataset.avatarLoaded = 'true';
|
||||
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]');
|
||||
@@ -824,8 +841,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!(seedField instanceof HTMLInputElement)) return;
|
||||
seedField.value = seed;
|
||||
picker.hidden = true;
|
||||
ensureAvatarBuilderLoaded(form);
|
||||
updateAvatarPreview(form);
|
||||
updateAvatarOptionPreviews(form);
|
||||
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
|
||||
});
|
||||
grid.appendChild(card);
|
||||
});
|
||||
@@ -834,16 +852,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);
|
||||
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
|
||||
});
|
||||
field.addEventListener('input', () => {
|
||||
ensureAvatarBuilderLoaded(form);
|
||||
updateAvatarPreview(form);
|
||||
updateAvatarOptionPreviews(form);
|
||||
updateAvatarOptionPreviews(form, getActiveAvatarField(form));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -856,6 +874,7 @@ 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) => {
|
||||
@@ -913,6 +932,13 @@ 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-nav-events]').forEach(link => {
|
||||
link.addEventListener('click', async () => {
|
||||
if (window.location.pathname === '/' && window.location.hash === '#events') {
|
||||
|
||||
Reference in New Issue
Block a user