Further rework

web/app/static/js/web-components/InfoMenu.js

@@ -0,0 +1,83 @@
+/**
+ * HTML for showing infos about the current query or result. Also gives
+ * the user the abiltiy to access the meta data for the current query or
+ * result.
+ */
+const template = document.createElement('template');
+template.innerHTML = `
+
+  <link rel="stylesheet" href="../../static/fonts/Material_design_icons/material-icons.css">
+  <link rel="stylesheet" href="../../static/css/Materialize/materialize.min.css">
+  <link rel="stylesheet" href="../../static/css/nopaque.css">
+
+  <div class="col">
+    <h6 style="margin-top: 0px;">Infos</h6>
+    <div class="divider" style="margin-bottom: 10px;"></div>
+    <div class="row">
+      <div class="col s12">
+        <button id="show-metadata"
+                class="waves-effect
+                       waves-light
+                       btn-flat
+                       flat-interaction"
+                type="submit">Corpus Metadata
+          <i class="material-icons left">info_outline</i>
+        </button>
+      </div>
+      <div class="col s12">
+        <p>
+          <slot name="received-match-count">
+            0
+          </slot> of
+          <slot name="match-count">(to be determined)</slot>
+          matches loaded.
+          <br>
+          Matches occured in
+          <slot name="text-lookup-count">(to be determined)</slot>
+          corpus files:
+          <br>
+          <slot name=text-titles>(to be determined)</slot>
+        </p>
+        <p id="query-results-user-feedback">
+          <i class="material-icons">help</i>
+          The Server is still sending your results.
+          Functions like "Export Results" and "Match Inspect" will be
+          available after all matches have been loaded.
+        </p>
+        <div class="progress" id="query-progress-bar">
+          <div class="determinate"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+class InfoMenu extends HTMLElement {
+  constructor() {
+    super();
+
+    this.appendChild(template.content.cloneNode(true));
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+  }
+
+  // methods that will be used in connectedCallback on eventListeners
+  showMetadata() {
+    console.log('Show metadata somehow');
+  }
+
+  connectedCallback() {
+    const showMetadataBtn = this.querySelector('#show-metadata');
+    showMetadataBtn.addEventListener('click', () => this.showMetadata());
+  }
+
+  disconnectedCallback() {
+    const showMetadataBtn = this.querySelector('#show-metadata');
+    showMetadataBtn.removeEventListener();
+  }
+}
+
+window.customElements.define('info-menu', InfoMenu);
+
+export { InfoMenu };