adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/scripts/utils/dom.js

@@ -1,349 +0,0 @@
-/**
- * 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; 

package/src/assets/scripts/utils/index.js

@@ -1,45 +0,0 @@
-export default (function () {
-  // ------------------------------------------------------
-  // @Window Resize
-  // ------------------------------------------------------
-
-  /**
-   * NOTE: Register resize event for Masonry layout
-   */
-  const EVENT = document.createEvent('UIEvents');
-  window.EVENT = EVENT;
-  EVENT.initUIEvent('resize', true, false, window, 0);
-
-
-  window.addEventListener('load', () => {
-    /**
-     * Trigger window resize event after page load
-     * for recalculation of masonry layout.
-     */
-    window.dispatchEvent(EVENT);
-  });
-
-  // ------------------------------------------------------
-  // @External Links
-  // ------------------------------------------------------
-
-  // Open external links in new window
-  const externalLinks = document.querySelectorAll('a[href^="http"], a[href^="//"]');
-  
-  externalLinks.forEach(link => {
-    const href = link.getAttribute('href');
-    if (href && !href.includes(window.location.host)) {
-      link.setAttribute('rel', 'noopener noreferrer');
-      link.setAttribute('target', '_blank');
-    }
-  });
-
-  // ------------------------------------------------------
-  // @Resize Trigger
-  // ------------------------------------------------------
-
-  // Trigger resize on any element click
-  document.addEventListener('click', () => {
-    window.dispatchEvent(window.EVENT);
-  });
-}());

package/src/assets/scripts/utils/theme.js

@@ -1,107 +0,0 @@
-/* global Chart */
-const THEME_KEY = 'adminator-theme';
-
-const Theme = {
-  apply(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-    if (window.Chart && Chart.defaults) {
-      const isDark = theme === 'dark';
-      const textColor = isDark ? '#FFFFFF' : '#212529';
-      const mutedColor = isDark ? '#D1D5DB' : '#6C757D';
-      const borderColor = isDark ? '#374151' : '#E2E5E8';
-      const gridColor = isDark ? 'rgba(209, 213, 219, 0.15)' : 'rgba(0, 0, 0, 0.05)';
-      const tooltipBg = isDark ? '#1F2937' : 'rgba(255, 255, 255, 0.95)';
-      
-      // Set global defaults
-      Chart.defaults.color = textColor;
-      Chart.defaults.borderColor = borderColor;
-      Chart.defaults.backgroundColor = tooltipBg;
-      
-      // Set plugin defaults
-      Chart.defaults.plugins.legend.labels.color = textColor;
-      Chart.defaults.plugins.tooltip.backgroundColor = tooltipBg;
-      Chart.defaults.plugins.tooltip.titleColor = textColor;
-      Chart.defaults.plugins.tooltip.bodyColor = textColor;
-      Chart.defaults.plugins.tooltip.borderColor = borderColor;
-      
-      // Set scale defaults 
-      Chart.defaults.scales.category.ticks.color = mutedColor;
-      Chart.defaults.scales.category.grid.color = gridColor;
-      Chart.defaults.scales.linear.ticks.color = mutedColor;
-      Chart.defaults.scales.linear.grid.color = gridColor;
-      Chart.defaults.scales.logarithmic.ticks.color = mutedColor;
-      Chart.defaults.scales.logarithmic.grid.color = gridColor;
-      Chart.defaults.scales.time.ticks.color = mutedColor;
-      Chart.defaults.scales.time.grid.color = gridColor;
-      Chart.defaults.scales.radialLinear.ticks.color = mutedColor;
-      Chart.defaults.scales.radialLinear.grid.color = gridColor;
-      Chart.defaults.scales.radialLinear.pointLabels.color = mutedColor;
-      Chart.defaults.scales.radialLinear.angleLines.color = gridColor;
-    }
-    try {
-      localStorage.setItem(THEME_KEY, theme);
-    } catch {
-      // Ignore errors
-    }
-    window.dispatchEvent(new CustomEvent('adminator:themeChanged', { detail: { theme } }));
-  },
-  toggle() {
-    const next = this.current() === 'dark' ? 'light' : 'dark';
-    this.apply(next);
-  },
-  current() {
-    try {
-      return localStorage.getItem(THEME_KEY) || 'light';
-    } catch {
-      return 'light';
-    }
-  },
-  init() {
-    // Detect OS preference first time
-    if (!localStorage.getItem(THEME_KEY)) {
-      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      this.apply(prefersDark ? 'dark' : 'light');
-    } else {
-      this.apply(this.current());
-    }
-  },
-  getCSSVar(varName) {
-    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-  },
-  getVectorMapColors() {
-    return {
-      backgroundColor: this.getCSSVar('--vmap-bg-color'),
-      borderColor: this.getCSSVar('--vmap-border-color'),
-      regionColor: this.getCSSVar('--vmap-region-color'),
-      markerFill: this.getCSSVar('--vmap-marker-fill'),
-      markerStroke: this.getCSSVar('--vmap-marker-stroke'),
-      hoverColor: this.getCSSVar('--vmap-hover-color'),
-      selectedColor: this.getCSSVar('--vmap-selected-color'),
-      scaleStart: this.getCSSVar('--vmap-scale-start'),
-      scaleEnd: this.getCSSVar('--vmap-scale-end'),
-      scaleLight: this.getCSSVar('--vmap-scale-light'),
-      scaleDark: this.getCSSVar('--vmap-scale-dark'),
-    };
-  },
-  getSparklineColors() {
-    return {
-      success: this.getCSSVar('--sparkline-success'),
-      purple: this.getCSSVar('--sparkline-purple'),
-      info: this.getCSSVar('--sparkline-info'),
-      danger: this.getCSSVar('--sparkline-danger'),
-      light: this.getCSSVar('--sparkline-light'),
-    };
-  },
-  getChartColors() {
-    const isDark = this.current() === 'dark';
-    return {
-      textColor: isDark ? '#FFFFFF' : '#212529',
-      mutedColor: isDark ? '#D1D5DB' : '#6C757D',
-      borderColor: isDark ? '#374151' : '#E2E5E8',
-      gridColor: isDark ? 'rgba(209, 213, 219, 0.15)' : 'rgba(0, 0, 0, 0.05)',
-      tooltipBg: isDark ? '#1F2937' : 'rgba(255, 255, 255, 0.95)',
-    };
-  },
-};
-
-export default Theme;