Add interaactive context change

app/corpora/forms.py

@@ -68,11 +68,16 @@ class QueryForm(FlaskForm):
                                 validators=[DataRequired()])
     context = SelectField('Context',
                           choices=[('', 'Words of context around hit'),
-                                   ('5', '5'),
                                    ('10', '10'),
-                                   ('15', '15'),
                                    ('20', '20'),
-                                   ('25', '25')],
+                                   ('30', '30'),
+                                   ('40', '40'),
+                                   ('50', '50'),
+                                   ('60', '60'),
+                                   ('70', '70'),
+                                   ('80', '80'),
+                                   ('90', '90'),
+                                   ('100', '100')],
                           validators=[DataRequired()])
     submit = SubmitField('Start Query')
 

app/corpora/views.py

@@ -56,7 +56,7 @@ def analyse_corpus(corpus_id):
         corpus.status = 'start analysis'
         db.session.commit()
     query_download_form = QueryDownloadForm()
-    query_form = QueryForm(context=request.args.get('context', 10),
+    query_form = QueryForm(context=request.args.get('context', 20),
                            hits_per_page=request.args.get('hits_per_page', 30),
                            query=request.args.get('query'))
     return render_template('corpora/analyse_corpus.html.j2',

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"]);