mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-21 05:20:36 +00:00
Move vanilla javascript event listeners into view listeners.
This commit is contained in:
Stephan Porada
@ -115,14 +115,9 @@ import {
|
||||
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
|
||||
// Import listener which will be registered to the ViewEventListener class.
|
||||
import {
|
||||
// listener listening for client dispatched 'notify-vie' custom event.
|
||||
recieveClientNotification,
|
||||
} from '../../static/js/modules/corpus_analysis/view/listeners.js';
|
||||
// Import script that implements the scroll to top button.
|
||||
import {
|
||||
scrollToTop,
|
||||
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js';
|
||||
// vanilla javascript Event listeners which are listening for button clicks etc
|
||||
import {
|
||||
// vanilla javascript Event listeners which are listening for button clicks.
|
||||
pageNavigation,
|
||||
expertModeSwitch,
|
||||
actionButtons,
|
||||
@ -135,7 +130,13 @@ import {
|
||||
exportFullResults,
|
||||
exportSubResults,
|
||||
exportSingleMatch,
|
||||
} from '../../static/js/modules/corpus_analysis/view/eventListeners.js';
|
||||
} from '../../static/js/modules/corpus_analysis/view/listeners.js';
|
||||
// Import script that implements the scroll to top button.
|
||||
import {
|
||||
scrollToTop,
|
||||
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js';
|
||||
// vanilla javascript Event listeners which are listening for button clicks etc
|
||||
|
||||
|
||||
/**
|
||||
* Second Phase:
|
||||
@ -208,35 +209,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
*/
|
||||
const listenForClientNotification = new ViewEventListener('notify-view',
|
||||
recieveClientNotification);
|
||||
resultsList.setViewEventListeners([listenForClientNotification]);
|
||||
resultsList.loadViewEventListeners();
|
||||
// Connect client to server.
|
||||
client.notifyView('connecting');
|
||||
client.connect();
|
||||
// Send a query and recieve its answer data.
|
||||
let queryFormElement = document.querySelector('#query-form');
|
||||
queryFormElement.addEventListener('submit', (event) => {
|
||||
try {
|
||||
/**
|
||||
* Selects first page of result list if pagination is already available
|
||||
* from an query submitted before.
|
||||
* This avoids confusion for the user e.g.: The user was on page 24
|
||||
* reviewing the results and issues a new query. He would not see any
|
||||
* results until the new results reach page 24 or he clicks on another
|
||||
* valid result page element from the new pagination.
|
||||
*/
|
||||
let firstPageElement = document.querySelector('a.page');
|
||||
firstPageElement.click();
|
||||
} catch (e) {
|
||||
// No page element is present if first query is submitted.
|
||||
}
|
||||
// Prevent page from reloading on submit.
|
||||
event.preventDefault();
|
||||
// Get query string and send query to server.
|
||||
results.data.getQueryStr(queryFormElement);
|
||||
client.query(results.data.query);
|
||||
});
|
||||
// Get all needed HTMLElements for the following event listeners.
|
||||
/**
|
||||
* Register vanilla Javascript events to the resultList listening for button
|
||||
* clicks etc. done by the user.
|
||||
* Get all needed HTMLElements for those event listeners before.
|
||||
*/
|
||||
resultsList.getHTMLElements([
|
||||
'.pagination',
|
||||
'#display-options-form-expert_mode',
|
||||
@ -270,21 +247,86 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
'#sub-results-export',
|
||||
'#export-full-inspect-context',
|
||||
]);
|
||||
|
||||
// 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);
|
||||
showCorpusFiles(resultsList, results);
|
||||
// Still vanilla event listeners, but focused on result download and export
|
||||
exportFullContextSwitch(resultsList);
|
||||
createFullResults(resultsList, results);
|
||||
createSubResults(resultsList, results);
|
||||
exportFullResults(resultsList, results);
|
||||
exportSubResults(resultsList, results);
|
||||
exportSingleMatch(resultsList, results);
|
||||
let args = [resultsList, results, client]
|
||||
const listenForPageNavigation = new ViewEventListener('page-navigation',
|
||||
pageNavigation,
|
||||
args);
|
||||
const listenForExpertModeSwitch = new ViewEventListener('expert-mode',
|
||||
expertModeSwitch,
|
||||
args);
|
||||
const listenForActionButtons = new ViewEventListener('action-buttons',
|
||||
actionButtons,
|
||||
args);
|
||||
const listenForDisplayOptions = new ViewEventListener('display-otions',
|
||||
displayOptions,
|
||||
args);
|
||||
const listenForShowMetaData = new ViewEventListener('show-meta-data',
|
||||
showMetaData,
|
||||
args);
|
||||
const listenForShowCorpusFiles = new ViewEventListener('show-corpus-files',
|
||||
showCorpusFiles,
|
||||
args);
|
||||
const listenForExportFullContextSwitch = new ViewEventListener('export-full-context-switch',
|
||||
exportFullContextSwitch,
|
||||
args);
|
||||
const listenForCreateFullResults = new ViewEventListener('create-full-results',
|
||||
createFullResults,
|
||||
args);
|
||||
const listenForCreateSubResults = new ViewEventListener('create-sub-results',
|
||||
createSubResults,
|
||||
args);
|
||||
const listenForExportFullResults = new ViewEventListener('export-full-results',
|
||||
exportFullResults,
|
||||
args);
|
||||
const listenForExportSubResults = new ViewEventListener('export-sub-results',
|
||||
exportSubResults,
|
||||
args);
|
||||
const listenForExportSingleMatch = new ViewEventListener('export-single-match',
|
||||
exportSingleMatch,
|
||||
args);
|
||||
// Set and load define listeners
|
||||
resultsList.setViewEventListeners([
|
||||
listenForClientNotification,
|
||||
listenForPageNavigation,
|
||||
listenForExpertModeSwitch,
|
||||
listenForActionButtons,
|
||||
listenForDisplayOptions,
|
||||
listenForShowMetaData,
|
||||
listenForShowCorpusFiles,
|
||||
listenForExportFullContextSwitch,
|
||||
listenForCreateFullResults,
|
||||
listenForCreateSubResults,
|
||||
listenForExportFullResults,
|
||||
listenForExportSubResults,
|
||||
listenForExportSingleMatch,
|
||||
]);
|
||||
resultsList.loadViewEventListeners();
|
||||
// Connect client to server.
|
||||
client.notifyView('connecting');
|
||||
client.connect();
|
||||
// Send a query and recieve its answer data.
|
||||
let queryFormElement = document.querySelector('#query-form');
|
||||
queryFormElement.addEventListener('submit', (event) => {
|
||||
try {
|
||||
/**
|
||||
* Selects first page of result list if pagination is already available
|
||||
* from an query submitted before.
|
||||
* This avoids confusion for the user e.g.: The user was on page 24
|
||||
* reviewing the results and issues a new query. He would not see any
|
||||
* results until the new results reach page 24 or he clicks on another
|
||||
* valid result page element from the new pagination.
|
||||
*/
|
||||
let firstPageElement = document.querySelector('a.page');
|
||||
firstPageElement.click();
|
||||
} catch (e) {
|
||||
// No page element is present if first query is submitted.
|
||||
}
|
||||
// Prevent page from reloading on submit.
|
||||
event.preventDefault();
|
||||
// Get query string and send query to server.
|
||||
results.data.getQueryStr(queryFormElement);
|
||||
client.query(results.data.query);
|
||||
});
|
||||
// Enable scroll to Top functionality.
|
||||
scrollToTop('#headline', '#menu-scroll-to-top-div');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user