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

inc/classes/BxDolMenu.php

@@ -83,6 +83,9 @@ class BxDolMenu extends BxDolFactory implements iBxDolFactoryObject, iBxDolRepla
 
     protected $_bIsApi;
 
+    protected $_bHx;
+    protected $_aHx;
+
     protected $_bDynamicMode;
     protected $_bAddNoFollow;
 
@@ -108,6 +111,9 @@ class BxDolMenu extends BxDolFactory implements iBxDolFactoryObject, iBxDolRepla
 
         $this->_bIsApi = bx_is_api();
 
+        $this->_bHx = false;
+        $this->_aHx = [];
+
         $this->_bDynamicMode = false;
         $this->_bAddNoFollow = getParam('sys_add_nofollow') == 'on';
 

inc/classes/BxDolPage.php

@@ -689,11 +689,17 @@ class BxDolPage extends BxDolFactory implements iBxDolFactoryObject, iBxDolRepla
         if(!$oTemplate)
             $oTemplate = BxDolTemplate::getInstance();
 
-        $oTemplate->setPageNameIndex (BX_PAGE_DEFAULT);
+        $oTemplate->setPageNameIndex(BX_PAGE_DEFAULT);
+        if(($sHxTarget = bx_get_htmx_target()) !== false) 
+            $oTemplate->setPageNameIndexByTarget($sHxTarget);
+
         $oTemplate->setPageUrl($this->_aObject['url']);
-        $oTemplate->setPageType ($this->getType());
-        $oTemplate->setPageInjections ($this->getInjections());
-        $oTemplate->setPageContent ('page_main_code', $this->getCode());
+        $oTemplate->setPageType($this->getType());
+        $oTemplate->setPageInjections($this->getInjections());
+        if($oTemplate->getPageNameIndex() == BX_PAGE_CONTENT_PRELOAD)
+            $oTemplate->setPageContent('page_main_code', $this->getCodeDynamic(true));
+        else
+            $oTemplate->setPageContent('page_main_code', $this->getCode());
         $oTemplate->getPageCode();
     }
 

inc/classes/BxDolTemplate.php

@@ -33,6 +33,9 @@ define('BX_PAGE_DEFAULT', 0); ///< default, regular page
 define('BX_PAGE_CLEAR', 2); ///< clear page, without any headers and footers
 define('BX_PAGE_EMBED', 22); ///< page used for embeds
 define('BX_PAGE_POPUP', 44); ///< popup page, without any headers and footers
+define('BX_PAGE_CONTENT_PRELOAD', 50); ///< page content preload for dynamic (htmx) loading
+define('BX_PAGE_CONTENT_WITH_COVER', 54); ///< page content with cover and submenu for dynamic (htmx) loading
+define('BX_PAGE_CONTENT_WITH_SUBMENU', 56); ///< page content with submenu for dynamic (htmx) loading
 define('BX_PAGE_TRANSITION', 150); ///< transition page with redirect to display some msg, like 'please wait', without headers footers
 
 /**
@@ -724,6 +727,39 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
     {
         $this->aPage['name_index'] = $i;
     }
+    
+    /**
+     * Set page name index by target.
+     * @param string $s target. 
+     */
+    function setPageNameIndexByTarget($s)
+    {
+        $i = BX_PAGE_DEFAULT;
+
+        switch($s) {
+            case 'bx-content-preload':
+                $i = BX_PAGE_CONTENT_PRELOAD;
+                break;
+
+            case 'bx-content-with-toolbar-wrapper':
+                //$i = 52;
+                break;
+
+            case 'bx-content-with-cover-wrapper':
+                $i = BX_PAGE_CONTENT_WITH_COVER;
+                break;
+
+            case 'bx-content-with-submenu-wrapper':
+                $i = BX_PAGE_CONTENT_WITH_SUBMENU;
+                break;
+
+            case 'bx-content-wrapper':
+                //$i = 58;
+                break;
+        }
+
+        $this->aPage['name_index'] = $i;
+    }
 
     /**
      * Get page name index

inc/utils.inc.php

@@ -2227,6 +2227,32 @@ function bx_is_dynamic_request ()
     return bx_get('dynamic') || (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 'XMLHttpRequest' == $_SERVER['HTTP_X_REQUESTED_WITH']);
 }
 
+function bx_is_htmx_request ()
+{
+    return !empty($_SERVER['HTTP_HX_REQUEST']);
+}
+
+function bx_get_htmx_target ()
+{
+    if(!bx_is_htmx_request())
+        return false;
+
+    return isset($_SERVER['HTTP_HX_TARGET']) ? $_SERVER['HTTP_HX_TARGET'] : false;
+}
+
+function bx_get_htmx_attrs ($a)
+{
+    if(!$a)
+        return '';
+
+    $aHxAttrs = [];
+    array_walk($a, function($mixedValue, $sIndex) use (&$aHxAttrs) {
+        $aHxAttrs['hx-' . $sIndex] = $mixedValue;
+    });
+
+    return bx_convert_array2attrs($aHxAttrs);
+}
+
 function bx_idn_to_utf8($sUrl, $bReturnDomain = false)
 {
     return bx_idn_to('idn_to_utf8', $sUrl, $bReturnDomain);

install/sql/system.sql

@@ -6256,6 +6256,7 @@ INSERT INTO `sys_preloader`(`module`, `type`, `content`, `active`, `order`) VALU
 ('system', 'js_system', 'headroom.min.js', 1, 10),
 ('system', 'js_system', 'at.js/js/jquery.atwho.min.js', 1, 11),
 ('system', 'js_system', 'prism/prism.js', 1, 12),
+('system', 'js_system', 'htmx.min.js', 1, 13),
 ('system', 'js_system', 'functions.js', 1, 20),
 ('system', 'js_system', 'jquery.webForms.js', 1, 21),
 ('system', 'js_system', 'jquery.dolPopup.js', 1, 22),

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

@@ -1,6 +1,6 @@
 <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ inline-flex items-stretch w-max">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ flex">
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ flex" __attrs_wrp__>
             <a class="group block relative py-4 px-4 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 whitespace-nowrap text-sm font-medium text-center hover:bg-transparent focus:z-10 box-sizing" href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> __attrs__>
                 <span class="bx-menu-item-title">__title__</span>
                 <bx_if:addon>

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

@@ -15,7 +15,23 @@ class BxTemplMenu extends BxBaseMenu
     public function __construct ($aObject, $oTemplate = false)
     {
         parent::__construct ($aObject, $oTemplate);
-        
+
+        if(isset($aObject['object'])) {
+            //--- For page submenus ---//
+            if(strpos($aObject['object'], '_submenu') !== false && !($this instanceof BxBaseModProfileMenuView)) {
+                $this->_bHx = true;
+                $this->_aHx = [
+                    'get' => '',
+                    'trigger' => 'click',
+                    'target' => '#bx-content-with-submenu-wrapper',
+                    'swap' => 'outerHTML',
+                    'replace-url' => 'true'
+                ];
+
+                $this->_oTemplate->addInjection('injection_body', 'text', 'hx-on::after-request="jQuery(this).bxProcessHtml()"');
+            }
+        }
+
         $this->_aOptionalParams['popup'] = '';
     }
 

modules/boonex/english/data/langs/system/en.xml

@@ -3797,7 +3797,7 @@ If it is not enabled then please consider implement this optimization, since it
         <string name="_sys_txt_splash_create"><![CDATA[Create]]></string>
         <string name="_sys_txt_splash_create_text"><![CDATA[Build your social profile, post status updates, write notes, create polls and upload media albums.]]></string>
 	<string name="_sys_txt_switch_profile_context"><![CDATA[Switch]]></string>
-	<string name="_sys_txt_unsubscribe_email_settings_update_success"><![CDATA[Your email preferences has been successfully updated.]]></string>
+	<string name="_sys_txt_unsubscribe_email_settings_update_success"><![CDATA[Your email preferences have been updated.]]></string>
 	<string name="_sys_txt_unsubscribe_error_occured"><![CDATA[Error occurred, please login to your account and update email references there or contact site administrator to unsubscribe you manually.]]></string>
 	<string name="_sys_txt_unsubscribe_info"><![CDATA[Update email preferences for <b>{0}</b>]]></string>
         <string name="_sys_txt_unsubscribe_wrong_link"><![CDATA[Unsubscribe link is wrong.]]></string>

modules/boonex/russian/data/langs/system/ru.xml

@@ -3719,7 +3719,7 @@
         <string name="_sys_txt_splash_create"><![CDATA[Создавай]]></string>
         <string name="_sys_txt_splash_create_text"><![CDATA[Создай свой профайл, изменяй статус, пиши заметки, создавай голосования и загружай медиа альбомы.]]></string>
         <string name="_sys_txt_switch_profile_context"><![CDATA[Переключиться]]></string>
-	<string name="_sys_txt_unsubscribe_email_settings_update_success"><![CDATA[Ваши email-установки были удачно обновлены.]]></string>
+	<string name="_sys_txt_unsubscribe_email_settings_update_success"><![CDATA[Ваши настройки электронной почты обновлены.]]></string>
 	<string name="_sys_txt_unsubscribe_error_occured"><![CDATA[Произошла ошибка, пожалуйста, зайдите в свой аккаунт и обновите email-установки или свяжитесь с администратором сайта, чтобы он Вас отписал вручную.]]></string>
 	<string name="_sys_txt_unsubscribe_info"><![CDATA[Обновить email-установки для <b>{0}</b>]]></string>
         <string name="_sys_txt_unsubscribe_wrong_link"><![CDATA[Ссылка отписки неправильная.]]></string>

template/_page_content_beg.html

@@ -0,0 +1,5 @@
+__informer__
+<div class="bx-page-wrapper bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
+    <div id="bx-content-container" class="bx-content-container">
+        <bx_injection:injection_content_before />
+        <div id="bx-content-main" class="bx-content-main my-4 lg:my-6">

template/_page_content_end.html

@@ -0,0 +1,6 @@
+            <bx_injection:injection_content_after />
+            <bx_injection:banner_bottom />
+        </div> <!-- #bx-content-main -->
+        <bx_injection:injection_between_content_footer />
+    </div> <!-- #bx-content-container -->
+</div>

template/_page_cover.html

@@ -0,0 +1,3 @@
+<bx_injection:injection_between_cover_logo />
+__cover__
+<bx_injection:injection_between_cover_top_menu />

template/_page_submenu.html

@@ -0,0 +1,19 @@
+<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 __site_submenu_hidden__">
+    <div id="bx-menu-main-bar" class="bx-menu-main-bar __site_submenu_class__ bx-def-page-width mx-auto px-4 sm:px-6 lg:px-8 box-border">
+        <div class="bx-menu-main-bar-cnt -mb-px">
+            <bx_injection:injection_top_menu_before />
+            <div class="flex items-center h-full text-center">
+                <div class="relative flex-1 h-full">
+                    <div class="absolute w-full h-full">
+                        <bx_menu:sys_site_submenu />
+                    </div>
+                </div>
+                <div class="flex-none">
+                    <bx_menu:sys_site_manage />
+                </div>
+            </div>
+            <bx_injection:injection_top_menu_after />
+        </div>
+    </div>
+</div>
+<bx_injection:injection_between_content_menu />

template/_page_toolbar.html

@@ -0,0 +1,47 @@
+<bx_injection:top />
+<div id="bx-toolbar" class="bx-header bx-def-z-index-nav fixed top-0 w-full ring-1 ring-gray-300 dark:ring-gray-700 bg-white/95 dark:bg-gray-800/95 backdrop-blur shadow">
+    <div class="bx-header-cnt __sys_header_width__ mx-auto px-3 md:px-4 lg:px-6 box-border">
+        <div class="bx-toolbar-content-wrapper">
+            <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
+                <!-- Mobile: Hamburger -->
+                <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden mr-4">
+                    <bx_menu:sys_toolbar_site />
+                </div>
+
+                <div class="bx-toolbar-items-group relative flex flex-1 items-center justify-start h-16">
+                    <!-- Logo -->
+                    <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
+                        <bx_injection:injection_logo_before />
+                        __main_logo__
+                        <bx_injection:injection_logo_after />
+                    </div>
+                    <!-- Menu -->
+                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
+                        <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
+                            <bx_menu:sys_site />
+                        </div>
+                    </div>
+                    <!-- Search -->
+                    <div class="bx-toolbar-item bx-ti-search flex-1 lg:flex-none flex items-center justify-end">
+                        <div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
+                            <div class="relative w-full">__sys_site_search__</div>
+                        </div>
+                        <div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
+                            <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
+                                <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
+                                    <div class="bx-icon">
+                                        <bx_image_auto:search />
+                                    </div>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Members Toolbar -->
+                <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right flex-none">
+                    <bx_menu:sys_toolbar_member />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

template/_sub_footer.html

@@ -1,14 +1,11 @@
-                        <bx_injection:injection_content_after />
-                    <bx_injection:banner_bottom />
-                </div> <!-- #bx-content-main -->
-                <bx_injection:injection_between_content_footer />
-            </div> <!-- #bx-content-container -->
-        </div>
-    </div> <!-- #bx-content-wrapper -->
+                <bx_include_auto:_page_content_end.html />
+            </div> <!-- #bx-content-wrapper -->
+        </div> <!-- #bx-content-with-submenu-wrapper -->
+    </div> <!-- #bx-content-with-cover-wrapper -->
 
     <bx_include_auto:footer.html />
 
     <bx_menu:sys_site_action />
-</div> <!-- .bx-main -->
+</div> <!-- #bx-content-with-toolbar-wrapper -->
 
 <bx_include_auto:_footer.html />

template/_sub_header.html

@@ -1,77 +1,10 @@
 <bx_include_auto:_header.html />
-<div class="bx-main <bx_injection:injection_main_class />">
-    <bx_injection:top />
-    <div id="bx-toolbar" class="bx-header bx-def-z-index-nav fixed top-0 w-full ring-1 ring-gray-300 dark:ring-gray-700 bg-white/95 dark:bg-gray-800/95 backdrop-blur shadow">
-        <div class="bx-header-cnt __sys_header_width__ mx-auto px-3 md:px-4 lg:px-6 box-border">
-            <div class="bx-toolbar-content-wrapper">
-                <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
-                    <!-- Mobile: Hamburger -->
-                    <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden mr-4">
-                        <bx_menu:sys_toolbar_site />
-                    </div>
-
-                    <div class="bx-toolbar-items-group relative flex flex-1 items-center justify-start h-16">
-                        <!-- Logo -->
-                        <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
-                            <bx_injection:injection_logo_before />
-                            __main_logo__
-                            <bx_injection:injection_logo_after />
-                        </div>
-                        <!-- Menu -->
-                        <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
-                            <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
-                                <bx_menu:sys_site />
-                            </div>
-                        </div>
-                        <!-- Search -->
-                        <div class="bx-toolbar-item bx-ti-search flex-1 lg:flex-none flex items-center justify-end">
-                            <div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
-                                <div class="relative w-full">__sys_site_search__</div>
-                            </div>
-                            <div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
-                                <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
-                                    <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
-                                        <div class="bx-icon">
-                                            <bx_image_auto:search />
-                                        </div>
-                                    </span>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Members Toolbar -->
-                    <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right flex-none">
-                        <bx_menu:sys_toolbar_member />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <bx_injection:injection_between_cover_logo />
-    __cover__
-    <bx_injection:injection_between_cover_top_menu />
-    <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 __site_submenu_hidden__">
-        <div id="bx-menu-main-bar" class="bx-menu-main-bar __site_submenu_class__ bx-def-page-width mx-auto px-4 sm:px-6 lg:px-8 box-border">
-            <div class="bx-menu-main-bar-cnt -mb-px">
-                <bx_injection:injection_top_menu_before />
-                <div class="flex items-center h-full text-center">
-                    <div class="relative flex-1 h-full">
-                        <div class="absolute w-full h-full">
-                            <bx_menu:sys_site_submenu />
-                        </div>
-                    </div>
-                    <div class="flex-none">
-                        <bx_menu:sys_site_manage />
-                    </div>
-                </div>
-                <bx_injection:injection_top_menu_after />
-            </div>
-        </div>
-    </div>
-    <bx_injection:injection_between_content_menu />
-    <div id="bx-content-wrapper">
-        __informer__
-        <div class="bx-page-wrapper bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
-            <div id="bx-content-container" class="bx-content-container">
-                <bx_injection:injection_content_before />
-                <div id="bx-content-main" class="bx-content-main my-4 lg:my-6">
+<div id="bx-content-preload" class="hidden"></div>
+<div id="bx-content-with-toolbar-wrapper" class="bx-main <bx_injection:injection_main_class />">
+    <bx_include_auto:_page_toolbar.html />
+    <div id="bx-content-with-cover-wrapper">
+        <bx_include_auto:_page_cover.html />
+        <div id="bx-content-with-submenu-wrapper">
+            <bx_include_auto:_page_submenu.html />
+            <div id="bx-content-wrapper">
+                <bx_include_auto:_page_content_beg.html />

template/menu_main_submenu.html

@@ -1,6 +1,6 @@
 <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ bx-clearfix">
     <bx_repeat:menu_items>
-        <li class="bx-def-padding-sec-right bx-def-padding-sec-left bx-def-color-bg-hl-hover __class_add__">
+        <li class="bx-def-padding-sec-right bx-def-padding-sec-left bx-def-color-bg-hl-hover __class_add__" __attrs_wrp__>
             <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> __attrs__>
                 <span class="bx-menu-item-title">__title__</span>
                 <bx_if:addon>

template/page_50.html

@@ -0,0 +1 @@
+__page_main_code__

template/page_54.html

@@ -0,0 +1,11 @@
+<div id="bx-content-with-cover-wrapper">
+    <bx_include_auto:_page_cover.html />     
+    <div id="bx-content-with-submenu-wrapper">
+        <bx_include_auto:_page_submenu.html />
+        <div id="bx-content-wrapper">
+            <bx_include_auto:_page_content_beg.html />
+            __page_main_code__
+            <bx_include_auto:_page_content_end.html />
+        </div>
+    </div>
+</div>

template/page_56.html

@@ -0,0 +1,8 @@
+<div id="bx-content-with-submenu-wrapper">
+    <bx_include_auto:_page_submenu.html />
+    <div id="bx-content-wrapper">
+        <bx_include_auto:_page_content_beg.html />
+        __page_main_code__
+        <bx_include_auto:_page_content_end.html />
+    </div>
+</div>

template/scripts/BxBaseMenu.php

@@ -234,6 +234,20 @@ class BxBaseMenu extends BxDolMenu
         $a['title_attr'] = bx_html_attribute(strip_tags($a['title']));
 
         $a['attrs'] = $this->_getMenuAttrs($a);
+        $a['attrs_wrp'] = '';
+
+        if($this->_bHx /*&& strpos($a['name'], '-manage') === false*/) {
+            $this->_aHx['get'] = $a['link'];
+            $a['attrs'] .= bx_get_htmx_attrs($this->_aHx);
+
+            if(!bx_is_htmx_request() && !$this->_isSelected($a))
+                $a['attrs_wrp'] .= bx_get_htmx_attrs([
+                    'get' => $a['link'],
+                    'trigger' => 'load',
+                    'target' => '#bx-content-preload',
+                    'swap' => 'beforeend',
+                ]);
+        }
 
         $a['bx_if:image'] = array (
             'condition' => (bool)$sIconUrl,

template/scripts/BxBasePage.php

@@ -124,7 +124,7 @@ class BxBasePage extends BxDolPage
      * Very similar to BxBasePage::getCode
      * but adds css and js files which are needed for the corect page display
      */ 
-    public function getCodeDynamic ()
+    public function getCodeDynamic ($bIncludesOnly = false)
     {
         // TODO: remake to use use collect* template methods
 
@@ -155,7 +155,7 @@ class BxBasePage extends BxDolPage
         foreach ($aJsNew as $a)
             $sJs .= $oTemplate->addJs($a['url'], true);
 
-        return $sJs . $sCss . $sContent;
+        return $sJs . $sCss . (!$bIncludesOnly ? $sContent : '');
     }
     
     /**