Finalize inspect view display options

app/static/js/nopaque.lists.js

@@ -193,22 +193,24 @@ class ResultsList extends List {
     let contextModalLoading;
     let contextModalReady;
     let contextResultsElement;
-    let modalExpertModeSwitchElement;
     let highlightSentencesSwitchElement;
+    let htmlTokenStr;
     let lc;
+    let modalExpertModeSwitchElement;
     let modalTokenElements;
+    let nrOfContextSentences;
     let partElement;
     let rc;
     let token;
     let tokenHTMLArray;
-    let uniqueS;
-    let htmlTokenStr;
     let tokenHTMlElement;
+    let uniqueS;
 
     this.contextData = response.payload;
     contextResultsElement = document.getElementById("context-results");
-    modalExpertModeSwitchElement = document.getElementById("query_download_form-expert_mode_inspect");
-    highlightSentencesSwitchElement = document.getElementById("query_download_form-highlight_sentences");
+    modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect");
+    highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences");
+    nrOfContextSentences = document.getElementById("context-sentences");
     uniqueS = new Set();
     // check if cpos ranges are used or not
     if (this.contextData.cpos_ranges == true) {
@@ -276,51 +278,87 @@ class ResultsList extends List {
       contextResultsElement.appendChild(sentenceElement);
     }
 
-    modalExpertModeSwitchElement.addEventListener("change", (event) => {
+
+    // add inspect display options events
+    modalExpertModeSwitchElement.onchange = (event) => {
       if (event.target.checked) {
         this.expertModeOn("context-results");
       } else {
         this.expertModeOff("context-results")
       }
-    });
+    };
 
-    if (modalExpertModeSwitchElement.checked) {
-      this.expertModeOn("context-results");
-    }
-
-    highlightSentencesSwitchElement.addEventListener("change", (event) => {
+    highlightSentencesSwitchElement.onchange = (event) => {
       if (event.target.checked) {
         this.higlightContextSentences();
       } else {
       this.unhighlightContextSentences();
       }
-    });
+    };
+
+    nrOfContextSentences.onchange = (event) => {
+      console.log(event.target.value);
+      this.changeSentenceContext(event.target.value);
+    }
+
+    // checks on new modal opening if switches are checked
+    // if switches are checked functions are executed
+    if (modalExpertModeSwitchElement.checked) {
+      this.expertModeOn("context-results");
+    }
 
     if (highlightSentencesSwitchElement.checked) {
       this.higlightContextSentences();
     }
+
+    // checks the value of the number of sentences to show on modal opening
+    // sets context sentences accordingly
+    this.changeSentenceContext(nrOfContextSentences.value)
   }
 
   higlightContextSentences() {
     let sentences;
     sentences = document.getElementById("context-results").getElementsByClassName("sentence");
       for (let s of sentences) {
-        s.insertAdjacentHTML("afterend", `<br>`)
+        s.insertAdjacentHTML("beforeend", `<span><br><br></span>`)
       }
   }
 
   unhighlightContextSentences() {
     let sentences;
-    let sibling;
+    let br;
     sentences = document.getElementById("context-results").getElementsByClassName("sentence");
       for (let s of sentences) {
-        sibling = s.nextSibling;
-        sibling.remove();
+        br = s.lastChild;
+        br.remove();
       }
   }
 
-  changeSentenceContext(sValue) {
-    // TODO:
+  changeSentenceContext(sValue, maxSValue=10) {
+    let array;
+    let sentences;
+    let toHideArray;
+    let toShowArray;
+    sValue = maxSValue - sValue;
+    console.log(sValue);
+    sentences = document.getElementById("context-results").getElementsByClassName("sentence");
+    array = Array.from(sentences);
+    if (sValue != 0) {
+      toHideArray = array.slice(0, sValue).concat(array.slice(-(sValue)));
+      toShowArray = array.slice(sValue, 9).concat(array.slice(9, -(sValue)))
+    } else {
+      toHideArray = [];
+      toShowArray = array;
+    }
+    console.log(array);
+    console.log("#######");
+    console.log(toHideArray);
+    for (let s of toHideArray) {
+      s.classList.add("hide");
+    }
+    for (let s of toShowArray) {
+      s.classList.remove("hide");
+    }
   }
 
   // ###### Display options changing live how the matches are being displayed ######
@@ -417,11 +455,11 @@ class ResultsList extends List {
     this.currentExpertTokenElements[htmlId] = document.getElementById(htmlId).getElementsByClassName("token");
     this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
     this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
+    this.eventTokens[htmlId] = [];
     for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
       tokenElement.classList.add("chip", "hoverable", "expert-view");
       tokenElement.onmouseover = this.tooltipEventCreateBind;
       tokenElement.onmouseout = this.tooltipEventDestroyBind;
-      this.eventTokens[htmlId] = [];
       this.eventTokens[htmlId].push(tokenElement);
     }
   }
@@ -463,6 +501,7 @@ class ResultsList extends List {
       tokenElement.classList.remove("chip", "hoverable", "expert-view");
     }
     this.currentExpertTokenElements[htmlId] = [];
+
     for (let eventToken of this.eventTokens[htmlId]) {
       eventToken.onmouseover = "";
       eventToken.onmouseout = "";