Add interaactive context change

app/templates/corpora/analyse_corpus.html.j2

@@ -305,13 +305,11 @@
 
   // live update of hits per page
   var hitsPerPageInputElement = document.getElementById("hits-per-page");
-  hitsPerPageInputElement.addEventListener("change", changeResultList);
+  hitsPerPageInputElement.onchange = changeHitsPerPage;
 
-  function changeResultList(event) {
-    let queryFormElement = document.getElementById("query-form");
-    queryData = getQueryData(queryFormElement);
+  function changeHitsPerPage(event) {
     try {
-      resultList.page = queryData["hits_per_page"];
+      resultList.page = event.target.value;
       resultList.update();
       nopaque.toast("Updated matches per page.")
     } catch (e) {
@@ -319,19 +317,47 @@
     }
   }
 
-  // live update of lr context per item
+  // live update of lr context per item if context value is changed
   var contextPerItemElement = document.getElementById("context-per-item");
-  contextPerItemElement.addEventListener("change", changeContext);
+  contextPerItemElement.onchange = changeContext;
 
+  // eventListener if pagination is used to apply new context size to new page
+  var paginationElements = document.getElementsByClassName("pagination");
+  for (element of paginationElements) {
+    element.addEventListener("click", changeContext);
+  }
+
+  // event triggered on context select change and also if pagination is clicked
   function changeContext(event) {
-    let queryFormElement = document.getElementById("query-form");
-    queryData = getQueryData(queryFormElement);
-    console.log(queryData);
-    try {
-      nopaque.toast("Loading more context.");
-      sendQuery(event);
-    } catch (e) {
-      console.log("No query given.");
+    // newValue = event.target.value;  // cannot use this anymore due to reuse of this function in the above paginationElements eventListener
+    var contextPerItemElement = document.getElementById("context");
+    newValue = contextPerItemElement.value;
+    console.log(newValue);
+    var lc = document.getElementsByClassName("left-context");
+    var rc = document.getElementsByClassName("right-context");
+    // console.log("LC", lc);
+    // console.log("RC", rc);
+    for (let element of lc) {
+      // console.log(element.childNodes);
+      array = Array.from(element.childNodes);
+      // console.log(array);
+      for (let element of array.slice(newValue)) {
+        element.classList.add("hide");
+      }
+      for (let element of array.slice(0, newValue)) {
+        element.classList.remove("hide");
+      }
+    }
+    for (let element of rc) {
+      // console.log(element.childNodes);
+      array = Array.from(element.childNodes);
+      // console.log(array);
+      for (let element of array.slice(newValue)) {
+        element.classList.add("hide");
+      }
+      for (let element of array.slice(0, newValue)) {
+        element.classList.remove("hide");
+      }
     }
   }
 
@@ -392,8 +418,10 @@
     }
     resultList.add(resultItems, items => {
       for (let item of items) {
-        item.elm = resultList.createResultRowElement(item, chunk);}
+        item.elm = resultList.createResultRowElement(item, chunk);
+      }
       resultList.update();
+      changeContext();  // sets lr context to current/default value
     });
     result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
     console.log("After current match count", result["loaded_match_count"]);