Push before rework part 2

web/app/templates/corpora/analyse_corpus.html.j2

@@ -69,22 +69,45 @@
 <script type="module">
 /**
  * First Phase:
- * document content is loaded and scripts are being imported and executed
+ * Document content is loaded and scripts are being imported and executed.
  */
-import { CorpusAnalysisClient,
-        CorpusAnalysisDisplay,
-        SocketEventListener } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
-import { recieveSession, recieveQueryStatus,
-        recieveQueryData } from '../../static/js/modules/nopaque.listenerFunctions.js';
-import { Results, Data, MetaData } from '../../static/js/nopaque.Results.js';
-import { ResultsList } from '../../static/js/nopaque.lists.js';
+import {
+  CorpusAnalysisClient,
+  CorpusAnalysisDisplay,
+  SocketEventListener,
+  ListenerCallback,
+} from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
+import {
+  recieveSession,
+  recieveQueryStatus,
+  recieveQueryData,
+} from '../../static/js/modules/nopaque.listenerFunctions.js';
+import {
+  querySetup,
+  queryRenderResults,
+} from '../../static/js/modules/nopaque.listenerCallbacks.js'
+import {
+  Results,
+  Data,
+  MetaData,
+} from '../../static/js/nopaque.Results.js';
+import {
+  ResultsList,
+} from '../../static/js/nopaque.lists.js';
+import {
+  scrollToTop,
+} from '../../static/js/modules/nopaque.scrollToTop.js';
+import {
+  InteractionElement,
+  InteractionElements,
+} from '../../static/js/modules/nopaque.InteractionElement.js';
 
 /**
  * Second Phase:
  * Asynchronus and event driven code
  */
 document.addEventListener("DOMContentLoaded", () => {
-  // Initialize the CorpusAnalysisClient
+  // Initialize the CorpusAnalysisClient dynamic mode
   let corpusId = {{ corpus_id}}
   const client = new CorpusAnalysisClient({'corpusId': corpusId,
                                            'socket': nopaque.socket,
@@ -95,7 +118,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const initLoadingElement = document.getElementById("init-display");
   const initLoadingModal = M.Modal.init(initLoadingElement,
                                         {"dismissible": false});
-  // Set up display elements which hare show depending on the client status
+  // Set up display elements which are shown depending on the client status
   const initLoadingDisplay = new CorpusAnalysisDisplay(initLoadingModal);
   client.getHTMLElements(['#query-display']);
   const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
@@ -105,27 +128,79 @@ document.addEventListener("DOMContentLoaded", () => {
   /**
    * Initializing the results object holding all the data of a query.
    * Also holds the metadata of one query.
-   * resultsListOptions is set to determine how many results per page are
-   * shown etc.
    * Lastly it contains the object ResultsList which is a list.js
    * subclass which handles the visual representation of the query data.
    */
-   let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
-   ResultsList.options.page = displayOptionsData["resultsPerPage"];
-   let data = new Data();
-   let resultsList = new ResultsList("result-list", ResultsList.options);
-   let resultsMetaData = new MetaData();
-   let results = new Results(data, resultsList, resultsMetaData);
-   // make results part of the client
-   client.results = results;
-   console.info('Initialized the Results object.')
-  // register listeners listening to socket.io events and load them
+  let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
+  ResultsList.options.page = displayOptionsData["resultsPerPage"];
+  let data = new Data();
+  let resultsList = new ResultsList("result-list", ResultsList.options);
+  let resultsMetaData = new MetaData();
+  let results = new Results(data, resultsList, resultsMetaData);
+  // Make results part of the client
+  client.results = results;
+  console.info('Initialized the Results object.')
+  /**
+   * Initialization of interactionElemnts
+   * An interactionElement is an object identifing a switch or button via
+   * htmlID. Callbacks are set for these elements which will be triggered on
+   * a pagination interaction by the user or if the status of the element has
+   * been altered. (Like the switche has ben turned on or off).
+   */
+  let interactionElements = new InteractionElements();
+  const expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
+  expertModeInteraction.setCallback('on',
+                                  results.jsList.expertModeOn,
+                                  results.jsList,
+                                  ['query-display', client]);
+  expertModeInteraction.setCallback('off',
+                                    results.jsList.expertModeOff,
+                                    results.jsList,
+                                    ['query-display', client]);
+  const subResultsInteraction = new InteractionElement("add-to-sub-results");
+  subResultsInteraction.setCallback('on',
+                                     results.jsList.activateAddToSubResults,
+                                     results.jsList);
+  subResultsInteraction.setCallback('off',
+                                     results.jsList.deactivateAddToSubResults,
+                                     results.jsList);
+
+  const activateInspectInteraction = new InteractionElement('inspect',
+                                                            false);
+  activateInspectInteraction.setCallback('noCheck',
+                                         results.jsList.activateInspect,
+                                         results.jsList);
+  const changeContextInteraction = new InteractionElement('display-options-form-results_per_page',
+                                                          false);
+  changeContextInteraction.setCallback('noCheck',
+                                       results.jsList.changeContext,
+                                       results.jsList)
+  interactionElements.addInteractions([expertModeInteraction,
+                                       subResultsInteraction,
+                                       activateInspectInteraction,
+                                       changeContextInteraction]);
+
+  /**
+  * Checks if a change for every interactionElement happens and executes
+  * the callbacks accordingly.
+  */
+  interactionElements.onChangeExecute();
+  /**
+   * Register listeners listening to socket.io events and their callbacks
+   * Afterwards load them.
+   */
   const listenForSession = new SocketEventListener('corpus_analysis_init',
                                                   recieveSession);
   const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
-                                                     recieveQueryStatus);
+                                                       recieveQueryStatus);
+  const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
+                                                   querySetup);
+  listenForQueryStatus.setCallbacks([queryStatusCallback]);
   const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
                                                   recieveQueryData);
+  const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
+                                                 queryRenderResults);
+  listenForQueryData.setCallbacks([queryDataCallback]);
   client.setSocketEventListeners([listenForSession, listenForQueryStatus,
                                   listenForQueryData]);
   client.loadSocketEventListeners();
@@ -153,6 +228,9 @@ document.addEventListener("DOMContentLoaded", () => {
     // Get query string and send query to server
     results.data.getQueryStr(queryFormElement);
     client.requestQueryData(results.data.query);
+
+    // Add scrollToTop functionality
+    scrollToTop();
   });
 });
 </script>