diff --git a/static/js/app/main.js b/static/js/app/main.js index 10621899..30ebdcb5 100644 --- a/static/js/app/main.js +++ b/static/js/app/main.js @@ -5,6 +5,7 @@ import { formatFileSize, formatQuotaSize } from '../core/formatters.js'; import { i18n } from '../core/i18n.js'; +import { oxiIconsInit } from '../core/icons.js'; import { Modal } from '../core/modal.js'; import { fileOps } from '../features/files/fileOperations.js'; import { multiSelect } from '../features/files/multiSelect.js'; @@ -334,6 +335,8 @@ function switchSectionTo(section) { * Initialize the application */ function initApp() { + oxiIconsInit(); + // Cache DOM elements cacheElements(); diff --git a/static/js/core/icons.js b/static/js/core/icons.js index ecdc6470..0d4c3ea2 100644 --- a/static/js/core/icons.js +++ b/static/js/core/icons.js @@ -15,7 +15,7 @@ // All icons use viewBox="0 0 {width} 512" and fill="currentColor". // Keys use FA5 class names (without "fa-" prefix) for backward compatibility. -const _ICONS = { +const OxiIcons = { 'arrow-left': [ 448, 'M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z' @@ -430,7 +430,7 @@ const _ICONS = { * @returns {string} SVG markup string, or empty string if icon not found */ function oxiIcon(name, extraClass) { - const entry = _ICONS[name]; + const entry = OxiIcons[name]; if (!entry) return ''; const [w, d] = entry; const cls = extraClass ? `oxi-icon ${extraClass}` : 'oxi-icon'; @@ -477,13 +477,13 @@ function replaceIconsInElement(container) { } // Use outline variant if available and element uses "far" - if (isRegular && _ICONS[`${iconName}-outline`]) { + if (isRegular && OxiIcons[`${iconName}-outline`]) { iconName = `${iconName}-outline`; } - if (!iconName || !_ICONS[iconName]) continue; + if (!iconName || !OxiIcons[iconName]) continue; - const [w, d] = _ICONS[iconName]; + const [w, d] = OxiIcons[iconName]; // Build SVG element const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); @@ -510,14 +510,7 @@ function replaceIconsInElement(container) { } } -// ── Expose globally ──────────────────────────────────────────── -export { oxiIcon, replaceIconsInElement }; -export const OxiIcons = _ICONS; - -// ── Auto-replace: MutationObserver bridge ────────────────────── -// Watches the DOM for new elements and converts them -// to inline SVGs automatically. Debounced to at most once per frame. -(function autoReplace() { +function oxiIconsInit() { let raf = 0; const scan = () => { raf = 0; @@ -541,4 +534,11 @@ export const OxiIcons = _ICONS; } } }).observe(document.documentElement, { childList: true, subtree: true }); -})(); +} + +// ── Expose globally ──────────────────────────────────────────── +export { OxiIcons, oxiIcon, oxiIconsInit, replaceIconsInElement }; + +// ── Auto-replace: MutationObserver bridge ────────────────────── +// Watches the DOM for new elements and converts them +// to inline SVGs automatically. Debounced to at most once per frame. diff --git a/static/js/views/admin/admin.js b/static/js/views/admin/admin.js index 739927e5..49e487d2 100644 --- a/static/js/views/admin/admin.js +++ b/static/js/views/admin/admin.js @@ -1,6 +1,7 @@ import { getCsrfHeaders } from '../../core/csrf.js'; import { escapeHtml } from '../../core/formatters.js'; import { i18n } from '../../core/i18n.js'; +import { oxiIconsInit } from '../../core/icons.js'; const API = '/api'; let currentAdminId = ''; @@ -1041,6 +1042,7 @@ async function completeMigration() { async function init() { try { + oxiIconsInit(); const me = await fetch(`${API}/auth/me`, { headers: headers(), credentials: 'same-origin' diff --git a/static/js/views/device-verify/device-verify.js b/static/js/views/device-verify/device-verify.js index 3e0eb523..702c49c5 100644 --- a/static/js/views/device-verify/device-verify.js +++ b/static/js/views/device-verify/device-verify.js @@ -1,5 +1,6 @@ // device-verify.js — Extracted from inline