adminator-admin-dashboard 2.7.0

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

@@ -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; 

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,105 @@
+/* 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 (_) {}
+    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;