First setup for metadata modal view

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

@@ -87,7 +87,8 @@
             <div class="col s12">
               <button class="waves-effect
                       waves-light
-                      btn-flat"
+                      btn-flat
+                      disabled"
                       type="submit"
                       id="results-create">Create Results
                 <i class="material-icons left">build</i>
@@ -244,6 +245,18 @@
 
 
 <!-- Modals -->
+
+<!-- Metadata modal -->
+{% import "macros/query_result_macro.html.j2" as metadata %}
+<div id="metadata-modal" class="modal bottom-sheet">
+    <div class="modal-content">
+      {{ metadata.show_metadata("testasdasgs") }}
+    </div>
+    <div class="modal-footer">
+      <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
+    </div>
+  </div>
+
 <!-- Analysis init modal -->
 <div class="modal no-autoinit" id="init-display">
   <div class="modal-content">
@@ -421,6 +434,11 @@
   var textTitlesElement;  // matched text titles
   var nrMarkedMatches;  // count of matches marked for subresults
   var showMetadataButton;  // Button to show corpus metadata
+  var activateInspectInteraction;  // global interaction element
+  var expertModeInteraction;  // global interaction element
+  var subResultsInteraction;  // global interaction element
+  var changeContextInteraction;  // global interaction element
+  var resultCreationRunning;
 
   // ###### Defining local scope variables ######
   let contextPerItemElement;  // Form Element for display option
@@ -490,11 +508,11 @@
 
   // ###### event on DOMContentLoaded ######
   document.addEventListener("DOMContentLoaded", () => {
-    //set accordion of collapsibles to false
-    M.Collapsible.init(collapsibleElements, {accordion: false});
     // creates some modals on DOMContentLoaded
-    contextModal = M.Modal.init(contextModal, {"dismissible": true});
-    exportModal = M.Modal.init(exportModal, {"dismissible": true});
+    let defaultOptions = {"dismissible": true,
+                          "preventScrolling": false};
+    contextModal = M.Modal.init(contextModal, defaultOptions);
+    exportModal = M.Modal.init(exportModal, defaultOptions);
     initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
     // Init corpus analysis components
     data = new Data();
@@ -572,8 +590,8 @@
     // 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).
-    interactionElements = new Array();
-    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
+    interactionElements = new InteractionElements();
+    expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
     expertModeInteraction.setCallback("on",
                                       results.jsList.expertModeOn,
                                       results.jsList,
@@ -583,7 +601,7 @@
                                       results.jsList,
                                       ["query-display"])
 
-    let subResultsInteraction = new InteractionElement("add-to-sub-results");
+    subResultsInteraction = new InteractionElement("add-to-sub-results");
     subResultsInteraction.setCallback("on",
                                         results.jsList.activateAddToSubResults,
                                         results.jsList);
@@ -591,22 +609,22 @@
                                         results.jsList.deactivateAddToSubResults,
                                         results.jsList);
 
-    let activateInspectInteraction = new InteractionElement("inspect",
+    activateInspectInteraction = new InteractionElement("inspect",
                                                             false);
     activateInspectInteraction.setCallback("noCheck",
                                             results.jsList.activateInspect,
                                             results.jsList);
 
-    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
+    changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
                                                           false);
     changeContextInteraction.setCallback("noCheck",
                                         results.jsList.changeContext,
                                         results.jsList)
-    interactionElements.push(expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction);
+    interactionElements.addInteractions([expertModeInteraction, subResultsInteraction, activateInspectInteraction, changeContextInteraction]);
 
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
-    InteractionElement.onChangeExecute(interactionElements);
+    interactionElements.onChangeExecute();
 
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100
@@ -617,12 +635,24 @@
       });
     }
 
+    // ### Show corpus Metadata
+    showMetadataButton.onclick = () => {
+      let deleteOverlay = () => {
+        let overlay = document.getElementsByClassName("modal-overlay")[0];
+        overlay.remove();
+      }
+      let modal = document.getElementById("metadata-modal");
+      console.log(modal);
+      modal = M.Modal.init(modal, {"preventScrolling": false,
+                                   "opacity": 0.0,
+                                   "dismissible": false,
+                                   "onOpenEnd": deleteOverlay});
+      console.log(modal);
+      modal.open();
+    };
+
   });
 
-  // ### Show corpus Metadata
-  showMetadataButton.onclick = () => {
-    console.log("click");
-  }
 
   // ### Download events and sub-results creation ###
   var loadingSpinnerHTML = `
@@ -653,9 +683,9 @@
     // add onclick to download JSON button and download the file
     downloadResultsJSONElement = document.getElementById("download-results-json")
     downloadResultsJSONElement.onclick = () => {
-      let filename = results.data.createDownloadFilename("matches");
-      results.data.addData(results.metaData);
-      results.data.downloadJSONRessource(filename, results.resultsData,
+      let filename = results.resultsData.createDownloadFilename("matches-results");
+      results.resultsData.addData(results.metaData);
+      results.resultsData.downloadJSONRessource(filename, results.resultsData,
                                          downloadResultsJSONElement
       )};
   }
@@ -675,7 +705,7 @@
     // add onclick to download JSON button and download the file
     downloadResultsJSONElement = document.getElementById("download-results-json")
     downloadResultsJSONElement.onclick = () => {
-      let filename = results.data.createDownloadFilename("matches-sub-results");
+      let filename = results.subResultsData.createDownloadFilename("matches-sub-results");
       results.subResultsData.downloadJSONRessource(filename,
                                                    results.subResultsData,
                                                    downloadResultsJSONElement
@@ -690,6 +720,6 @@
     results.data.downloadJSONRessource(filename,
                                        results.jsList.contextData,
                                        downloadInspectContextElement);
-};
+  };
 </script>
 {% endblock %}

web/app/templates/macros/query_result_macro.html.j2

@@ -1,65 +1,56 @@
-{% macro show_metadata(query_metadata) %}
-<div class="col s12">
-  <p>Below the metadata for the results from the Corpus
-    <i>{{ query_metadata.corpus_name }}</i> generated with the query
-    <i>{{ query_metadata.query }}</i> are shown.
-  </p>
+{%- macro show_metadata(query_metadata) -%}
 
-</div>
+<p>{{ query_metadata }}</p>
 
-<div class="col s12">
-  <div class="card">
-    <div class="card-content" id="results">
-      <table class="responsive-table highlight">
-        <thead>
-          <tr>
-            <th>Metadata Description</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for pair in query_metadata|dictsort %}
-          <tr>
-            <td>{{ pair[0] }}</td>
-            {% if pair[0] == 'corpus_all_texts'
-               or pair[0] == 'text_lookup'  %}
-              <td>
-              <table>
-              {% for key, value  in pair[1].items()  %}
-                  <tr style="border-bottom: none;">
-                    <td>
-                      <i>{{ value['title'] }}</i> written
-                      by <i>{{ value['author'] }}</i>
-                      in <i>{{ value['publishing_year'] }}</i>
-                      <a class="waves-effect
-                                waves-light
-                                btn
-                                right
-                                more-text-detials"
+{# <div class="col s12">
+  <table class="responsive-table highlight">
+    <thead>
+      <tr>
+        <th>Metadata Description</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for pair in query_metadata|dictsort %}
+      <tr>
+        <td>{{ pair[0] }}</td>
+        {% if pair[0] == 'corpus_all_texts'
+           or pair[0] == 'text_lookup'  %}
+          <td>
+          <table>
+          {% for key, value  in pair[1].items()  %}
+              <tr style="border-bottom: none;">
+                <td>
+                  <i>{{ value['title'] }}</i> written
+                  by <i>{{ value['author'] }}</i>
+                  in <i>{{ value['publishing_year'] }}</i>
+                  <a class="waves-effect
+                            waves-light
+                            btn
+                            right
+                            more-text-detials"
+                     data-metadata-key="{{ pair[0] }}"
+                     data-text-key="{{ key }}"
+                     href="#modal-text-details">More
+                      <i class="material-icons right"
                          data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}"
-                         href="#modal-text-details">More
-                          <i class="material-icons right"
-                             data-metadata-key="{{ pair[0] }}"
-                             data-text-key="{{ key }}">
-                             info_outline
-                          </i>
-                      </a>
-                    </td>
-                  </tr>
-              {% endfor %}
-              </table>
-              </td>
-            {% else %}
-              <td>{{ pair[1] }}</td>
-            {% endif %}
-          </tr>
+                         data-text-key="{{ key }}">
+                         info_outline
+                      </i>
+                  </a>
+                </td>
+              </tr>
           {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
+          </table>
+          </td>
+        {% else %}
+          <td>{{ pair[1] }}</td>
+        {% endif %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div> #}
 
 <!-- Modal Structure -->
 <div id="modal-text-details" class="modal modal-fixed-footer">
@@ -106,4 +97,5 @@ for (var btn of moreTextDetailsButtons) {
     bibliographicData.appendChild(table);
   }
 }
-</script>
+</script>
+{% endmacro %}

web/app/templates/query_results/inspect.html.j2

@@ -230,7 +230,7 @@
     // 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).
-    interactionElements = new Array();
+    interactionElements = new InteractionElements();
     let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
     expertModeInteraction.setCallback("on",
                                       results.jsList.expertModeOn,
@@ -252,11 +252,11 @@
     changeContextInteraction.setCallback("noCheck",
                                         results.jsList.changeContext,
                                         results.jsList)
-    interactionElements.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction);
+    interactionElements.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
 
     // checks if a change for every interactionElement happens and executes
     // the callbacks accordingly
-    InteractionElement.onChangeExecute(interactionElements);
+    interactionElements.onChangeExecute();
 
     // eventListener if pagination is used to apply new context size to new page
     // and also activate inspect match if progress is 100

web/app/templates/query_results/query_result.html.j2

@@ -41,8 +41,7 @@
                                 right
                                 more-text-detials"
                          data-metadata-key="{{ pair[0] }}"
-                         data-text-key="{{ key }}"
-                         href="#modal-text-details">More
+                         data-text-key="{{ key }}">More
                           <i class="material-icons right"
                              data-metadata-key="{{ pair[0] }}"
                              data-text-key="{{ key }}">