new

public/architectui/assets/scripts/app.js

@@ -0,0 +1,370 @@
+// Imports
+import $ from "jquery";
+window.jQuery = $;
+window.$ = $;
+
+import * as bootstrap from 'bootstrap';
+import { Dropdown } from 'bootstrap';
+import "metismenu";
+
+// Stylesheets
+import "./assets/base.scss";
+
+// Import fixed timing loader (simpler, more reliable)
+// Temporarily disabled to debug webpack error
+// import "./utils/fixed-loader.js";
+
+$(document).ready(() => {
+
+  // Page Transition Animations
+  function initPageAnimations() {
+    // SimpleLoader handles the loader, we just need to trigger animations
+    // Wait a bit to ensure loader has been handled
+    setTimeout(() => {
+      // Trigger header animation
+      $('.HeaderAnimation-appear').addClass('HeaderAnimation-appear-active');
+      
+      // Trigger main content animation with slight delay
+      setTimeout(() => {
+        $('.MainAnimation-appear').addClass('MainAnimation-appear-active');
+      }, 100);
+
+      // Trigger sidebar animation if present
+      setTimeout(() => {
+        $('.SidebarAnimation-appear').addClass('SidebarAnimation-appear-active');
+      }, 200);
+
+      // Trigger tab animations for content with tabs
+      setTimeout(() => {
+        $('.tabs-animation, .TabsAnimation-appear').addClass('TabsAnimation-appear-active');
+      }, 300);
+    }, 200);
+  }
+
+  // Initialize animations when body has app-loaded class
+  const waitForLoaded = () => {
+    if (document.body.classList.contains('app-loaded')) {
+      initPageAnimations();
+    } else {
+      setTimeout(waitForLoaded, 50);
+    }
+  };
+  
+  waitForLoaded();
+
+  // Handle dynamic content loading transitions
+  function fadeInContent(selector, delay = 0) {
+    setTimeout(() => {
+      $(selector).addClass('animated fadeInUp');
+    }, delay);
+  }
+
+  // Sidebar Menu
+
+  setTimeout(function () {
+    $(".vertical-nav-menu").metisMenu();
+    
+    // Ensure Perfect Scrollbar updates after MetisMenu initialization
+    setTimeout(() => {
+      if (window.sidebarScrollbar && window.sidebarScrollbar.update) {
+        window.sidebarScrollbar.update();
+      }
+    }, 50);
+  }, 100);
+
+  // Search wrapper trigger
+
+  $(".search-icon").click(function () {
+    $(this).parent().parent().addClass("active");
+  });
+
+  $(".search-wrapper .btn-close").click(function () {
+    $(this).parent().removeClass("active");
+  });
+
+  // BS5 Popover
+
+  var popoverTriggerList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover-custom-content"]'));
+  var popoverList = popoverTriggerList1.map(function (popoverTriggerEl1) {
+    return new bootstrap.Popover(popoverTriggerEl1,
+      {
+        html: true,
+      placement: "auto",
+      template:
+        '<div class="popover popover-custom" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+      content: function () {
+        var id = $(this).attr("popover-id");
+        return $("#popover-content-" + id).html();
+      },
+      });
+  });
+
+  // REMOVED: Conflicting jQuery dropdown click handler that was preventing dropdowns from opening
+
+  var popoverTriggerList2 = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover-custom-bg"]'));
+  var popoverList = $('[data-bs-toggle="popover-custom-bg"]').each(function (popoverTriggerEl2) {
+    var popClass = $(this).attr('data-bg-class');
+    return new bootstrap.Popover($(this), {
+      trigger: "focus",
+      placement: "top",
+      template:
+        '<div class="popover popover-bg ' +
+        popClass +
+        '" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+    });
+  });
+
+  // BS5 Popover
+
+  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    return new bootstrap.Popover(popoverTriggerEl);
+  });
+
+  $('[data-bs-toggle="popover-custom"]').each(function (i, obj) {
+    return new bootstrap.Popover($(this), {
+      html: true,
+      container: $(this).parent().find(".rm-max-width"),
+      content: function () {
+        return $(this)
+          .next(".rm-max-width")
+          .find(".popover-custom-content")
+          .html();
+      },
+    });
+  });
+
+
+  // Portal dropdown implementation - moves menus to body to escape containers
+  document.addEventListener('click', function(event) {
+    var trigger = event.target.closest('[data-bs-toggle="dropdown"]');
+    
+    if (trigger) {
+      event.preventDefault();
+      event.stopPropagation();
+      
+      // Close all other dropdowns first
+      document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
+        menu.classList.remove('show');
+        // Restore to original position if it was portaled
+        if (menu._originalParent) {
+          if (menu._originalNextSibling) {
+            menu._originalParent.insertBefore(menu, menu._originalNextSibling);
+          } else {
+            menu._originalParent.appendChild(menu);
+          }
+          // Clear portal data
+          delete menu._originalParent;
+          delete menu._originalNextSibling;
+          // Reset styles
+          menu.style.position = '';
+          menu.style.top = '';
+          menu.style.left = '';
+          menu.style.zIndex = '';
+          menu.style.transform = '';
+        }
+        var toggle = document.querySelector('[data-bs-toggle="dropdown"][aria-expanded="true"]');
+        if (toggle) toggle.setAttribute('aria-expanded', 'false');
+      });
+      
+      // Find the dropdown menu for this trigger
+      var menu = trigger.nextElementSibling;
+      if (!menu || !menu.classList.contains('dropdown-menu')) {
+        menu = trigger.parentNode.querySelector('.dropdown-menu');
+      }
+      
+      if (menu) {
+        // Check if this is a header dropdown (skip portal for header dropdowns)
+        var isHeaderDropdown = trigger.closest('.app-header, .header-megamenu, .header-dots, .header-btn-lg');
+        
+        if (isHeaderDropdown) {
+          // Simple show for header dropdowns (don't portal them)
+          menu.classList.add('show');
+          trigger.setAttribute('aria-expanded', 'true');
+        } else {
+          // Portal approach for page dropdowns only
+          var triggerRect = trigger.getBoundingClientRect();
+          
+          // Store original parent and position info
+          if (!menu._originalParent) {
+            menu._originalParent = menu.parentNode;
+            menu._originalNextSibling = menu.nextSibling;
+          }
+          
+          // Move to body
+          document.body.appendChild(menu);
+          
+          // Position relative to viewport
+          menu.style.position = 'fixed';
+          menu.style.top = (triggerRect.bottom + 2) + 'px';
+          menu.style.left = triggerRect.left + 'px';
+          menu.style.zIndex = '99999';
+          menu.style.transform = 'none';
+          
+          // Show the menu
+          menu.classList.add('show');
+          trigger.setAttribute('aria-expanded', 'true');
+        }
+      }
+    } else {
+      // Click outside - close all dropdowns
+      document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
+        menu.classList.remove('show');
+        // Restore to original position if it was portaled
+        if (menu._originalParent) {
+          if (menu._originalNextSibling) {
+            menu._originalParent.insertBefore(menu, menu._originalNextSibling);
+          } else {
+            menu._originalParent.appendChild(menu);
+          }
+          // Clear portal data
+          delete menu._originalParent;
+          delete menu._originalNextSibling;
+          // Reset styles
+          menu.style.position = '';
+          menu.style.top = '';
+          menu.style.left = '';
+          menu.style.zIndex = '';
+          menu.style.transform = '';
+        }
+        var toggle = document.querySelector('[data-bs-toggle="dropdown"][aria-expanded="true"]');
+        if (toggle) toggle.setAttribute('aria-expanded', 'false');
+      });
+    }
+  });
+
+  // BS5 Tooltips
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  var tooltipTriggerList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip-light"]'));
+  var tooltipList = tooltipTriggerList1.map(function (tooltipTriggerEl1) {
+    return new bootstrap.Tooltip(tooltipTriggerEl1, {
+      template:
+      '<div class="tooltip tooltip-light"><div class="tooltip-inner"></div></div>'
+    }
+      );
+  });
+
+  // Drawer
+
+  $(".open-right-drawer").click(function () {
+    $(this).addClass("is-active");
+    $(".app-drawer-wrapper").addClass("drawer-open");
+    $(".app-drawer-overlay").removeClass("d-none");
+  });
+
+  $(".drawer-nav-btn").click(function () {
+    $(".app-drawer-wrapper").removeClass("drawer-open");
+    $(".app-drawer-overlay").addClass("d-none");
+    $(".open-right-drawer").removeClass("is-active");
+  });
+
+  $(".app-drawer-overlay").click(function () {
+    $(this).addClass("d-none");
+    $(".app-drawer-wrapper").removeClass("drawer-open");
+    $(".open-right-drawer").removeClass("is-active");
+  });
+
+  $(".mobile-toggle-nav").click(function () {
+    $(this).toggleClass("is-active");
+    $(".app-container").toggleClass("sidebar-mobile-open");
+  });
+
+  $(".mobile-toggle-header-nav").click(function () {
+    $(this).toggleClass("active");
+    $(".app-header__content").toggleClass("header-mobile-open");
+  });
+
+  $(".mobile-app-menu-btn").click(function () {
+    $(".hamburger", this).toggleClass("is-active");
+    $(".app-inner-layout").toggleClass("open-mobile-menu");
+  });
+
+  // Responsive
+
+  var resizeClass = function () {
+    var win = document.body.clientWidth;
+    if (win < 1250) {
+      $(".app-container").addClass("closed-sidebar-mobile closed-sidebar");
+    } else {
+      $(".app-container").removeClass("closed-sidebar-mobile closed-sidebar");
+    }
+  };
+
+  $(window).on("resize", function () {
+    resizeClass();
+  });
+
+  resizeClass();
+
+  // Enhanced content loading animations
+  function animateCards() {
+    $('.main-card, .card').each(function(index) {
+      const $card = $(this);
+      setTimeout(() => {
+        $card.addClass('animated fadeInUp');
+      }, index * 50);
+    });
+  }
+
+  // Trigger card animations with delay for better visual effect
+  setTimeout(animateCards, 400);
+
+  // Handle dynamic tab content animations
+  $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+    const targetPane = $($(e.target).attr('href'));
+    targetPane.addClass('TabsAnimation-appear');
+    setTimeout(() => {
+      targetPane.addClass('TabsAnimation-appear-active');
+    }, 50);
+  });
+
+  // Smooth loading overlay (optional enhancement)
+  function showPageLoader() {
+    if (!$('.page-loader').length) {
+      $('body').append(`
+        <div class="page-loader" style="
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(255,255,255,0.9);
+          z-index: 9999;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        ">
+          <div class="loader">
+            <div class="ball-pulse">
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+  }
+
+  function hidePageLoader() {
+    $('.page-loader').fadeOut(300, function() {
+      $(this).remove();
+    });
+  }
+
+  // Auto-hide loader after animations complete
+  setTimeout(hidePageLoader, 800);
+
+  // Export animation utilities globally for other scripts
+  window.ArchitectUI = window.ArchitectUI || {};
+  window.ArchitectUI.animations = {
+    fadeInContent: fadeInContent,
+    initPageAnimations: initPageAnimations,
+    animateCards: animateCards
+  };
+
+});