forked from UKSOURCE/cms.lams
refactor(cms): replace custom icon comboboxes with standardized icon picker
Replace the legacy `cms-icon-combobox` implementation with a new, standardized `icon-picker` across multiple admin modules. This change simplifies the UI by using a Bootstrap input group with a dedicated "Pick Icon" button and a preview cell. Affected areas: - Policies block editor - Accreditation, Admissions, History, and Policies admin editor scripts - Admissions calculator options view This removes redundant icon list generation and manual dropdown management in favor of a centralized icon picker utility.
This commit is contained in:
Tống Thành Đạt
@@ -87,20 +87,23 @@
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold"><%= fieldConfig.noteIcon?.label || "Note icon" %></label>
|
||||
<div class="cms-icon-combobox" id="noteIconCombobox">
|
||||
<input type="hidden" name="noteIcon" id="noteIcon" value="<%= option.noteIcon %>" />
|
||||
<button type="button" class="cms-icon-dropdown-trigger" id="noteIconTrigger">
|
||||
<div class="cms-icon-dropdown-value">
|
||||
<div class="cms-icon-preview" id="noteIconPreview"></div>
|
||||
<div class="cms-icon-dropdown-text" id="noteIconText"></div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down cms-icon-dropdown-caret"></i>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text icon-preview-cell" style="min-width:38px"></span>
|
||||
<input
|
||||
type="text"
|
||||
name="noteIcon"
|
||||
id="noteIcon"
|
||||
class="form-control"
|
||||
value="<%= option.noteIcon %>"
|
||||
placeholder="Click to pick..."
|
||||
readonly
|
||||
style="cursor:pointer;background:#fff"
|
||||
data-icon-picker-value-mode="icon-name"
|
||||
data-icon-picker-preview-prefix="fa-solid"
|
||||
/>
|
||||
<button type="button" class="btn btn-outline-secondary" id="noteIconButton">
|
||||
<i class="fas fa-icons me-1"></i>Pick Icon
|
||||
</button>
|
||||
<div class="cms-icon-dropdown-panel d-none" id="noteIconPanel">
|
||||
<input type="text" class="form-control" id="noteIconSearch" placeholder="Search icon name" />
|
||||
<div class="cms-icon-options" id="noteIconOptions"></div>
|
||||
<div class="cms-icon-option-empty d-none" id="noteIconEmpty">No matching icons</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-meta-row">
|
||||
<div class="form-text"><%= fieldConfig.noteIcon?.helpText || "" %></div>
|
||||
@@ -136,19 +139,11 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const iconOptions = <%- JSON.stringify(iconOptions) %>;
|
||||
const existingOptionLabels = <%- JSON.stringify(existingOptionLabels || []) %>;
|
||||
const form = document.getElementById("calculatorOptionForm");
|
||||
const labelInput = document.getElementById("label");
|
||||
const hiddenInput = document.getElementById("noteIcon");
|
||||
const combobox = document.getElementById("noteIconCombobox");
|
||||
const trigger = document.getElementById("noteIconTrigger");
|
||||
const panel = document.getElementById("noteIconPanel");
|
||||
const preview = document.getElementById("noteIconPreview");
|
||||
const text = document.getElementById("noteIconText");
|
||||
const search = document.getElementById("noteIconSearch");
|
||||
const optionsWrap = document.getElementById("noteIconOptions");
|
||||
const empty = document.getElementById("noteIconEmpty");
|
||||
const noteIconInput = document.getElementById("noteIcon");
|
||||
const noteIconButton = document.getElementById("noteIconButton");
|
||||
|
||||
form.querySelectorAll("[maxlength]").forEach((input) => {
|
||||
const counter = form.querySelector(`[data-counter-for="${input.id}"]`);
|
||||
@@ -207,69 +202,160 @@
|
||||
this.value = numericValue > 0 ? String(Math.floor(numericValue)) : "1";
|
||||
});
|
||||
|
||||
function updateTrigger(value) {
|
||||
preview.innerHTML = value
|
||||
? `<i class="fa-solid ${escapeHtml(value)}"></i>`
|
||||
: '<span class="text-muted small">--</span>';
|
||||
text.innerHTML = value
|
||||
? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
|
||||
: '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
|
||||
}
|
||||
|
||||
function setOpen(isOpen) {
|
||||
combobox.classList.toggle("is-open", isOpen);
|
||||
panel.classList.toggle("d-none", !isOpen);
|
||||
if (isOpen) {
|
||||
search.focus();
|
||||
search.select();
|
||||
}
|
||||
}
|
||||
|
||||
function renderOptions(term) {
|
||||
const query = String(term || "").trim().toLowerCase();
|
||||
const filtered = iconOptions.filter((option) => option.toLowerCase().includes(query));
|
||||
optionsWrap.innerHTML = "";
|
||||
empty.classList.toggle("d-none", filtered.length > 0);
|
||||
|
||||
filtered.forEach((option) => {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className = `cms-icon-option ${hiddenInput.value === option ? "is-active" : ""}`;
|
||||
button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${hiddenInput.value === option ? '<i class="fas fa-check small"></i>' : ""}`;
|
||||
button.addEventListener("click", function () {
|
||||
hiddenInput.value = option;
|
||||
search.value = option;
|
||||
updateTrigger(option);
|
||||
renderOptions(option);
|
||||
setOpen(false);
|
||||
});
|
||||
optionsWrap.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
trigger.addEventListener("click", function () {
|
||||
const shouldOpen = panel.classList.contains("d-none");
|
||||
setOpen(shouldOpen);
|
||||
if (shouldOpen) {
|
||||
renderOptions(search.value || hiddenInput.value);
|
||||
}
|
||||
noteIconInput?.addEventListener("click", function () {
|
||||
openIconPickerForInput(noteIconInput);
|
||||
});
|
||||
|
||||
search.addEventListener("input", function () {
|
||||
renderOptions(search.value);
|
||||
noteIconButton?.addEventListener("click", function () {
|
||||
openIconPickerForInput(noteIconInput);
|
||||
});
|
||||
|
||||
combobox.addEventListener("focusout", function () {
|
||||
window.setTimeout(function () {
|
||||
if (!combobox.contains(document.activeElement)) {
|
||||
setOpen(false);
|
||||
syncIconPickerPreview(noteIconInput);
|
||||
|
||||
function openIconPickerForInput(input) {
|
||||
window.__cmsIconPickerActiveInput = input;
|
||||
patchIconPickerForIconNames();
|
||||
window.IconPicker?.open(input);
|
||||
}
|
||||
|
||||
function patchIconPickerForIconNames() {
|
||||
if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
|
||||
return;
|
||||
}
|
||||
|
||||
const originalPick = typeof window.IconPicker.pick === "function"
|
||||
? window.IconPicker.pick.bind(window.IconPicker)
|
||||
: null;
|
||||
|
||||
if (!originalPick) {
|
||||
return;
|
||||
}
|
||||
|
||||
const patchedPick = function (value) {
|
||||
originalPick(value);
|
||||
|
||||
const activeInput = window.__cmsIconPickerActiveInput;
|
||||
if (!activeInput) {
|
||||
return;
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
search.value = hiddenInput.value;
|
||||
updateTrigger(hiddenInput.value);
|
||||
renderOptions(hiddenInput.value);
|
||||
if (activeInput.dataset.iconPickerValueMode === "icon-name") {
|
||||
activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
|
||||
activeInput.value || value,
|
||||
) || determineIconPreviewPrefix(activeInput);
|
||||
activeInput.value = extractIconName(activeInput.value || value);
|
||||
syncIconPickerPreview(activeInput);
|
||||
activeInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
activeInput.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
window.__cmsIconPickerActiveInput = null;
|
||||
};
|
||||
|
||||
window.IconPicker.pick = patchedPick;
|
||||
window.IconPickerPick = patchedPick;
|
||||
window.IconPicker.__cmsIconNamePatched = true;
|
||||
}
|
||||
|
||||
function syncIconPickerPreview(input) {
|
||||
if (!input) return;
|
||||
|
||||
const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
|
||||
if (!previewCell) return;
|
||||
|
||||
const previewClass = resolveIconPreviewClass(input);
|
||||
previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
|
||||
|
||||
if (input.dataset.iconPickerValueMode === "icon-name") {
|
||||
loadIconStyleLookup().then(function () {
|
||||
const nextPrefix = determineIconPreviewPrefix(input);
|
||||
if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
|
||||
input.dataset.iconPickerPreviewPrefix = nextPrefix;
|
||||
const nextPreviewClass = resolveIconPreviewClass(input);
|
||||
previewCell.innerHTML = nextPreviewClass
|
||||
? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
|
||||
: "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function resolveIconPreviewClass(input) {
|
||||
const normalizedValue = String(input?.value || "").trim();
|
||||
if (!normalizedValue) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (input?.dataset.iconPickerValueMode === "icon-name") {
|
||||
const prefix = determineIconPreviewPrefix(input);
|
||||
return `${prefix} ${normalizedValue}`.trim();
|
||||
}
|
||||
|
||||
return normalizedValue;
|
||||
}
|
||||
|
||||
function extractIconName(value) {
|
||||
return String(value || "")
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.find(
|
||||
(token) =>
|
||||
/^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
|
||||
) || "";
|
||||
}
|
||||
|
||||
function extractIconStyle(value) {
|
||||
return String(value || "")
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
|
||||
}
|
||||
|
||||
function determineIconPreviewPrefix(input) {
|
||||
const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
|
||||
if (explicitPrefix && explicitPrefix !== "fa-solid") {
|
||||
return explicitPrefix;
|
||||
}
|
||||
|
||||
const iconName = extractIconName(input?.value || "");
|
||||
const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
|
||||
|
||||
if (knownStyles.includes("fa-brands")) return "fa-brands";
|
||||
if (knownStyles.includes("fa-regular")) return "fa-regular";
|
||||
if (knownStyles.includes("fa-solid")) return "fa-solid";
|
||||
|
||||
return explicitPrefix || "fa-solid";
|
||||
}
|
||||
|
||||
function loadIconStyleLookup() {
|
||||
if (window.__cmsIconStyleLookupPromise) {
|
||||
return window.__cmsIconStyleLookupPromise;
|
||||
}
|
||||
|
||||
window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((json) => {
|
||||
const lookup = {};
|
||||
Object.entries(json || {}).forEach(([name, meta]) => {
|
||||
lookup[`fa-${name}`] = (meta.styles || [])
|
||||
.filter((style) => ["solid", "regular", "brands"].includes(style))
|
||||
.map((style) => `fa-${style}`);
|
||||
});
|
||||
window.__cmsIconStyleLookup = lookup;
|
||||
return lookup;
|
||||
})
|
||||
.catch(() => {
|
||||
window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
|
||||
return window.__cmsIconStyleLookup;
|
||||
});
|
||||
|
||||
return window.__cmsIconStyleLookupPromise;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || "")
|
||||
|
||||
Reference in New Issue
Block a user