mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-03 20:02:47 +00:00 
			
		
		
		
	New context options
This commit is contained in:
		@@ -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();
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user