UX/UI: Problème de rechargement des sliding-tabs apres reload htmx

[hellodeloo]

🤔 Pourquoi ?

Les onglets data-it-sliding-tabs="true" n’est pas réinterprété en "sliding-tabs" après un rechargement partiel htmxx

[francoisfreitag]

Un patch avec suggestions d’amélioration :

• Ne chercher des sliding tabs que dans target et non document, pour ne pas initialiser deux fois les onglets sur un document lors du chargement d’une réponse HTMX
• Utilisation du sélecteur CSS précis au lieu du commentaire pas clair
• Simplification du calcul de startIndex, et utilisation d’entiers et non d’une string (slidingTabs.getAttribute("data-it-sliding-tabs-startindex") === "2")
• Préférer const à let, pour indiquer qu’il n’y aura pas de changements

diff --git a/itou/static/js/sliding_tabs.js b/itou/static/js/sliding_tabs.js
index 2825c1e15..04ce4cb9e 100644
--- a/itou/static/js/sliding_tabs.js
+++ b/itou/static/js/sliding_tabs.js
@@ -1,15 +1,10 @@
 "use strict";
 
-htmx.onLoad(function (target) {
-  // Only for <ul.s-tabs-01__nav.nav.nav-tabs> how has data-it-sliding-tabs="true" attribute
-  let slidingTabs = document.querySelector("[data-it-sliding-tabs=true]");
+htmx.onLoad(function(target) {
+  const slidingTabs = target.querySelector("ul.s-tabs-01__nav.nav.nav-tabs[data-it-sliding-tabs=true]");
 
   if (slidingTabs) {
-    let slidingTabsStartIndex = 0;
-
-    if (slidingTabs.hasAttribute("data-it-sliding-tabs-startindex")) {
-      slidingTabsStartIndex = slidingTabs.getAttribute("data-it-sliding-tabs-startindex")
-    }
+    const slidingTabsStartIndex = Number.parseInt(slidingTabs.getAttribute("data-it-sliding-tabs-startindex")) || 0;
 
     tns({
       container: slidingTabs,

[hellodeloo]

@francoisfreitag Merci, je prends tout sauf le "sélecteur CSS précis" car trop précis.
J'ai une autre mise en forme de slider (pas les même classes) qui utilise aussi le slide via [data-it-sliding-tabs=true]

[francoisfreitag]

On pourrait aller un poil plus loin avec un querySelectorAll.

[francoisfreitag]

"use strict";

htmx.onLoad(function(target) {
  target.querySelectorAll("[data-it-sliding-tabs=true]").forEach(function(slidingTabs) {
    const slidingTabsStartIndex = Number.parseInt(slidingTabs.getAttribute("data-it-sliding-tabs-startindex")) || 0;
    tns({
      container: slidingTabs,
      slideBy: "page",
      autoWidth: true,
      arrowKeys: true,
      loop: false,
      mouseDrag: true,
      swipeAngle: false,
      speed: 300,
      nav: false,
      controls: true,
      startIndex: slidingTabsStartIndex,
    });
  })
});

[francoisfreitag]

Cette nouvelle version supporte plusieurs éléments sliding tabs dans une page (ou un fragment) et n’a pas besoin du if (slidingTabs) {}, ce qui me semble un peu plus clair.

[hellodeloo]

Cette nouvelle version supporte plusieurs éléments sliding tabs dans une page (ou un fragment) et n’a pas besoin du if (slidingTabs) {}, ce qui me semble un peu plus clair.

Quelle concision ✂️