use htmx hook to reduce flicker

gip-inclusion · Dec 20, 2024 · a55404b · a55404b
1 parent 0a24451
commit a55404b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/itou/static/js/utils.js b/itou/static/js/utils.js
@@ -205,7 +205,7 @@ htmx.onLoad((target) => {
   /**
    * JS to hide/unhide UI elements
    **/
-  querySelectorAllIncludingTarget(target, "form[data-hide-elements-when-selected]").forEach((form) => {
+  querySelectorAllIncludingTarget(target, "form[UNUSEDdata-hide-elements-when-selected]").forEach((form) => {
     form.addEventListener("change", function() {
       if (Array.from(form.elements).some((input) => input.checked)) {
         document.querySelectorAll(this.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.add("d-none"))

diff --git a/itou/templates/apply/list_for_siae.html b/itou/templates/apply/list_for_siae.html
@@ -64,4 +64,14 @@
     {{ filters_form.media.js }}
     <script src='{% static "js/htmx_compat.js" %}'></script>
     <script src='{% static "js/htmx_dropdown_filter.js" %}'></script>
+    <script nonce="{{ CSP_NONCE }}">
+        htmx.on("htmx:oobAfterSwap", function(evt) {
+            const form = document.querySelector("form[data-hide-elements-when-selected]")
+            if (Array.from(form.elements).some((input) => input.checked)) {
+                document.querySelectorAll(form.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.add("d-none"))
+            } else {
+                document.querySelectorAll(form.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.remove("d-none"))
+            }
+        });
+    </script>
 {% endblock %}