Update some html to element generation code

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -209,15 +209,17 @@ class ConcordanceQueryBuilder {
     window.location.href = '#query-container';
     this.elements.counter += 1;
     queryText = encodeURI(queryText);
-    let buttonElement = Utils.elementFromString(
+    let buttonElement = Utils.HTMLToElement(
       `
-        <div class='chip' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
+        <div class="chip" data-type="${dataType}" data-query="${queryText}" draggable="true">
           ${prettyText}
-          <i class='material-icons close'>close</i>
+          <i class="material-icons close">close</i>
         </div>
       `
     );
     buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);});
+    buttonElement.addEventListener('dragstart', (event) => {this.dragStartHandler(event);});
+    buttonElement.addEventListener('dragend', (event) => {this.dragEndHandler(event);});
 
     // Ensures that metadata is always at the end of the query:
     if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') {
@@ -238,11 +240,11 @@ class ConcordanceQueryBuilder {
   dragStartHandler(event) {
     // Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
     this.elements.dropButton = event.target;
-    let targetChip = `
-      <div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
-        Drop here
-      </div>
-    `.trim();
+    let targetChipElement = Utils.HTMLToElement('<div class="chip target">Drop here</div>');
+    targetChipElement.addEventListener('dragover', (event) => {this.dragOverHandler(event);});
+    targetChipElement.addEventListener('dragenter', (event) => {this.dragEnterHandler(event);});
+    targetChipElement.addEventListener('dragleave', (event) => {this.dragLeaveHandler(event);});
+    targetChipElement.addEventListener('drop', (event) => {this.dropHandler(event);});
     // selects all nodes without target class
     let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
 
@@ -252,12 +254,12 @@ class ConcordanceQueryBuilder {
         if (element === this.elements.dropButton) {
           // If the dragged element is not at the very end, a target chip is also inserted at the end
           if (childNodes[childNodes.length - 1] !== element) {
-            childNodes[childNodes.length - 1].insertAdjacentHTML('afterend', targetChip);
+            childNodes[childNodes.length - 1].insertAdjacentElement('afterend', targetChipElement);
           }
         } else if (element === this.elements.dropButton.nextSibling) {
           continue;
         } else {
-          element.insertAdjacentHTML('beforebegin', targetChip)
+          element.insertAdjacentElement('beforebegin', targetChipElement)
         }
       }
     }, 0);

app/static/js/Forms/Form.js

@@ -32,7 +32,7 @@ class Form {
 
   submit(event) {
     let request = new XMLHttpRequest();
-    let modalElement = Utils.elementFromString(
+    let modalElement = Utils.HTMLToElement(
       `
         <div class="modal">
           <div class="modal-content">
@@ -71,7 +71,7 @@ class Form {
     for (let selectElement of this.formElement.querySelectorAll('select')) {
       if (selectElement.value === '') {
         let inputFieldElement = selectElement.closest('.input-field');
-        let errorHelperTextElement = Utils.elementFromString(
+        let errorHelperTextElement = Utils.HTMLToElement(
           '<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>'
         );
         inputFieldElement.appendChild(errorHelperTextElement);
@@ -98,7 +98,7 @@ class Form {
             .querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`)
             .closest('.input-field');
           for (let inputError of inputErrors) {
-            let errorHelperTextElement = Utils.elementFromString(
+            let errorHelperTextElement = Utils.HTMLToElement(
               `<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>`
             );
             inputFieldElement.appendChild(errorHelperTextElement);

app/static/js/Utils.js

@@ -1,8 +1,8 @@
 class Utils {
-  static elementFromString(string) {
-    let tmpElement = document.createElement('div');
-    tmpElement.innerHTML = string.trim();
-    return tmpElement.firstChild;
+  static HTMLToElement(HTMLString) {
+    let templateElement = document.createElement('template');
+    templateElement.innerHTML = HTMLString.trim();
+    return templateElement.content.firstChild;
   }
 
   static generateElementId(prefix='', suffix='') {
@@ -87,7 +87,7 @@ class Utils {
         corpus = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -143,7 +143,7 @@ class Utils {
         corpusFile = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -199,7 +199,7 @@ class Utils {
         spaCyNLPPipelineModel = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -254,7 +254,7 @@ class Utils {
         tesseractOCRPipelineModel = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -302,7 +302,7 @@ class Utils {
 
   static deleteProfileAvatarRequest(userId) {
     return new Promise((resolve, reject) => {
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -357,7 +357,7 @@ class Utils {
         job = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -420,7 +420,7 @@ class Utils {
         )
         .then(
           (text) => {
-            let modalElement = Utils.elementFromString(
+            let modalElement = Utils.HTMLToElement(
               `
                 <div class="modal">
                   <div class="modal-content">
@@ -459,7 +459,7 @@ class Utils {
         job = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">
@@ -516,7 +516,7 @@ class Utils {
         user = {};
       }
 
-      let modalElement = Utils.elementFromString(
+      let modalElement = Utils.HTMLToElement(
         `
           <div class="modal">
             <div class="modal-content">