Ticket #4641 - Use HTMX to load page content without genaral page structure. Top menu.

modules/boonex/artificer/data/template/system/css/general.css

@@ -54,6 +54,16 @@ import url(../../../../../../../template/css/general.css);
 }
 
 
+/*--- Page Content with Cover ---*/
+#bx-content-with-cover-wrapper {
+    opacity: 1;
+    transition: opacity 400ms ease-out;
+}
+#bx-content-with-cover-wrapper.htmx-added {
+    opacity: 0;
+}
+
+
 /*--- Page Submenu ---*/
 .bx-menu-main-bar-cnt {
     height: 3.25rem;

modules/boonex/artificer/data/template/system/menu_main.html

@@ -1,6 +1,6 @@
 <ul id="__html_id__" class="bx-menu-main<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex flex-nowrap space-x-2">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ rounded-md">
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ rounded-md" __attrs_wrp__>
             <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> class="bx-stl-mil group"__attrs__>
                 <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
                     <bx_include_auto:menu_icon.html />

modules/boonex/artificer/data/template/system/scripts/BxTemplMenu.php

@@ -19,8 +19,6 @@ class BxTemplMenu extends BxBaseMenu
         if(isset($aObject['object'])) {
             //--- For page submenus ---//
             if(strpos($aObject['object'], '_submenu') !== false) {
-                $sClass = 'bx-menu-tab-active';
-
                 $this->_bHx = true;
                 $this->_bHxHead = true;
                 $this->_mHxPreload = true;

modules/boonex/artificer/data/template/system/scripts/BxTemplMenuSite.php

@@ -35,6 +35,20 @@ class BxTemplMenuSite extends BxTemplMenuMoreAuto
         $this->_bSiteMenu = $this->_sObject == 'sys_site';
         $this->_bSiteMenuInPanel = $this->_sObject == 'sys_site_in_panel';
         $this->_bApplicationMenu = $this->_sObject == 'sys_application';
+        
+        if($this->_bSiteMenu) {
+            $this->_bHx = true;
+            $this->_bHxHead = true;
+            $this->_mHxPreload = true;
+            $this->_aHx = [
+                'get' => '',
+                'trigger' => 'click',
+                'target' => '#bx-content-with-cover-wrapper',
+                'swap' => 'outerHTML settle:400ms',
+                'push-url' => 'true',
+                'on::after-on-load' => 'oBxArtificerUtils.mmenuClickAl(this)'
+            ];
+        }
     }
 
     public function getCode ()

modules/boonex/artificer/js/utils.js

@@ -117,6 +117,18 @@ BxArtificerUtils.prototype.getNotificationsMenu = function(sMenu, e, sPosition,
     bx_menu_popup(sMenu, e, oOptions);
 };
 
+BxArtificerUtils.prototype.mmenuClickAl = function(oElement) {
+    var sClass = 'bx-menu-tab-active';
+    var oItem = $(oElement).parent().addClass(sClass);
+
+    oItem.siblings().removeClass(sClass);
+    oItem.siblings('.bx-menu-item-more-auto').find('li').removeClass(sClass);
+
+    oItem.parents('li:first').siblings().removeClass(sClass);
+    if(oItem.parents('.bx-popup-applied.bx-popup-menu'))
+        $('.bx-popup-applied:visible').dolPopupHide();
+};
+
 BxArtificerUtils.prototype.submenuClickBl = function(oElement) {
     var oItems = $(oElement).parents('ul:first').find('li');
     var iPosNew = oItems.index($(oElement).parent());

template/page_54.html

@@ -1,3 +1,7 @@
+<head>
+    <title>__page_header__</title>
+    __meta_info__
+</head>
 <div id="bx-content-with-cover-wrapper">
     <bx_include_auto:_page_cover.html />     
     <div id="bx-content-with-submenu-wrapper">