adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,86 @@
+import { Calendar } from '@fullcalendar/core';
+import interactionPlugin from '@fullcalendar/interaction';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import DateUtils from '../utils/date';
+
+document.addEventListener('DOMContentLoaded', function () {
+  const calendarEl = document.getElementById('calendar');
+
+  // element found in dom ?
+  if (calendarEl == null) {
+    return;
+  }
+
+  const calendar = new Calendar(calendarEl, {
+    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
+    },
+    initialDate: DateUtils.format(DateUtils.now(), 'YYYY-MM-DD'),
+    navLinks: true, // can click day/week names to navigate views
+    editable: true,
+    dayMaxEvents: true, // allow "more" link when too many events
+    events: [
+      {
+        title: 'All Day Event',
+        start: DateUtils.format(DateUtils.now(), 'YYYY-MM-DD'),
+      },
+      {
+        title: 'Long Event',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 1, 'day'), 'YYYY-MM-DD'),
+        end: DateUtils.format(DateUtils.add(DateUtils.now(), 4, 'day'), 'YYYY-MM-DD'),
+      },
+      {
+        groupId: 999,
+        title: 'Repeating Event',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 2, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T16:00'),
+      },
+      {
+        groupId: 999,
+        title: 'Repeating Event',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 9, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T16:00'),
+      },
+      {
+        title: 'Conference',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 5, 'day'), 'YYYY-MM-DD'),
+        end: DateUtils.format(DateUtils.add(DateUtils.now(), 7, 'day'), 'YYYY-MM-DD'),
+      },
+      {
+        title: 'Meeting',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T10:30'),
+        end: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T12:30'),
+      },
+      {
+        title: 'Lunch',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T12:00'),
+      },
+      {
+        title: 'Meeting',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T14:30'),
+      },
+      {
+        title: 'Happy Hour',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T17:30'),
+      },
+      {
+        title: 'Dinner',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 3, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T20:00'),
+      },
+      {
+        title: 'Birthday Party',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 4, 'day'), 'YYYY-MM-DDTHH:mm:ss').replace(/:\d{2}$/, ':00:00').replace(/T\d{2}:\d{2}/, 'T07:00'),
+      },
+      {
+        title: 'Click for Google',
+        url: 'http://google.com/',
+        start: DateUtils.format(DateUtils.add(DateUtils.now(), 14, 'day'), 'YYYY-MM-DD'),
+      },
+    ],
+  });
+
+  calendar.render();
+});

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

@@ -0,0 +1,93 @@
+import loadGoogleMapsAPI  from 'load-google-maps-api';
+import Theme from '../utils/theme.js';
+
+export default (function () {
+  let map, marker;
+  
+  const initGoogleMap = () => {
+    const googleMapElement = document.getElementById('google-map');
+    if (googleMapElement) {
+      loadGoogleMapsAPI({
+        key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',
+      }).then(() => {
+        const latitude  = 26.8206;
+        const longitude = 30.8025;
+        const mapZoom   = 5;
+        const { google }    = window;
+
+        const mapOptions = {
+          center    : new google.maps.LatLng(latitude, longitude),
+          zoom      : mapZoom,
+          mapTypeId : google.maps.MapTypeId.ROADMAP,
+          styles: [{
+            'featureType': 'landscape',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-landscape-hue') },
+              { 'saturation' : 43.400000000000006 },
+              { 'lightness'  : 37.599999999999994 },
+              { 'gamma'      : 1 },
+            ],
+          }, {
+            'featureType': 'road.highway',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-highway-hue') },
+              { 'saturation' : -61.8 },
+              { 'lightness'  : 45.599999999999994 },
+              { 'gamma'      : 1 },
+            ],
+          }, {
+            'featureType': 'road.arterial',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-road-hue') },
+              { 'saturation' : -100 },
+              { 'lightness'  : 51.19999999999999 },
+              { 'gamma'      : 1 },
+            ],
+          }, {
+            'featureType': 'road.local',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-road-hue') },
+              { 'saturation' : -100 },
+              { 'lightness'  : 52 },
+              { 'gamma'      : 1 },
+            ],
+          }, {
+            'featureType': 'water',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-water-hue') },
+              { 'saturation' : -13.200000000000003 },
+              { 'lightness'  : 2.4000000000000057 },
+              { 'gamma'      : 1 },
+            ],
+          }, {
+            'featureType': 'poi',
+            'stylers': [
+              { 'hue'        : Theme.getCSSVar('--gmap-poi-hue') },
+              { 'saturation' : -1.0989010989011234 },
+              { 'lightness'  : 11.200000000000017 },
+              { 'gamma'      : 1 },
+            ],
+          }],
+        };
+
+        map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
+
+        if (marker) {
+          marker.setMap(null);
+        }
+
+        marker = new google.maps.Marker({
+          map,
+          position : new google.maps.LatLng(latitude, longitude),
+          visible  : true,
+        });
+      });
+    }
+  };
+  
+  // Initialize Google Maps
+  initGoogleMap();
+  
+  // Listen for theme changes
+  window.addEventListener('adminator:themeChanged', initGoogleMap);
+}())

package/src/assets/scripts/index.js

@@ -0,0 +1,18 @@
+/**
+ * Adminator Admin Template
+ * Modern Entry Point - Phase 2 Modernization
+ */
+
+// 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'; // REMOVED: Replaced with modern day.js implementation in app.js
+
+// 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)
+

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

@@ -0,0 +1,14 @@
+import Masonry from 'masonry-layout';
+
+export default (function () {
+  window.addEventListener('load', () => {
+    const masonryElement = document.querySelector('.masonry');
+    if (masonryElement) {
+      new Masonry(masonryElement, {
+        itemSelector: '.masonry-item',
+        columnWidth: '.masonry-sizer',
+        percentPosition: true,
+      });
+    }
+  });
+}());

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

@@ -0,0 +1,109 @@
+// Simple vanilla JS tooltip and popover implementation
+export default (function () {
+  
+  // Simple tooltip implementation
+  function initTooltips() {
+    const tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    
+    tooltipElements.forEach(element => {
+      const tooltipText = element.getAttribute('data-bs-title') || element.getAttribute('title');
+      
+      if (tooltipText) {
+        element.addEventListener('mouseenter', function() {
+          const tooltip = document.createElement('div');
+          tooltip.className = 'custom-tooltip';
+          tooltip.textContent = tooltipText;
+          tooltip.style.cssText = `
+            position: absolute;
+            background: #000;
+            color: #fff;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 1050;
+            pointer-events: none;
+            white-space: nowrap;
+          `;
+          
+          document.body.appendChild(tooltip);
+          
+          const rect = element.getBoundingClientRect();
+          tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2)  }px`;
+          tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5  }px`;
+          
+          element._tooltip = tooltip;
+        });
+        
+        element.addEventListener('mouseleave', function() {
+          if (element._tooltip) {
+            element._tooltip.remove();
+            element._tooltip = null;
+          }
+        });
+      }
+    });
+  }
+  
+  // Simple popover implementation
+  function initPopovers() {
+    const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]');
+    
+    popoverElements.forEach(element => {
+      const popoverContent = element.getAttribute('data-bs-content');
+      const popoverTitle = element.getAttribute('data-bs-title');
+      
+      if (popoverContent) {
+        element.addEventListener('click', function(e) {
+          e.preventDefault();
+          
+          // Remove existing popover
+          if (element._popover) {
+            element._popover.remove();
+            element._popover = null;
+            return;
+          }
+          
+          const popover = document.createElement('div');
+          popover.className = 'custom-popover';
+          popover.innerHTML = `
+            ${popoverTitle ? `<div class="popover-title">${popoverTitle}</div>` : ''}
+            <div class="popover-content">${popoverContent}</div>
+          `;
+          popover.style.cssText = `
+            position: absolute;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            z-index: 1050;
+            min-width: 200px;
+            max-width: 300px;
+          `;
+          
+          document.body.appendChild(popover);
+          
+          const rect = element.getBoundingClientRect();
+          popover.style.left = `${rect.left  }px`;
+          popover.style.top = `${rect.bottom + 5  }px`;
+          
+          element._popover = popover;
+        });
+      }
+    });
+  }
+  
+  // Initialize both
+  initTooltips();
+  initPopovers();
+  
+  // Close popovers when clicking outside
+  document.addEventListener('click', function(e) {
+    const popovers = document.querySelectorAll('.custom-popover');
+    popovers.forEach(popover => {
+      if (!popover.contains(e.target)) {
+        popover.remove();
+      }
+    });
+  });
+  
+}());

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

@@ -0,0 +1,10 @@
+import PerfectScrollbar from 'perfect-scrollbar';
+
+export default (function () {
+  const scrollables = document.querySelectorAll('.scrollable');
+  if (scrollables.length > 0) {
+    scrollables.forEach(el => {
+      new PerfectScrollbar(el);
+    });
+  }
+}());

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

@@ -0,0 +1,15 @@
+export default (function () {
+  const searchToggle = document.querySelector('.search-toggle');
+  const searchBox = document.querySelector('.search-box');
+  const searchInput = document.querySelector('.search-input');
+  const searchInputField = document.querySelector('.search-input input');
+  
+  if (searchToggle && searchBox && searchInput && searchInputField) {
+    searchToggle.addEventListener('click', e => {
+      searchBox.classList.toggle('active');
+      searchInput.classList.toggle('active');
+      searchInputField.focus();
+      e.preventDefault();
+    });
+  }
+}());

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

@@ -0,0 +1,140 @@
+// Vanilla JS slide animations
+function slideUp(element, duration = 200, callback = null) {
+  element.style.height = `${element.scrollHeight  }px`;
+  element.style.transition = `height ${duration}ms ease`;
+  element.style.overflow = 'hidden';
+  
+  requestAnimationFrame(() => {
+    element.style.height = '0';
+    element.style.paddingTop = '0';
+    element.style.paddingBottom = '0';
+    element.style.marginTop = '0';
+    element.style.marginBottom = '0';
+  });
+  
+  setTimeout(() => {
+    element.style.display = 'none';
+    element.style.removeProperty('height');
+    element.style.removeProperty('padding-top');
+    element.style.removeProperty('padding-bottom');
+    element.style.removeProperty('margin-top');
+    element.style.removeProperty('margin-bottom');
+    element.style.removeProperty('overflow');
+    element.style.removeProperty('transition');
+    if (callback) callback();
+  }, duration);
+}
+
+function slideDown(element, duration = 200, callback = null) {
+  element.style.removeProperty('display');
+  let display = window.getComputedStyle(element).display;
+  if (display === 'none') display = 'block';
+  
+  element.style.display = display;
+  element.style.height = '0';
+  element.style.paddingTop = '0';
+  element.style.paddingBottom = '0';
+  element.style.marginTop = '0';
+  element.style.marginBottom = '0';
+  element.style.overflow = 'hidden';
+  
+  const height = element.scrollHeight;
+  
+  element.style.transition = `height ${duration}ms ease`;
+  
+  requestAnimationFrame(() => {
+    element.style.height = `${height  }px`;
+    element.style.removeProperty('padding-top');
+    element.style.removeProperty('padding-bottom');
+    element.style.removeProperty('margin-top');
+    element.style.removeProperty('margin-bottom');
+  });
+  
+  setTimeout(() => {
+    element.style.removeProperty('height');
+    element.style.removeProperty('overflow');
+    element.style.removeProperty('transition');
+    if (callback) callback();
+  }, duration);
+}
+
+export default (function () {
+  // Sidebar links
+  const sidebarLinks = document.querySelectorAll('.sidebar .sidebar-menu li a');
+  
+  sidebarLinks.forEach(link => {
+    link.addEventListener('click', function () {
+      const parentLi = this.parentElement;
+      const dropdownMenu = parentLi.querySelector('.dropdown-menu');
+      
+      if (!dropdownMenu) return;
+      
+      if (parentLi.classList.contains('open')) {
+        slideUp(dropdownMenu, 200, () => {
+          parentLi.classList.remove('open');
+        });
+      } else {
+        // Close all other open menus at the same level
+        const siblingMenus = parentLi.parentElement.querySelectorAll('li.open');
+        siblingMenus.forEach(sibling => {
+          const siblingDropdown = sibling.querySelector('.dropdown-menu');
+          const siblingLink = sibling.querySelector('a');
+          
+          if (siblingDropdown) {
+            slideUp(siblingDropdown, 200);
+          }
+          if (siblingLink) {
+            siblingLink.classList.remove('open');
+          }
+          sibling.classList.remove('open');
+        });
+        
+        // Open current menu
+        slideDown(dropdownMenu, 200, () => {
+          parentLi.classList.add('open');
+        });
+      }
+    });
+  });
+
+  // Sidebar Activity Class
+  const sidebarLinkElements = document.querySelectorAll('.sidebar .sidebar-link');
+  
+  sidebarLinkElements.forEach(link => {
+    link.classList.remove('active');
+    
+    const href = link.getAttribute('href');
+    if (href) {
+      const pattern = href[0] === '/' ? href.substr(1) : href;
+      if (pattern === window.location.pathname.substr(1)) {
+        link.classList.add('active');
+      }
+    }
+  });
+
+  // Sidebar Toggle
+  const sidebarToggle = document.querySelector('.sidebar-toggle');
+  const app = document.querySelector('.app');
+  
+  if (sidebarToggle && app) {
+    sidebarToggle.addEventListener('click', e => {
+      app.classList.toggle('is-collapsed');
+      e.preventDefault();
+    });
+  }
+
+  /**
+   * Wait until sidebar fully toggled (animated in/out)
+   * then trigger window resize event in order to recalculate
+   * masonry layout widths and gutters.
+   */
+  const sidebarToggleById = document.getElementById('sidebar-toggle');
+  if (sidebarToggleById) {
+    sidebarToggleById.addEventListener('click', e => {
+      e.preventDefault();
+      setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+      }, 300);
+    });
+  }
+}());

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

@@ -0,0 +1,52 @@
+import SkyconsInit from 'skycons';
+import Theme from '../utils/theme.js';
+
+const Skycons = SkyconsInit(window);
+
+export default (function () {
+  let icons;
+  
+  const initSkycons = () => {
+    const skyconsColor = Theme.getCSSVar('--skycons-color');
+    
+    if (icons) {
+      icons.pause();
+      icons.remove('all');
+    }
+    
+    icons = new Skycons({ 'color': skyconsColor });
+    
+    const list  = [
+      'clear-day',
+      'clear-night',
+      'partly-cloudy-day',
+      'partly-cloudy-night',
+      'cloudy',
+      'rain',
+      'sleet',
+      'snow',
+      'wind',
+      'fog',
+    ];
+    let i = list.length;
+
+    while (i--) {
+      const
+        weatherType = list[i],
+        elements    = document.getElementsByClassName(weatherType);
+      let j = elements.length;
+
+      while (j--) {
+        icons.set(elements[j], weatherType);
+      }
+    }
+
+    icons.play();
+  };
+  
+  // Initialize skycons
+  initSkycons();
+  
+  // Listen for theme changes
+  window.addEventListener('adminator:themeChanged', initSkycons);
+}());