From 514baf0f5e13f3d10f6eddc8d65b059f95d2c4d3 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Tue, 14 Apr 2020 11:31:57 +0200
Subject: [PATCH] New expert mode

---
 app/static/js/nopaque.lists.js               | 55 ++++++++++++--------
 app/templates/corpora/analyse_corpus.html.j2 |  6 ++-
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js
index 23723b4f..8cfda3c9 100644
--- a/app/static/js/nopaque.lists.js
+++ b/app/static/js/nopaque.lists.js
@@ -127,10 +127,11 @@ RessourceList.options = {
 
 class ResultsList extends List {
   constructor(idOrElement, options={}) {
-    super(idOrElement, options);
-    this.tooltipElements = []; // TODO: wieso sind hier dann nicht alle sachen zum löschen drinn?
+  super(idOrElement, options);
+  this.eventTokens = [];  // all span tokens which are holdeing events if expert mode is on
   }
 
+
   // get display options from display options form element
   static getDisplayOptions(displayOptionsFormElement) {
     // gets display options parameters
@@ -228,7 +229,7 @@ class ResultsList extends List {
     }
     if (expertModeSwitchElement.checked) {
       tokenElements = partElement.getElementsByClassName("token");
-      this.expertModeOn(tokenElements, contextData);
+      this.expertModeOn();
     }
   }
 
@@ -238,11 +239,16 @@ class ResultsList extends List {
   // Just alters the resultsList.page property
   changeHitsPerPage(event) {
     try {
-      resultsList.page = event.target.value;
-      resultsList.update();
+      // console.log(this);
+      this.page = event.target.value;
+      this.update();
+      if (expertModeSwitchElement.checked) {
+        this.expertModeOn();  // page holds new result rows, so add new tooltips
+      }
       nopaque.flash("Updated matches per page.")
     } catch (e) {
-      console.log("resultsList has no results right now.");
+      // console.log(e);
+      // console.log("resultsList has no results right now.");
     }
   }
 
@@ -298,23 +304,31 @@ class ResultsList extends List {
     }
   }
 
-  // function to apply extra information and animation to every token
-
-  tooltipEvent(event) {
+  // function to create a tooltip for the current hovered token
+  tooltipEventCreate(event) {
+    // console.log("Create Tooltip on mouseover.");
     let token;
     token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
     this.addToolTipToTokenElement(event.target, token);
   }
 
+  // Function to destroy the current Tooltip for the current hovered tooltip
+  // on mouse leave
+  tooltipEventDestroy(event) {
+    // console.log("Tooltip destroy on leave.");
+    this.currentTooltipElement.destroy();
+  }
+
   expertModeOn() {
-    console.log("Expert mode is on.");
-    this.eventTokens = [];
+    // console.log("Expert mode is on.");
     let token;
     this.currentExpertTokenElements = document.getElementsByClassName("token");
-    this.tooltipEventBind = this.tooltipEvent.bind(this);
+    this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
+    this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
     for (let tokenElement of this.currentExpertTokenElements) {
       tokenElement.classList.add("chip", "hoverable", "expert-view");
-      tokenElement.addEventListener("mouseover", this.tooltipEventBind);
+      tokenElement.onmouseover = this.tooltipEventCreateBind;
+      tokenElement.onmouseout = this.tooltipEventDestroyBind;
       this.eventTokens.push(tokenElement);
     }
   }
@@ -322,7 +336,8 @@ class ResultsList extends List {
   // fuction that creates Tooltip for one token and extracts the corresponding
   // infos from the result JSON
   addToolTipToTokenElement(tokenElement, token) {
-    this.tooltipElements.push(M.Tooltip.init(tokenElement,
+    this.currentTooltipElement;
+    this.currentTooltipElement = M.Tooltip.init(tokenElement,
      {"html": `<table>
                  <tr>
                    <th>Token information</th>
@@ -345,22 +360,20 @@ class ResultsList extends List {
                    </td>
                  </tr>
                </table>`}
-      )
-    );
+      );
   }
 
   // function to remove extra informations and animations from tokens
   expertModeOff() {
-    console.log("Expert mode is off.");
+    // console.log("Expert mode is off.");
     for (let tokenElement of this.currentExpertTokenElements) {
       tokenElement.classList.remove("chip", "hoverable", "expert-view");
     }
     for (let eventToken of this.eventTokens) {
-      eventToken.removeEventListener("mouseover", this.tooltipEventBind);
-    }
-    for (let tooltipElement of this.tooltipElements) {
-      tooltipElement.destroy();
+      eventToken.onmouseover = "";
+      eventToken.onmouseout = "";
     }
+  this.eventTokens = [];
   }
 
   createResultRowElement(item, chunk) {
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 6a668720..77ca8874 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -346,7 +346,8 @@
 
     // live update of hits per page if hits per page value is changed
     hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
-    hitsPerPageInputElement.onchange = results.resultsList.changeHitsPerPage;
+    let changeHitsPerPageBind = results.resultsList.changeHitsPerPage.bind(results.resultsList);
+    hitsPerPageInputElement.onchange = changeHitsPerPageBind;
 
     // live update of lr context per item if context value is changed
     contextPerItemElement = document.getElementById("display-options-form-result_context");
@@ -361,7 +362,8 @@
 
     // epxert mode table view
     // TODO: Redo this
-    // TODO: This replicates itself on expertModeSwitchElement use
+    // - This replicates itself on expertModeSwitchElement use
+    // - Replication should be fixed
     expertModeSwitchElement.addEventListener("change", (event) => {
       if (event.target.checked) {
         results.resultsList.expertModeOn();