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

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

Browse Source
This commit is contained in:
Stephan Porada
2020-04-09 14:49:17 +02:00
parent ca333e29ee
commit f19f67614d
3 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/static/js/nopaque.callbacks.js
View File

@@ -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();
}
}

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

@@ -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": `<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) {
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();
}
}