fix automatic scrolling with htmx requests

frontend/shared/utils/HAWCUtils.js

@@ -347,5 +347,63 @@ class HAWCUtils {
                 }
             });
     }
+
+    static hideElement(el, deleteEl) {
+        const scrollVal = $(el).attr("scrolltop");
+        deleteEl ? $(el).remove() : $(el).addClass("hidden");
+        if (scrollVal) {
+            $("body,html").animate({scrollTop: scrollVal}, 400);
+        }
+    }
+
+    static addScrollHtmx(editClass, detailClass, deleteBtnId = null) {
+        $("body").on("htmx:afterSwap", function(evt) {
+            const elSwapOut = evt.detail.target,
+                elSwapIn = evt.detail.elt,
+                editElement = $(elSwapIn).hasClass(editClass)
+                    ? elSwapIn
+                    : $(elSwapIn)
+                          .children("." + editClass)
+                          .first();
+
+            if ($(editElement).length && !$(editElement).hasClass("hidden")) {
+                if ($(elSwapOut).hasClass(editClass)) {
+                    // Maintain scroll attr between elements if source has a scollTop attr
+                    // eg., if source and target are a form (failed update/create),
+                    // otherwise set to current position.
+                    const scrollTo = $(elSwapOut).attr("scrolltop") || $("body,html").scrollTop();
+                    $(editElement).attr("scrolltop", scrollTo);
+                } else {
+                    // otherwise, set scroll attr to current scroll position so we can return later
+                    const scrollTo = $("body,html").scrollTop();
+                    $(editElement).attr("scrolltop", scrollTo);
+                }
+                // animate scroll to form
+                const scrollTo = $(editElement).offset().top - 20;
+                $("body,html").animate({scrollTop: scrollTo}, 400);
+            } else {
+                // if the form is being replaced by a read row, scroll to original position
+                if (
+                    $(elSwapIn).hasClass(detailClass) &&
+                    $(elSwapOut).hasClass(editClass) &&
+                    !$(elSwapIn).hasClass("clone")
+                ) {
+                    const scrollTo = $(elSwapOut).attr("scrolltop");
+                    $("body,html").animate({scrollTop: scrollTo}, 400);
+                }
+            }
+        });
+        if (deleteBtnId) {
+            $("body").on("htmx:afterRequest", function(evt) {
+                // handle successful row deletion
+                const elSwapOut = evt.detail.target,
+                    targetEl = evt.detail.elt,
+                    scrollPosition = $(elSwapOut).attr("scrolltop");
+                if (targetEl.getAttribute("id") == deleteBtnId && evt.detail.successful) {
+                    $("body,html").animate({scrollTop: scrollPosition}, 800);
+                }
+            });
+        }
+    }
 }
 export default HAWCUtils;

hawc/apps/eco/templates/eco/design_update.html

@@ -13,7 +13,7 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:cause-htmx' object.pk 'create' as cause_create %}
-      {% include "eco/fragments/_create_card.html" with title="Causes" hx_get=cause_create hx_target="#cause-empty-row" model="cause" %}
+      {% include "eco/fragments/_create_card.html" with title="Causes" hx_get=cause_create hx_target=".cause-edit-row" model="cause" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '10,15,15,15,15,15,15' %}
         {% bs4_thead 'Name,Term,Species,Level,Level Units,Comment,Edit' %}
@@ -22,9 +22,9 @@ <h2 class="d-inline-block">{{object.name}}</h2>
             {% for object in causes %}
               {% include "eco/fragments/cause_row.html" %}
             {% endfor %}
-            {% include "eco/fragments/_create_one.html" with id="cause-empty-row" text="" %}
+            {% include "eco/fragments/_create_one.html" with class="cause-edit-row" text="" %}
           {% else %}
-            {% include "eco/fragments/_create_one.html" with id="cause-empty-row" text="causes" %}
+            {% include "eco/fragments/_create_one.html" with class="cause-edit-row" text="causes" %}
           {% endif %}
         </tbody>
       </table>
@@ -34,7 +34,7 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:effect-htmx' object.pk 'create' as effect_create %}
-      {% include "eco/fragments/_create_card.html" with title="Effects" hx_get=effect_create hx_target="#effect-empty-row" model="effect" %}
+      {% include "eco/fragments/_create_card.html" with title="Effects" hx_get=effect_create hx_target=".effect-edit-row" model="effect" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '10,15,15,15,15,15,15' %}
         {% bs4_thead 'Name,Term,Species,Units,As Reported,Comment,Edit' %}
@@ -43,9 +43,9 @@ <h2 class="d-inline-block">{{object.name}}</h2>
             {% for object in effects %}
               {% include "eco/fragments/effect_row.html" %}
             {% endfor %}
-            {% include "eco/fragments/_create_one.html" with id="effect-empty-row" text="" %}
+            {% include "eco/fragments/_create_one.html" with class="effect-edit-row" text="" %}
           {% else %}
-            {% include "eco/fragments/_create_one.html" with id="effect-empty-row" text="effects" %}
+            {% include "eco/fragments/_create_one.html" with class="effect-edit-row" text="effects" %}
           {% endif %}
         </tbody>
       </table>
@@ -55,7 +55,7 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:result-htmx' object.pk 'create' as result_create %}
-      {% include "eco/fragments/_create_card.html" with title="Results" hx_get=result_create hx_target="#result-empty-row" model="result" %}
+      {% include "eco/fragments/_create_card.html" with title="Results" hx_get=result_create hx_target=".result-edit-row" model="result" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '15,15,15,10,15,15,15' %}
         {% bs4_thead 'Name,Cause,Effect,Relationship Direction,Modifying Factors,Value,Edit' %}
@@ -64,9 +64,9 @@ <h2 class="d-inline-block">{{object.name}}</h2>
             {% for object in results %}
               {% include "eco/fragments/result_row.html" %}
             {% endfor %}
-            {% include "eco/fragments/_create_one.html" with id="result-empty-row" text="" %}
+            {% include "eco/fragments/_create_one.html" with class="result-edit-row" text="" %}
           {% else %}
-            {% include "eco/fragments/_create_one.html" with id="result-empty-row" text="results" %}
+            {% include "eco/fragments/_create_one.html" with class="result-edit-row" text="results" %}
           {% endif %}
         </tbody>
       </table>
@@ -77,3 +77,11 @@ <h2 class="d-inline-block">{{object.name}}</h2>
     <a class="btn btn-light my-3" id="design-page-cancel" href="{{object.get_absolute_url}}"><i class="fa fa-fw fa-times"></i>Cancel</a>
   </div>
 {% endblock %}
+
+{% block extrajs %}
+  <script type="text/javascript">
+    $(window).ready(function() {
+      window.app.HAWCUtils.addScrollHtmx("eco-edit-row", "eco-obj-row");
+    });
+  </script>
+{% endblock %}

hawc/apps/eco/templates/eco/fragments/_create_one.html

@@ -1,4 +1,4 @@
-<tr id={{id}} hx-target="this" >
+<tr hx-target="this" class="{% if not text %} hidden {% endif %} eco-edit-row {{class}}">
   {% if text %}
     <td colspan="100%">
       <p class="text-center mb-0">No {{text}}. Create one?</p>

hawc/apps/eco/templates/eco/fragments/_object_edit_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML swap:0s" id="{{model}}-empty-row">
+<tr hx-target="this" hx-swap="outerHTML swap:0s" class="eco-edit-row {{model}}-edit-row">
   {% if form %}
     <td colspan="100%">
       <form method="post" class="border my-2 p-2 pb-5 edit-form-background form-{{model}}">
@@ -18,7 +18,7 @@
               Save
             </button>
             <button id="{{model}}-cancel" class="btn btn-sm btn-light" type='button'
-                    onclick="this.parentNode.parentNode.parentNode.setAttribute('style', 'display: none')"><i
+                    onclick="window.app.HAWCUtils.hideElement($(this).closest('.eco-edit-row'))"><i
               class="fa fa-fw fa-times mr-1"></i>
               Cancel</button>
           {% endif %}

hawc/apps/eco/templates/eco/fragments/_object_row.html

@@ -18,7 +18,7 @@
     <button id="{{model}}-delete" class="btn btn-sm btn-danger" hx-get="{% crud_url 'eco' model 'delete' object.pk %}">
       <i class="fa fa-trash" aria-hidden="true"></i></button>
     <button id="{{model}}-clone" class="btn btn-sm btn-secondary" hx-post="{% crud_url 'eco' model 'clone' object.pk %}"
-            hx-target="#{{model}}-empty-row" hx-swap="outerHTML">
+            hx-target=".{{model}}-edit-row" hx-swap="outerHTML">
       <i class="fa fa-clone" aria-hidden="true"></i></button>
   </td>
 {% endif %}

hawc/apps/eco/templates/eco/fragments/cause_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML" id="cause-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="cause-{{object.id}}">
   <td>{{object.name}}</td>
   <td>{{object.term.name}}</td>
   <td>{{object.species }}</td>
@@ -8,5 +8,5 @@
   {% include "eco/fragments/_object_row.html" with model="cause" %}
 </tr>
 {% if action == 'create' or action == 'clone' %}
-  <tr style="display: none" id="cause-empty-row" hx-target="this"></tr>
-{% endif %}
+  <tr class="hidden eco-edit-row cause-edit-row" hx-target="this"></tr>
+{% endif %}

hawc/apps/eco/templates/eco/fragments/effect_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML" id="effect-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="effect-{{object.id}}">
   <td>{{object.name}}</td>
   <td>{{object.term.name}}</td>
   <td>{{object.species }}</td>
@@ -8,5 +8,5 @@
   {% include "eco/fragments/_object_row.html" with model="effect" %}
 </tr>
 {% if action == 'create' or action == 'clone' %}
-  <tr style="display: none" id="effect-empty-row" hx-target="this"></tr>
+  <tr class="hidden eco-edit-row effect-edit-row" hx-target="this"></tr>
 {% endif %}

hawc/apps/eco/templates/eco/fragments/result_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML" id="result-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="result-{{object.id}}">
   <td>{{object.name}}</td>
   <td>{{object.cause.name}}</td>
   <td>{{object.effect.name }}</td>
@@ -13,5 +13,5 @@
   {% include "eco/fragments/_object_row.html" with model="result" %}
 </tr>
 {% if action == 'create' or action == 'clone' %}
-  <tr style="display: none" id="result-empty-row" hx-target="this"></tr>
+  <tr class="hidden eco-edit-row result-edit-row" hx-target="this"></tr>
 {% endif %}

hawc/apps/epiv2/templates/epiv2/design_update.html

@@ -13,7 +13,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:chemical-htmx' object.pk 'create' as chemical_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Chemicals" hx_get=chemical_create hx_target="#chemical-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Chemicals" hx_get=chemical_create hx_target=".chemical-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '43,42,15' %}
         {% bs4_thead 'Name,DTXSID,Edit' %}
@@ -22,9 +22,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.chemicals.all %}
               {% include "epiv2/fragments/chemical_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="chemical-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="chemical-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="chemical-empty-row" text="chemicals" %}
+            {% include "epiv2/fragments/_create_one.html" with class="chemical-edit-row" text="chemicals" %}
           {% endif %}
         </tbody>
       </table>
@@ -34,7 +34,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:exposure-htmx' object.pk 'create' as exposure_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Exposure Measurements" hx_get=exposure_create hx_target="#exposure-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Exposure Measurements" hx_get=exposure_create hx_target=".exposure-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '29,28,28,15' %}
         {% bs4_thead 'Name,Measurement Type, Measurement Timing,Edit' %}
@@ -43,9 +43,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.exposures.all %}
               {% include "epiv2/fragments/exposure_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="exposure-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="exposure-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="exposure-empty-row" text="exposure measurements" %}
+            {% include "epiv2/fragments/_create_one.html" with class="exposure-edit-row" text="exposure measurements" %}
           {% endif %}
         </tbody>
       </table>
@@ -55,7 +55,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:exposurelevel-htmx' object.pk 'create' as exposurelevel_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Exposure Levels" hx_get=exposurelevel_create hx_target="#exposurelevel-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Exposure Levels" hx_get=exposurelevel_create hx_target=".exposurelevel-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '17,17,17,17,17,15' %}
         {% bs4_thead 'Name,Chemical,Exposure,Central Tendency,Comments,Edit' %}
@@ -64,9 +64,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.exposure_levels.all %}
               {% include "epiv2/fragments/exposurelevel_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="exposurelevel-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="exposurelevel-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="exposurelevel-empty-row" text="exposure levels" %}
+            {% include "epiv2/fragments/_create_one.html" with class="exposurelevel-edit-row" text="exposure levels" %}
           {% endif %}
         </tbody>
       </table>
@@ -76,7 +76,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:outcome-htmx' object.pk 'create' as outcome_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Outcomes" hx_get=outcome_create hx_target="#outcome-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Outcomes" hx_get=outcome_create hx_target=".outcome-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '22,21,21,21,15' %}
         {% bs4_thead 'System,Effect,Effect Detail,Endpoint/Outcome,Edit' %}
@@ -85,9 +85,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.outcomes.all %}
               {% include "epiv2/fragments/outcome_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="outcome-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="outcome-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="outcome-empty-row" text="outcomes" %}
+            {% include "epiv2/fragments/_create_one.html" with class="outcome-edit-row" text="outcomes" %}
           {% endif %}
         </tbody>
       </table>
@@ -97,7 +97,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:adjustmentfactor-htmx' object.pk 'create' as adjustmentfactor_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Adjustment Factors" hx_get=adjustmentfactor_create hx_target="#adjustmentfactor-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Adjustment Factors" hx_get=adjustmentfactor_create hx_target=".adjustmentfactor-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '20,40,25,15' %}
         {% bs4_thead 'Name,Description,Comments,Edit' %}
@@ -106,9 +106,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.adjustment_factors.all %}
               {% include "epiv2/fragments/adjustment_factor_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="adjustmentfactor-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="adjustmentfactor-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="adjustmentfactor-empty-row" text="adjustment factors" %}
+            {% include "epiv2/fragments/_create_one.html" with class="adjustmentfactor-edit-row" text="adjustment factors" %}
           {% endif %}
         </tbody>
       </table>
@@ -118,7 +118,7 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'epiv2:dataextraction-htmx' object.pk 'create' as dataextraction_create %}
-      {% include "epiv2/fragments/_create_card.html" with title="Data Extractions" hx_get=dataextraction_create hx_target="#dataextraction-empty-row" %}
+      {% include "epiv2/fragments/_create_card.html" with title="Data Extractions" hx_get=dataextraction_create hx_target=".dataextraction-edit-row" %}
       <table class="table table-sm table-striped">
         {% bs4_colgroup '12,12,12,12,6,6,6,12,12,10' %}
         {% bs4_thead 'Group,Outcome,Exposure<br/>Level,Timing,Estimate<br>Type,N,Value,Confidence,Comments,Edit' %}
@@ -127,9 +127,9 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
             {% for object in object.data_extractions.all %}
               {% include "epiv2/fragments/data_extraction_row.html" %}
             {% endfor %}
-            {% include "epiv2/fragments/_create_one.html" with id="dataextraction-empty-row" text="" %}
+            {% include "epiv2/fragments/_create_one.html" with class="dataextraction-edit-row" text="" %}
           {% else %}
-            {% include "epiv2/fragments/_create_one.html" with id="dataextraction-empty-row" text="extractions" %}
+            {% include "epiv2/fragments/_create_one.html" with class="dataextraction-edit-row" text="extractions" %}
           {% endif %}
         </tbody>
       </table>
@@ -148,5 +148,8 @@ <h2 class="d-inline-block">Update {{object.summary}}</h2>
     window.app.startup("epiv2Startup", function(app){
       app.formStartup(document);
     });
+    $(window).ready(function() {
+      window.app.HAWCUtils.addScrollHtmx("epiv2-edit-row", "epiv2-obj-row");
+    });
   </script>
 {% endblock %}

hawc/apps/epiv2/templates/epiv2/fragments/_create_one.html

@@ -1,4 +1,4 @@
-<tr id={{id}} hx-target="this" >
+<tr hx-target="this" class="{% if not text %} hidden {% endif %} epiv2-edit-row {{class}}">
   {% if text %}
     <td colspan="100%">
       <p class="text-center mb-0">No {{text}} to display. Click "Add Row" to create one.</p>