Lucas 'Paperboy' Rose-Winters
23fc9fdc9a
Extracted ~920 lines of UI management code from index.js into 4 specialized modules to improve maintainability and organization. Modules Created: - src/systems/ui/theme.js (100 lines) - Theme management and custom colors - src/systems/ui/modals.js (568 lines) - DiceModal and SettingsModal ES6 classes - src/systems/ui/layout.js (254 lines) - Panel visibility, positioning, and collapse toggle - src/systems/ui/mobile.js (694 lines) - Mobile FAB, tabs, keyboard handling, and viewport management Changes: - Extracted theme application and custom color management - Extracted modal classes with proper state management - Extracted layout management (visibility, sections, positioning) - Extracted mobile-specific UI (FAB dragging with touch/mouse, tab navigation, keyboard handling) - Removed unused import (closeMobilePanelWithAnimation only used internally by mobile.js) - Updated imports in index.js to use new module structure - Added comprehensive documentation comments Result: - index.js reduced from 1606 to 921 lines (-685 lines) - All UI systems properly modularized with clean dependencies - Maintains 100% backward compatibility - All modules pass syntax validation Dependencies: - All modules import from src/core/state.js for shared state - Mobile module imports layout functions for panel animation - Layout module properly manages DOM element state
101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
/**
|
|
* Theme Management Module
|
|
* Handles theme application, custom colors, and animations
|
|
*/
|
|
|
|
import { extensionSettings, $panelContainer } from '../../core/state.js';
|
|
|
|
/**
|
|
* Applies the selected theme to the panel.
|
|
*/
|
|
export function applyTheme() {
|
|
if (!$panelContainer) return;
|
|
|
|
const theme = extensionSettings.theme;
|
|
|
|
// Remove all theme attributes first
|
|
$panelContainer.removeAttr('data-theme');
|
|
|
|
// Clear any inline CSS variable overrides
|
|
$panelContainer.css({
|
|
'--rpg-bg': '',
|
|
'--rpg-accent': '',
|
|
'--rpg-text': '',
|
|
'--rpg-highlight': '',
|
|
'--rpg-border': '',
|
|
'--rpg-shadow': ''
|
|
});
|
|
|
|
// Apply the selected theme
|
|
if (theme === 'custom') {
|
|
applyCustomTheme();
|
|
} else if (theme !== 'default') {
|
|
// For non-default themes, set the data-theme attribute
|
|
// which will trigger the CSS theme rules
|
|
$panelContainer.attr('data-theme', theme);
|
|
}
|
|
// For 'default', we do nothing - it will use the CSS variables from .rpg-panel class
|
|
// which fall back to SillyTavern's theme variables
|
|
}
|
|
|
|
/**
|
|
* Applies custom colors when custom theme is selected.
|
|
*/
|
|
export function applyCustomTheme() {
|
|
if (!$panelContainer) return;
|
|
|
|
const colors = extensionSettings.customColors;
|
|
|
|
// Apply custom CSS variables as inline styles
|
|
$panelContainer.css({
|
|
'--rpg-bg': colors.bg,
|
|
'--rpg-accent': colors.accent,
|
|
'--rpg-text': colors.text,
|
|
'--rpg-highlight': colors.highlight,
|
|
'--rpg-border': colors.highlight,
|
|
'--rpg-shadow': `${colors.highlight}80` // Add alpha for shadow
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Toggles visibility of custom color pickers.
|
|
*/
|
|
export function toggleCustomColors() {
|
|
const isCustom = extensionSettings.theme === 'custom';
|
|
$('#rpg-custom-colors').toggle(isCustom);
|
|
}
|
|
|
|
/**
|
|
* Toggles animations on/off by adding/removing a class to the panel.
|
|
*/
|
|
export function toggleAnimations() {
|
|
if (extensionSettings.enableAnimations) {
|
|
$panelContainer.addClass('rpg-animations-enabled');
|
|
} else {
|
|
$panelContainer.removeClass('rpg-animations-enabled');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Updates the settings popup theme in real-time.
|
|
* Backwards compatible wrapper for SettingsModal class.
|
|
* @param {Object} settingsModal - The SettingsModal instance (passed as parameter to avoid circular dependency)
|
|
*/
|
|
export function updateSettingsPopupTheme(settingsModal) {
|
|
if (settingsModal) {
|
|
settingsModal.updateTheme();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Applies custom theme colors to the settings popup.
|
|
* Backwards compatible wrapper for SettingsModal class.
|
|
* @deprecated Use settingsModal.updateTheme() instead
|
|
* @param {Object} settingsModal - The SettingsModal instance (passed as parameter to avoid circular dependency)
|
|
*/
|
|
export function applyCustomThemeToSettingsPopup(settingsModal) {
|
|
if (settingsModal) {
|
|
settingsModal._applyCustomTheme();
|
|
}
|
|
}
|