fix: gradient/effect/audio palette pickers not showing items
Some checks failed
Lint & Test / test (push) Failing after 33s
Some checks failed
Lint & Test / test (push) Failing after 33s
Populate <select> <option> elements from gradient entities before creating IconSelect — the trigger display needs matching options to sync correctly. Add _syncSelectOptions helper used by all three palette pickers (gradient, effect, audio).
This commit is contained in:
@@ -192,7 +192,7 @@ export function onCSSTypeChange() {
|
|||||||
_ensureAudioPaletteIconSelect();
|
_ensureAudioPaletteIconSelect();
|
||||||
onAudioVizChange();
|
onAudioVizChange();
|
||||||
}
|
}
|
||||||
if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); _renderCustomPresetList(); }
|
if (type === 'gradient') { _ensureGradientPresetIconSelect(); _ensureGradientEasingIconSelect(); }
|
||||||
if (type === 'notification') {
|
if (type === 'notification') {
|
||||||
ensureNotificationEffectIconSelect();
|
ensureNotificationEffectIconSelect();
|
||||||
ensureNotificationFilterModeIconSelect();
|
ensureNotificationFilterModeIconSelect();
|
||||||
@@ -399,6 +399,7 @@ function _ensureEffectPaletteIconSelect() {
|
|||||||
const sel = document.getElementById('css-editor-effect-palette') as HTMLSelectElement | null;
|
const sel = document.getElementById('css-editor-effect-palette') as HTMLSelectElement | null;
|
||||||
if (!sel) return;
|
if (!sel) return;
|
||||||
const items = _buildGradientEntityItems();
|
const items = _buildGradientEntityItems();
|
||||||
|
_syncSelectOptions(sel, items);
|
||||||
if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
|
if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
|
||||||
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||||
}
|
}
|
||||||
@@ -433,6 +434,7 @@ function _ensureAudioPaletteIconSelect() {
|
|||||||
const sel = document.getElementById('css-editor-audio-palette') as HTMLSelectElement | null;
|
const sel = document.getElementById('css-editor-audio-palette') as HTMLSelectElement | null;
|
||||||
if (!sel) return;
|
if (!sel) return;
|
||||||
const items = _buildGradientEntityItems();
|
const items = _buildGradientEntityItems();
|
||||||
|
_syncSelectOptions(sel, items);
|
||||||
if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
|
if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
|
||||||
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
|
||||||
}
|
}
|
||||||
@@ -456,10 +458,22 @@ function _buildGradientEntityItems() {
|
|||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Sync <option> elements in a <select> from items array. */
|
||||||
|
function _syncSelectOptions(sel: HTMLSelectElement, items: Array<{ value: string; label: string }>) {
|
||||||
|
sel.innerHTML = '';
|
||||||
|
for (const item of items) {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = item.value;
|
||||||
|
opt.textContent = item.label;
|
||||||
|
sel.appendChild(opt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function _ensureGradientPresetIconSelect() {
|
function _ensureGradientPresetIconSelect() {
|
||||||
const sel = document.getElementById('css-editor-gradient-preset') as HTMLSelectElement | null;
|
const sel = document.getElementById('css-editor-gradient-preset') as HTMLSelectElement | null;
|
||||||
if (!sel) return;
|
if (!sel) return;
|
||||||
const items = _buildGradientEntityItems();
|
const items = _buildGradientEntityItems();
|
||||||
|
_syncSelectOptions(sel, items);
|
||||||
if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
|
if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
|
||||||
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user