sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-13 09:30:40 +00:00
Code Issues Projects Releases Wiki Activity

Feature parity with old implementation

Browse Source
This commit is contained in:
Stephan Porada
2020-09-08 10:42:39 +02:00
parent 521fd72d9b
commit ccfbf852b2
5 changed files with 97 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
web/app/static/js/modules/corpus_analysis/view/InteractionElement.js
View File

@ -1,97 +0,0 @@
// TODO: Simplify this so that things are executed on change page and on first
// load look below at function doc strings
// one interaction can have more than one type when the associatee callback
// can be executed
class Interaction {
constructor(htmlId="",
checkStatus=true,
disabledBefore=true,
disabledAfter=false,
hideBefore=true,
hideAfter=false) {
this.htmlId = htmlId;
this.element = ((htmlId) => {
document.getElementById(htmlId);
})()
this.checkStatus = checkStatus;
this.callbacks = {};
this.disabledBefore = disabledBefore;
this.disabledAfter = disabledAfter;
this.hideBefore = hideBefore;
this.hideAfter = hideAfter;
}
setCallback(trigger, callback, bindThis, args=[]) {
this.callbacks[trigger] = {
"function": callback,
"bindThis": bindThis,
"args": args
};
}
bindThisToCallback(trigger) {
let callback = this.callbacks[trigger];
let boundedCallback = callback["function"].bind(callback.bindThis);
return boundedCallback;
}
}
class Interactions {
constructor() {
this.interactions = [];
}
addInteractions (interactions) {
this.interactions.push(...interactions);
}
/**
* This function executes all registered interactions of the type
* onElementChange.
* Interactions and their associated callbacks will be executed every time
* a chante event occurs on the specified element.
*/
onElementChangeExecute() {
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
for (let interaction of this.interactions) {
if (interaction.checkStatus) {
interaction.element.addEventListener("change", (event) => {
if (event.target.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
} else if (!event.target.checked){
let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);
}
});
} else {
continue
}
};
}
/**
* This function executes all registered interactions of the type onQueryLoad.
* Interactions and their associated callbacks will be executed once if when
* the first query results of a query request are being displayed.
*/
onQueryLoadExecute() {
}
/**
* This function executes all registered interactions of the type
* onPageChange.
* Interactions and their associated callbacks will be executed everytime if
* the user used the page navigation and a new result page is being displayed.
*/
onPageChangeExecute() {
}
}
// export Classes
export { InteractionElement, InteractionElements };

17
web/app/static/js/modules/corpus_analysis/view/ResultsView.js
View File

@ -251,7 +251,8 @@ class ResultsList extends List {
/**
* Also activate/deactivate buttons in the table/jsList results accordingly
* if button in inspect was activated/deactivated.
* This part only runs if tableCall is false.
* This part only runs if tableCall is set to false when this function is
* called.
*/
if (!tableCall) {
this.getHTMLElements(['#query-results-table']);
@ -350,7 +351,7 @@ class ResultsList extends List {
this.contextModal.open();
// add a button to add this match to sub results with onclick event
let classes = `btn-floating btn waves-effect` +
`waves-light grey right`
` waves-light grey right`
let addToSubResultsIdsBtn = document.createElement("a");
addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
@ -545,12 +546,10 @@ class ResultsList extends List {
this.page = this.displayOptionsFormResultsPerPage.value;
this.update();
}
// TODO: reimplement the followinmg stuff
// this.activateInspect();
// this.pageChangeEventInteractionHandler(interactionElements);
// if (expertModeSwitchElement.checked) {
// this.expertModeOn("query-display"); // page holds new result rows, so add new tooltips
// }
this.activateInspect();
if (this.displayOptionsFormExpertMode.checked) {
this.expertModeOn("query-display");
}
}
// Event function triggered on context select change
@ -612,7 +611,7 @@ class ResultsList extends List {
this.currentExpertTokenElements[htmlId] = [];
}
let container = document.getElementById(htmlId);
let tokens = container.querySelectorAll("span.token");
let tokens = container.querySelectorAll('span.token');
this.currentExpertTokenElements[htmlId].push(...tokens);
this.eventTokens[htmlId] = [];
for (let tokenElement of this.currentExpertTokenElements[htmlId]) {

26
web/app/static/js/modules/corpus_analysis/view/callbacks.js
View File

@ -51,17 +51,17 @@ function queryDataPreparingCallback(resultsList, detail) {
resultsList.clear()
// get needed HTML Elements
let results = detail.results;
resultsList.getHTMLElements(
['#interactions-menu',
'#recieved-match-count',
'#total-match-count',
'#text-lookup-count',
'#text-lookup-titles',
'#query-results-user-feedback',
'#query-progress-bar',
'#query-results-create',
'#sub-results-match-ids',
'#nr-marked-matches',
resultsList.getHTMLElements([
'#interactions-menu',
'#recieved-match-count',
'#total-match-count',
'#text-lookup-count',
'#text-lookup-titles',
'#query-results-user-feedback',
'#query-progress-bar',
'#query-results-create',
'#sub-results-match-ids',
'#nr-marked-matches',
]);
// show or enable some things for the user
resultsList.interactionsMenu.classList.toggle('hide', false)
@ -108,6 +108,10 @@ function queryDataRecievingCallback(resultsList, detail) {
resultsList.update();
resultsList.changeHitsPerPage();
resultsList.changeContext();
//activate expertMode of switch is checked
if (resultsList.displayOptionsFormExpertMode.checked) {
resultsList.expertModeOn('query-display', results);
}
} else if (!client.dynamicMode) {
results.jsList.add(resultItems, (items) => {
for (let item of items) {