diff --git a/app/static/js/nopaque.callbacks.js b/app/static/js/nopaque.callbacks.js index a8ae1ad1..daf6b701 100644 --- a/app/static/js/nopaque.callbacks.js +++ b/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(initialTokenElements, resultsJSON); + results.resultsList.expertModeOn(); } } \ No newline at end of file diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js index 1e17e8b3..23723b4f 100644 --- a/app/static/js/nopaque.lists.js +++ b/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); - }); + 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": ` @@ -334,18 +345,21 @@ class ResultsList extends List {
Token information
`} + ) ); } // function to remove extra informations and animations from tokens - expertModeOff(tokenElements) { - console.log("expertModeOff!"); - for (let tokenElement of tokenElements) { - tokenElement.classList.remove("chip"); - tokenElement.classList.remove("hoverable"); - tokenElement.classList.remove("expert-view"); - tokenElement.outerHTML = tokenElement.outerHTML; // this is actually a workaround, but it works pretty fast - // TODO: use M.Tooltip.destroy() + expertModeOff() { + 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(); } } diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index 31b03be8..6a668720 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/app/templates/corpora/analyse_corpus.html.j2 @@ -361,17 +361,17 @@ // epxert mode table view // TODO: Redo this + // TODO: This replicates itself on expertModeSwitchElement use expertModeSwitchElement.addEventListener("change", (event) => { - let currentTokenElements = document.getElementsByClassName("token"); if (event.target.checked) { - results.resultsList.expertModeOn(currentTokenElements, resultsJSON); + results.resultsList.expertModeOn(); for (let element of paginationElements) { - element.tokenElements = currentTokenElements; - element.addEventListener("click", (event) => { results.resultsList.eventHandlerCheck(event)}); - // TODO: This replicates itself on expertModeSwitchElement use + element.onclick = (event) => { + results.resultsList.eventHandlerCheck(event) + } } } else { - results.resultsList.expertModeOff(currentTokenElements); + results.resultsList.expertModeOff(); } }); });