Browse Source
Refactor webpack configuration and enhance Adminator application
- Updated webpack configuration to improve optimization settings and ensure proper minification. - Added missing commas in manifest.js and various webpack plugin files for consistency. - Refactored copyPlugin.js and htmlPlugin.js for better readability. - Improved CSS and SASS rules for better maintainability. - Introduced a new Adminator application entry point with enhanced mobile support and modernized features. - Implemented various components including Sidebar, Chart, and Date Pickers with improved UX. - Enhanced mobile dropdowns and search functionality for better user experience. - Added global event listeners for improved responsiveness and interaction.pull/322/head v2.8.1
Aigars Silkalns
3 months ago
16 changed files with 1643 additions and 870 deletions
Split View
Diff Options
-
+1 -0.gitignore
-
+66 -0CHANGELOG.md
-
+5 -5CLAUDE.md
-
+32 -21README.md
-
+862 -816package-lock.json
-
+5 -2package.json
-
+645 -0src/assets/scripts/app 2.js
-
+4 -2src/assets/scripts/utils/theme.js
-
+5 -5src/assets/scripts/vectorMaps/index.js
-
+0 -1src/assets/scripts/vectorMaps/jquery-jvectormap-world-mill.js
-
+5 -5webpack/config.js
-
+1 -1webpack/manifest.js
-
+5 -5webpack/plugins/copyPlugin.js
-
+1 -1webpack/plugins/htmlPlugin.js
-
+1 -1webpack/rules/css.js
-
+5 -5webpack/rules/sass.js
+ 1
- 0
.gitignore
View File
+ 66
- 0
CHANGELOG.md
View File
+ 5
- 5
CLAUDE.md
View File
+ 32
- 21
README.md
View File
+ 862
- 816
package-lock.json
File diff suppressed because it is too large
View File
+ 5
- 2
package.json
View File
+ 645
- 0
src/assets/scripts/app 2.js
View File
| @ -0,0 +1,645 @@ | |||
| /** | |||
| * Modern Adminator Application | |||
| * Main application entry point with enhanced mobile support | |||
| */ | |||
| // Note: Bootstrap 5 CSS is still available via SCSS imports | |||
| // Bootstrap JS components removed to eliminate jQuery dependency | |||
| import { DOM } from './utils/dom'; | |||
| import DateUtils from './utils/date'; | |||
| import { ThemeManager } from './utils/theme'; | |||
| import { Sidebar } from './components/Sidebar'; | |||
| import { ChartComponent } from './components/Chart'; | |||
| // Import styles | |||
| import '../styles/index.scss'; | |||
| // Import other modules that don't need immediate modernization | |||
| import './fullcalendar'; | |||
| import './masonry'; | |||
| import './popover'; | |||
| import './scrollbar'; | |||
| import './search'; | |||
| import './skycons'; | |||
| import './vectorMaps'; | |||
| import './chat'; | |||
| import './email'; | |||
| import './googleMaps'; | |||
| import './ui'; | |||
| class AdminatorApp { | |||
| constructor() { | |||
| this.components = new Map(); | |||
| this.isInitialized = false; | |||
| this.themeManager = ThemeManager; | |||
| // Initialize when DOM is ready | |||
| DOM.ready(() => { | |||
| this.init(); | |||
| }); | |||
| } | |||
| /** | |||
| * Initialize the application | |||
| */ | |||
| init() { | |||
| if (this.isInitialized) return; | |||
| try { | |||
| // Initialize core components | |||
| this.initSidebar(); | |||
| this.initCharts(); | |||
| this.initDataTables(); | |||
| this.initDatePickers(); | |||
| this.initTheme(); | |||
| this.initMobileEnhancements(); | |||
| // Setup global event listeners | |||
| this.setupGlobalEvents(); | |||
| this.isInitialized = true; | |||
| // Dispatch custom event for other scripts | |||
| window.dispatchEvent(new CustomEvent('adminator:ready', { | |||
| detail: { app: this }, | |||
| })); | |||
| } catch { | |||
| // Error initializing Adminator App | |||
| } | |||
| } | |||
| /** | |||
| * Initialize Sidebar component | |||
| */ | |||
| initSidebar() { | |||
| if (DOM.exists('.sidebar')) { | |||
| const sidebar = new Sidebar(); | |||
| this.components.set('sidebar', sidebar); | |||
| } | |||
| } | |||
| /** | |||
| * Initialize Chart components | |||
| */ | |||
| initCharts() { | |||
| // Check if we have any chart elements | |||
| const hasCharts = DOM.exists('#sparklinedash') || | |||
| DOM.exists('.sparkline') || | |||
| DOM.exists('.sparkbar') || | |||
| DOM.exists('.sparktri') || | |||
| DOM.exists('.sparkdisc') || | |||
| DOM.exists('.sparkbull') || | |||
| DOM.exists('.sparkbox') || | |||
| DOM.exists('.easy-pie-chart') || | |||
| DOM.exists('#line-chart') || | |||
| DOM.exists('#area-chart') || | |||
| DOM.exists('#scatter-chart') || | |||
| DOM.exists('#bar-chart'); | |||
| if (hasCharts) { | |||
| const charts = new ChartComponent(); | |||
| this.components.set('charts', charts); | |||
| } | |||
| } | |||
| /** | |||
| * Initialize DataTables (modern approach) | |||
| */ | |||
| initDataTables() { | |||
| const dataTableElement = DOM.select('#dataTable'); | |||
| if (dataTableElement) { | |||
| // For now, use a lightweight approach | |||
| // In future iterations, we can replace with a modern table library | |||
| this.initBasicDataTable(dataTableElement); | |||
| } | |||
| } | |||
| /** | |||
| * Basic DataTable implementation (placeholder for full modernization) | |||
| */ | |||
| initBasicDataTable(table) { | |||
| // Add basic sorting functionality | |||
| const headers = DOM.selectAll('th', table); | |||
| headers.forEach(header => { | |||
| if (header.textContent.trim()) { | |||
| header.style.cursor = 'pointer'; | |||
| header.style.userSelect = 'none'; | |||
| DOM.on(header, 'click', () => { | |||
| // Basic sort functionality can be added here | |||
| // For now, we'll keep the existing DataTables library | |||
| }); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Initialize Date Pickers (modern approach with Day.js) | |||
| */ | |||
| initDatePickers() { | |||
| const startDatePickers = DOM.selectAll('.start-date'); | |||
| const endDatePickers = DOM.selectAll('.end-date'); | |||
| [...startDatePickers, ...endDatePickers].forEach(picker => { | |||
| // Convert to HTML5 date input for better UX | |||
| if (picker.type !== 'date') { | |||
| picker.type = 'date'; | |||
| picker.classList.add('form-control'); | |||
| // Clear the placeholder since HTML5 date inputs don't need it | |||
| picker.removeAttribute('placeholder'); | |||
| // Set default value to today if no value is set | |||
| if (!picker.value) { | |||
| picker.value = DateUtils.form.toInputValue(DateUtils.now()); | |||
| } | |||
| // Make sure the input is clickable and focusable | |||
| picker.style.pointerEvents = 'auto'; | |||
| picker.style.cursor = 'pointer'; | |||
| // Ensure proper styling for HTML5 date input | |||
| picker.style.minHeight = '38px'; | |||
| picker.style.lineHeight = '1.5'; | |||
| // Date picker converted to HTML5 with Day.js support | |||
| } | |||
| }); | |||
| // Add enhanced interaction - handle both field and icon clicks | |||
| [...startDatePickers, ...endDatePickers].forEach(picker => { | |||
| // Handle direct field clicks | |||
| DOM.on(picker, 'click', (event) => { | |||
| event.target.focus(); | |||
| // For mobile browsers, trigger the date picker | |||
| if (event.target.showPicker && typeof event.target.showPicker === 'function') { | |||
| try { | |||
| event.target.showPicker(); | |||
| } catch { | |||
| // Fallback if showPicker is not supported | |||
| } | |||
| } | |||
| }); | |||
| // Handle calendar icon clicks (find the icon in the input group) | |||
| const inputGroup = picker.closest('.input-group'); | |||
| if (inputGroup) { | |||
| const calendarIcon = inputGroup.querySelector('.input-group-text i.ti-calendar'); | |||
| if (calendarIcon) { | |||
| DOM.on(calendarIcon, 'click', (event) => { | |||
| event.preventDefault(); | |||
| event.stopPropagation(); | |||
| picker.focus(); | |||
| if (picker.showPicker && typeof picker.showPicker === 'function') { | |||
| try { | |||
| picker.showPicker(); | |||
| } catch { | |||
| // Date picker opened via icon click | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Initialize theme system with toggle | |||
| */ | |||
| initTheme() { | |||
| // Initializing theme system | |||
| // Initialize theme system first | |||
| this.themeManager.init(); | |||
| // Inject theme toggle if missing - with retry mechanism | |||
| setTimeout(() => { | |||
| const navRight = DOM.select('.nav-right'); | |||
| // Check for nav-right and theme-toggle existence | |||
| if (navRight && !DOM.exists('#theme-toggle')) { | |||
| const li = document.createElement('li'); | |||
| li.className = 'theme-toggle d-flex ai-c'; | |||
| li.innerHTML = ` | |||
| <div class="form-check form-switch d-flex ai-c" style="margin: 0; padding: 0;"> | |||
| <label class="form-check-label me-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-right: 8px;"> | |||
| <i class="ti-sun" style="margin-right: 4px;"></i><span class="theme-label">Light</span> | |||
| </label> | |||
| <input class="form-check-input" type="checkbox" id="theme-toggle" style="margin: 0;"> | |||
| <label class="form-check-label ms-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-left: 8px;"> | |||
| <span class="theme-label">Dark</span><i class="ti-moon" style="margin-left: 4px;"></i> | |||
| </label> | |||
| </div> | |||
| `; | |||
| // Insert before user dropdown (last item) - safer approach | |||
| const lastItem = navRight.querySelector('li:last-child'); | |||
| if (lastItem && lastItem.parentNode === navRight) { | |||
| navRight.insertBefore(li, lastItem); | |||
| // Theme toggle inserted before last item | |||
| } else { | |||
| navRight.appendChild(li); | |||
| // Theme toggle appended to nav-right (safer approach) | |||
| } | |||
| // Add toggle functionality | |||
| const toggle = DOM.select('#theme-toggle'); | |||
| if (toggle) { | |||
| // Set initial state | |||
| const currentTheme = this.themeManager.current(); | |||
| toggle.checked = currentTheme === 'dark'; | |||
| DOM.on(toggle, 'change', () => { | |||
| this.themeManager.apply(toggle.checked ? 'dark' : 'light'); | |||
| }); | |||
| // Listen for theme changes from other sources | |||
| window.addEventListener('adminator:themeChanged', (event) => { | |||
| toggle.checked = event.detail.theme === 'dark'; | |||
| // Update charts when theme changes | |||
| const charts = this.components.get('charts'); | |||
| if (charts) charts.redrawCharts(); | |||
| }); | |||
| } | |||
| } else { | |||
| // No nav-right found or theme-toggle already exists | |||
| } | |||
| }, 100); // Wait 100ms for DOM to be fully ready | |||
| } | |||
| /** | |||
| * Initialize mobile-specific enhancements | |||
| */ | |||
| initMobileEnhancements() { | |||
| // Initializing mobile enhancements | |||
| this.enhanceMobileDropdowns(); | |||
| this.enhanceMobileSearch(); | |||
| // Prevent horizontal scroll on mobile | |||
| if (this.isMobile()) { | |||
| document.body.style.overflowX = 'hidden'; | |||
| } | |||
| } | |||
| /** | |||
| * Setup global event listeners | |||
| */ | |||
| setupGlobalEvents() { | |||
| // Global click handler | |||
| DOM.on(document, 'click', (event) => this.handleGlobalClick(event)); | |||
| // Window resize handler with debouncing | |||
| let resizeTimeout; | |||
| DOM.on(window, 'resize', () => { | |||
| clearTimeout(resizeTimeout); | |||
| resizeTimeout = setTimeout(() => this.handleResize(), 250); | |||
| }); | |||
| // Global event listeners set up | |||
| } | |||
| /** | |||
| * Handle window resize events | |||
| */ | |||
| handleResize() { | |||
| // Window resized, updating mobile features | |||
| // Close all mobile-specific overlays when switching to desktop | |||
| if (!this.isMobile()) { | |||
| document.body.style.overflow = ''; | |||
| document.body.style.overflowX = ''; | |||
| // Close dropdowns | |||
| const dropdowns = DOM.selectAll('.nav-right .dropdown'); | |||
| dropdowns.forEach(dropdown => { | |||
| dropdown.classList.remove('show'); | |||
| const menu = dropdown.querySelector('.dropdown-menu'); | |||
| if (menu) menu.classList.remove('show'); | |||
| }); | |||
| // Close search | |||
| const searchBox = DOM.select('.search-box'); | |||
| const searchInput = DOM.select('.search-input'); | |||
| if (searchBox && searchInput) { | |||
| searchBox.classList.remove('active'); | |||
| searchInput.classList.remove('active'); | |||
| } | |||
| } else { | |||
| // Re-enable mobile overflow protection | |||
| document.body.style.overflowX = 'hidden'; | |||
| } | |||
| // Re-apply mobile enhancements | |||
| this.enhanceMobileDropdowns(); | |||
| this.enhanceMobileSearch(); | |||
| } | |||
| /** | |||
| * Handle global click events | |||
| */ | |||
| handleGlobalClick(event) { | |||
| // Close mobile dropdowns when clicking outside | |||
| if (!event.target.closest('.dropdown')) { | |||
| const dropdowns = DOM.selectAll('.nav-right .dropdown'); | |||
| dropdowns.forEach(dropdown => { | |||
| dropdown.classList.remove('show'); | |||
| const menu = dropdown.querySelector('.dropdown-menu'); | |||
| if (menu) menu.classList.remove('show'); | |||
| }); | |||
| document.body.style.overflow = ''; | |||
| } | |||
| // Close search when clicking outside | |||
| if (!event.target.closest('.search-box') && !event.target.closest('.search-input')) { | |||
| const searchBox = DOM.select('.search-box'); | |||
| const searchInput = DOM.select('.search-input'); | |||
| if (searchBox && searchInput) { | |||
| searchBox.classList.remove('active'); | |||
| searchInput.classList.remove('active'); | |||
| document.body.style.overflow = ''; | |||
| document.body.classList.remove('mobile-menu-open'); | |||
| } | |||
| } | |||
| } | |||
| /** | |||
| * Check if we're on a mobile device | |||
| */ | |||
| isMobile() { | |||
| return window.innerWidth <= 768; | |||
| } | |||
| /** | |||
| * Enhanced mobile dropdown handling with improved email layout | |||
| */ | |||
| enhanceMobileDropdowns() { | |||
| if (!this.isMobile()) return; | |||
| const dropdowns = DOM.selectAll('.nav-right .dropdown'); | |||
| dropdowns.forEach(dropdown => { | |||
| const toggle = dropdown.querySelector('.dropdown-toggle'); | |||
| const menu = dropdown.querySelector('.dropdown-menu'); | |||
| if (toggle && menu) { | |||
| // Remove existing listeners to prevent duplicates | |||
| const newToggle = toggle.cloneNode(true); | |||
| toggle.replaceWith(newToggle); | |||
| // Add click functionality for mobile dropdowns | |||
| DOM.on(newToggle, 'click', (e) => { | |||
| e.preventDefault(); | |||
| e.stopPropagation(); | |||
| // Close search if open | |||
| const searchBox = DOM.select('.search-box'); | |||
| const searchInput = DOM.select('.search-input'); | |||
| if (searchBox && searchInput) { | |||
| searchBox.classList.remove('active'); | |||
| searchInput.classList.remove('active'); | |||
| } | |||
| // Close other dropdowns first | |||
| dropdowns.forEach(otherDropdown => { | |||
| if (otherDropdown !== dropdown) { | |||
| otherDropdown.classList.remove('show'); | |||
| const otherMenu = otherDropdown.querySelector('.dropdown-menu'); | |||
| if (otherMenu) otherMenu.classList.remove('show'); | |||
| } | |||
| }); | |||
| // Toggle current dropdown | |||
| const isOpen = dropdown.classList.contains('show'); | |||
| if (isOpen) { | |||
| dropdown.classList.remove('show'); | |||
| menu.classList.remove('show'); | |||
| document.body.style.overflow = ''; | |||
| document.body.classList.remove('mobile-menu-open'); | |||
| } else { | |||
| dropdown.classList.add('show'); | |||
| menu.classList.add('show'); | |||
| document.body.style.overflow = 'hidden'; | |||
| document.body.classList.add('mobile-menu-open'); | |||
| } | |||
| }); | |||
| // Enhanced mobile close button functionality | |||
| DOM.on(menu, 'click', (e) => { | |||
| // Check if clicked on the close area (::before pseudo-element area) | |||
| const rect = menu.getBoundingClientRect(); | |||
| const clickY = e.clientY - rect.top; | |||
| // If clicked in top 50px (close button area) | |||
| if (clickY <= 50) { | |||
| dropdown.classList.remove('show'); | |||
| menu.classList.remove('show'); | |||
| document.body.style.overflow = ''; | |||
| document.body.classList.remove('mobile-menu-open'); | |||
| e.preventDefault(); | |||
| e.stopPropagation(); | |||
| } | |||
| }); | |||
| } | |||
| }); | |||
| // Close dropdowns on escape key | |||
| DOM.on(document, 'keydown', (e) => { | |||
| if (e.key === 'Escape') { | |||
| dropdowns.forEach(dropdown => { | |||
| dropdown.classList.remove('show'); | |||
| const menu = dropdown.querySelector('.dropdown-menu'); | |||
| if (menu) menu.classList.remove('show'); | |||
| }); | |||
| document.body.style.overflow = ''; | |||
| document.body.classList.remove('mobile-menu-open'); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Enhanced mobile search handling - Full-width search bar | |||
| */ | |||
| enhanceMobileSearch() { | |||
| const searchBox = DOM.select('.search-box'); | |||
| const searchInput = DOM.select('.search-input'); | |||
| if (searchBox && searchInput) { | |||
| const searchToggle = searchBox.querySelector('a'); | |||
| const searchField = searchInput.querySelector('input'); | |||
| if (searchToggle && searchField) { | |||
| // Setting up full-width search functionality | |||
| // Remove existing listeners to prevent duplication | |||
| const newSearchToggle = searchToggle.cloneNode(true); | |||
| searchToggle.replaceWith(newSearchToggle); | |||
| DOM.on(newSearchToggle, 'click', (e) => { | |||
| e.preventDefault(); | |||
| e.stopPropagation(); | |||
| // Full-width search toggle clicked | |||
| // Close any open dropdowns first | |||
| const dropdowns = DOM.selectAll('.nav-right .dropdown'); | |||
| dropdowns.forEach(dropdown => { | |||
| dropdown.classList.remove('show'); | |||
| const menu = dropdown.querySelector('.dropdown-menu'); | |||
| if (menu) menu.classList.remove('show'); | |||
| }); | |||
| // Toggle search state | |||
| const isActive = searchInput.classList.contains('active'); | |||
| const searchIcon = newSearchToggle.querySelector('i'); | |||
| if (isActive) { | |||
| // Close search | |||
| searchInput.classList.remove('active'); | |||
| document.body.classList.remove('search-open'); | |||
| // Change icon back to search | |||
| if (searchIcon) { | |||
| searchIcon.className = 'ti-search'; | |||
| } | |||
| // Clear input | |||
| if (searchField) { | |||
| searchField.value = ''; | |||
| searchField.blur(); | |||
| } | |||
| // Full-width search closed | |||
| } else { | |||
| // Open search | |||
| searchInput.classList.add('active'); | |||
| document.body.classList.add('search-open'); | |||
| // Change icon to close | |||
| if (searchIcon) { | |||
| searchIcon.className = 'ti-close'; | |||
| } | |||
| // Focus the input after a short delay | |||
| setTimeout(() => { | |||
| if (searchField) { | |||
| searchField.focus(); | |||
| // Search field focused | |||
| } | |||
| }, 100); | |||
| // Full-width search opened | |||
| } | |||
| }); | |||
| // Close search on escape | |||
| DOM.on(document, 'keydown', (e) => { | |||
| if (e.key === 'Escape' && searchInput.classList.contains('active')) { | |||
| searchInput.classList.remove('active'); | |||
| document.body.classList.remove('search-open'); | |||
| // Reset icon | |||
| const searchIcon = newSearchToggle.querySelector('i'); | |||
| if (searchIcon) { | |||
| searchIcon.className = 'ti-search'; | |||
| } | |||
| // Clear input | |||
| if (searchField) { | |||
| searchField.value = ''; | |||
| searchField.blur(); | |||
| } | |||
| // Full-width search closed via escape | |||
| } | |||
| }); | |||
| // Handle search input | |||
| DOM.on(searchField, 'keypress', (e) => { | |||
| if (e.key === 'Enter') { | |||
| e.preventDefault(); | |||
| const query = searchField.value.trim(); | |||
| if (query) { | |||
| // Search query submitted | |||
| // Implement your search logic here | |||
| // For demo, close search after "searching" | |||
| searchInput.classList.remove('active'); | |||
| document.body.classList.remove('search-open'); | |||
| const searchIcon = newSearchToggle.querySelector('i'); | |||
| if (searchIcon) { | |||
| searchIcon.className = 'ti-search'; | |||
| } | |||
| searchField.value = ''; | |||
| searchField.blur(); | |||
| } | |||
| } | |||
| }); | |||
| // Full-width search functionality initialized | |||
| } | |||
| } | |||
| } | |||
| /** | |||
| * Get a component by name | |||
| */ | |||
| getComponent(name) { | |||
| return this.components.get(name); | |||
| } | |||
| /** | |||
| * Check if app is ready | |||
| */ | |||
| isReady() { | |||
| return this.isInitialized; | |||
| } | |||
| /** | |||
| * Destroy the application | |||
| */ | |||
| destroy() { | |||
| // Destroying Adminator App | |||
| // Destroy all components | |||
| this.components.forEach((component) => { | |||
| if (typeof component.destroy === 'function') { | |||
| component.destroy(); | |||
| } | |||
| // Component destroyed | |||
| }); | |||
| this.components.clear(); | |||
| this.isInitialized = false; | |||
| } | |||
| /** | |||
| * Refresh/reinitialize the application | |||
| */ | |||
| refresh() { | |||
| // Refreshing Adminator App | |||
| if (this.isInitialized) { | |||
| this.destroy(); | |||
| } | |||
| setTimeout(() => { | |||
| this.init(); | |||
| }, 100); | |||
| } | |||
| } | |||
| // Initialize the application | |||
| const app = new AdminatorApp(); | |||
| // Make app globally available for debugging | |||
| window.AdminatorApp = app; | |||
| // Export for module usage | |||
| export default app; | |||