From 9145265e4b66300d60c001bea2b7d371b2ab5512 Mon Sep 17 00:00:00 2001 From: Stephan Porada Date: Thu, 16 Apr 2020 15:06:03 +0200 Subject: [PATCH] Add expert mode and higlight sentences switch to inspect. WIP --- app/corpora/views.py | 2 +- app/static/js/nopaque.lists.js | 76 +++++++++++++++----- app/templates/corpora/analyse_corpus.html.j2 | 4 +- 3 files changed, 63 insertions(+), 19 deletions(-) diff --git a/app/corpora/views.py b/app/corpora/views.py index 5f0cdf61..9ae22570 100644 --- a/app/corpora/views.py +++ b/app/corpora/views.py @@ -64,7 +64,7 @@ def analyse_corpus(corpus_id): query_form = QueryForm(prefix='query-form', query=request.args.get('query')) query_download_form = QueryDownloadForm() - inspect_display_options_form = InspectDisplayOptionsForm() + inspect_display_options_form = InspectDisplayOptionsForm(prefix='query_download_form') return render_template('corpora/analyse_corpus.html.j2', corpus_id=corpus_id, display_options_form=display_options_form, diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js index 56d7ab3b..85467692 100644 --- a/app/static/js/nopaque.lists.js +++ b/app/static/js/nopaque.lists.js @@ -129,7 +129,8 @@ RessourceList.options = { class ResultsList extends List { constructor(idOrElement, options={}) { super(idOrElement, options); - this.eventTokens = []; // all span tokens which are holdeing events if expert mode is on + this.eventTokens = {}; // all span tokens which are holdeing events if expert mode is on + this.currentExpertTokenElements = {}; } @@ -192,7 +193,8 @@ class ResultsList extends List { let contextModalLoading; let contextModalReady; let contextResultsElement; - let expertModeSwitchElement; + let modalExpertModeSwitchElement; + let highlightSentencesSwitchElement; let lc; let modalTokenElements; let partElement; @@ -205,7 +207,8 @@ class ResultsList extends List { this.contextData = response.payload; contextResultsElement = document.getElementById("context-results"); - expertModeSwitchElement = document.getElementById("display-options-form-expert_mode"); + modalExpertModeSwitchElement = document.getElementById("query_download_form-expert_mode_inspect"); + highlightSentencesSwitchElement = document.getElementById("query_download_form-highlight_sentences"); uniqueS = new Set(); // check if cpos ranges are used or not if (this.contextData.cpos_ranges == true) { @@ -273,12 +276,51 @@ class ResultsList extends List { contextResultsElement.appendChild(sentenceElement); } - if (expertModeSwitchElement.checked) { - this.expertModeOn(); + modalExpertModeSwitchElement.addEventListener("change", (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) => { + if (event.target.checked) { + this.higlightContextSentences(); + } else { + this.unhighlightContextSentences(); + } + }); + + if (highlightSentencesSwitchElement.checked) { + this.higlightContextSentences(); } } + higlightContextSentences() { + let sentences; + sentences = document.getElementById("context-results").getElementsByClassName("sentence"); + for (let s of sentences) { + s.insertAdjacentHTML("afterend", `
`) + } + } + + unhighlightContextSentences() { + let sentences; + let sibling; + sentences = document.getElementById("context-results").getElementsByClassName("sentence"); + for (let s of sentences) { + sibling = s.nextSibling; + sibling.remove(); + } + } + changeSentenceContext(sValue) { + // TODO: } // ###### Display options changing live how the matches are being displayed ###### @@ -345,10 +387,10 @@ class ResultsList extends List { // if unchecked expertModeOff is executed eventHandlerCheck(event) { if (expertModeSwitchElement.checked) { - this.expertModeOn(event.currentTarget.tokenElements, resultsJSON); + this.expertModeOn("query-display"); } else if (!expertModeSwitchElement.checked) { event.preventDefault(); - this.expertModeOff(event.currentTarget.tokenElements); + this.expertModeOff("query-display"); } } @@ -370,16 +412,17 @@ class ResultsList extends List { this.currentTooltipElement.destroy(); } - expertModeOn() { - // console.log("Expert mode is on."); - this.currentExpertTokenElements = document.getElementsByClassName("token"); + expertModeOn(htmlId) { + // torn the expert mode on for all tokens in the DOM element identified by its htmlID + this.currentExpertTokenElements[htmlId] = document.getElementById(htmlId).getElementsByClassName("token"); this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this); this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this); - for (let tokenElement of this.currentExpertTokenElements) { + for (let tokenElement of this.currentExpertTokenElements[htmlId]) { tokenElement.classList.add("chip", "hoverable", "expert-view"); tokenElement.onmouseover = this.tooltipEventCreateBind; tokenElement.onmouseout = this.tooltipEventDestroyBind; - this.eventTokens.push(tokenElement); + this.eventTokens[htmlId] = []; + this.eventTokens[htmlId].push(tokenElement); } } @@ -414,16 +457,17 @@ class ResultsList extends List { } // function to remove extra informations and animations from tokens - expertModeOff() { + expertModeOff(htmlId) { // console.log("Expert mode is off."); - for (let tokenElement of this.currentExpertTokenElements) { + for (let tokenElement of this.currentExpertTokenElements[htmlId]) { tokenElement.classList.remove("chip", "hoverable", "expert-view"); } - for (let eventToken of this.eventTokens) { + this.currentExpertTokenElements[htmlId] = []; + for (let eventToken of this.eventTokens[htmlId]) { eventToken.onmouseover = ""; eventToken.onmouseout = ""; } - this.eventTokens = []; + this.eventTokens[htmlId] = []; } createResultRowElement(item, chunk) { diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2 index 83831de2..55e9831e 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/app/templates/corpora/analyse_corpus.html.j2 @@ -415,14 +415,14 @@ expertModeSwitchElement.addEventListener("change", (event) => { if (event.target.checked) { - results.resultsList.expertModeOn(); + results.resultsList.expertModeOn("query-display"); for (let element of paginationElements) { element.onclick = (event) => { results.resultsList.eventHandlerCheck(event) } } } else { - results.resultsList.expertModeOff(); + results.resultsList.expertModeOff("query-display"); } }); });