Browse Source
Merge pull request #316 from puikinsh/feature/dependency-updates-phase-3
Updated to 2.5pull/317/head v2.5.0
Aigars Silkalns
6 months ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 3853 additions and 3174 deletions
Split View
Diff Options
-
+0 -56.eslintrc.json
-
+89 -0CHANGELOG.md
-
+159 -65README.md
-
+89 -0eslint.config.mjs
-
+1145 -2957package-lock.json
-
+36 -35package.json
-
+259 -0src/assets/scripts/app.js
-
+1430 -0src/assets/scripts/components/Chart.js
-
+205 -0src/assets/scripts/components/Sidebar.js
-
+16 -16src/assets/scripts/index.js
-
+349 -0src/assets/scripts/utils/dom.js
-
+1 -1src/basic-table.html
-
+1 -1src/blank.html
-
+1 -1src/buttons.html
-
+1 -1src/calendar.html
-
+41 -1src/charts.html
-
+1 -1src/chat.html
-
+1 -1src/compose.html
-
+1 -1src/datatable.html
-
+2 -2src/email.html
-
+1 -1src/forms.html
-
+1 -1src/google-maps.html
-
+11 -11src/index.html
-
+1 -1src/test.html
-
+1 -1src/ui.html
-
+1 -1src/vector-maps.html
-
+10 -8webpack/config.js
-
+0 -11webpack/devServer.js
+ 0
- 56
.eslintrc.json
View File
| @ -1,56 +0,0 @@ | |||
| { | |||
| "extends": "airbnb-base", | |||
| "parser": "@babel/eslint-parser", | |||
| "settings": { | |||
| "ecmascript": 7 | |||
| }, | |||
| "parserOptions": { | |||
| "ecmaVersion": 2018, | |||
| "ecmaFeatures": { | |||
| "modules": true, | |||
| "destructuring": true, | |||
| "classes": true, | |||
| "forOf": true, | |||
| "blockBindings": true, | |||
| "arrowFunctions": true | |||
| } | |||
| }, | |||
| "env": { | |||
| "browser": true | |||
| }, | |||
| "rules": { | |||
| "arrow-body-style": 0, | |||
| "prefer-arrow-callback": 0, | |||
| "arrow-parens": 0, | |||
| "no-param-reassign": 0, | |||
| "no-new": 0, | |||
| "consistent-return": 0, | |||
| "key-spacing": 0, | |||
| "no-multi-spaces": 0, | |||
| "no-underscore-dangle": 0, | |||
| "one-var": 0, | |||
| "global-require": 0, | |||
| "class-methods-use-this": 0, | |||
| "comma-dangle": ["error", { | |||
| "arrays": "always-multiline", | |||
| "objects": "always-multiline", | |||
| "imports": "always-multiline", | |||
| "exports": "always-multiline", | |||
| "functions": "never" | |||
| }], | |||
| "func-names": 0, | |||
| "function-paren-newline": 0, | |||
| "indent": 2, | |||
| "new-cap": 0, | |||
| "no-plusplus": 0, | |||
| "no-return-assign": 0, | |||
| "quote-props": 0, | |||
| "template-curly-spacing": 0, | |||
| "no-unused-expressions": 0, | |||
| "import/extensions": 0, | |||
| "import/no-extraneous-dependencies": 0, | |||
| "import/no-unresolved": 0, | |||
| "import/prefer-default-export": 0, | |||
| "linebreak-style": ["error", "windows"] | |||
| } | |||
| } | |||
+ 89
- 0
CHANGELOG.md
View File
+ 159
- 65
README.md
View File
+ 89
- 0
eslint.config.mjs
View File
| @ -0,0 +1,89 @@ | |||
| import globals from "globals"; | |||
| import babelParser from "@babel/eslint-parser"; | |||
| import js from "@eslint/js"; | |||
| export default [ | |||
| { | |||
| files: ["**/*.js", "**/*.mjs", "**/*.jsx"], | |||
| languageOptions: { | |||
| globals: { | |||
| ...globals.browser, | |||
| ...globals.node, | |||
| }, | |||
| parser: babelParser, | |||
| ecmaVersion: 2018, | |||
| sourceType: "module", | |||
| parserOptions: { | |||
| requireConfigFile: false, | |||
| babelOptions: { | |||
| babelrc: false, | |||
| configFile: false, | |||
| presets: ["@babel/preset-env"], | |||
| }, | |||
| ecmaFeatures: { | |||
| modules: true, | |||
| destructuring: true, | |||
| classes: true, | |||
| forOf: true, | |||
| blockBindings: true, | |||
| arrowFunctions: true, | |||
| }, | |||
| }, | |||
| }, | |||
| settings: { | |||
| ecmascript: 7, | |||
| }, | |||
| rules: { | |||
| // Start with ESLint recommended rules | |||
| ...js.configs.recommended.rules, | |||
| // Apply our custom overrides (keeping original project preferences) | |||
| "arrow-body-style": 0, | |||
| "prefer-arrow-callback": 0, | |||
| "arrow-parens": 0, | |||
| "no-param-reassign": 0, | |||
| "no-new": 0, | |||
| "consistent-return": 0, | |||
| "key-spacing": 0, | |||
| "no-multi-spaces": 0, | |||
| "no-underscore-dangle": 0, | |||
| "one-var": 0, | |||
| "global-require": 0, | |||
| "class-methods-use-this": 0, | |||
| "comma-dangle": ["error", { | |||
| arrays: "always-multiline", | |||
| objects: "always-multiline", | |||
| imports: "always-multiline", | |||
| exports: "always-multiline", | |||
| functions: "never", | |||
| }], | |||
| "func-names": 0, | |||
| "function-paren-newline": 0, | |||
| "indent": ["error", 2], | |||
| "new-cap": 0, | |||
| "no-plusplus": 0, | |||
| "no-return-assign": 0, | |||
| "quote-props": 0, | |||
| "template-curly-spacing": 0, | |||
| "no-unused-expressions": 0, | |||
| // Import rules (basic ones that don't require the import plugin) | |||
| "no-duplicate-imports": "error", | |||
| // Line ending for Unix/macOS (updated for current platform) | |||
| "linebreak-style": ["error", "unix"], | |||
| // Basic ES6+ rules that replace some airbnb functionality | |||
| "prefer-const": "warn", | |||
| "no-var": "error", | |||
| "prefer-template": "warn", | |||
| "object-shorthand": "warn", | |||
| }, | |||
| }, | |||
| { | |||
| // Global ignores | |||
| ignores: ["dist/**/*", "node_modules/**/*", "*.min.js"], | |||
| }, | |||
| ]; | |||
+ 1145
- 2957
package-lock.json
File diff suppressed because it is too large
View File
+ 36
- 35
package.json
View File
+ 259
- 0
src/assets/scripts/app.js
View File
| @ -0,0 +1,259 @@ | |||
| /** | |||
| * Modern Adminator Application | |||
| * Main application entry point - replaces jQuery-based initialization | |||
| */ | |||
| import bootstrap from 'bootstrap'; | |||
| import DOM from './utils/dom'; | |||
| 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 './utils'; | |||
| class AdminatorApp { | |||
| constructor() { | |||
| this.components = new Map(); | |||
| this.isInitialized = false; | |||
| // Initialize when DOM is ready | |||
| DOM.ready(() => { | |||
| this.init(); | |||
| }); | |||
| } | |||
| /** | |||
| * Initialize the application | |||
| */ | |||
| init() { | |||
| if (this.isInitialized) return; | |||
| console.log('🚀 Initializing Adminator App (Modern Version)'); | |||
| try { | |||
| // Initialize core components | |||
| this.initSidebar(); | |||
| this.initCharts(); | |||
| this.initDataTables(); | |||
| this.initDatePickers(); | |||
| // Setup global event listeners | |||
| this.setupGlobalEvents(); | |||
| this.isInitialized = true; | |||
| console.log('✅ Adminator App initialized successfully'); | |||
| // Dispatch custom event for other scripts | |||
| window.dispatchEvent(new CustomEvent('adminator:ready', { | |||
| detail: { app: this } | |||
| })); | |||
| } catch (error) { | |||
| console.error('❌ Error initializing Adminator App:', error); | |||
| } | |||
| } | |||
| /** | |||
| * Initialize Sidebar component | |||
| */ | |||
| initSidebar() { | |||
| if (DOM.exists('.sidebar')) { | |||
| const sidebar = new Sidebar(); | |||
| this.components.set('sidebar', sidebar); | |||
| console.log('📁 Sidebar component initialized'); | |||
| } | |||
| } | |||
| /** | |||
| * 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); | |||
| console.log('📊 Chart components initialized'); | |||
| } | |||
| } | |||
| /** | |||
| * 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); | |||
| console.log('📋 DataTable initialized'); | |||
| } | |||
| } | |||
| /** | |||
| * 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', () => { | |||
| console.log('Sorting by:', header.textContent); | |||
| // Basic sort functionality can be added here | |||
| // For now, we'll keep the existing DataTables library | |||
| }); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Initialize Date Pickers (modern approach) | |||
| */ | |||
| 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'); | |||
| console.log('📅 Date picker converted to HTML5'); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Setup global event listeners | |||
| */ | |||
| setupGlobalEvents() { | |||
| // Global resize handler | |||
| let resizeTimer; | |||
| window.addEventListener('resize', () => { | |||
| clearTimeout(resizeTimer); | |||
| resizeTimer = setTimeout(() => { | |||
| this.handleResize(); | |||
| }, 150); | |||
| }); | |||
| // Global click handler for dynamic content | |||
| document.addEventListener('click', (e) => { | |||
| this.handleGlobalClick(e); | |||
| }); | |||
| // Custom event for masonry recalculation | |||
| window.EVENT = new Event('resize'); | |||
| } | |||
| /** | |||
| * Handle window resize | |||
| */ | |||
| handleResize() { | |||
| // Notify charts to resize | |||
| const charts = this.components.get('charts'); | |||
| if (charts) { | |||
| charts.redrawCharts(); | |||
| } | |||
| // Dispatch resize event for other components | |||
| window.dispatchEvent(new CustomEvent('adminator:resize')); | |||
| } | |||
| /** | |||
| * Handle global clicks | |||
| */ | |||
| handleGlobalClick(event) { | |||
| // Handle any global click events here | |||
| // This can be used for analytics, debugging, etc. | |||
| } | |||
| /** | |||
| * Get component instance | |||
| */ | |||
| getComponent(name) { | |||
| return this.components.get(name); | |||
| } | |||
| /** | |||
| * Check if app is initialized | |||
| */ | |||
| isReady() { | |||
| return this.isInitialized; | |||
| } | |||
| /** | |||
| * Destroy the application | |||
| */ | |||
| destroy() { | |||
| // Destroy all components | |||
| this.components.forEach((component, name) => { | |||
| if (typeof component.destroy === 'function') { | |||
| component.destroy(); | |||
| } | |||
| }); | |||
| this.components.clear(); | |||
| this.isInitialized = false; | |||
| console.log('🧹 Adminator App destroyed'); | |||
| } | |||
| /** | |||
| * Refresh all components (useful for dynamic content) | |||
| */ | |||
| refresh() { | |||
| console.log('🔄 Refreshing Adminator App'); | |||
| // Refresh sidebar active links | |||
| const sidebar = this.components.get('sidebar'); | |||
| if (sidebar) { | |||
| sidebar.refreshActiveLink(); | |||
| } | |||
| // Reinitialize charts if needed | |||
| const charts = this.components.get('charts'); | |||
| if (charts) { | |||
| charts.redrawCharts(); | |||
| } | |||
| } | |||
| } | |||
| // Create global app instance | |||
| const app = new AdminatorApp(); | |||
| // Export for external access | |||
| window.AdminatorApp = app; | |||
| export default app; | |||
+ 1430
- 0
src/assets/scripts/components/Chart.js
File diff suppressed because it is too large
View File
+ 205
- 0
src/assets/scripts/components/Sidebar.js
View File
| @ -0,0 +1,205 @@ | |||
| /** | |||
| * Modern Sidebar Component | |||
| * Replaces jQuery-based sidebar functionality with vanilla JavaScript | |||
| */ | |||
| class Sidebar { | |||
| constructor() { | |||
| this.sidebar = document.querySelector('.sidebar'); | |||
| this.sidebarMenu = document.querySelector('.sidebar .sidebar-menu'); | |||
| this.sidebarToggleLinks = document.querySelectorAll('.sidebar-toggle a'); | |||
| this.sidebarToggleById = document.querySelector('#sidebar-toggle'); | |||
| this.app = document.querySelector('.app'); | |||
| this.init(); | |||
| } | |||
| init() { | |||
| if (!this.sidebar || !this.sidebarMenu) { | |||
| console.warn('Sidebar elements not found'); | |||
| return; | |||
| } | |||
| this.setupMenuToggle(); | |||
| this.setupSidebarToggle(); | |||
| this.setActiveLink(); | |||
| } | |||
| /** | |||
| * Setup dropdown menu functionality | |||
| */ | |||
| setupMenuToggle() { | |||
| const menuLinks = this.sidebarMenu.querySelectorAll('li a'); | |||
| menuLinks.forEach(link => { | |||
| link.addEventListener('click', (e) => { | |||
| const listItem = link.parentElement; | |||
| const dropdownMenu = listItem.querySelector('.dropdown-menu'); | |||
| if (!dropdownMenu) return; | |||
| e.preventDefault(); | |||
| if (listItem.classList.contains('open')) { | |||
| this.closeDropdown(listItem, dropdownMenu); | |||
| } else { | |||
| this.closeAllDropdowns(); | |||
| this.openDropdown(listItem, dropdownMenu); | |||
| } | |||
| }); | |||
| }); | |||
| } | |||
| /** | |||
| * Open dropdown with smooth animation | |||
| */ | |||
| openDropdown(listItem, dropdownMenu) { | |||
| listItem.classList.add('open'); | |||
| dropdownMenu.style.display = 'block'; | |||
| dropdownMenu.style.height = '0px'; | |||
| dropdownMenu.style.overflow = 'hidden'; | |||
| // Get the natural height | |||
| const height = dropdownMenu.scrollHeight; | |||
| // Animate to full height | |||
| dropdownMenu.animate([ | |||
| { height: '0px' }, | |||
| { height: `${height}px` } | |||
| ], { | |||
| duration: 200, | |||
| easing: 'ease-out' | |||
| }).onfinish = () => { | |||
| dropdownMenu.style.height = 'auto'; | |||
| dropdownMenu.style.overflow = 'visible'; | |||
| }; | |||
| } | |||
| /** | |||
| * Close dropdown with smooth animation | |||
| */ | |||
| closeDropdown(listItem, dropdownMenu) { | |||
| const height = dropdownMenu.scrollHeight; | |||
| dropdownMenu.style.height = `${height}px`; | |||
| dropdownMenu.style.overflow = 'hidden'; | |||
| dropdownMenu.animate([ | |||
| { height: `${height}px` }, | |||
| { height: '0px' } | |||
| ], { | |||
| duration: 200, | |||
| easing: 'ease-in' | |||
| }).onfinish = () => { | |||
| listItem.classList.remove('open'); | |||
| dropdownMenu.style.display = 'none'; | |||
| dropdownMenu.style.height = ''; | |||
| dropdownMenu.style.overflow = ''; | |||
| }; | |||
| } | |||
| /** | |||
| * Close all open dropdowns | |||
| */ | |||
| closeAllDropdowns() { | |||
| const openItems = this.sidebarMenu.querySelectorAll('li.open'); | |||
| openItems.forEach(item => { | |||
| const dropdownMenu = item.querySelector('.dropdown-menu'); | |||
| if (dropdownMenu) { | |||
| this.closeDropdown(item, dropdownMenu); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Setup sidebar toggle functionality | |||
| */ | |||
| setupSidebarToggle() { | |||
| // Handle mobile sidebar toggle links (inside .sidebar-toggle divs) | |||
| this.sidebarToggleLinks.forEach(link => { | |||
| if (link && this.app) { | |||
| link.addEventListener('click', (e) => { | |||
| e.preventDefault(); | |||
| console.log('Mobile sidebar toggle clicked'); | |||
| this.toggleSidebar(); | |||
| }); | |||
| } | |||
| }); | |||
| // Handle the main topbar sidebar toggle | |||
| if (this.sidebarToggleById && this.app) { | |||
| this.sidebarToggleById.addEventListener('click', (e) => { | |||
| e.preventDefault(); | |||
| console.log('Main sidebar toggle clicked'); | |||
| this.toggleSidebar(); | |||
| }); | |||
| } | |||
| } | |||
| /** | |||
| * Toggle sidebar and handle resize events properly | |||
| */ | |||
| toggleSidebar() { | |||
| this.app.classList.toggle('is-collapsed'); | |||
| // Only trigger resize for masonry, but avoid chart redraw issues | |||
| setTimeout(() => { | |||
| // Dispatch a custom event instead of generic resize to avoid chart issues | |||
| window.dispatchEvent(new CustomEvent('sidebar:toggle', { | |||
| detail: { collapsed: this.app.classList.contains('is-collapsed') } | |||
| })); | |||
| // Still trigger resize for masonry but with a specific check | |||
| if (window.EVENT) { | |||
| window.dispatchEvent(window.EVENT); | |||
| } | |||
| }, 300); | |||
| } | |||
| /** | |||
| * Set active link based on current URL | |||
| */ | |||
| setActiveLink() { | |||
| const sidebarLinks = this.sidebar.querySelectorAll('.sidebar-link'); | |||
| const currentPath = window.location.pathname.substr(1); | |||
| sidebarLinks.forEach(link => { | |||
| link.classList.remove('active'); | |||
| const href = link.getAttribute('href'); | |||
| if (!href) return; | |||
| const pattern = href.startsWith('/') ? href.substr(1) : href; | |||
| if (pattern === currentPath) { | |||
| link.classList.add('active'); | |||
| } | |||
| }); | |||
| } | |||
| /** | |||
| * Public method to refresh active links (useful for SPA navigation) | |||
| */ | |||
| refreshActiveLink() { | |||
| this.setActiveLink(); | |||
| } | |||
| /** | |||
| * Public method to toggle sidebar programmatically | |||
| */ | |||
| toggle() { | |||
| if (this.app) { | |||
| this.app.classList.toggle('is-collapsed'); | |||
| } | |||
| } | |||
| /** | |||
| * Public method to check if sidebar is collapsed | |||
| */ | |||
| isCollapsed() { | |||
| return this.app ? this.app.classList.contains('is-collapsed') : false; | |||
| } | |||
| } | |||
| export default Sidebar; | |||
+ 16
- 16
src/assets/scripts/index.js
View File
| @ -1,19 +1,19 @@ | |||
| // import "@popperjs/core"; | |||
| import bootstrap from 'bootstrap'; | |||
| /** | |||
| * Adminator Admin Template | |||
| * Modern Entry Point - Phase 2 Modernization | |||
| */ | |||
| import '../styles/index.scss'; | |||
| import './fullcalendar'; | |||
| import './masonry'; | |||
| import './charts'; | |||
| import './popover'; | |||
| import './scrollbar'; | |||
| import './search'; | |||
| import './sidebar'; | |||
| import './skycons'; | |||
| import './vectorMaps'; | |||
| import './chat'; | |||
| // Import the modern application | |||
| import './app.js'; | |||
| // Legacy imports that haven't been modernized yet | |||
| // These will be gradually replaced in future iterations | |||
| import './datatable'; | |||
| import './datepicker'; | |||
| import './email'; | |||
| import './googleMaps'; | |||
| import './utils'; | |||
| // Note: The following have been modernized and are now handled by app.js: | |||
| // - sidebar (now Sidebar component) | |||
| // - charts (now ChartComponent using Chart.js instead of jQuery Sparkline) | |||
| // - Basic DOM utilities (now DOM utils) | |||
| console.log('📦 Adminator Template Loaded (Modern Version - Phase 2)'); | |||
+ 349
- 0
src/assets/scripts/utils/dom.js
View File
| @ -0,0 +1,349 @@ | |||
| /** | |||
| * DOM Utility Functions | |||
| * Provides jQuery-like functionality using vanilla JavaScript | |||
| */ | |||
| export const DOM = { | |||
| /** | |||
| * Select single element (replaces $('selector')) | |||
| */ | |||
| select: (selector, context = document) => { | |||
| return context.querySelector(selector); | |||
| }, | |||
| /** | |||
| * Select multiple elements (replaces $('selector')) | |||
| */ | |||
| selectAll: (selector, context = document) => { | |||
| return Array.from(context.querySelectorAll(selector)); | |||
| }, | |||
| /** | |||
| * Check if element exists | |||
| */ | |||
| exists: (selector) => { | |||
| return document.querySelector(selector) !== null; | |||
| }, | |||
| /** | |||
| * Add event listener (replaces $.on()) | |||
| */ | |||
| on: (element, event, handler, options = {}) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.addEventListener(event, handler, options); | |||
| } | |||
| }, | |||
| /** | |||
| * Remove event listener (replaces $.off()) | |||
| */ | |||
| off: (element, event, handler) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.removeEventListener(event, handler); | |||
| } | |||
| }, | |||
| /** | |||
| * Add class (replaces $.addClass()) | |||
| */ | |||
| addClass: (element, className) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.classList.add(className); | |||
| } | |||
| }, | |||
| /** | |||
| * Remove class (replaces $.removeClass()) | |||
| */ | |||
| removeClass: (element, className) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.classList.remove(className); | |||
| } | |||
| }, | |||
| /** | |||
| * Toggle class (replaces $.toggleClass()) | |||
| */ | |||
| toggleClass: (element, className) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.classList.toggle(className); | |||
| } | |||
| }, | |||
| /** | |||
| * Check if element has class (replaces $.hasClass()) | |||
| */ | |||
| hasClass: (element, className) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| return element ? element.classList.contains(className) : false; | |||
| }, | |||
| /** | |||
| * Get/Set attribute (replaces $.attr()) | |||
| */ | |||
| attr: (element, name, value) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return null; | |||
| if (value === undefined) { | |||
| return element.getAttribute(name); | |||
| } else { | |||
| element.setAttribute(name, value); | |||
| return element; | |||
| } | |||
| }, | |||
| /** | |||
| * Get/Set data attribute (replaces $.data()) | |||
| */ | |||
| data: (element, name, value) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return null; | |||
| const dataName = `data-${name}`; | |||
| if (value === undefined) { | |||
| return element.getAttribute(dataName); | |||
| } else { | |||
| element.setAttribute(dataName, value); | |||
| return element; | |||
| } | |||
| }, | |||
| /** | |||
| * Get/Set text content (replaces $.text()) | |||
| */ | |||
| text: (element, content) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return null; | |||
| if (content === undefined) { | |||
| return element.textContent; | |||
| } else { | |||
| element.textContent = content; | |||
| return element; | |||
| } | |||
| }, | |||
| /** | |||
| * Get/Set HTML content (replaces $.html()) | |||
| */ | |||
| html: (element, content) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return null; | |||
| if (content === undefined) { | |||
| return element.innerHTML; | |||
| } else { | |||
| element.innerHTML = content; | |||
| return element; | |||
| } | |||
| }, | |||
| /** | |||
| * Hide element (replaces $.hide()) | |||
| */ | |||
| hide: (element) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.style.display = 'none'; | |||
| } | |||
| }, | |||
| /** | |||
| * Show element (replaces $.show()) | |||
| */ | |||
| show: (element, display = 'block') => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| element.style.display = display; | |||
| } | |||
| }, | |||
| /** | |||
| * Toggle visibility (replaces $.toggle()) | |||
| */ | |||
| toggle: (element, display = 'block') => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (element) { | |||
| if (element.style.display === 'none') { | |||
| element.style.display = display; | |||
| } else { | |||
| element.style.display = 'none'; | |||
| } | |||
| } | |||
| }, | |||
| /** | |||
| * Slide up animation (replaces $.slideUp()) | |||
| */ | |||
| slideUp: (element, duration = 300) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return Promise.resolve(); | |||
| return new Promise((resolve) => { | |||
| const height = element.scrollHeight; | |||
| element.style.height = `${height}px`; | |||
| element.style.overflow = 'hidden'; | |||
| element.animate([ | |||
| { height: `${height}px` }, | |||
| { height: '0px' } | |||
| ], { | |||
| duration, | |||
| easing: 'ease-in-out' | |||
| }).onfinish = () => { | |||
| element.style.display = 'none'; | |||
| element.style.height = ''; | |||
| element.style.overflow = ''; | |||
| resolve(); | |||
| }; | |||
| }); | |||
| }, | |||
| /** | |||
| * Slide down animation (replaces $.slideDown()) | |||
| */ | |||
| slideDown: (element, duration = 300) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return Promise.resolve(); | |||
| return new Promise((resolve) => { | |||
| element.style.display = 'block'; | |||
| element.style.height = '0px'; | |||
| element.style.overflow = 'hidden'; | |||
| const height = element.scrollHeight; | |||
| element.animate([ | |||
| { height: '0px' }, | |||
| { height: `${height}px` } | |||
| ], { | |||
| duration, | |||
| easing: 'ease-in-out' | |||
| }).onfinish = () => { | |||
| element.style.height = 'auto'; | |||
| element.style.overflow = 'visible'; | |||
| resolve(); | |||
| }; | |||
| }); | |||
| }, | |||
| /** | |||
| * Fade in animation (replaces $.fadeIn()) | |||
| */ | |||
| fadeIn: (element, duration = 300) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return Promise.resolve(); | |||
| return new Promise((resolve) => { | |||
| element.style.opacity = '0'; | |||
| element.style.display = 'block'; | |||
| element.animate([ | |||
| { opacity: 0 }, | |||
| { opacity: 1 } | |||
| ], { | |||
| duration, | |||
| easing: 'ease-in-out' | |||
| }).onfinish = () => { | |||
| element.style.opacity = ''; | |||
| resolve(); | |||
| }; | |||
| }); | |||
| }, | |||
| /** | |||
| * Fade out animation (replaces $.fadeOut()) | |||
| */ | |||
| fadeOut: (element, duration = 300) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return Promise.resolve(); | |||
| return new Promise((resolve) => { | |||
| element.animate([ | |||
| { opacity: 1 }, | |||
| { opacity: 0 } | |||
| ], { | |||
| duration, | |||
| easing: 'ease-in-out' | |||
| }).onfinish = () => { | |||
| element.style.display = 'none'; | |||
| element.style.opacity = ''; | |||
| resolve(); | |||
| }; | |||
| }); | |||
| }, | |||
| /** | |||
| * Get element dimensions and position | |||
| */ | |||
| dimensions: (element) => { | |||
| if (typeof element === 'string') { | |||
| element = document.querySelector(element); | |||
| } | |||
| if (!element) return null; | |||
| const rect = element.getBoundingClientRect(); | |||
| return { | |||
| width: rect.width, | |||
| height: rect.height, | |||
| top: rect.top, | |||
| left: rect.left, | |||
| bottom: rect.bottom, | |||
| right: rect.right | |||
| }; | |||
| }, | |||
| /** | |||
| * Wait for DOM to be ready (replaces $(document).ready()) | |||
| */ | |||
| ready: (callback) => { | |||
| if (document.readyState === 'loading') { | |||
| document.addEventListener('DOMContentLoaded', callback); | |||
| } else { | |||
| callback(); | |||
| } | |||
| } | |||
| }; | |||
| export default DOM; | |||