sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-28 08:50:34 +00:00
Code Issues Projects Releases Wiki Activity

Bundle redundant event listeners.

Browse Source
This commit is contained in:
Stephan Porada
2020-09-22 12:45:24 +02:00
parent 3c86a2f334
commit ad636d308d
3 changed files with 257 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
web/app/templates/query_results/inspect.html.j2
View File

@ -104,6 +104,14 @@ import {
import {
scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
// vanilla javascript Event listeners which are listening for button clicks etc
import {
pageNavigation,
expertModeSwitch,
actionButtons,
displayOptions,
showMetaData,
} from '../../static/js/modules/corpus_analysis/view/eventListeners.js';
/**
* Second Phase:
* Asynchronus and event driven code.
@ -184,80 +192,13 @@ document.addEventListener("DOMContentLoaded", () => {
// Save meta data to results after the init callback from line above
results.metaData = metaDataJson;
client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson]);
/**
* The following listener handles what functions are called when the user
* does use the page navigation to navigate to a new page.
*/
for (let element of resultsList.pagination) {
element.addEventListener("click", (event) => {
// Shows match context according to the user picked value on a new page.
resultsList.changeContext();
// De- or activates expertMode on new page depending on switch value.
if (resultsList.displayOptionsFormExpertMode.checked) {
resultsList.expertModeOn('query-display', results);
} else {
resultsList.expertModeOff('query-display');
}
// Activates inspect buttons on new page if client is not busy.
resultsList.toggleInspectButtons(client);
});
}
/**
* The following event Listener handles the expert mode switch for the list.
*/
resultsList.displayOptionsFormExpertMode.onchange = (event) => {
if (event.target.checked) {
resultsList.expertModeOn('query-display', results);
} else {
resultsList.expertModeOff('query-display');
}
};
/**
* The following event Listener handles the add-btn and the inspect-btn
* onclick events via bubbleing.
*/
resultsList.queryResultsTable.addEventListener('click', (event) => {
let dataIndex;
if (event.target.classList.contains('inspect-btn')) {
dataIndex = parseInt(event.target.closest('tr').dataset.index);
resultsList.inspect(client, results, [dataIndex], 'inspect');
} else if (event.target.classList.contains('add-btn')) {
dataIndex = parseInt(event.target.closest('tr').dataset.index);
resultsList.addToSubResults(dataIndex, client);
}
})
/**
* Following event listeners handle the change of Context size per match and
* the number of matches shown per page.
*/
resultsList.displayOptionsFormResultsPerPage.onchange = (event) => {
resultsList.changeHitsPerPage(client, results);
};
resultsList.displayOptionsFormResultContext.onchange = (event) => {
resultsList.changeContext();
};
/**
* The following event listener handles the show metadata button and its
* functionality.
*/
resultsList.showMetaData.onclick = () => {
resultsList.metaDataModalContent.textContent = '';
let table = resultsList.createMetaDataForModal(results.metaData);
resultsList.metaDataModalContent.insertAdjacentHTML('afterbegin', table);
resultsList.metaDataModal.open();
let collapsibles = resultsList.metaDataModalContent.querySelectorAll(".text-metadata");
for (let collapsible of collapsibles) {
collapsible.onclick = () => {
let elems = resultsList.metaDataModalContent.querySelectorAll('.collapsible');
let instances = M.Collapsible.init(elems, {accordion: false});
resultsList.createTextDetails(results.metaData);
}
}
};
// Call the vanilla event listeners listening for clicks etc. from the user.
pageNavigation(resultsList, results, client);
expertModeSwitch(resultsList, results);
actionButtons(resultsList, results, client);
displayOptions(resultsList, results, client);
showMetaData(resultsList, results);
// Enable scroll to Top functionality.
scrollToTop('#headline', '#menu-scroll-to-top-div');
});