Some fixes and enhancements befor javascript rework

web/app/static/js/nopaque.lists.js

@@ -520,7 +520,7 @@ class ResultsList extends List {
   helperActivateBtn(btn) {
     btn.classList.remove("grey");
     btn.classList.add("green");
-    btn.innerText = "check";
+    btn.textContent = "check";
   }
 
   // Used in addToSubResults and inspect to toggle the design of the check
@@ -528,7 +528,7 @@ class ResultsList extends List {
   helperDeactivateBtn(btn) {
     btn.classList.remove("green");
     btn.classList.add("grey");
-    btn.innerText = "add";
+    btn.textContent = "add";
   }
 
   // Either adds or removes a match to the sub-results. For this it checks
@@ -544,16 +544,16 @@ class ResultsList extends List {
       this.helperActivateBtn(event.target);
       this.addToSubResultsStatus[dataIndex] = true;  // sets status to true
       this.addToSubResultsIdsToShow.add(dataIndex + 1);  // + 1 because user does not see zero indexd data indexes
-      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
+      textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
       M.textareaAutoResize(textarea);  // after an insert textarea has to be resized manually
-      nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length;
+      nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
     } else if (this.addToSubResultsStatus[dataIndex]) {
       // add button is deactivated because status is true
       this.helperDeactivateBtn(event.target);
       this.addToSubResultsStatus[dataIndex] = false;  // sets status to false
       this.addToSubResultsIdsToShow.delete(dataIndex + 1);  // + 1 because user does not see zero indexd data indexes
-      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
+      textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
-      nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length;
+      nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length;
       M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
     }
     // Toggles the create button according to the number of ids in addToSubResultsIdsToShow
@@ -633,6 +633,9 @@ class ResultsList extends List {
   // results to be able to inspect matches.
   createFakeResponse() {
     contextModal.open();
+    // match nr for user to display derived from data_index
+    let contextMatchNrElement = document.getElementById("context-match-nr");
+    contextMatchNrElement.textContent = this.contextId + 1;
     let cpos_lookup;
     let fake_response = {};
     let contextResultsElement;
@@ -640,6 +643,7 @@ class ResultsList extends List {
     // that is passed into the results.jsList.showMatchContext() function
     fake_response["payload"] = {};
     let dataIndex = event.target.closest("tr").dataset.index;
+    this.contextId = dataIndex;
     fake_response.payload["matches"] = [results.data.matches[dataIndex]];
     contextResultsElement = document.getElementById("context-results");
     contextResultsElement.innerHTML = "";
@@ -667,16 +671,15 @@ class ResultsList extends List {
   // gets result cpos infos for one dataIndex (list of length 1) to send back to
   // the server
   inspect(dataIndex, type) {
-    let contextMatchNrElement;
     let contextResultsElement;
     // get result infos from server and show them in context modal
     this.contextId = dataIndex[0];
-     // match nr for user to display derived from data_index
-    contextMatchNrElement = document.getElementById("context-match-nr");
-    contextMatchNrElement.innerText = this.contextId + 1;
     contextResultsElement = document.getElementById("context-results");
     contextResultsElement.innerHTML = "";  // clear it from old inspects
     this.getMatchWithContext(dataIndex, type);
+    // match nr for user to display derived from data_index
+    let contextMatchNrElement = document.getElementById("context-match-nr");
+    contextMatchNrElement.textContent = this.contextId + 1;
     contextModal.open();
     // add a button to add this match to sub results with onclick event
     let classes = `btn-floating btn waves-effect` +
@@ -1046,18 +1049,6 @@ class ResultsList extends List {
     values = item.values();
     let {lc, c, rc} = this.helperCreateCpos(chunk.cpos_ranges,
                                             values)
-    // if (chunk.cpos_ranges == true) {
-    //   // python range like function from MDN
-    //   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
-    //   const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
-    //   lc = range(values.lc[0], values.lc[1], 1)
-    //   c = range(values.c[0], values.c[1], 1)
-    //   rc = range(values.rc[0], values.rc[1], 1)
-    // } else {
-    //   lc = values.lc;
-    //   c = values.c;
-    //   rc = values.rc;
-    // }
     // get infos for full match row
     matchRowElement = document.createElement("tr");
     matchRowElement.setAttribute("data-index", values.index)
@@ -1099,28 +1090,19 @@ class ResultsList extends List {
     inspectBtn.setAttribute("style", css);
     inspectBtn.setAttribute("class", classes + ` disabled inspect`
                             );
-    inspectBtn.innerHTML = '<i class="material-icons">search</i>';
+    inspectBtn.innerHTML = '<i class="material-icons inspect-btn">search</i>';
-    if (imported) {
-      inspectBtn.onclick = () => {
-        fakeResponse = this.createFakeResponse();
-        this.showMatchContext(fakeResponse);
-      };
-    } else {
-      inspectBtn.onclick = () => {this.inspect([values.index], "inspect")};
-    }
     // # add btn to add matches to sub-results. hidden per default
     addToSubResultsBtn = document.createElement("a");
     addToSubResultsBtn.setAttribute("style", css);
     addToSubResultsBtn.setAttribute("class", classes + ` hide add`
                                 );
-    addToSubResultsBtn.innerHTML = '<i class="material-icons">add</i>';
+    addToSubResultsBtn.innerHTML = '<i class="material-icons add-btn">add</i>';
-    addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)}
     aCellElement.appendChild(inspectBtn);
     aCellElement.appendChild(addToSubResultsBtn);
     // add text titles at front as first td of one row
-    textTitlesCellElement.innerText = [...textTitles].join(", ");
+    textTitlesCellElement.textContent = [...textTitles].join(", ");
     matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);
-    matchNrElement.innerText = values.index + 1;
+    matchNrElement.textContent = values.index + 1;
     matchRowElement.insertAdjacentHTML("afterbegin", matchNrElement.outerHTML);
 
     // get infos for right context of match

web/app/templates/corpora/analyse_corpus.html.j2

@@ -55,6 +55,8 @@
   </div>
 </div>
 
+<!-- Scroll to top element -->
+{% include 'interactions/scroll_to_top.html.j2' %}
 
 <!-- Modals -->
 {% include 'modals/show_metadata.html.j2' %}
@@ -337,6 +339,20 @@
 
   });
 
+  // new insepct event listener makeing use of javascript bubbleing
+  let resultsTable = document.getElementById("query-results");
+  console.log(resultsTable);
+  resultsTable.addEventListener("click", (event) => {
+    let dataIndex;
+    if (event.target.classList.contains("inspect-btn")) {
+      dataIndex = parseInt(event.target.closest("tr").dataset.index);
+      console.log(dataIndex);
+      results.jsList.inspect([dataIndex], "inspect");
+    } else if (event.target.classList.contains("add-btn")) {
+      dataIndex = parseInt(event.target.closest("tr").dataset.index);
+      results.jsList.addToSubResults(dataIndex);
+    }
+  })
 
   // ### Download events and sub-results creation ###
   var loadingSpinnerHTML = `
@@ -405,5 +421,20 @@
                                        results.jsList.contextData,
                                        downloadInspectContextElement);
   };
+
+  // scroll to top button if user scrolled down the list
+  let headline = document.querySelector(".headline");
+  let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
+  window.addEventListener("scroll", (event) => {
+    if (pageYOffset > 250) {
+      scrollToTop.classList.toggle("hide", false);
+    } else {
+      scrollToTop.classList.toggle("hide", true);
+    }
+  });
+  scrollToTop.onclick = () => {
+    headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+  };
+
 </script>
 {% endblock %}

web/app/templates/interactions/scroll_to_top.html.j2

@@ -0,0 +1,6 @@
+<!-- Scroll to top element -->
+<div id="menu-scroll-to-top-div" class="fixed-action-btn direction-top active hide" style="bottom: 45px; right: 24px;">
+  <a id="menu-scroll-to-top" class="btn btn-floating btn-large cyan">
+    <i class="material-icons">arrow_upward</i>
+  </a>
+</div>

web/app/templates/nopaque.html.j2

@@ -181,7 +181,7 @@
         <div class="container">
         {% endif %}
         <div class="row">
-          <div class="col s12">
+          <div class="col s12 headline">
             <h2>
               {% if headline %}
               {{ headline }}

web/app/templates/query_results/inspect.html.j2

@@ -45,6 +45,9 @@
   </div>
 </div>
 
+<!-- Scroll to top element -->
+{% include 'interactions/scroll_to_top.html.j2' %}
+
 <!-- Modals -->
 {% include 'modals/show_metadata.html.j2' %}
 {% include 'modals/show_text_details.html.j2' %}
@@ -192,8 +195,6 @@
 
     // ### Show corpus Metadata
     showMetaDataButton.onclick = () => {
-      console.log(results.metaData);
-      console.log(results.data.text_lookup);
       metaDataModal.open();
     };
 
@@ -203,6 +204,30 @@
 
     // live update of lr context per item if context value is changed
     contextPerItemElement.onchange = results.jsList.changeContext;
+
+    // new insepct event listener makeing use of javascript bubbleing
+    let resultsTable = document.getElementById("query-results");
+    resultsTable.addEventListener("click", (event) => {
+      if (event.target.classList.contains("inspect-btn")) {
+        const dataIndex = event.target.closest("tr").dataset.index;
+        const fakeResponse = results.jsList.createFakeResponse();
+        results.jsList.showMatchContext(fakeResponse);
+      }
+    });
+
+    // scroll to top button if user scrolled down the list
+    let headline = document.querySelector(".headline");
+    let scrollToTop = document.querySelector("#menu-scroll-to-top-div");
+    window.addEventListener("scroll", (event) => {
+      if (pageYOffset > 250) {
+        scrollToTop.classList.toggle("hide", false);
+      } else {
+        scrollToTop.classList.toggle("hide", true);
+      }
+    });
+    scrollToTop.onclick = () => {
+      headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+    };
   });
 </script>
 {% endblock %}