added new utils »httpClient« and »asyncForm«

src/Foundation.hs

@@ -1019,8 +1019,10 @@ siteLayout' headingOverride widget = do
       -- JavaScript utils
       addScript $ StaticR js_utils_alerts_js
       addScript $ StaticR js_utils_asidenav_js
+      addScript $ StaticR js_utils_asyncForm_js
       addScript $ StaticR js_utils_asyncTable_js
       addScript $ StaticR js_utils_checkAll_js
+      addScript $ StaticR js_utils_httpClient_js
       addScript $ StaticR js_utils_form_js
       addScript $ StaticR js_utils_inputs_js
       addScript $ StaticR js_utils_modal_js

static/js/utils/asyncForm.js

@@ -0,0 +1,36 @@
+(function collonadeClosure() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.asyncForm = function(formElement, options) {
+
+    function setup() {
+      formElement.addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        var url = formElement.getAttribute('action');
+        var headers = { };
+        var body = new FormData(formElement);
+
+        if (options && options.headers) {
+          Object.keys(options.headers).forEach(function(headerKey) {
+            headers[headerKey] = options.headers[headerKey];
+          });
+        }
+
+        window.utils.httpClient.post(url, headers, body)
+          .then(function(response) {
+            return response.json();
+          }).then(function(response) {
+            console.log('asyncForm: got response', response);
+            // TODO: process json response once backend returns json
+          }).catch(function(error) {
+            console.error('could not fetch or process response from ' + url, { error });
+          });
+      });
+    }
+
+    setup();
+  };
+})();

static/js/utils/asyncTable.js

@@ -139,14 +139,16 @@
 
     // fetches new sorted table from url with params and replaces contents of current table
     function updateTableFrom(url, tableOptions) {
+      if (!window.utils.httpClient) {
+        throw new Error('httpClient not found!');
+      }
+
       tableOptions = tableOptions || {};
-      fetch(url, {
+      var headers = {
-        credentials: 'same-origin',
+        'Accept': 'text/html',
-        headers: {
+        [shortCircuitHeader]: tableIdent
-          'Accept': 'text/html',
+      };
-          [shortCircuitHeader]: tableIdent
+      window.utils.httpClient.get(url, headers).then(function(response) {
-        }
-      }).then(function(response) {
         if (!response.ok) {
           throw new Error('Looks like there was a problem fetching ' + url.href + '. Status Code: ' + response.status);
         }

static/js/utils/httpClient.js

@@ -0,0 +1,32 @@
+(function collonadeClosure() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.httpClient = (function() {
+
+    function _fetch(url, method, additionalHeaders, body) {
+      var requestOptions = {
+        credentials: 'same-origin',
+        headers: { },
+        method: method,
+        body: body,
+      };
+
+      Object.keys(additionalHeaders).forEach(function(headerKey) {
+        requestOptions.headers[headerKey] = additionalHeaders[headerKey];
+      });
+
+      return fetch(url, requestOptions);
+    }
+
+    return {
+      get: function(url, headers) {
+        return _fetch(url, 'GET', headers);
+      },
+      post: function(url, headers, body) {
+        return _fetch(url, 'POST', headers, body);
+      },
+    }
+  })();
+})();

static/js/utils/modal.js

@@ -10,25 +10,14 @@
   var MAIN_CONTENT_CLASS = 'main__content-body'
   var MODAL_CLOSABLE_FLAG = 'closeable';
   var MODAL_DYNAMIC_FLAG = 'dynamic';
+  var MODAL_HEADERS = {
+    'Is-Modal': 'True',
+  };
   var OVERLAY_CLASS = 'modal__overlay';
   var OVERLAY_OPEN_CLASS = 'modal__overlay--open';
   var CLOSER_CLASS = 'modal__closer';
   var AJAX_SUBMIT_FLAG = 'ajaxSubmit';
 
-  // helper function for convenient http requests with appropriate headers
-  function httpRequest(url, method, body) {
-    var requestOptions = {
-      method: method,
-      credentials: 'same-origin',
-      headers: {
-        'Is-Modal': 'True',
-      },
-      body: body,
-    };
-
-    return fetch(url, requestOptions);
-  }
-
   window.utils.modal = function(modalElement, options) {
 
     if (!modalElement || modalElement.classList.contains(JS_INITIALIZED_CLASS)) {
@@ -73,21 +62,12 @@
 
     function setupForm() {
       var form = modalElement.querySelector('form');
-      if (form && AJAX_SUBMIT_FLAG in form.dataset) {
+      if (form) {
-        form.addEventListener('submit', function(event) {
+        window.utils.setup('form', form);
-          event.preventDefault();
 
-          var url = form.getAttribute('action');
+        if (AJAX_SUBMIT_FLAG in form.dataset) {
-          var body = new FormData(form);
+          window.utils.setup('asyncForm', form, { headers: MODAL_HEADERS });
-
+        }
-          return httpRequest(url, form.method, body).then(function(response) {
-            return response.json();
-          }).then(function(response) {
-            // TODO: process json response once backend returns json
-          }).catch(function(error) {
-            console.error('could not fetch or process response from ' + url, { error });
-          });
-        });
       }
     }
 
@@ -101,9 +81,14 @@
     }
 
     function fillModal(url) {
-      httpRequest(url, 'GET').then(function(response) {
+      if (!window.utils.httpClient) {
-        response.text().then(processResponse);
+        throw new Error('httpClient not found! Can\' fetch modal content from ' + url);
-      });
+      }
+
+      window.utils.httpClient.get(url, MODAL_HEADERS)
+        .then(function(response) {
+          response.text().then(processResponse);
+        });
     }
 
     function processResponse(reponseBody) {

static/js/utils/setup.js

@@ -47,11 +47,15 @@
 
     document.addEventListener('setup', listener);
 
-    document.dispatchEvent(new CustomEvent('setup', {
+    // put a slight delay on the setup event in order to allow for all dependencies to load
-      detail: { targetUtil: utilName, module: 'none' },
+    window.setTimeout(function() {
-      bubbles: true,
+      document.dispatchEvent(new CustomEvent('setup', {
-      cancelable: true,
+        detail: { targetUtil: utilName, module: 'none' },
-    }));
+        bubbles: true,
+        cancelable: true,
+      }));
+    }, 10);
+
   };
 
   window.utils.teardown = function(utilName) {