mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-06 23:35:08 +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>
236 lines
10 KiB
JavaScript
236 lines
10 KiB
JavaScript
/**
|
|
* LEDMatrix Number Input Widget
|
|
*
|
|
* Enhanced number input with min/max/step, formatting, and increment buttons.
|
|
*
|
|
* Schema example:
|
|
* {
|
|
* "brightness": {
|
|
* "type": "number",
|
|
* "x-widget": "number-input",
|
|
* "minimum": 0,
|
|
* "maximum": 100,
|
|
* "x-options": {
|
|
* "step": 5,
|
|
* "prefix": null,
|
|
* "suffix": "%",
|
|
* "showButtons": true,
|
|
* "format": "integer" // "integer", "decimal", "percent"
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* @module NumberInputWidget
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
const base = window.BaseWidget ? new window.BaseWidget('NumberInput', '1.0.0') : 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);
|
|
}
|
|
}
|
|
|
|
window.LEDMatrixWidgets.register('number-input', {
|
|
name: 'Number Input Widget',
|
|
version: '1.0.0',
|
|
|
|
render: function(container, config, value, options) {
|
|
// Guard against undefined options
|
|
options = options || {};
|
|
const fieldId = sanitizeId(options.fieldId || container.id || 'number_input');
|
|
const xOptions = config['x-options'] || config['x_options'] || {};
|
|
|
|
// Sanitize min/max as valid numbers or null
|
|
const rawMin = config.minimum !== undefined ? config.minimum : (xOptions.min !== undefined ? xOptions.min : null);
|
|
const rawMax = config.maximum !== undefined ? config.maximum : (xOptions.max !== undefined ? xOptions.max : null);
|
|
const min = (rawMin !== null && Number.isFinite(Number(rawMin))) ? Number(rawMin) : null;
|
|
const max = (rawMax !== null && Number.isFinite(Number(rawMax))) ? Number(rawMax) : null;
|
|
|
|
// Sanitize step - must be a positive number or 'any'
|
|
const rawStep = xOptions.step || (config.type === 'integer' ? 1 : 'any');
|
|
const step = (rawStep === 'any' || (Number.isFinite(Number(rawStep)) && Number(rawStep) > 0))
|
|
? (rawStep === 'any' ? 'any' : Number(rawStep))
|
|
: 1;
|
|
const prefix = xOptions.prefix || '';
|
|
const suffix = xOptions.suffix || '';
|
|
const showButtons = xOptions.showButtons !== false;
|
|
const disabled = xOptions.disabled === true;
|
|
const placeholder = xOptions.placeholder || '';
|
|
|
|
// Sanitize currentValue - ensure it's a safe numeric string or empty
|
|
const rawValue = value !== null && value !== undefined ? value : '';
|
|
const currentValue = rawValue === '' ? '' : (isNaN(Number(rawValue)) ? '' : String(Number(rawValue)));
|
|
|
|
// Escape values for safe HTML attribute interpolation
|
|
const safeMin = min !== null ? window.LEDEscape.html(String(min)) : '';
|
|
const safeMax = max !== null ? window.LEDEscape.html(String(max)) : '';
|
|
const safeStep = window.LEDEscape.html(String(step));
|
|
|
|
let html = `<div id="${fieldId}_widget" class="number-input-widget" data-field-id="${fieldId}" data-min="${safeMin}" data-max="${safeMax}" data-step="${safeStep}">`;
|
|
|
|
html += '<div class="flex items-center">';
|
|
|
|
if (prefix) {
|
|
html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md">${window.LEDEscape.html(prefix)}</span>`;
|
|
}
|
|
|
|
if (showButtons && !disabled) {
|
|
html += `
|
|
<button type="button"
|
|
onclick="window.LEDMatrixWidgets.getHandlers('number-input').onDecrement('${fieldId}')"
|
|
class="inline-flex items-center px-3 py-2 text-gray-600 bg-gray-100 border border-r-0 border-gray-300 hover:bg-gray-200 ${prefix ? '' : 'rounded-l-md'}"
|
|
aria-label="Decrease" aria-controls="${fieldId}_input">
|
|
<i class="fas fa-minus text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
const inputRoundedClass = showButtons || prefix || suffix ? '' : 'rounded-md';
|
|
|
|
html += `
|
|
<input type="number"
|
|
id="${fieldId}_input"
|
|
name="${window.LEDEscape.html(options.name || fieldId)}"
|
|
value="${window.LEDEscape.html(currentValue)}"
|
|
placeholder="${window.LEDEscape.html(placeholder)}"
|
|
${min !== null ? `min="${safeMin}"` : ''}
|
|
${max !== null ? `max="${safeMax}"` : ''}
|
|
step="${safeStep}"
|
|
${disabled ? 'disabled' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('number-input').onChange('${fieldId}')"
|
|
oninput="window.LEDMatrixWidgets.getHandlers('number-input').onInput('${fieldId}')"
|
|
class="form-input w-24 text-center ${inputRoundedClass} 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:text-gray-400">
|
|
`;
|
|
|
|
if (showButtons && !disabled) {
|
|
html += `
|
|
<button type="button"
|
|
onclick="window.LEDMatrixWidgets.getHandlers('number-input').onIncrement('${fieldId}')"
|
|
class="inline-flex items-center px-3 py-2 text-gray-600 bg-gray-100 border border-l-0 border-gray-300 hover:bg-gray-200 ${suffix ? '' : 'rounded-r-md'}"
|
|
aria-label="Increase" aria-controls="${fieldId}_input">
|
|
<i class="fas fa-plus text-xs" aria-hidden="true"></i>
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
if (suffix) {
|
|
html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md">${window.LEDEscape.html(suffix)}</span>`;
|
|
}
|
|
|
|
html += '</div>';
|
|
|
|
// Range indicator if min/max specified
|
|
if (min !== null || max !== null) {
|
|
const rangeText = min !== null && max !== null
|
|
? `${min} - ${max}`
|
|
: (min !== null ? `Min: ${min}` : `Max: ${max}`);
|
|
html += `<div class="text-xs text-gray-400 mt-1">${window.LEDEscape.html(rangeText)}</div>`;
|
|
}
|
|
|
|
// Error message area
|
|
html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
|
|
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
},
|
|
|
|
getValue: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (!input || input.value === '') return null;
|
|
const num = parseFloat(input.value);
|
|
return isNaN(num) ? null : num;
|
|
},
|
|
|
|
setValue: function(fieldId, value) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (input) {
|
|
input.value = value !== null && value !== undefined ? value : '';
|
|
}
|
|
},
|
|
|
|
validate: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
const errorEl = document.getElementById(`${safeId}_error`);
|
|
|
|
if (!input) return { valid: true, errors: [] };
|
|
|
|
const isValid = input.checkValidity();
|
|
|
|
if (errorEl) {
|
|
if (!isValid) {
|
|
errorEl.textContent = input.validationMessage;
|
|
errorEl.classList.remove('hidden');
|
|
input.classList.add('border-red-500');
|
|
} else {
|
|
errorEl.classList.add('hidden');
|
|
input.classList.remove('border-red-500');
|
|
}
|
|
}
|
|
|
|
return { valid: isValid, errors: isValid ? [] : [input.validationMessage] };
|
|
},
|
|
|
|
handlers: {
|
|
onChange: function(fieldId) {
|
|
const widget = window.LEDMatrixWidgets.get('number-input');
|
|
widget.validate(fieldId);
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
},
|
|
|
|
onInput: function(fieldId) {
|
|
// Real-time input handling if needed
|
|
},
|
|
|
|
onIncrement: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const widget = document.getElementById(`${safeId}_widget`);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (!input || !widget) return;
|
|
|
|
const step = parseFloat(widget.dataset.step) || 1;
|
|
const max = widget.dataset.max !== '' ? parseFloat(widget.dataset.max) : Infinity;
|
|
const current = parseFloat(input.value) || 0;
|
|
const newValue = Math.min(current + step, max);
|
|
|
|
input.value = newValue;
|
|
this.onChange(fieldId);
|
|
},
|
|
|
|
onDecrement: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const widget = document.getElementById(`${safeId}_widget`);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (!input || !widget) return;
|
|
|
|
const step = parseFloat(widget.dataset.step) || 1;
|
|
const min = widget.dataset.min !== '' ? parseFloat(widget.dataset.min) : -Infinity;
|
|
const current = parseFloat(input.value) || 0;
|
|
const newValue = Math.max(current - step, min);
|
|
|
|
input.value = newValue;
|
|
this.onChange(fieldId);
|
|
}
|
|
}
|
|
});
|
|
})();
|