Refactor JavaScript inclusion

apis_core/apis_relations/templates/apis_core/apis_entities/abstractentity_form.html

@@ -11,125 +11,129 @@
 {% block scripts %}
   {{ block.super }}
   <script type="text/javascript">
-{% with object|opts as opts %}
-{% with opts.object_name|lower as modelname %}
-function GetFormAjax(FormName , ObjectID , ButtonText) {
-    function add_form(data) {
-        // update our tooltip content with our returned data and cache it
-        $('#tab_'+data.tab).find('div:eq(1)').remove();
-        $('#tab_'+data.tab).append(data.form);
-            $('#form_PersonInstitutionForm div:first div:first select').focus();
-        $('#tab_'+data.tab+" select.listselect2").each(function( index, element ){
-            console.log($(this).data("autocompleteLightUrl"))
-        $(this).select2({
-            escapeMarkup: function(markup) {
-            return markup;
-        },
-        templateResult: function(data) {
-            return data.text;
-        },
-        templateSelection: function(data) {
-            return data.text;
-        },
-            ajax: {
-            url: $(this).data("autocompleteLightUrl"),
-            dataType: 'json'
-            // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
-            },
-        })
+    {% with object|opts as opts %}
+      {% with opts.object_name|lower as modelname %}
 
+        function GetFormAjax(FormName, ObjectID, ButtonText) {
+          function add_form(data) {
+            {#update our tooltip content with our returned data and cache it#}
+            $("#tab_" + data.tab).find("div:eq(1)").remove();
+            $("#tab_" + data.tab).append(data.form);
+            $("#form_PersonInstitutionForm div:first div:first select").focus();
+            $("#tab_" + data.tab + " select.listselect2").each(function(index, element) {
+              console.log($(this).data("autocompleteLightUrl"))
+              $(this).select2({
+                escapeMarkup: function(markup) {
+                return markup;
+                },
+                templateResult: function(data) {
+                  return data.text;
+                },
+                templateSelection: function(data) {
+                  return data.text;
+                },
+                ajax: {
+                  url: $(this).data("autocompleteLightUrl"),
+                  dataType: "json"
+                  {#Additional AJAX parameters go here; see the end of this chapter for the full code of this example#}
+                },
+              })
+            })
+            {#$(".form.ajax_form").unbind()#}
+            console.log($("#tab_" + data.tab + " select.listselect2"))
 
-        })            //$(".form.ajax_form").unbind()
-        console.log($('#tab_'+data.tab+" select.listselect2"))
-        {% if apis_bibsonomy %}
-        reinitialize_bibsonomy_tooltips()
-        {% endif %}
-	$('#tab_'+data.tab).each(function() {
-	        htmx.process(this);
-	});
-    };
-    if (!$.ApisForms) {
-        $.ApisForms = {}
-    };
-    if (ObjectID === undefined) {
-        if ($.ApisForms[FormName+'_'+'{{object}}']) {
-            var new_data = $.ApisForms[FormName+'_'+'{{modelname}}']
-            new_data.form = new_data.form.replace('##ENT_PK##', {{object.pk}});
-            add_form(new_data);
-            return;
-        };
-    };
-    if (ButtonText === undefined) {
-        ButtonText = 'create/modify';
-    };
-    return $.ajax(
-        {
-            type: 'POST',
-            url: '{% url 'apis_core:apis_relations:get_form_ajax' %}',
+            {% if apis_bibsonomy %}
+              reinitialize_bibsonomy_tooltips()
+            {% endif %}
+
+            $("#tab_" + data.tab).each(function() {
+              htmx.process(this);
+            });
+          }
+
+          if (!$.ApisForms) {
+            $.ApisForms = {}
+          }
+          if (ObjectID === undefined) {
+            if ($.ApisForms[FormName + "_" + "{{object}}"]) {
+              var new_data = $.ApisForms[FormName + "_" + "{{modelname}}"]
+              new_data.form = new_data.form.replace("##ENT_PK##", {{object.pk}});
+              add_form(new_data);
+              return;
+            }
+          }
+          if (ButtonText === undefined) {
+            ButtonText = "create/modify";
+          }
+
+          return $.ajax({
+            type: "POST",
+            url: "{% url 'apis_core:apis_relations:get_form_ajax' %}",
             beforeSend: function(request) {
-                var csrftoken = getCookie('csrftoken');
-                request.setRequestHeader("X-CSRFToken", csrftoken);
+              var csrftoken = getCookie("csrftoken");
+              request.setRequestHeader("X-CSRFToken", csrftoken);
             },
             data: {
-                'FormName':FormName,
-                'SiteID':{{object.pk}},
-                'ObjectID':ObjectID,
-                'ButtonText':ButtonText,
-                'entity_type': '{{modelname}}',
+              "FormName": FormName,
+              "SiteID": {{object.pk}},
+              "ObjectID": ObjectID,
+              "ButtonText": ButtonText,
+              "entity_type": "{{modelname}}",
             },
             success: function(data) {
-		console.log(data);
-                add_form(data);
-                if (!ObjectID) {
-                    $.ApisForms[FormName+'_'+'{{modelname}}'] = data;
-                    $.ApisForms[FormName+'_'+'{{modelname}}'].form = $.ApisForms[FormName+'_'+'{{modelname}}'].form
-                    .replace('/{{object.pk}}/', '/##ENT_PK##/');
-                };
+              console.log(data);
+              add_form(data);
+              if (!ObjectID) {
+                $.ApisForms[FormName + "_" + "{{modelname}}"] = data;
+                $.ApisForms[FormName + "_" + "{{modelname}}"].form = $.ApisForms[FormName + "_" + "{{modelname}}"].form.replace("/{{object.pk}}/", "/##ENT_PK##/");
+              }
             },
             error: function(error) {
-                console.log(error)
+              console.log(error)
             }
+          });
+         }
+
+      {% endwith %}
+    {% endwith %}
+
+    function EntityRelationForm_response(response) {
+      if (response.test == false) {
+        $("#" + response.DivID).replaceWith(response.form);
+        {#$(".form.ajax_form").unbind();#}
+        if ($.ApisHigh.tt_instance_detail) {
+          if ($.ApisHigh.tt_instance_detail["__state"] == "stable") {
+            $.ApisHigh.tt_instance_detail.content(response.form);
+          }
         }
-    );
-}
-{% endwith %}
-{% endwith %}
+      } else {
+        console.log("test did not fail");
+        $("#tab_" + response.tab).find("div").remove();
+        $("#tab_" + response.tab).append(response.table_html);
 
-function EntityRelationForm_response(response){
-  if (response.test == false) {
-      $('#'+response.DivID).replaceWith(response.form);
-      //$(".form.ajax_form").unbind();
-      if ($.ApisHigh.tt_instance_detail) {
-      if ($.ApisHigh.tt_instance_detail["__state"] == 'stable') {
-          $.ApisHigh.tt_instance_detail.content(response.form);
-      } }
-  } else {
-      console.log('test did not fail');
-       $('#tab_'+response.tab).find('div').remove();
-       $('#tab_'+response.tab).append(response.table_html);
-       {% if object %}
-       if (response.right_card) {
-         GetFormAjax(response.tab);
-       };
-       if ($.ApisHigh){
-         if ($.ApisHigh.tt_instance_detail["__state"] == 'stable') {
-            $.ApisHigh.tt_instance_detail.close()
-         } else {
-            $('.reldelete').addClass('disabled')
-         }
-       }
-       {% endif %}
-  };
-}
+        {% if object %}
+          if (response.right_card) {
+            GetFormAjax(response.tab);
+          }
+          if ($.ApisHigh) {
+           if ($.ApisHigh.tt_instance_detail["__state"] == "stable") {
+             $.ApisHigh.tt_instance_detail.close()
+           } else {
+             $(".reldelete").addClass("disabled")
+           }
+          }
+        {% endif %}
+      }
+    }
   </script>
   {% object_relations as object_relations %}
   <script type="text/javascript">
-function activate_editing(){
-       {% for obj in object_relations %}
+    function activate_editing() {
+     {% for obj in object_relations %}
        GetFormAjax("{{obj.2}}");
-       //unbind_ajax_forms();
-       {% endfor %}
-};
-activate_editing();
+       {#unbind_ajax_forms();#}
+     {% endfor %}
+    }
+    activate_editing();
   </script>
 {% endblock scripts %}

apis_core/core/static/js/core.js

@@ -1,7 +1,66 @@
-//script that converts the multi select element
-$(document).ready(function() {
-    $('select.selectmultiple').multiselect({
-        includeSelectAllOption: true,
-        enableFiltering: true
-    });
-})
+/* config for bootstrap-multiselect widget,
+see also https://davidstutz.github.io/bootstrap-multiselect/#configuration-options
+*/
+function configMultiSelect() {
+  $('select.selectmultiple').multiselect({
+    includeSelectAllOption: true,
+    enableFiltering: true
+  });
+}
+
+/* config HTMX events,
+* see also https://htmx.org/events/
+*/
+function configHtmx() {
+  // DOM content swapping behaviour
+  document.body.addEventListener('htmx:beforeSwap', function(event) {
+    if (event.detail.xhr.status === 204) {
+      // swap even when the response is empty
+      event.detail.shouldSwap = true;
+    }
+  });
+}
+
+/* scroll-to-top button */
+function scrollButton() {
+
+  // get the button
+  let mybutton = document.getElementById("btn-back-to-top");
+
+  window.onscroll = function () {
+    scrollFunction();
+  };
+
+  // show button when user has scrolled down 20px from top of document
+  function scrollFunction() {
+    if (
+      document.body.scrollTop > 20 ||
+      document.documentElement.scrollTop > 20
+    ) {
+      mybutton.style.display = "block";
+    } else {
+      mybutton.style.display = "none";
+    }
+  }
+
+  // scroll back up on click on button
+  mybutton.addEventListener("click", backToTop);
+
+  function backToTop() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+}
+
+document.addEventListener("readystatechange", (event) => {
+  if (event.target.readyState === "interactive") {
+    // equivalent to DOMContentLoaded; document has loaded, defered scripts
+    // have downloaded and executed, sub-resources may not be ready yet
+  } else if (event.target.readyState === "complete") {
+    // fired when fully loaded, incl. sub-resources and async scripts
+
+    configMultiSelect();
+    configHtmx();
+    scrollButton();
+  }
+});

apis_core/core/templates/base.html

@@ -58,12 +58,26 @@
     {% endblock styles %}
 
     {% block scriptHeader %}
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
-      <script src="{% static "js/core.js" %}"></script>
-      <script src="{% static 'js/E53_Place_popover.js' %}"></script>
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"
+              defer></script>
+      {# Bootstrap 4.6.2 bundle (without jQuery) #}
+      {# see https://getbootstrap.com/docs/4.6/getting-started/introduction/ #}
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
+              integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
+              crossorigin="anonymous"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"
+              defer></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"
+              defer></script>
+      <script src="https://unpkg.com/htmx.org@1.9.10"
+              integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
+              crossorigin="anonymous"
+              defer></script>
+      <script src="{% static "js/core.js" %}" defer></script>
+      <script src="{% static 'js/E53_Place_popover.js' %}" defer></script>
     {% endblock %}
 
   </head>
@@ -239,18 +253,7 @@
       </footer>
     {% endblock footer %}
 
-    {% block scripts %}
-      {% include "partials/bootstrap4_js.html" %}
-      <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-      <script>
-        document.body.addEventListener('htmx:beforeSwap', function(event) {
-          if (event.detail.xhr.status === 204) {
-            // Swap content even when the response is empty.
-            event.detail.shouldSwap = true;
-          }
-        });
-      </script>
-    {% endblock %}
+    {% block scripts %}{% endblock %}
 
     {% block modal %}
       <!-- Modal -->

apis_core/core/templates/partials/backtotopbtn.html

@@ -12,30 +12,3 @@
         id="btn-back-to-top">
   <span>&uarr;</span>
 </button>
-<script>
-//Get the button
-let mybutton = document.getElementById("btn-back-to-top");
-
-// When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function () {
-  scrollFunction();
-};
-
-function scrollFunction() {
-  if (
-    document.body.scrollTop > 20 ||
-    document.documentElement.scrollTop > 20
-  ) {
-    mybutton.style.display = "block";
-  } else {
-    mybutton.style.display = "none";
-  }
-}
-// When the user clicks on the button, scroll to the top of the document
-mybutton.addEventListener("click", backToTop);
-
-function backToTop() {
-  document.body.scrollTop = 0;
-  document.documentElement.scrollTop = 0;
-}
-</script>