mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Add some doc strings.
This commit is contained in:
Stephan Porada
parent
7186f5a777
commit
17e9b7d4ed
@ -70,13 +70,17 @@
|
||||
* First Phase:
|
||||
* Document content is loaded and scripts are being imported and executed.
|
||||
*/
|
||||
// import Client classes
|
||||
|
||||
// Import Client classes. Client handles the server client communication.
|
||||
import {
|
||||
Client,
|
||||
ClientEventListener,
|
||||
ListenerCallback,
|
||||
} from '../../static/js/modules/corpus_analysis/client/Client.js';
|
||||
// import client listener functions
|
||||
/**
|
||||
* Import Client listener functions which will listen for defined socket or
|
||||
* javascript events.
|
||||
*/
|
||||
import {
|
||||
recieveConnected,
|
||||
recieveMetaData,
|
||||
@ -85,7 +89,7 @@ import {
|
||||
recieveViewNotification,
|
||||
recieveResultsData,
|
||||
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
|
||||
// import client listener callbacks
|
||||
// Import client listener callbacks so they can be registered to the listeners.
|
||||
import {
|
||||
prepareQueryData,
|
||||
saveQueryData,
|
||||
@ -93,26 +97,36 @@ import {
|
||||
getResultsData,
|
||||
saveResultsData,
|
||||
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
|
||||
// Import Results class which will be used to save results data of a query etc.
|
||||
import {
|
||||
Results,
|
||||
} from '../../static/js/modules/corpus_analysis/model/Results.js';
|
||||
/**
|
||||
* Import the ResultsList which can be understood as a View class that handles
|
||||
* how the data from Results is represented to the user. The ViewEventListener
|
||||
* is used to register listener functions which listen for events emitred by
|
||||
* the Client.
|
||||
*/
|
||||
import {
|
||||
ViewEventListener,
|
||||
ResultsList,
|
||||
ViewEventListener,
|
||||
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
|
||||
// Import listener which will be registered to the ViewEventListener class.
|
||||
import {
|
||||
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'
|
||||
// Import the script that implements a spinner animation for buttons.
|
||||
import {
|
||||
loadingSpinnerHTML,
|
||||
} from '../../static/js/modules/corpus_analysis/view/spinner.js'
|
||||
|
||||
/**
|
||||
* Second Phase:
|
||||
* Asynchronus and event driven code
|
||||
* Asynchronus and event driven code.
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Initialize the client for server client communication in dynamic mode
|
||||
@ -122,17 +136,17 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
'logging': true,
|
||||
'dynamicMode': true});
|
||||
/**
|
||||
* Initializing the results object as a model holding all the data of a query.
|
||||
* Also holds the metadata of one query.
|
||||
* After that initialize the ResultsList object as the View handeling the
|
||||
* represnetation of the data for the user.
|
||||
*/
|
||||
* Initializing the results object as a model holding all the data of a
|
||||
* query. Also holds the metadata of one query and results data.
|
||||
* After that initialize the ResultsList object as the View handeling the
|
||||
* representation of the data for the user.
|
||||
*/
|
||||
let results = new Results();
|
||||
let resultsList = new ResultsList('result-list', ResultsList.options);
|
||||
/**
|
||||
* Register listeners listening to socket.io events and their callbacks
|
||||
* Afterwards load them. Also registers listeners listening for custom
|
||||
* javascript events.
|
||||
* javascript events emitted by the View.
|
||||
*/
|
||||
const listenForConnected = new ClientEventListener('corpus_analysis_init',
|
||||
recieveConnected);
|
||||
@ -160,7 +174,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
saveResultsData,
|
||||
[client, results]);
|
||||
listenForResults.setCallbacks([resultsDataCallback]);
|
||||
// listen for javascript custom notifications
|
||||
// Listen for javascript custom notifications emitted by the View.
|
||||
const listenForViewNotification = new ClientEventListener('notify-client',
|
||||
recieveViewNotification);
|
||||
const getResultsCallback = new ListenerCallback('get-results',
|
||||
@ -173,18 +187,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
listenForMetaData,
|
||||
listenForViewNotification,
|
||||
listenForResults]);
|
||||
// Load the listeners so that they will be executed if triggered
|
||||
client.loadSocketEventListeners();
|
||||
/**
|
||||
* Register resultsList listeners listening to notification events.
|
||||
*/
|
||||
* Register resultsList listeners listening to notification events emitted by
|
||||
* the Client class.
|
||||
*/
|
||||
const listenForClientNotification = new ViewEventListener('notify-view',
|
||||
recieveClientNotification);
|
||||
resultsList.setNotificationListeners([listenForClientNotification]);
|
||||
resultsList.loadNotificationListeners();
|
||||
// Connect client to server
|
||||
// Connect client to server.
|
||||
client.notifyView('connecting');
|
||||
client.connect();
|
||||
// Send a query and recieve its answer data
|
||||
// Send a query and recieve its answer data.
|
||||
let queryFormElement = document.querySelector('#query-form');
|
||||
queryFormElement.addEventListener('submit', (event) => {
|
||||
try {
|
||||
@ -201,13 +217,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
} catch (e) {
|
||||
// No page element is present if first query is submitted.
|
||||
}
|
||||
// Prevent page from reloading on submit
|
||||
// Prevent page from reloading on submit.
|
||||
event.preventDefault();
|
||||
// Get query string and send query to server
|
||||
// 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
|
||||
// Get all needed HTMLElements for the following event listeners.
|
||||
resultsList.getHTMLElements([
|
||||
'#display-options-form-results_per_page',
|
||||
'#display-options-form-result_context',
|
||||
@ -232,21 +248,21 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
*/
|
||||
for (let element of resultsList.pagination) {
|
||||
element.addEventListener("click", (event) => {
|
||||
// shows match context according to the user picked value
|
||||
// Shows match context according to the user picked value on a new page.
|
||||
resultsList.changeContext();
|
||||
// activates or deactivates expertMode on new page depending switch value
|
||||
// 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
|
||||
// Activates inspect buttons on new page if client is not busy.
|
||||
resultsList.activateInspect();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The following event Listener handles the expert mode switch for the list
|
||||
* The following event Listener handles the expert mode switch for the list.
|
||||
*/
|
||||
resultsList.displayOptionsFormExpertMode.onchange = (event) => {
|
||||
if (event.target.checked) {
|
||||
@ -260,21 +276,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
* 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([dataIndex], 'inspect');
|
||||
} else if (event.target.classList.contains('add-btn')) {
|
||||
dataIndex = parseInt(event.target.closest('tr').dataset.index);
|
||||
resultsList.addToSubResults(dataIndex);
|
||||
}
|
||||
})
|
||||
resultsList.queryResultsTable.addEventListener('click', (event) => {
|
||||
let dataIndex;
|
||||
if (event.target.classList.contains('inspect-btn')) {
|
||||
dataIndex = parseInt(event.target.closest('tr').dataset.index);
|
||||
resultsList.inspect([dataIndex], 'inspect');
|
||||
} else if (event.target.classList.contains('add-btn')) {
|
||||
dataIndex = parseInt(event.target.closest('tr').dataset.index);
|
||||
resultsList.addToSubResults(dataIndex);
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Display events: Following event listeners are handling the
|
||||
* live update of hits per page if hits per page value is changed and the
|
||||
* context size of every match.
|
||||
* Following event listeners handle the change of Context size per match and
|
||||
* the number of matches shown per page.
|
||||
*/
|
||||
resultsList.displayOptionsFormResultsPerPage.onchange = () => {
|
||||
resultsList.changeHitsPerPage();
|
||||
@ -284,7 +299,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
};
|
||||
|
||||
/**
|
||||
* The following event listener handel the Show metadata button and its
|
||||
* The following event listener handles the show metadata button and its
|
||||
* functionality. Before the needed modal is initialized.
|
||||
*/
|
||||
resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
|
||||
@ -316,6 +331,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
* 4. Download sub-results
|
||||
* 5. Download single inspect-results
|
||||
*/
|
||||
// 1. Add events for full-results create
|
||||
resultsList.fullResultsCreate.onclick = () => {
|
||||
resultsList.fullResultsCreate.querySelector('i').classList.toggle('hide');
|
||||
resultsList.fullResultsCreate.innerText = 'Creating...';
|
||||
@ -325,6 +341,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
resultsList.notifyClient('get-results', { resultsType: 'full-results',
|
||||
dataIndexes: dataIndexes});
|
||||
}
|
||||
// 2. Add events for sub-results create
|
||||
resultsList.subResultsCreate.onclick = () => {
|
||||
let dataIndexes = [];
|
||||
resultsList.addToSubResultsIdsToShow.forEach((id) => {
|
||||
@ -337,11 +354,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
resultsList.notifyClient('get-results', { resultsType: 'sub-results',
|
||||
dataIndexes: dataIndexes});
|
||||
}
|
||||
/**
|
||||
* Before the download events are added the needed modal is initialized.
|
||||
*/
|
||||
// Before the download events are added the needed modal is initialized.
|
||||
resultsList.queryResultsDownloadModal = M.Modal.init(resultsList.queryResultsDownloadModal);
|
||||
// Open download modal when full results export button is pressed
|
||||
// 3. Open download modal when full results export button is pressed
|
||||
resultsList.fullResultsExport.onclick = () => {
|
||||
resultsList.queryResultsDownloadModal.open();
|
||||
// add onclick to download JSON button and download the file
|
||||
@ -352,7 +367,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
results.fullResultsData,
|
||||
resultsList.downloadResultsJson)};
|
||||
}
|
||||
// Open download modal when sub results export button is pressed
|
||||
// 4. Open download modal when sub results export button is pressed
|
||||
resultsList.subResultsExport.onclick = () => {
|
||||
resultsList.queryResultsDownloadModal.open();
|
||||
// add onclick to download JSON button and download the file
|
||||
@ -363,7 +378,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
results.subResultsData,
|
||||
resultsList.downloadResultsJson)};
|
||||
}
|
||||
// Open download modal when inspect-results-export button is pressed
|
||||
// 5. Open download modal when inspect-results-export button is pressed
|
||||
resultsList.inspectResultsExport.onclick = () => {
|
||||
resultsList.queryResultsDownloadModal.open();
|
||||
// add onclick to download JSON button and download the file
|
||||
@ -375,7 +390,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
resultsList.downloadResultsJson)};
|
||||
}
|
||||
|
||||
// enable scroll to Top
|
||||
// Enable scroll to Top functionality.
|
||||
scrollToTop('#headline', '#menu-scroll-to-top-div');
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user