mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-07 07:36:37 +00:00
ChuckandClaude Opus 5.5
7e066174d9
Whole-tree audit. Every symbol was checked against core, the plugin monorepo and all eight third-party plugins in plugins.json first. - Deprecate (removal 3.10.0) plugin-facing methods nothing calls: LogoDownloader bulk download, ConfigManager backup/secret wrappers, APIHelper extras, BackgroundDataService poll API, PluginManager / PluginStateManager info readers, and a few CacheManager, FontManager, BaseOddsManager, DynamicTeamResolver methods and PluginTestCase. plugin_api_usage.py learns their receiver names; DEPRECATIONS doc regenerated. - Remove core-internal dead code: CacheMetrics, Vegas status/stats plumbing, sync "new cycle" message (followers ignore unknown types), unused operation types, test-only PluginCatalog readers, IPC to_dict and ping, _parse_form_value, CacheStrategyProtocol, ErrorAggregator callbacks, duplicate web response helpers. - Web UI: drop never-mounted json-file-manager.js, the example widget, utils/error_handler.js, four uncalled PluginAPI methods, and 29 escapeHtml shims (call window.LEDEscape directly). Public globals, BaseWidget and widget names unchanged. - Remove six one-off scripts (owner decision) and the unused markupsafe and pytest-mock pins. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
308 lines
12 KiB
JavaScript
308 lines
12 KiB
JavaScript
/**
|
|
* LEDMatrix Font Selector Widget
|
|
*
|
|
* Dynamic font selector that fetches available fonts from the API.
|
|
* Automatically shows all fonts in assets/fonts/ directory.
|
|
*
|
|
* Schema example:
|
|
* {
|
|
* "font": {
|
|
* "type": "string",
|
|
* "title": "Font Family",
|
|
* "x-widget": "font-selector",
|
|
* "x-options": {
|
|
* "placeholder": "Select a font...",
|
|
* "showPreview": false,
|
|
* "filterTypes": ["ttf", "bdf"]
|
|
* },
|
|
* "default": "PressStart2P-Regular.ttf"
|
|
* }
|
|
* }
|
|
*
|
|
* @module FontSelectorWidget
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
const base = window.BaseWidget ? new window.BaseWidget('FontSelector', '1.0.0') : null;
|
|
|
|
// Cache for font catalog to avoid repeated API calls
|
|
let fontCatalogCache = null;
|
|
let fontCatalogPromise = null;
|
|
|
|
function sanitizeId(id) {
|
|
if (base) return base.sanitizeId(id);
|
|
return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
|
|
}
|
|
|
|
function triggerChange(fieldId, value) {
|
|
if (base) {
|
|
base.triggerChange(fieldId, value);
|
|
} else {
|
|
const event = new CustomEvent('widget-change', {
|
|
detail: { fieldId, value },
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
document.dispatchEvent(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate a human-readable display name from font filename
|
|
* @param {string} filename - Font filename (e.g., "PressStart2P-Regular.ttf")
|
|
* @returns {string} Display name (e.g., "Press Start 2P Regular")
|
|
*/
|
|
function generateDisplayName(filename) {
|
|
if (!filename) return '';
|
|
|
|
// Remove extension
|
|
let name = filename.replace(/\.(ttf|bdf|otf)$/i, '');
|
|
|
|
// Handle common patterns
|
|
// Split on hyphens and underscores
|
|
name = name.replace(/[-_]/g, ' ');
|
|
|
|
// Add space before capital letters (camelCase/PascalCase)
|
|
name = name.replace(/([a-z])([A-Z])/g, '$1 $2');
|
|
|
|
// Add space before numbers that follow letters
|
|
name = name.replace(/([a-zA-Z])(\d)/g, '$1 $2');
|
|
|
|
// Clean up multiple spaces
|
|
name = name.replace(/\s+/g, ' ').trim();
|
|
|
|
return name;
|
|
}
|
|
|
|
/**
|
|
* Fetch font catalog from API (with caching)
|
|
* @returns {Promise<Array>} Array of font objects
|
|
*/
|
|
async function fetchFontCatalog() {
|
|
// Return cached data if available
|
|
if (fontCatalogCache) {
|
|
return fontCatalogCache;
|
|
}
|
|
|
|
// Return existing promise if fetch is in progress
|
|
if (fontCatalogPromise) {
|
|
return fontCatalogPromise;
|
|
}
|
|
|
|
// Fetch from API
|
|
fontCatalogPromise = fetch('/api/v3/fonts/catalog')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch font catalog: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Handle different response structures
|
|
let fonts = [];
|
|
|
|
if (data.data && data.data.fonts) {
|
|
// New format: { data: { fonts: [...] } }
|
|
fonts = data.data.fonts;
|
|
} else if (data.data && data.data.catalog) {
|
|
// Alternative format: { data: { catalog: {...} } }
|
|
const catalog = data.data.catalog;
|
|
fonts = Object.entries(catalog).map(([family, info]) => ({
|
|
filename: info.filename || family,
|
|
family: family,
|
|
display_name: info.display_name || generateDisplayName(info.filename || family),
|
|
path: info.path,
|
|
type: info.type || 'unknown',
|
|
scalable: info.scalable,
|
|
native_size: info.native_size
|
|
}));
|
|
} else if (Array.isArray(data)) {
|
|
// Direct array format
|
|
fonts = data;
|
|
}
|
|
|
|
// Sort fonts alphabetically by display name
|
|
fonts.sort((a, b) => {
|
|
const nameA = (a.display_name || a.filename || '').toLowerCase();
|
|
const nameB = (b.display_name || b.filename || '').toLowerCase();
|
|
return nameA.localeCompare(nameB);
|
|
});
|
|
|
|
fontCatalogCache = fonts;
|
|
fontCatalogPromise = null;
|
|
return fonts;
|
|
})
|
|
.catch(error => {
|
|
console.error('[FontSelectorWidget] Error fetching font catalog:', error);
|
|
fontCatalogPromise = null;
|
|
return [];
|
|
});
|
|
|
|
return fontCatalogPromise;
|
|
}
|
|
|
|
/**
|
|
* Clear the font catalog cache (call when fonts are uploaded/deleted)
|
|
*/
|
|
function clearFontCache() {
|
|
fontCatalogCache = null;
|
|
fontCatalogPromise = null;
|
|
}
|
|
|
|
// Expose cache clearing function globally
|
|
window.clearFontSelectorCache = clearFontCache;
|
|
|
|
// Guard against missing global registry
|
|
if (!window.LEDMatrixWidgets || typeof window.LEDMatrixWidgets.register !== 'function') {
|
|
console.error('[FontSelectorWidget] LEDMatrixWidgets registry not available');
|
|
return;
|
|
}
|
|
|
|
window.LEDMatrixWidgets.register('font-selector', {
|
|
name: 'Font Selector Widget',
|
|
version: '1.0.0',
|
|
|
|
render: async function(container, config, value, options) {
|
|
const fieldId = sanitizeId(options.fieldId || container.id || 'font-select');
|
|
const xOptions = config['x-options'] || config['x_options'] || {};
|
|
const placeholder = xOptions.placeholder || 'Select a font...';
|
|
const filterTypes = xOptions.filterTypes || null; // e.g., ['ttf', 'bdf']
|
|
// Bitmap (BDF) fonts render at the one size baked into the file
|
|
// and ignore the size setting entirely, so a field that caps size
|
|
// at 16 can still be handed a 27px face. maxFixedSize hides the
|
|
// ones that cannot honour the cap, rather than offering a choice
|
|
// that silently overflows the panel.
|
|
const maxFixedSize = Number(xOptions.maxFixedSize) || null;
|
|
const showPreview = xOptions.showPreview === true;
|
|
const disabled = xOptions.disabled === true;
|
|
const required = xOptions.required === true;
|
|
|
|
const currentValue = value !== null && value !== undefined ? String(value) : '';
|
|
|
|
// Show loading state
|
|
container.innerHTML = `
|
|
<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">
|
|
<select id="${fieldId}_input"
|
|
name="${window.LEDEscape.html(options.name || fieldId)}"
|
|
disabled
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm bg-gray-100 text-black">
|
|
<option value="">Loading fonts...</option>
|
|
</select>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// Fetch fonts from API
|
|
const fonts = await fetchFontCatalog();
|
|
|
|
// Filter by type if specified
|
|
let filteredFonts = fonts;
|
|
if (filterTypes && Array.isArray(filterTypes)) {
|
|
filteredFonts = fonts.filter(font => {
|
|
const fontType = (font.type || '').toLowerCase();
|
|
return filterTypes.some(t => t.toLowerCase() === fontType);
|
|
});
|
|
}
|
|
if (maxFixedSize) {
|
|
filteredFonts = filteredFonts.filter(font => {
|
|
// A scalable face can always meet the cap.
|
|
if (font.scalable !== false) { return true; }
|
|
// An unknown native size is not evidence it is too
|
|
// big; keep it rather than hiding a usable font.
|
|
if (!font.native_size) { return true; }
|
|
return font.native_size <= maxFixedSize;
|
|
});
|
|
}
|
|
|
|
// Build select HTML
|
|
let html = `<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">`;
|
|
|
|
html += `
|
|
<select id="${fieldId}_input"
|
|
name="${window.LEDEscape.html(options.name || fieldId)}"
|
|
${disabled ? 'disabled' : ''}
|
|
${required ? 'required' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('font-selector').onChange('${fieldId}')"
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black">
|
|
`;
|
|
|
|
// Placeholder option
|
|
if (placeholder && !required) {
|
|
html += `<option value="" ${!currentValue ? 'selected' : ''}>${window.LEDEscape.html(placeholder)}</option>`;
|
|
}
|
|
|
|
// Font options
|
|
for (const font of filteredFonts) {
|
|
const fontValue = font.filename || font.family;
|
|
const displayName = font.display_name || generateDisplayName(fontValue);
|
|
const fontType = font.type ? ` (${font.type.toUpperCase()})` : '';
|
|
const isSelected = String(fontValue) === currentValue;
|
|
|
|
html += `<option value="${window.LEDEscape.html(String(fontValue))}" ${isSelected ? 'selected' : ''}>${window.LEDEscape.html(displayName)}${window.LEDEscape.html(fontType)}</option>`;
|
|
}
|
|
|
|
html += '</select>';
|
|
|
|
// Optional preview area
|
|
if (showPreview) {
|
|
html += `
|
|
<div id="${fieldId}_preview" class="mt-2 p-2 bg-gray-800 rounded text-white text-center" style="min-height: 30px;">
|
|
<span style="font-family: monospace;">Preview</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Error message area
|
|
html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
|
|
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
|
|
} catch (error) {
|
|
console.error('[FontSelectorWidget] Error rendering:', error);
|
|
container.innerHTML = `
|
|
<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">
|
|
<select id="${fieldId}_input"
|
|
name="${window.LEDEscape.html(options.name || fieldId)}"
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm bg-white text-black">
|
|
<option value="${window.LEDEscape.html(currentValue)}" selected>${window.LEDEscape.html(currentValue || 'Error loading fonts')}</option>
|
|
</select>
|
|
<div class="text-sm text-red-600 mt-1">Failed to load font list</div>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
|
|
getValue: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
return input ? input.value : '';
|
|
},
|
|
|
|
setValue: function(fieldId, value) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (input) {
|
|
input.value = value !== null && value !== undefined ? String(value) : '';
|
|
}
|
|
},
|
|
|
|
handlers: {
|
|
onChange: function(fieldId) {
|
|
const widget = window.LEDMatrixWidgets.get('font-selector');
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
}
|
|
},
|
|
|
|
// Expose utility functions
|
|
utils: {
|
|
clearCache: clearFontCache,
|
|
fetchCatalog: fetchFontCatalog,
|
|
generateDisplayName: generateDisplayName
|
|
}
|
|
});
|
|
})();
|