diff --git a/js/components/modals.js b/js/components/modals.js index 4451a62..e18ff0a 100644 --- a/js/components/modals.js +++ b/js/components/modals.js @@ -1,230 +1 @@ -import { updateWarningVisibility } from '../handlers/modalHandlers.js'; -import { loadAppearanceSettings, saveAppearanceSettings } from '../settings/appearanceSettings.js'; - -class SettingsModal extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` - - `; - - // Add tab switching functionality - this.setupTabs(); - // Add appearance settings handlers - this.setupAppearanceHandlers(); - } - - setupTabs() { - const tabs = this.querySelectorAll('.settings-tab'); - tabs.forEach(tab => { - tab.addEventListener('click', () => { - // Remove active class from all tabs and contents - this.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active')); - this.querySelectorAll('.settings-content').forEach(c => c.classList.remove('active')); - - // Add active class to clicked tab and corresponding content - tab.classList.add('active'); - const content = this.querySelector(`[data-content="${tab.dataset.tab}"]`); - content.classList.add('active'); - - // Show/hide warning based on active tab and duration - const warningElement = this.querySelector('.settings-warning'); - if (tab.dataset.tab === 'muting') { - const duration = document.querySelector('input[name="duration"]:checked')?.value; - warningElement.style.display = duration && duration !== 'forever' ? 'flex' : 'none'; - } else { - warningElement.style.display = 'none'; - } - - // Lazy load the creator image when about tab is clicked - if (tab.dataset.tab === 'about') { - const img = this.querySelector('.creator-image'); - if (img) { - img.loading = 'eager'; // Switch to eager loading when tab is active - } - } - }); - }); - } - - setupAppearanceHandlers() { - // Load current settings from localStorage - const settings = loadAppearanceSettings(); - - // Set initial active states - this.querySelector(`.theme-mode-switch[data-theme="${settings.colorMode}"]`)?.classList.add('active'); - this.querySelector(`.font-switch[data-font="${settings.font}"]`)?.classList.add('active'); - this.querySelector(`.font-switch[data-size="${settings.fontSize}"]`)?.classList.add('active'); - - // Theme buttons - this.querySelectorAll('.theme-mode-switch[data-theme]').forEach(button => { - button.addEventListener('click', () => { - this.querySelectorAll('.theme-mode-switch[data-theme]').forEach(btn => btn.classList.remove('active')); - button.classList.add('active'); - settings.colorMode = button.dataset.theme; - saveAppearanceSettings(settings); - }); - }); - - // Font buttons - this.querySelectorAll('.font-switch[data-font]').forEach(button => { - button.addEventListener('click', () => { - this.querySelectorAll('.font-switch[data-font]').forEach(btn => btn.classList.remove('active')); - button.classList.add('active'); - settings.font = button.dataset.font; - saveAppearanceSettings(settings); - }); - }); - - // Font size buttons - this.querySelectorAll('.font-switch[data-size]').forEach(button => { - button.addEventListener('click', () => { - this.querySelectorAll('.font-switch[data-size]').forEach(btn => btn.classList.remove('active')); - button.classList.add('active'); - settings.fontSize = button.dataset.size; - saveAppearanceSettings(settings); - }); - }); - } -} - -customElements.define('settings-modal', SettingsModal); - -export { SettingsModal }; +export { SettingsModal } from './modals/index.js'; diff --git a/js/components/modals/index.js b/js/components/modals/index.js new file mode 100644 index 0000000..5c400d0 --- /dev/null +++ b/js/components/modals/index.js @@ -0,0 +1 @@ +export { SettingsModal } from './settings-modal.js'; diff --git a/js/components/modals/settings-appearance.js b/js/components/modals/settings-appearance.js new file mode 100644 index 0000000..7195787 --- /dev/null +++ b/js/components/modals/settings-appearance.js @@ -0,0 +1,41 @@ +import { loadAppearanceSettings, saveAppearanceSettings } from '../../settings/appearanceSettings.js'; + +export function setupAppearanceHandlers() { + // Load current settings from localStorage + const settings = loadAppearanceSettings(); + + // Set initial active states + this.querySelector(`.theme-mode-switch[data-theme="${settings.colorMode}"]`)?.classList.add('active'); + this.querySelector(`.font-switch[data-font="${settings.font}"]`)?.classList.add('active'); + this.querySelector(`.font-switch[data-size="${settings.fontSize}"]`)?.classList.add('active'); + + // Theme buttons + this.querySelectorAll('.theme-mode-switch[data-theme]').forEach(button => { + button.addEventListener('click', () => { + this.querySelectorAll('.theme-mode-switch[data-theme]').forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + settings.colorMode = button.dataset.theme; + saveAppearanceSettings(settings); + }); + }); + + // Font buttons + this.querySelectorAll('.font-switch[data-font]').forEach(button => { + button.addEventListener('click', () => { + this.querySelectorAll('.font-switch[data-font]').forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + settings.font = button.dataset.font; + saveAppearanceSettings(settings); + }); + }); + + // Font size buttons + this.querySelectorAll('.font-switch[data-size]').forEach(button => { + button.addEventListener('click', () => { + this.querySelectorAll('.font-switch[data-size]').forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + settings.fontSize = button.dataset.size; + saveAppearanceSettings(settings); + }); + }); +} diff --git a/js/components/modals/settings-modal.js b/js/components/modals/settings-modal.js new file mode 100644 index 0000000..50aec15 --- /dev/null +++ b/js/components/modals/settings-modal.js @@ -0,0 +1,24 @@ +import { updateWarningVisibility } from '../../handlers/modalHandlers.js'; +import { loadAppearanceSettings, saveAppearanceSettings } from '../../settings/appearanceSettings.js'; +import { settingsTemplate } from './settings-template.js'; +import { setupAppearanceHandlers } from './settings-appearance.js'; +import { setupTabHandlers } from './settings-tabs.js'; + +class SettingsModal extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = settingsTemplate; + + // Add tab switching functionality + setupTabHandlers.call(this); + // Add appearance settings handlers + setupAppearanceHandlers.call(this); + } +} + +customElements.define('settings-modal', SettingsModal); + +export { SettingsModal }; diff --git a/js/components/modals/settings-tabs.js b/js/components/modals/settings-tabs.js new file mode 100644 index 0000000..243c172 --- /dev/null +++ b/js/components/modals/settings-tabs.js @@ -0,0 +1,32 @@ +export function setupTabHandlers() { + const tabs = this.querySelectorAll('.settings-tab'); + tabs.forEach(tab => { + tab.addEventListener('click', () => { + // Remove active class from all tabs and contents + this.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active')); + this.querySelectorAll('.settings-content').forEach(c => c.classList.remove('active')); + + // Add active class to clicked tab and corresponding content + tab.classList.add('active'); + const content = this.querySelector(`[data-content="${tab.dataset.tab}"]`); + content.classList.add('active'); + + // Show/hide warning based on active tab and duration + const warningElement = this.querySelector('.settings-warning'); + if (tab.dataset.tab === 'muting') { + const duration = document.querySelector('input[name="duration"]:checked')?.value; + warningElement.style.display = duration && duration !== 'forever' ? 'flex' : 'none'; + } else { + warningElement.style.display = 'none'; + } + + // Lazy load the creator image when about tab is clicked + if (tab.dataset.tab === 'about') { + const img = this.querySelector('.creator-image'); + if (img) { + img.loading = 'eager'; // Switch to eager loading when tab is active + } + } + }); + }); +} diff --git a/js/components/modals/settings-template.js b/js/components/modals/settings-template.js new file mode 100644 index 0000000..37ad62c --- /dev/null +++ b/js/components/modals/settings-template.js @@ -0,0 +1,137 @@ +export const settingsTemplate = ` + +`;