Remove cascade plus new tooltip creation and destruction (a bit buggy)

app/static/js/nopaque.callbacks.js

@@ -58,7 +58,6 @@ function queryRenderResults(payload) {
   }
   // inital expert mode check and activation
   if (expertModeSwitchElement.checked) {
-    let initialTokenElements = document.getElementsByClassName("token");
+    results.resultsList.expertModeOn();
-    results.resultsList.expertModeOn(initialTokenElements, resultsJSON);
   }
 }

app/static/js/nopaque.lists.js

@@ -126,6 +126,10 @@ 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?
+  }
 
   // get display options from display options form element
   static getDisplayOptions(displayOptionsFormElement) {
@@ -295,23 +299,30 @@ class ResultsList extends List {
   }
 
   // function to apply extra information and animation to every token
-  expertModeOn(tokenElements) {
+
+  tooltipEvent(event) {
     let token;
-    for (let tokenElement of tokenElements) {
-      tokenElement.classList.add("chip");
-      tokenElement.classList.add("hoverable");
-      tokenElement.classList.add("expert-view");
-      tokenElement.addEventListener("mouseover", (event) => {
     token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
     this.addToolTipToTokenElement(event.target, token);
-      });
+  }
+
+  expertModeOn() {
+    console.log("Expert mode is on.");
+    this.eventTokens = [];
+    let token;
+    this.currentExpertTokenElements = document.getElementsByClassName("token");
+    this.tooltipEventBind = this.tooltipEvent.bind(this);
+    for (let tokenElement of this.currentExpertTokenElements) {
+      tokenElement.classList.add("chip", "hoverable", "expert-view");
+      tokenElement.addEventListener("mouseover", this.tooltipEventBind);
+      this.eventTokens.push(tokenElement);
     }
   }
 
   // fuction that creates Tooltip for one token and extracts the corresponding
   // infos from the result JSON
   addToolTipToTokenElement(tokenElement, token) {
-    M.Tooltip.init(tokenElement,
+    this.tooltipElements.push(M.Tooltip.init(tokenElement,
      {"html": `<table>
                  <tr>
                    <th>Token information</th>
@@ -334,18 +345,21 @@ class ResultsList extends List {
                    </td>
                  </tr>
                </table>`}
+      )
     );
   }
 
   // function to remove extra informations and animations from tokens
-  expertModeOff(tokenElements) {
+  expertModeOff() {
-    console.log("expertModeOff!");
+    console.log("Expert mode is off.");
-    for (let tokenElement of tokenElements) {
+    for (let tokenElement of this.currentExpertTokenElements) {
-      tokenElement.classList.remove("chip");
+      tokenElement.classList.remove("chip", "hoverable", "expert-view");
-      tokenElement.classList.remove("hoverable");
+    }
-      tokenElement.classList.remove("expert-view");
+    for (let eventToken of this.eventTokens) {
-      tokenElement.outerHTML = tokenElement.outerHTML; // this is actually a workaround, but it works pretty fast
+      eventToken.removeEventListener("mouseover", this.tooltipEventBind);
-      // TODO: use M.Tooltip.destroy()
+    }
+    for (let tooltipElement of this.tooltipElements) {
+      tooltipElement.destroy();
     }
   }
 

app/templates/corpora/analyse_corpus.html.j2

@@ -361,17 +361,17 @@
 
     // epxert mode table view
     // TODO: Redo this
-    expertModeSwitchElement.addEventListener("change", (event) => {
-      let currentTokenElements = document.getElementsByClassName("token");
-      if (event.target.checked) {
-        results.resultsList.expertModeOn(currentTokenElements, resultsJSON);
-        for (let element of paginationElements) {
-          element.tokenElements = currentTokenElements;
-          element.addEventListener("click", (event) => { results.resultsList.eventHandlerCheck(event)});
     // TODO: This replicates itself on expertModeSwitchElement use
+    expertModeSwitchElement.addEventListener("change", (event) => {
+      if (event.target.checked) {
+        results.resultsList.expertModeOn();
+        for (let element of paginationElements) {
+          element.onclick = (event) => {
+            results.resultsList.eventHandlerCheck(event)
+          }
         }
       } else {
-        results.resultsList.expertModeOff(currentTokenElements);
+        results.resultsList.expertModeOff();
       }
     });
   });