mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 17:25:44 +00:00
83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
/**
|
|
* 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 }; |