sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-03 20:02:47 +00:00
Code Issues Projects Releases Wiki Activity

New context options

Browse Source
This commit is contained in:
Stephan Porada
2020-04-15 14:55:29 +02:00
parent 34e8d952b6
commit 9031ca5845
4 changed files with 133 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/static/js/nopaque.lists.js
View File

@@ -177,62 +177,111 @@ class ResultsList extends List {
);
}
HTMLTStroElement(htmlStr) {
// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
let template = document.createElement("template");
htmlStr = htmlStr.trim();
template.innerHTML = htmlStr;
return template.content.firstChild;
}
showMatchContext(response) {
this.contextData;
let c;
let contextData;
let contextModalLoading;
let contextModalReady;
let contextResultsElement;
let expertModeSwitchElement;
let lc;
let modalTokenElements;
let partElement;
let rc;
let token;
let tokenElement;
let tokenElements;
contextData = response.payload;
let tokenHTMLArray;
let uniqueS;
let htmlTokenStr;
let tokenHTMlElement;
this.contextData = response.payload;
contextResultsElement = document.getElementById("context-results");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
uniqueS = new Set();
// check if cpos ranges are used or not
if (contextData.cpos_ranges == true) {
if (this.contextData.cpos_ranges == true) {
// python range like function from MDN
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
lc = range(contextData.match.lc[0], contextData.match.lc[1], 1)
c = range(contextData.match.c[0], contextData.match.c[1], 1)
rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
lc = range(this.contextData.match.lc[0], this.contextData.match.lc[1], 1)
c = range(this.contextData.match.c[0], this.contextData.match.c[1], 1)
rc = range(this.contextData.match.rc[0], this.contextData.match.rc[1], 1)
} else {
lc = contextData.match.lc;
c = contextData.match.c;
rc = contextData.match.rc;
lc = this.contextData.match.lc;
c = this.contextData.match.c;
rc = this.contextData.match.rc;
}
// create sentence strings as tokens
partElement = document.createElement("p");
tokenHTMLArray = [];
for (let cpos of lc) {
token = contextData.cpos_lookup[cpos];
partElement.insertAdjacentHTML("beforeend",
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
contextResultsElement.append(partElement);
token = this.contextData.cpos_lookup[cpos];
uniqueS.add(token.s)
htmlTokenStr = `<span class="token"` +
`data-sid="${token.s}"` +
`data-cpos="${cpos}">` +
`${token.word}` +
`</span>`;
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
tokenHTMLArray.push(tokenHTMlElement);
}
for (let cpos of c) {
token = contextData.cpos_lookup[cpos];
partElement.insertAdjacentHTML("beforeend",
`<span class="token bold light-green" data-cpos="${cpos}"` +
`style="text-decoration-line: underline;">${token.word} </span>`);
contextResultsElement.append(partElement);
token = this.contextData.cpos_lookup[cpos];
uniqueS.add(token.s)
htmlTokenStr = `<span class="token bold light-green"` +
`data-sid="${token.s}"` +
`data-cpos="${cpos}"` +
`style="text-decoration-line: underline;">` +
`${token.word}` +
`</span>`;
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
tokenHTMLArray.push(tokenHTMlElement);
}
for (let cpos of rc) {
token = contextData.cpos_lookup[cpos];
partElement.insertAdjacentHTML("beforeend",
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
contextResultsElement.append(partElement);
token = this.contextData.cpos_lookup[cpos];
uniqueS.add(token.s)
htmlTokenStr = `<span class="token"` +
`data-sid="${token.s}"` +
`data-cpos="${cpos}">` +
`${token.word}` +
`</span>`;
tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
tokenHTMLArray.push(tokenHTMlElement);
}
console.log(tokenHTMLArray);
console.log(uniqueS);
partElement = document.createElement("p");
for (let sId of uniqueS) {
let htmlSentence = `<div class="sentence s12" data-sid="${sId}">`;
let sentenceElement = this.HTMLTStroElement(htmlSentence);
for (let tokenElement of tokenHTMLArray) {
if (tokenElement.dataset.sid == sId) {
sentenceElement.appendChild(tokenElement);
sentenceElement.insertAdjacentHTML("beforeend", `<span>&nbsp;</span>`);
} else {
continue;
}
}
partElement.appendChild(sentenceElement);
}
contextResultsElement.appendChild(partElement);
if (expertModeSwitchElement.checked) {
tokenElements = partElement.getElementsByClassName("token");
this.expertModeOn();
}
}
changeSentenceContext(sValue) {
}
// ###### Display options changing live how the matches are being displayed ######
// Event function that changes the shown hits per page.
@@ -309,6 +358,9 @@ class ResultsList extends List {
// console.log("Create Tooltip on mouseover.");
let token;
token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
if (!token) {
token = this.contextData.cpos_lookup[event.target.dataset.cpos];
}
this.addToolTipToTokenElement(event.target, token);
}
@@ -321,7 +373,6 @@ class ResultsList extends List {
expertModeOn() {
// console.log("Expert mode is on.");
let token;
this.currentExpertTokenElements = document.getElementsByClassName("token");
this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);