HTMX upgrade from v2 to v4 #5722

inc/js/functions.js

@@ -1202,7 +1202,7 @@ function bx_time(sLang, isAutoupdate, sRootSel) {
         	bx_activate_anim_icons();
 
             // process syntax hightlighing
-            if ('undefined' !== typeof(Prism) && eElement.size())
+            if ('undefined' !== typeof(Prism) && eElement[0] && eElement[0].querySelectorAll)
                 Prism.highlightAllUnder(eElement[0]);
 
             // process links

inc/utils.inc.php

@@ -2416,7 +2416,15 @@ function bx_get_htmx_target ()
     if(!bx_is_htmx_request())
         return false;
 
-    return isset($_SERVER['HTTP_HX_TARGET']) ? $_SERVER['HTTP_HX_TARGET'] : false;
+    if(!isset($_SERVER['HTTP_HX_TARGET']))
+        return false;
+
+    // htmx 4 sends "tag#id" (e.g. div#bx-content-wrapper); htmx 2 sent the id alone.
+    $sTarget = $_SERVER['HTTP_HX_TARGET'];
+    if(($iHash = strpos($sTarget, '#')) !== false)
+        $sTarget = rawurldecode(substr($sTarget, $iHash + 1));
+
+    return $sTarget;
 }
 
 function bx_get_htmx_attrs ($aAttrs, $mPreload = false)
@@ -2432,7 +2440,7 @@ function bx_get_htmx_attrs ($aAttrs, $mPreload = false)
         $aHxAttrs['hx-' . $sIndex] = $mixedValue;
     });
 
-    return bx_convert_array2attrs($aHxAttrs) . ($mPreload ? ' preload="' . $mPreload . '"' : '');
+    return bx_convert_array2attrs($aHxAttrs) . ($mPreload ? ' hx-preload="' . bx_html_attribute($mPreload) . '"' : '');
 }
 
 function bx_idn_to_utf8($sUrl, $bReturnDomain = false)

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

@@ -1,4 +1,5 @@
 <bx_include_auto:_header.html />
+<div id="bx-content-preload" class="hidden"></div>
 <div class="bx-main bx-pt-application <bx_injection:injection_main_class />">
     <bx_injection:top />
     <!-- BEG: Navigation -->

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

@@ -20,7 +20,6 @@ class BxTemplMenu extends BxBaseMenu
             //--- For page submenus ---//
             if(strpos($aObject['object'], '_submenu') !== false) {
                 $this->_bHx = getParam('bx_artificer_use_htmx') == 'on';
-                $this->_bHxHead = $this->_bHx && true;
                 $this->_mHxPreload = $this->_bHx && true;
                 $this->_aHx = [
                     'get' => '',
@@ -28,19 +27,9 @@ class BxTemplMenu extends BxBaseMenu
                     'target' => '#bx-content-wrapper',
                     'swap' => 'outerHTML swap:400ms settle:400ms',
                     'push-url' => 'true',
-                    'on::before-on-load' => 'oBxArtificerUtils.submenuClickBl(this)',
-                    'on::after-on-load' => 'oBxArtificerUtils.submenuClickAl(this)'
+                    'on::before:swap' => 'oBxArtificerUtils.submenuClickBl(this)',
+                    'on::after:swap' => 'oBxArtificerUtils.submenuClickAl(this)'
                 ];
-
-                $sExtensions = '';
-                if($this->_bHxHead)
-                    $sExtensions .= ' head-support';
-                if($this->_mHxPreload)
-                    $sExtensions .= ' preload';
-
-                $sInjection = '';
-                if(($sExtensions = trim($sExtensions)) != '')
-                    $this->_oTemplate->addInjection('injection_body', 'text', 'hx-ext="' . $sExtensions . '"');
             }
         }
 

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

@@ -38,7 +38,6 @@ class BxTemplMenuSite extends BxTemplMenuMoreAuto
 
         if($this->_bSiteMenu) {
             $this->_bHx = getParam('bx_artificer_use_htmx') == 'on';
-            $this->_bHxHead = $this->_bHx && true;
             $this->_mHxPreload = $this->_bHx && true;
             $this->_aHx = [
                 'get' => '',
@@ -46,7 +45,7 @@ class BxTemplMenuSite extends BxTemplMenuMoreAuto
                 'target' => '#bx-content-with-cover-wrapper',
                 'swap' => 'outerHTML settle:400ms',
                 'push-url' => 'true',
-                'on::after-on-load' => 'oBxArtificerUtils.mmenuClickAl(this)'
+                'on::after:swap' => 'oBxArtificerUtils.mmenuClickAl(this)'
             ];
         }
     }

modules/boonex/artificer/js/utils.js

@@ -6,14 +6,23 @@ function BxArtificerUtils(oOptions)
     this._aHtmlIds = undefined == oOptions.aHtmlIds ? {} : oOptions.aHtmlIds;  
     this._sColorScheme = undefined == oOptions.sColorScheme ? 'auto' : oOptions.sColorScheme;
 
-    if(htmx != undefined)
-        htmx.on('htmx:afterSwap', function(evt) {
-            var oTarget = $(evt.target);
-            if(oTarget.attr('id') == 'bx-content-preload')
-                return;
-
-            oTarget.bxProcessHtml();
+    if(htmx != undefined) {
+        // 4xx and 5xx responses stay out of the page, same as htmx 2.
+        htmx.config.noSwap = [204, 304, '4xx', '5xx'];
+        htmx.on('htmx:before:settle', function(evt) {
+            // outerHTML settle fires on the first inserted node. A leading
+            // newline makes that a text node, which has no querySelectorAll.
+            var aNodes = evt.target && evt.target.nodeType === 1 ? [evt.target] : ((evt.detail && evt.detail.newContent) || []);
+
+            for(var i = 0; i < aNodes.length; i++) {
+                var oNode = aNodes[i];
+                if(!oNode || oNode.nodeType !== 1 || oNode.id == 'bx-content-preload')
+                    continue;
+
+                $(oNode).bxProcessHtml();
+            }
         });
+    }
 
     this.init();
 }

package.json

@@ -35,8 +35,6 @@
     "headroom.js": "^0.12.0",
     "highlight.js": "github:highlightjs/highlight.js",
     "hls.js": "^1.7.3",
-    "htmx-ext-head-support": "^2.0.5",
-    "htmx-ext-preload": "^2.1.2",
     "htmx.org": "^4.0.0",
     "jekyll-toc": "https://github.com/ghiculescu/jekyll-table-of-contents",
     "jquery": "^3.7.1",
@@ -95,7 +93,7 @@
     "build:fullcalendar": "mkdir -p plugins_public/fullcalendar/locales; cd plugins_public/fullcalendar; cp ../../node_modules/fullcalendar/index.global.min.js .; cp ../../node_modules/@fullcalendar/core/locales/*.min.js ./locales",
     "build:grapesjs": "mkdir -p plugins_public/grapesjs; cd plugins_public/grapesjs; cp ../../node_modules/grapesjs/dist/grapes.min.js .; cp ../../node_modules/grapesjs/dist/css/grapes.min.css .; cp ../../node_modules/grapesjs-blocks-basic/dist/index.js grapesjs-blocks-basic.js; cp ../../node_modules/grapesjs-preset-newsletter/dist/index.js grapesjs-preset-newsletter.min.js; cp ../../node_modules/grapesjs-preset-webpage/dist/index.js grapesjs-preset-webpage.min.js; cp ../../node_modules/grapesjs-style-bg/dist/index.js grapesjs-style-bg.js",
     "build:highlight.js": "mkdir -p plugins_public/highlight; cd node_modules/highlight.js; npm i; npm run build-browser; cp build/highlight.min.js ../../plugins_public/highlight; npm run build-cdn; cp build/styles/default.min.css ../../plugins_public/highlight",
-    "build:htmx": "mkdir -p plugins_public/htmx; cd plugins_public/htmx; cp ../../node_modules/htmx.org/dist/htmx.min.js .; cp ../../node_modules/htmx-ext-head-support/dist/head-support.min.js .; cp ../../node_modules/htmx-ext-preload/dist/preload.min.js .",
+    "build:htmx": "mkdir -p plugins_public/htmx; cd plugins_public/htmx; cp ../../node_modules/htmx.org/dist/htmx.min.js .; cp ../../node_modules/htmx.org/dist/ext/hx-head.min.js head-support.min.js; cp ../../node_modules/htmx.org/dist/ext/hx-preload.min.js preload.min.js",
     "build:jquery-minicolors": "mkdir -p plugins_public/jquery-minicolors; cd node_modules/@claviska/jquery-minicolors; cp jquery.minicolors.* ../../../plugins_public/jquery-minicolors",
     "build:jquery": "mkdir -p plugins_public/jquery; cd plugins_public/jquery; cp ../../node_modules/jquery/dist/jquery.min.* .; cp ../../node_modules/jquery-migrate/dist/jquery-migrate.min.* .",
     "build:jquery-ui": "mkdir -p plugins_public/jquery-ui; cd plugins_public/jquery-ui; cp ../../node_modules/jquery-ui/dist/jquery-ui.min.js .",

yarn.lock

@@ -2250,25 +2250,6 @@ html-void-elements@^3.0.0:
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-3.0.0.tgz#fc9dbd84af9e747249034d4d62602def6517f1d7"
   integrity sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==
 
-htmx-ext-head-support@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/htmx-ext-head-support/-/htmx-ext-head-support-2.0.5.tgz#c318dd1da22b64f2bc13778333bb6935e3dc96d7"
-  integrity sha512-fTzqnCw7OnMijiS48CCBFBHTuOMvycbX0nEFRL0lkRxyu5DFWX90IV1SwXpQ92fJf02IzkXcRNyjXn3j0QtYxA==
-  dependencies:
-    htmx.org "^2.0.2"
-
-htmx-ext-preload@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/htmx-ext-preload/-/htmx-ext-preload-2.1.2.tgz#a994576136ab779cb4bb8d6839553e23e452cb37"
-  integrity sha512-foD06XAITUUQApCUQnPexyJ6B7+4vFGMQ+t42unTVTGRu/CYHdAAt6oHg7eekPHT7NRnbM5hjnGVKtClryPabg==
-  dependencies:
-    htmx.org "^2.0.3"
-
-htmx.org@^2.0.2, htmx.org@^2.0.3:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-2.0.10.tgz#62442b0e2952a885ae2e50a7654b8b20d0981134"
-  integrity sha512-kdeJe7ZVwaS6QMz/ebBIVtZdpwen6L0OQ5GOhPV9MKBb196TCZeZu4yA7ZIQsaLKv7EpXz+So7KSXNuHXhj7Cw==
-
 htmx.org@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/htmx.org/-/htmx.org-4.0.0.tgz#72323bd24261364fe3111803c46b80da1fb33445"
@@ -2729,7 +2710,6 @@ jstree@^3.3.17:
 
 "jush@https://github.com/vrana/jush":
   version "0.0.0"
-  uid "2de48f298628de73aea71f1af12a63f2ad03878f"
   resolved "https://github.com/vrana/jush#2de48f298628de73aea71f1af12a63f2ad03878f"
 
 just-diff-apply@^5.2.0: