New context options

This commit is contained in:
Stephan Porada
2020-04-15 14:55:29 +02:00
parent 34e8d952b6
commit 9031ca5845
4 changed files with 133 additions and 80 deletions

View File

@ -201,38 +201,46 @@
<h4>Match context</h4>
<div class="divider"></div>
<div class="section" id="inspect-display-options">
<h5>Display options</h5>
<div class="row">
<div class="col s9">
<p>Expert Mode</p>
</div>
<div class="col s3 right-align">
<div class="switch">
<label>
{{ inspect_display_options_form.expert_mode_inspect() }}
<span class="lever"></span>
</label>
<form>
<h5>Display options</h5>
<div class="row">
<div class="col s9">
<p>{{ inspect_display_options_form.expert_mode_inspect.label.text }}</p>
</div>
<div class="col s3 right-align">
<div class="switch">
<label>
{{ inspect_display_options_form.expert_mode_inspect() }}
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s9">
<p>{{ inspect_display_options_form.highlight_sentences.label.text }}</p>
</div>
<div class="col s3 right-align">
<div class="switch">
<label>
{{ inspect_display_options_form.highlight_sentences() }}
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s6">
<p>Nr. of sentences around the match</p>
</div>
<div class="col s6 right-align">
<div class="input-field">
<p class="range-field">
<input type="range" id="context-sentences"
min="1"
max="10"
value="3" />
</p>
</div>
</div>
</div>
<div class="col s9">
<p>Highlight sentences</p>
</div>
<div class="col s3 right-align">
<div class="switch">
<label>
{{ inspect_display_options_form.highlight_sentences() }}
<span class="lever"></span>
</label>
</div>
</div>
<div class="col s12 m6">
<div class="input-field">
<i class="material-icons prefix">format_list_numbered</i>
{{ inspect_display_options_form.context_sentences() }}
{{ inspect_display_options_form.context_sentences.label }}
</div>
</div>
</div>
</form>
</div>
<div class="divider"></div>
<div class="section" id="context-results">
@ -257,16 +265,20 @@
var collapsibleElements; // All collapsibleElements on this page
var collapsibleElements; // all collapsibles on site
var contextModal; // Modal to open on inspect for further match context
var contextPerItemElement;
var contextSentencesElement;
var displayOptionsData; // Getting form data from display options
var displayOptionsFormElement; // Form holding the display informations
var downloadResultsJSONElement; // button for downloading results as JSON
var expertModeSwitchElement; // Expert mode switch Element
var exportModal; // Download options modal
var firstPageElement; // first page element of resultsList pagination
var hitsPerPageInputElement;
var initDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var initDisplayElement; // Element for initialization using initDisplay
var initModal;
var matchCountElement; // Total nr. of matches will be displayed in this element
var paginationElements;
var progress; // global progress value
var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
var queryDisplayElement; // Element for initialization using queryDisplay
@ -282,20 +294,19 @@
var resultsListOptions; // specifies ResultsList options
var textLookupCountElement // Nr of texts the matches occured in will be shown in this element
var xpath; // xpath to grab first resultsList page pagination element
var hitsPerPageInputElement;
var paginationElements;
var contextPerItemElement;
// ###### Initialize variables ######
client = undefined;
collapsibleElements = document.querySelector('.collapsible.expandable');
contextModal = document.getElementById("context-modal");
contextSentencesElement = document.getElementById("context-sentences");
displayOptionsFormElement = document.getElementById("display-options-form");
expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
exportModal = document.getElementById("query-results-download-modal");
initDisplay = undefined;
initDisplayElement = document.getElementById("init-display");
matchCountElement = document.getElementById("match-count");
paginationElements = document.getElementsByClassName("pagination");
queryDisplay = undefined;
queryDisplayElement = document.getElementById("query-display");
queryFormElement = document.getElementById("query-form");
@ -305,7 +316,6 @@
queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
receivedMatchCountElement = document.getElementById("received-match-count");
textLookupCountElement = document.getElementById("text-lookup-count");
paginationElements = document.getElementsByClassName("pagination");
// ###### js list options and intialization ######
displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@ -388,6 +398,12 @@
contextPerItemElement = document.getElementById("display-options-form-result_context");
contextPerItemElement.onchange = results.resultsList.changeContext;
// live update of context sentences in inspect modal
contextSentencesElement.onchange = (event) => {
let sValue = event.target.value;
console.log(sValue);
}
// eventListener if pagination is used to apply new context size to new page
// and also activate inspect match if progress is 100
for (let element of paginationElements) {
@ -395,10 +411,6 @@
element.addEventListener("click", results.resultsList.activateInspect);
}
// epxert mode table view
// TODO: Redo this
// - This replicates itself on expertModeSwitchElement use
// - Replication should be fixed
expertModeSwitchElement.addEventListener("change", (event) => {
if (event.target.checked) {
results.resultsList.expertModeOn();