From 9145265e4b66300d60c001bea2b7d371b2ab5512 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
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", `<br>`)
+ }
+ }
+
+ 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");
}
});
});
--
GitLab