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

Adsasd
All checks were successful
Deploy / deploy (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-07-28 22:30:32 +02:00
parent aa86001760
commit 0e73147886
9 changed files with 853 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -729,6 +729,7 @@ document.addEventListener('DOMContentLoaded', () => {
const avatarStyleConfigs = {
lorelei: {
fields: ['eyesVariant', 'eyebrowsVariant', 'mouthVariant', 'glassesVariant', 'hairVariant', 'beardVariant', 'earringsVariant'],
colorFields: ['earringsColor', 'eyebrowsColor', 'eyesColor', 'frecklesColor', 'glassesColor', 'hairColor', 'hairAccessoriesColor', 'mouthColor', 'noseColor', 'skinColor', 'backgroundColor'],
paramMap: {
eyesVariant: 'eyesVariant',
eyebrowsVariant: 'eyebrowsVariant',
@@ -747,6 +748,29 @@ document.addEventListener('DOMContentLoaded', () => {
hairVariant: 'hairProbability',
},
},
croodles: {
fields: ['headVariant', 'eyesVariant', 'noseVariant', 'mouthVariant', 'topVariant', 'beardVariant', 'mustacheVariant'],
colorFields: ['baseColor', 'eyepatchColor', 'glassesColor', 'topColor', 'backgroundColor'],
paramMap: {
headVariant: 'headVariant',
eyesVariant: 'eyesVariant',
noseVariant: 'noseVariant',
mouthVariant: 'mouthVariant',
topVariant: 'topVariant',
beardVariant: 'beardVariant',
mustacheVariant: 'mustacheVariant',
},
optionalProbabilityMap: {
headVariant: 'headProbability',
eyesVariant: 'eyesProbability',
noseVariant: 'noseProbability',
mouthVariant: 'mouthProbability',
topVariant: 'topProbability',
beardVariant: 'beardProbability',
mustacheVariant: 'mustacheProbability',
},
alwaysProbabilityMap: {},
},
};
const getCurrentAvatarStyle = (form) => {
@@ -769,6 +793,20 @@ document.addEventListener('DOMContentLoaded', () => {
return input ? input.value : '';
};
const readAvatarColorValue = (form, style, field) => {
const panel = getAvatarStylePanel(form, style);
if (!panel) return '';
const input = panel.querySelector(`[data-avatar-color-input="${field}"]`);
return input ? input.value : '';
};
const readAvatarColorMetaValue = (form, style, field, type) => {
const panel = getAvatarStylePanel(form, style);
if (!panel) return '';
const input = panel.querySelector(`[data-avatar-color-meta="${field}"][data-avatar-color-meta-type="${type}"]`);
return input ? input.value : '';
};
const getAvatarStyleConfig = (style) => {
if (avatarStyleConfigs[style]) return avatarStyleConfigs[style];
return avatarStyleConfigs.lorelei;
@@ -801,6 +839,27 @@ document.addEventListener('DOMContentLoaded', () => {
if (value && param) params.set(param, value);
});
(styleConfig.colorFields || []).forEach((field) => {
const value = Object.prototype.hasOwnProperty.call(overrides, field)
? overrides[field]
: readAvatarColorValue(form, style, field);
if (value) {
params.set(field, value);
const fill = Object.prototype.hasOwnProperty.call(overrides, `${field}Fill`)
? overrides[`${field}Fill`]
: readAvatarColorMetaValue(form, style, field, 'fill');
const fillStops = Object.prototype.hasOwnProperty.call(overrides, `${field}FillStops`)
? overrides[`${field}FillStops`]
: readAvatarColorMetaValue(form, style, field, 'fillStops');
const angle = Object.prototype.hasOwnProperty.call(overrides, `${field}Angle`)
? overrides[`${field}Angle`]
: readAvatarColorMetaValue(form, style, field, 'angle');
if (fill) params.set(`${field}Fill`, fill);
if (fillStops) params.set(`${field}FillStops`, fillStops);
if (angle) params.set(`${field}Angle`, angle);
}
});
return params;
};
@@ -871,6 +930,72 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
form.querySelectorAll('[data-avatar-color-picker]').forEach((picker) => {
const syncColor = () => {
const style = picker.getAttribute('data-avatar-style') || getCurrentAvatarStyle(form);
const field = picker.getAttribute('data-avatar-color-picker') || '';
const panel = getAvatarStylePanel(form, style);
if (!panel || !field) return;
const hidden = panel.querySelector(`[data-avatar-color-input="${field}"]`);
const label = panel.querySelector(`[data-avatar-color-label="${style}:${field}"]`);
if (hidden) {
hidden.value = picker.value;
}
if (label) {
label.textContent = picker.value;
}
ensureAvatarBuilderLoaded(form, style);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, style, getActiveAvatarField(form, style));
};
picker.addEventListener('input', syncColor);
picker.addEventListener('change', syncColor);
});
form.querySelectorAll('[data-avatar-color-reset]').forEach((button) => {
button.addEventListener('click', () => {
const style = button.getAttribute('data-avatar-style') || getCurrentAvatarStyle(form);
const field = button.getAttribute('data-avatar-color-reset') || '';
const panel = getAvatarStylePanel(form, style);
if (!panel || !field) return;
const hidden = panel.querySelector(`[data-avatar-color-input="${field}"]`);
const picker = panel.querySelector(`[data-avatar-color-picker="${field}"]`);
const label = panel.querySelector(`[data-avatar-color-label="${style}:${field}"]`);
const fill = panel.querySelector(`[data-avatar-color-meta="${field}"][data-avatar-color-meta-type="fill"]`);
const fillStops = panel.querySelector(`[data-avatar-color-meta="${field}"][data-avatar-color-meta-type="fillStops"]`);
const angle = panel.querySelector(`[data-avatar-color-meta="${field}"][data-avatar-color-meta-type="angle"]`);
const defaultValue = picker?.getAttribute('data-avatar-color-default') || '#c4a484';
if (hidden) {
hidden.value = '';
}
if (picker) {
picker.value = defaultValue;
}
if (label) {
label.textContent = 'DiceBear-Standard';
}
if (fill) fill.value = '';
if (fillStops) fillStops.value = '';
if (angle) angle.value = '';
ensureAvatarBuilderLoaded(form, style);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, style, getActiveAvatarField(form, style));
});
});
form.querySelectorAll('[data-avatar-color-meta]').forEach((input) => {
const syncMeta = () => {
const style = input.getAttribute('data-avatar-style') || getCurrentAvatarStyle(form);
ensureAvatarBuilderLoaded(form, style);
updateAvatarPreview(form);
updateAvatarOptionPreviews(form, style, getActiveAvatarField(form, style));
};
input.addEventListener('input', syncMeta);
input.addEventListener('change', syncMeta);
});
const setActiveComponentPanel = (style, field) => {
const panel = getAvatarStylePanel(form, style);
if (!panel) return;
@@ -893,6 +1018,9 @@ document.addEventListener('DOMContentLoaded', () => {
panel.querySelectorAll('[data-avatar-field]').forEach((input) => {
input.disabled = !active;
});
panel.querySelectorAll('[data-avatar-color-input], [data-avatar-color-picker], [data-avatar-color-reset]').forEach((input) => {
input.disabled = !active;
});
});
ensureAvatarBuilderLoaded(form, style);
setActiveComponentPanel(style, getActiveAvatarField(form, style));