use idiomorph swapping for dashboard

mrf7777 · Jan 31, 2024 · 2fb74c1 · 2fb74c1
1 parent 4863d74
commit 2fb74c1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/furfolio/static/js/idiomorph-ext.min.js b/furfolio/static/js/idiomorph-ext.min.js
diff --git a/furfolio/templates/base.html b/furfolio/templates/base.html
@@ -25,12 +25,19 @@
     </title>
     <link href="{% static "/style/style.css" %}" rel="stylesheet">
     <script src="{% static "/js/bootstrap.bundle.min.js" %}"></script>
+
     <script src="{% static "/js/htmx.min.js" %}"></script>
+    <script src="{% static "/js/idiomorph-ext.min.js" %}"></script>
+    <script type="text/javascript">
+        // set defaults for idiomorph swapping in htmx
+        Idiomorph.defaults.callbacks.beforeAttributeUpdated = function(attributeName, node, mutationType) { return false; }
+        Idiomorph.defaults.morphStyle = "innerHTML"
+    </script>
 
     {% progressive_web_app_meta %}
 </head>
 
-<body class="d-flex flex-column vh-100">
+<body class="d-flex flex-column vh-100" hx-ext="morph">
 
     {% block header %}
     <div class="container-fluid">

diff --git a/furfolio/templates/furfolio/dashboards/creator.html b/furfolio/templates/furfolio/dashboards/creator.html
@@ -42,7 +42,8 @@
 
 <div
     hx-get="{% url "dashboard_commissions_component" %}?{% query_replace request "next" request.get_full_path %}"
-    hx-trigger="every 10s"
+    hx-trigger="every 5s"
+    hx-swap="morph:innerHTML"
 >
     {% include "./commissions_component.html" %}
 </div>