From 3dcb5a2b19a9da9cdbb4dfdbff106f589c012f84 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <kleen@cip.ifi.lmu.de>
Date: Wed, 15 May 2019 16:12:00 +0200
Subject: [PATCH] Implement generic id-nudging and use everywhere

---
 static/js/services/httpClient.js     | 29 ++++++++++++++++++++++++++++
 static/js/utils/asyncTable.js        | 13 +++++--------
 static/js/utils/massInput.js         | 19 ++++--------------
 static/js/utils/modal.js             | 21 ++++----------------
 templates/widgets/modal/modal.hamlet |  2 +-
 5 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/static/js/services/httpClient.js b/static/js/services/httpClient.js
index eacd9b6b5..a69d788fd 100644
--- a/static/js/services/httpClient.js
+++ b/static/js/services/httpClient.js
@@ -36,6 +36,34 @@
       });
     }
 
+    function parseHTML(response, idPrefix) {
+      if (!idPrefix) {
+        idPrefix = Math.floor(Math.random() * 100000);
+      }
+
+      var contentType = response.headers.get("content-type");
+      if (contentType.indexOf("text/html") === -1) {
+        throw new Error('Server returned ' + contentType + ' when HTML was expected');
+      }
+
+      return response.text().then(function (responseText) {
+        var docFrag = document.createRange().createContextualFragment(responseText);
+        
+        var idAttrs = ['id', 'for', 'data-conditional-input', 'data-modal-trigger'];
+        idAttrs.forEach(function(attr) {
+          Array.from(docFrag.querySelectorAll('[' + attr + ']')).forEach(function(input) {
+            var value = idPrefix + '__' + input.getAttribute(attr);
+            input.setAttribute(attr, value);
+          });
+        });
+
+        return Promise.resolve(docFrag);
+      },
+      function (error) {
+        return Promise.reject(error);
+      }).catch(function (error) { console.error(error); });
+    }
+
     return {
       get: function(url, headers) {
         return _fetch(url, 'GET', headers);
@@ -44,6 +72,7 @@
         return _fetch(url, 'POST', headers, body);
       },
       addResponseInterceptor: addResponseInterceptor,
+      parseHTML: parseHTML,
     }
   })();
 })();
diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js
index 13598904b..78d9ae90c 100644
--- a/static/js/utils/asyncTable.js
+++ b/static/js/utils/asyncTable.js
@@ -319,12 +319,9 @@
         [asyncTableHeader]: asyncTableId
       };
 
-      HttpClient.get(url, headers).then(function(response) {
-        if (!response.ok) {
-          throw new Error('Looks like there was a problem fetching ' + url.href + '. Status Code: ' + response.status);
-        }
-        return response.text();
-      }).then(function(data) {
+      HttpClient.get(url, headers).then(
+        response => HttpClient.parseHTML(response, element.id)
+      ).then(function(data) {
         setLocalStorageParameter('currentTableUrl', url.href);
         // reset table
         removeListeners();
@@ -345,8 +342,8 @@
 
     function updateWrapperContents(newHtml) {
       var newPage = document.createElement('div');
-      newPage.innerHTML = newHtml;
-      var newWrapperContents = newPage.querySelector('#' + element.id);
+      newPage.appendChild(newHtml);
+      var newWrapperContents = newPage.querySelector('#' + element.id + '__' + element.id);
       element.innerHTML = newWrapperContents.innerHTML;
 
       if (UtilRegistry) {
diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 5d75a7c6c..4f0400b6a 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -125,9 +125,8 @@
             url,
             headers,
             requestBody,
+          ).then(response => HttpClient.parseHTML(response, element.id)
           ).then(function(response) {
-            return response.text();
-          }).then(function(response) {
             processResponse(response);
             if (isAddCell) {
               reFocusAddCell();
@@ -164,26 +163,16 @@
     }
 
     function processResponse(response) {
-      element.innerHTML = response;
+      element.innerHTML = "";
+      element.appendChild(response);
 
-      prefixInputIds();
-      reset()
+      reset();
 
       if (UtilRegistry) {
         UtilRegistry.setupAll(element);
       }
     }
 
-    function prefixInputIds() {
-      var idAttrs = ['id', 'for', 'data-conditional-input'];
-      idAttrs.forEach(function(attr) {
-        Array.from(element.querySelectorAll('[' + attr + ']')).forEach(function(input) {
-          var value = element.id + '__' + input.getAttribute(attr);
-          input.setAttribute(attr, value);
-        });
-      });
-    }
-
     function serializeForm(submitButton, enctype) {
       var formData = new FormData(massInputForm);
 
diff --git a/static/js/utils/modal.js b/static/js/utils/modal.js
index de6fee9d6..e0ba9c7c1 100644
--- a/static/js/utils/modal.js
+++ b/static/js/utils/modal.js
@@ -168,14 +168,13 @@
       }
 
       HttpClient.get(url, MODAL_HEADERS)
-        .then(function(response) {
-          response.text().then(processResponse);
-        });
+        .then(response => HttpClient.parseHTML(response, element.id))
+        .then(processResponse);
     }
 
-    function processResponse(responseBody) {
+    function processResponse(responseFrag) {
       var responseElement = document.createElement('div');
-      responseElement.innerHTML = responseBody;
+      responseElement.appendChild(responseFrag);
 
       var modalContent = document.createElement('div');
       modalContent.classList.add(MODAL_CONTENT_CLASS);
@@ -191,24 +190,12 @@
         previousModalContent.remove();
       }
 
-      modalContent = withPrefixedInputIDs(modalContent);
       element.insertBefore(modalContent, null);
 
       // setup any newly arrived utils
       UtilRegistry.setupAll(element);
     }
 
-    function withPrefixedInputIDs(modalContent) {
-      var idAttrs = ['id', 'for', 'data-conditional-input'];
-      idAttrs.forEach(function(attr) {
-        Array.from(modalContent.querySelectorAll('[' + attr + ']')).forEach(function(input) {
-          var value = element.id + '__' + input.getAttribute(attr);
-          input.setAttribute(attr, value);
-        });
-      });
-      return modalContent;
-    }
-
     return _init();
   };
 
diff --git a/templates/widgets/modal/modal.hamlet b/templates/widgets/modal/modal.hamlet
index 001e4a00f..b801967f6 100644
--- a/templates/widgets/modal/modal.hamlet
+++ b/templates/widgets/modal/modal.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div uw-modal data-modal-trigger=##{triggerId'} data-modal-closeable>
+<div uw-modal data-modal-trigger=#{triggerId'} data-modal-closeable>
   $case modalContent
     $of Right content
       <div .modal__content>