feat: redesign settings popup modal for mobile compatibility
Completely refactored the RPG Companion settings popup with professional ES6 architecture and mobile-first CSS, matching the dice roller redesign. **CSS Changes (style.css:2585-2773):** - Mobile-first responsive design with clamp() and min() functions - CSS custom properties for fluid scaling across viewports - min-height: 0 on flex children for proper max-height constraints - ::before pseudo-element for backdrop (removed overlay div) - State-based animations with .is-open and .is-closing classes - 75vh max-height with proper viewport centering - Touch-friendly 44px minimum tap targets - Neutral 80% opaque background for visibility **HTML Changes (template.html:71-214):** - Added ARIA attributes: role="dialog", aria-modal="true", aria-labelledby - Semantic <header> element for settings header - aria-hidden="true" on all decorative icons - Removed .rpg-settings-popup-overlay div (now CSS ::before) - Improved accessibility throughout **JavaScript Changes (index.js:985-1142):** - Created SettingsModal ES6 class with state management - open() and close() methods with animation control - updateTheme() for real-time theme switching - Private _applyCustomTheme() and _clearCustomTheme() methods - isAnimating flag prevents double-clicks - Focus management for accessibility - Backwards compatible wrapper functions preserve existing API - Updated event handlers with backdrop click support - Removed obsolete overlay click handler **Benefits:** - Settings modal now fully functional on mobile devices - Proper scrolling with content overflow - Smooth open/close animations - Professional class-based architecture - Complete accessibility support - Theme support maintained - No breaking changes to existing code
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -979,60 +979,141 @@ function addDiceQuickReply() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the settings popup.
|
||||
* SettingsModal - Manages the settings popup modal
|
||||
* Handles opening, closing, theming, and animations
|
||||
*/
|
||||
function openSettingsPopup() {
|
||||
const theme = extensionSettings.theme || 'default';
|
||||
$('#rpg-settings-popup').attr('data-theme', theme);
|
||||
|
||||
// Apply custom theme colors if custom theme is selected
|
||||
if (theme === 'custom') {
|
||||
applyCustomThemeToSettingsPopup();
|
||||
class SettingsModal {
|
||||
constructor() {
|
||||
this.modal = document.getElementById('rpg-settings-popup');
|
||||
this.content = this.modal?.querySelector('.rpg-settings-popup-content');
|
||||
this.isAnimating = false;
|
||||
}
|
||||
|
||||
$('#rpg-settings-popup').fadeIn(200);
|
||||
/**
|
||||
* Opens the modal with proper animation
|
||||
*/
|
||||
open() {
|
||||
if (this.isAnimating || !this.modal) return;
|
||||
|
||||
// Apply theme
|
||||
const theme = extensionSettings.theme || 'default';
|
||||
this.modal.setAttribute('data-theme', theme);
|
||||
|
||||
// Apply custom theme if needed
|
||||
if (theme === 'custom') {
|
||||
this._applyCustomTheme();
|
||||
}
|
||||
|
||||
// Open modal with CSS class
|
||||
this.modal.classList.add('is-open');
|
||||
this.modal.classList.remove('is-closing');
|
||||
|
||||
// Focus management
|
||||
this.modal.querySelector('#rpg-close-settings')?.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the modal with animation
|
||||
*/
|
||||
close() {
|
||||
if (this.isAnimating || !this.modal) return;
|
||||
|
||||
this.isAnimating = true;
|
||||
this.modal.classList.add('is-closing');
|
||||
this.modal.classList.remove('is-open');
|
||||
|
||||
// Wait for animation to complete
|
||||
setTimeout(() => {
|
||||
this.modal.classList.remove('is-closing');
|
||||
this.isAnimating = false;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the theme in real-time (used when theme selector changes)
|
||||
*/
|
||||
updateTheme() {
|
||||
if (!this.modal) return;
|
||||
|
||||
const theme = extensionSettings.theme || 'default';
|
||||
this.modal.setAttribute('data-theme', theme);
|
||||
|
||||
if (theme === 'custom') {
|
||||
this._applyCustomTheme();
|
||||
} else {
|
||||
// Clear custom CSS variables to let theme CSS take over
|
||||
this._clearCustomTheme();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies custom theme colors
|
||||
* @private
|
||||
*/
|
||||
_applyCustomTheme() {
|
||||
if (!this.content || !extensionSettings.customColors) return;
|
||||
|
||||
this.content.style.setProperty('--rpg-bg', extensionSettings.customColors.bg);
|
||||
this.content.style.setProperty('--rpg-accent', extensionSettings.customColors.accent);
|
||||
this.content.style.setProperty('--rpg-text', extensionSettings.customColors.text);
|
||||
this.content.style.setProperty('--rpg-highlight', extensionSettings.customColors.highlight);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears custom theme colors
|
||||
* @private
|
||||
*/
|
||||
_clearCustomTheme() {
|
||||
if (!this.content) return;
|
||||
|
||||
this.content.style.setProperty('--rpg-bg', '');
|
||||
this.content.style.setProperty('--rpg-accent', '');
|
||||
this.content.style.setProperty('--rpg-text', '');
|
||||
this.content.style.setProperty('--rpg-highlight', '');
|
||||
}
|
||||
}
|
||||
|
||||
// Global instance
|
||||
let settingsModal = null;
|
||||
|
||||
/**
|
||||
* Opens the settings popup.
|
||||
* Backwards compatible wrapper for SettingsModal class.
|
||||
*/
|
||||
function openSettingsPopup() {
|
||||
if (settingsModal) {
|
||||
settingsModal.open();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes the settings popup.
|
||||
* Backwards compatible wrapper for SettingsModal class.
|
||||
*/
|
||||
function closeSettingsPopup() {
|
||||
$('#rpg-settings-popup').fadeOut(200);
|
||||
if (settingsModal) {
|
||||
settingsModal.close();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies custom theme colors to the settings popup.
|
||||
* Backwards compatible wrapper for SettingsModal class.
|
||||
* @deprecated Use settingsModal.updateTheme() instead
|
||||
*/
|
||||
function applyCustomThemeToSettingsPopup() {
|
||||
const popup = $('#rpg-settings-popup .rpg-settings-popup-content');
|
||||
popup.css({
|
||||
'--rpg-bg': extensionSettings.customColors.bg,
|
||||
'--rpg-accent': extensionSettings.customColors.accent,
|
||||
'--rpg-text': extensionSettings.customColors.text,
|
||||
'--rpg-highlight': extensionSettings.customColors.highlight
|
||||
});
|
||||
if (settingsModal) {
|
||||
settingsModal._applyCustomTheme();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the settings popup theme in real-time.
|
||||
* Backwards compatible wrapper for SettingsModal class.
|
||||
*/
|
||||
function updateSettingsPopupTheme() {
|
||||
const theme = extensionSettings.theme || 'default';
|
||||
const popup = $('#rpg-settings-popup .rpg-settings-popup-content');
|
||||
|
||||
$('#rpg-settings-popup').attr('data-theme', theme);
|
||||
|
||||
// Apply custom theme colors if custom theme is selected
|
||||
if (theme === 'custom') {
|
||||
applyCustomThemeToSettingsPopup();
|
||||
} else {
|
||||
// Clear custom CSS variables to let theme CSS take over
|
||||
popup.css({
|
||||
'--rpg-bg': '',
|
||||
'--rpg-accent': '',
|
||||
'--rpg-text': '',
|
||||
'--rpg-highlight': ''
|
||||
});
|
||||
if (settingsModal) {
|
||||
settingsModal.updateTheme();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1040,16 +1121,26 @@ function updateSettingsPopupTheme() {
|
||||
* Sets up the settings popup functionality.
|
||||
*/
|
||||
function setupSettingsPopup() {
|
||||
// Initialize SettingsModal instance
|
||||
settingsModal = new SettingsModal();
|
||||
|
||||
// Open settings popup
|
||||
$('#rpg-open-settings').on('click', function() {
|
||||
openSettingsPopup();
|
||||
});
|
||||
|
||||
// Close settings popup
|
||||
$('#rpg-close-settings, .rpg-settings-popup-overlay').on('click', function() {
|
||||
// Close settings popup - close button
|
||||
$('#rpg-close-settings').on('click', function() {
|
||||
closeSettingsPopup();
|
||||
});
|
||||
|
||||
// Close on backdrop click (clicking outside content)
|
||||
$('#rpg-settings-popup').on('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeSettingsPopup();
|
||||
}
|
||||
});
|
||||
|
||||
// Clear cache button
|
||||
$('#rpg-clear-cache').on('click', function() {
|
||||
// Clear the data
|
||||
|
||||
Reference in New Issue
Block a user