New condition section token builder

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -34,7 +34,6 @@ class ConcordanceQueryBuilder {
       {
         onOpenStart: () => {
           this.tokenAttributeBuilderFunctions.preparePositionalAttrModal();
-          this.tokenAttributeBuilderFunctions.optionToggleHandler();
         },
         onCloseStart: () => {
           this.tokenAttributeBuilderFunctions.resetPositionalAttrModal();

app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js

@@ -19,17 +19,13 @@ class ElementReferencesQueryBuilder {
     // Token Attribute Builder Elements
     this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-positional-attr-modal'));
     this.positionalAttrSelection = document.querySelector('#corpus-analysis-concordance-positional-attr-selection');
+    this.tokenBuilderContent = document.querySelector('#corpus-analysis-concordance-token-builder-content');
     this.tokenQuery = document.querySelector('#corpus-analysis-concordance-token-query');
+    this.tokenQueryTemplate = document.querySelector('#corpus-analysis-concordance-token-query-template');
     this.tokenSubmitButton = document.querySelector('#corpus-analysis-concordance-token-submit');
     this.noValueMessage = document.querySelector('#corpus-analysis-concordance-no-value-message');
     this.isTokenQueryInvalid = false;
 
-    this.wordInput = document.querySelector('#corpus-analysis-concordance-word-input');
-    this.lemmaInput = document.querySelector('#corpus-analysis-concordance-lemma-input');
-    this.englishPosSelection = document.querySelector('#corpus-analysis-concordance-english-pos-selection');
-    this.germanPosSelection = document.querySelector('#corpus-analysis-concordance-german-pos-selection');
-    this.simplePosSelection = document.querySelector('#corpus-analysis-concordance-simple-pos-selection');
-
     this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
   }
 }

app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js

@@ -34,7 +34,9 @@ class GeneralFunctionsQueryBuilder {
   
   resetMaterializeSelection(selectionElements, value = "default") {
     selectionElements.forEach(selectionElement => {
-      selectionElement.querySelector(`option[value=${value}]`).selected = true;
+      if (selectionElement.querySelector(`option[value=${value}]`) !== null) {
+        selectionElement.querySelector(`option[value=${value}]`).selected = true;
+      }
       let instance = M.FormSelect.getInstance(selectionElement);
       instance.destroy();
       M.FormSelect.init(selectionElement);

app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js

@@ -12,13 +12,7 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
       button.addEventListener('click', () => {this.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
     });
 
-    // Eventlistener for kind of token 
     this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
-    this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
-    this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
-    this.elements.englishPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
-    this.elements.germanPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
-    this.elements.simplePosSelection.addEventListener('change', () => {this.optionToggleHandler();});
   }
 
   resetPositionalAttrModal() {
@@ -28,32 +22,38 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         <option value="lemma" >lemma</option>
         <option value="english-pos">english pos</option>
         <option value="german-pos">german pos</option>
-        <option value="simple-pos">simple_pos</option>
+        <option value="simple_pos">simple_pos</option>
         <option value="empty-token">empty token</option>
       `;
     this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
     this.elements.tokenQuery.innerHTML = '';
-    this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
+    this.elements.tokenBuilderContent.innerHTML = '';
-    this.toggleClass(['word', 'input-field-options'], 'hide', 'remove');
+    this.toggleClass(['input-field-options'], 'hide', 'remove');
     this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-
-    document.querySelector('#corpus-analysis-concordance-positional-attr-selection option[value="word"]').selected = true;
-    this.elements.wordInput.value = '';
-    this.elements.lemmaInput.value = '';
-    this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
     this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
+    this.elements.ignoreCaseCheckbox.checked = false;
     this.elements.editingModusOn = false;
     this.elements.editedQueryChipElementIndex = undefined;
   }
   
   preparePositionalAttrModal() {
     let selection = this.elements.positionalAttrSelection.value;
-    this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
     if (selection !== 'empty-token') {
-      this.toggleClass([selection], 'hide', 'remove');
+      let selectionTemplate = document.querySelector(`.token-builder-section[data-token-builder-section="${selection}"]`);
-      this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+      let selectionTemplateClone = selectionTemplate.content.cloneNode(true);
-      this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
+    
+      this.elements.tokenBuilderContent.innerHTML = '';
+      this.elements.tokenBuilderContent.appendChild(selectionTemplateClone);
+      if (this.elements.tokenBuilderContent.querySelector('select') !== null) {
+        let selectElement = this.elements.tokenBuilderContent.querySelector('select');
+        M.FormSelect.init(selectElement);
+        selectElement.addEventListener('change', () => {this.optionToggleHandler();});
+      } else {
+        this.elements.tokenBuilderContent.querySelector('input').addEventListener('input', () => {this.optionToggleHandler();});
+      }
     }
+    this.optionToggleHandler();
+
     if (selection === 'word' || selection === 'lemma') {
       this.toggleClass(['input-field-options'], 'hide', 'remove');
     } else if (selection === 'empty-token'){
@@ -63,35 +63,22 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     }
   }
 
-  tokenInputCheck() {
+  tokenInputCheck(elem) {
-    let input;
+    return elem.querySelector('select') !== null ? elem.querySelector('select') : elem.querySelector('input');
-
-    if (!document.querySelector('[data-toggle-area="word"]').classList.contains('hide')) {
-      input = this.elements.wordInput;
-    } else if (!document.querySelector('[data-toggle-area="lemma"]').classList.contains('hide')){
-      input = this.elements.lemmaInput;
-    } else if (!document.querySelector('[data-toggle-area="english-pos"]').classList.contains('hide')){
-      input = this.elements.englishPosSelection;
-    } else if (!document.querySelector('[data-toggle-area="german-pos"]').classList.contains('hide')){
-      input = this.elements.germanPosSelection;
-    } else if (!document.querySelector('[data-toggle-area="simple-pos"]').classList.contains('hide')){
-      input = this.elements.simplePosSelection;
-    }
-
-    return input;
   }
 
   optionToggleHandler() {
-    let input = this.tokenInputCheck();
+    let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
     if ((input.value === '' || input.value === 'default') && this.elements.editingModusOn === false) {
       this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+    } else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
+      this.toggleClass(['and'], 'disabled', 'add');
     } else {
       this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
     }
   }
 
   disableTokenSubmit() {
-    this.elements.isTokenQueryInvalid = true;
     this.elements.tokenSubmitButton.classList.add('red');
     this.elements.noValueMessage.classList.remove('hide');
     setTimeout(() => {
@@ -102,93 +89,52 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     }, 3000);
   }
 
-  tokenChipFactory(prettyQueryText, tokenText) {
-    tokenText = encodeURI(tokenText);
-    let builderElement;
-    let queryChipElement;
-    builderElement = document.createElement('div');
-    builderElement.innerHTML = `
-    <div class='chip col s2 l2' style='margin-top:20px;' data-tokentext='${tokenText}'>
-      ${prettyQueryText}
-      <i class='material-icons close'>close</i>
-    </div>`;
-    queryChipElement = builderElement.firstElementChild;
-    this.elements.tokenQuery.appendChild(queryChipElement);
-  }
-
   addTokenToQuery() {
-    let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
     let tokenQueryPrettyText = '';
     let tokenQueryCQLText = '';
-    this.elements.isTokenQueryInvalid = false;
+    let input;
+    let kindOfToken = this.kindOfTokenCheck(this.elements.positionalAttrSelection.value);
     
-    this.elements.tokenQuery.childNodes.forEach(element => {
+    // Takes all rows of the token query (if there is a query concatenation). 
-      tokenQueryPrettyText += ' ' + element.firstChild.data + ' ';
+    // Adds their contents to tokenQueryPrettyText and tokenQueryCQLText, which will later be expanded with the current input field.
-      tokenQueryCQLText += decodeURI(element.dataset.tokentext);
+    let tokenQueryRows = this.elements.tokenQuery.querySelectorAll('.row');
+    tokenQueryRows.forEach(row => {
+      let ignoreCaseCheckbox = row.querySelector('input[type="checkbox"]');
+      let c = ignoreCaseCheckbox !== null && ignoreCaseCheckbox.checked ? ' %c' : '';
+      let tokenQueryRowInput = this.tokenInputCheck(row.querySelector('.token-query-template-content'));
+      let tokenQueryKindOfToken = this.kindOfTokenCheck(tokenQueryRowInput.closest('.input-field').dataset.kindOfToken);
+      let tokenConditionPrettyText = row.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
+      let tokenConditionCQLText = row.querySelector('[data-condition-cql-text]').dataset.conditionCqlText;
+      tokenQueryPrettyText += `${tokenQueryKindOfToken}=${tokenQueryRowInput.value}${c} ${tokenConditionPrettyText} `;
+      tokenQueryCQLText += `${tokenQueryKindOfToken}="${tokenQueryRowInput.value}"${c} ${tokenConditionCQLText}`;
     });
 
-    switch (this.elements.positionalAttrSelection.value) {
+    if (kindOfToken === 'empty-token') {
-      case 'word':
+      tokenQueryPrettyText += 'empty token';
-        if (this.elements.wordInput.value === '') {
+    } else {
-          this.disableTokenSubmit();
+      let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
-        } else {
+      input = this.tokenInputCheck(this.elements.tokenBuilderContent);
-          tokenQueryPrettyText += `word=${this.elements.wordInput.value}${c}`;
+      tokenQueryPrettyText += `${kindOfToken}=${input.value}${c}`;
-          tokenQueryCQLText += `word="${this.elements.wordInput.value}"${c}`;
+      tokenQueryCQLText += `${kindOfToken}="${input.value}"${c}`;
-          this.elements.wordInput.value = '';
-        }
-        break;
-      case 'lemma':
-        if (this.elements.lemmaInput.value === '') {
-          this.disableTokenSubmit();
-        } else {
-          tokenQueryPrettyText += `lemma=${this.elements.lemmaInput.value}${c}`;
-          tokenQueryCQLText += `lemma="${this.elements.lemmaInput.value}"${c}`;
-          this.elements.lemmaInput.value = '';
-        }
-        break;
-      case 'english-pos':
-        if (this.elements.englishPosSelection.value === 'default') {
-          this.disableTokenSubmit();
-        } else {
-          tokenQueryPrettyText += `pos=${this.elements.englishPosSelection.value}`;
-          tokenQueryCQLText += `pos="${this.elements.englishPosSelection.value}"`;
-          this.elements.englishPosSelection.value = '';
-        }
-        break;
-      case 'german-pos':
-        if (this.elements.germanPosSelection.value === 'default') {
-          this.disableTokenSubmit();
-        } else {
-          tokenQueryPrettyText += `pos=${this.elements.germanPosSelection.value}`;
-          tokenQueryCQLText += `pos="${this.elements.germanPosSelection.value}"`;
-          this.elements.germanPosSelection.value = '';
-        }
-        break;
-      case 'simple-pos':
-        if (this.elements.simplePosSelection.value === 'default') {
-          this.disableTokenSubmit();
-        } else {
-          tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
-          tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
-          this.elements.simplePosSelection.value = '';
-        }
-        break;
-      case 'empty-token':
-        tokenQueryPrettyText += 'empty token';
-      default:
-        break;
     }
 
     // isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
-    if (this.elements.isTokenQueryInvalid === false) {
+    if ((input.value === '' || input.value === 'default') && this.elements.positionalAttrSelection.value !== 'empty-token') {
-      tokenQueryCQLText = '[' + tokenQueryCQLText + ']';
+      this.disableTokenSubmit();
+    } else {
+      tokenQueryCQLText = `[${tokenQueryCQLText}]`;
       this.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, true);
       this.elements.positionalAttrModal.close();
     }
   }
 
+  kindOfTokenCheck(kindOfToken) {
+    return kindOfToken === 'english-pos' || kindOfToken === 'german-pos' ? 'pos' : kindOfToken;
+  } 
+
+
   actionButtonInOptionSectionHandler(elem) {
-    let input = this.tokenInputCheck();
+    let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
     switch (elem) {
       case 'option-group':
         input.value  += '(option1|option2)';
@@ -201,10 +147,10 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         input.value += '.';
         break;
       case 'and':
-        this.conditionHandler('and', " & ");
+        this.conditionHandler('and');
         break;
       case 'or':
-        this.conditionHandler('or', " | ");
+        this.conditionHandler('or');
         break;
       default:
         break;
@@ -213,32 +159,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
   }
 
   characterIncidenceModifierHandler(elem) {
-    // For word and lemma, the incidence modifiers are inserted in the input field. For the others, one or two chips are created which contain the respective value of the token and the incidence modifier.
+    let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
-    switch (this.elements.positionalAttrSelection.value) {
+    input.value += elem.dataset.token;
-      case 'empty-token':
-        this.tokenChipFactory(elem.innerText, elem.dataset.token);
-        break;
-      case 'english-pos':
-        this.tokenChipFactory(`pos=${this.elements.englishPosSelection.value}`, `pos="${this.elements.englishPosSelection.value}"`);
-        this.tokenChipFactory(elem.innerText, elem.dataset.token);
-        break;
-      case 'german-pos':
-        this.tokenChipFactory(`pos=${this.elements.germanPosSelection.value}`, `pos="${this.elements.germanPosSelection.value}"`);
-        this.tokenChipFactory(elem.innerText, elem.dataset.token);
-        break;
-      case 'simple-pos':
-        this.tokenChipFactory(`simple_pos=${this.elements.simplePosSelection.value}`, `simple_pos="${this.elements.simplePosSelection.value}"`);
-        this.tokenChipFactory(elem.innerText, elem.dataset.token);
-        break;     
-      default:
-        let input = this.tokenInputCheck();
-        input.value += elem.dataset.token;
-        break;
-    }
-
-    if (this.elements.positionalAttrSelection.value !== "word" && this.elements.positionalAttrSelection.value !== "lemma") {
-      this.toggleClass([this.elements.positionalAttrSelection.value], "hide", "add");
-    }
   }
 
   characterNMSubmitHandler(modalId) {
@@ -250,89 +172,96 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
 
     let instance = M.Modal.getInstance(modal);
     instance.close();
-    
+    let tokenInput = this.tokenInputCheck(this.elements.tokenBuilderContent);
-    switch (this.elements.positionalAttrSelection.value) {
+    tokenInput.value += '{' + input + '}';
-      case 'word':
-        this.elements.wordInput.value += '{' + input + '}';
-        break;
-      case 'lemma':
-        this.elements.lemmaInput.value += '{' + input + '}';
-        break;
-      default:
-        break;
-    }
   }
 
-  conditionHandler(conditionText, conditionQueryContent) {
+  conditionHandler(conditionText) {
-    let tokenQueryPrettyText;
+    let tokenQueryTemplateClone = this.elements.tokenQueryTemplate.content.cloneNode(true);
-    let tokenQueryCQLText;
+    tokenQueryTemplateClone.querySelector('.token-query-template-content').appendChild(this.elements.tokenBuilderContent.firstElementChild);
-    let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
+    let notSelectedButton = tokenQueryTemplateClone.querySelector(`[data-condition-pretty-text]:not([data-condition-pretty-text="${conditionText}"])`);
-
+    let deleteButton = tokenQueryTemplateClone.querySelector(`[data-token-query-content-action="delete"]`);
-    switch (this.elements.positionalAttrSelection.value) {
+    deleteButton.addEventListener('click', (event) => {
-      case 'word':
+      this.deleteTokenQueryRow(event.target);
-        tokenQueryPrettyText = `word=${this.elements.wordInput.value}${c}`;
+    });
-        tokenQueryCQLText = `word="${this.elements.wordInput.value}"${c}`;
+    notSelectedButton.parentNode.removeChild(notSelectedButton);
-        this.elements.wordInput.value = '';
+    this.elements.tokenQuery.appendChild(tokenQueryTemplateClone);
-        break;
-      case 'lemma':
-        tokenQueryPrettyText = `lemma=${this.elements.lemmaInput.value}${c}`;
-        tokenQueryCQLText = `lemma="${this.elements.lemmaInput.value}"${c}`;
-        this.elements.lemmaInput.value = '';
-        break;
-      case 'english-pos':
-        tokenQueryPrettyText = `pos=${this.elements.englishPosSelection.value}`;
-        tokenQueryCQLText = `pos="${this.elements.englishPosSelection.value}"`;
-        this.elements.englishPosSelection.value = '';
-        break;
-      case 'german-pos':
-        tokenQueryPrettyText = `pos=${this.elements.germanPosSelection.value}`;
-        tokenQueryCQLText = `pos="${this.elements.germanPosSelection.value}"`;
-        this.elements.germanPosSelection.value = '';
-        break;
-      case 'simple-pos':
-        tokenQueryPrettyText = `simple_pos=${this.elements.simplePosSelection.value}`;
-        tokenQueryCQLText = `simple_pos="${this.elements.simplePosSelection.value}"`;
-        this.elements.simplePosSelection.value = '';
-        break;
-      default:
-        break;
-    }
 
     // Deleting the options which do not make sense in the context of the condition like "word" AND "word". Also sets selection default.
     let selectionDefault = "word";
     let optionDeleteList = ['empty-token'];
     if (conditionText === 'and') {
-      if (this.elements.positionalAttrSelection.value === 'word' || this.elements.positionalAttrSelection.value === 'lemma') {
+      switch (this.elements.positionalAttrSelection.value) {
-        selectionDefault = "english-pos";
+        case 'english-pos' || 'german-pos':
-        optionDeleteList.push('word', 'lemma');
+          optionDeleteList.push('english-pos', 'german-pos');
-      } else if (this.elements.positionalAttrSelection.value === 'english-pos' || this.elements.positionalAttrSelection.value === 'german-pos') {
+          break;
-        optionDeleteList.push('english-pos', 'german-pos');
+        default:
-      } else {
+          optionDeleteList.push(this.elements.positionalAttrSelection.value);
-        optionDeleteList.push('simple-pos');
+          break;
       }
+    } else {
+      let originalSelectionList = 
+      `
+        <option value="word" selected>word</option>
+        <option value="lemma" >lemma</option>
+        <option value="english-pos">english pos</option>
+        <option value="german-pos">german pos</option>
+        <option value="simple_pos">simple_pos</option>
+      `;
+      this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
+      M.FormSelect.init(this.elements.positionalAttrSelection);
     }
-
+    let lastTokenQueryRow = this.elements.tokenQuery.lastElementChild;
-    this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
+    if(lastTokenQueryRow.querySelector('[data-kind-of-token="word"]') || lastTokenQueryRow.querySelector('[data-kind-of-token="lemma"]')) {
-
+      this.appendIgnoreCaseCheckbox(lastTokenQueryRow.querySelector('.token-query-template-content'), this.elements.ignoreCaseCheckbox.checked);
-    this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
+    }
-    this.tokenChipFactory(conditionText, conditionQueryContent);
+    this.elements.ignoreCaseCheckbox.checked = false;
     this.setTokenSelection(selectionDefault, optionDeleteList);
   }
 
+  deleteTokenQueryRow(deleteButton) {
+    let deletedRow = deleteButton.closest('.row');
+    let condition = deletedRow.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
+    if (condition === 'and') {
+      let kindOfToken = deletedRow.querySelector('[data-kind-of-token]').dataset.kindOfToken;
+      switch (kindOfToken) {
+        case 'english-pos' || 'german-pos':
+          this.createOptionElementForPosAttrSelection('english-pos');
+          this.createOptionElementForPosAttrSelection('german-pos');
+          break;
+        default:
+          this.createOptionElementForPosAttrSelection(kindOfToken);
+          break;
+      }
+      M.FormSelect.init(this.elements.positionalAttrSelection);
+    }
+    deletedRow.remove();
+  }
+
+  createOptionElementForPosAttrSelection(kindOfToken) {
+    let option = document.createElement('option');
+    option.value = kindOfToken;
+    option.text = kindOfToken;
+    this.elements.positionalAttrSelection.appendChild(option);
+  }
+
+  appendIgnoreCaseCheckbox(parentElement, checked = false) {
+    let ignoreCaseCheckboxClone = document.querySelector('#ignore-case-checkbox-template').content.cloneNode(true);
+    parentElement.appendChild(ignoreCaseCheckboxClone);
+    M.Tooltip.init(parentElement.querySelectorAll('.tooltipped'));
+    if (checked) {
+      parentElement.querySelector('input[type="checkbox"]').checked = true;
+    }
+  }
+
   setTokenSelection(selection, optionDeleteList) {
     optionDeleteList.forEach(option => {
-      this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
+      if (this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`) !== null) {
+        this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
+      }
     });
 
     this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
-
+    this.preparePositionalAttrModal();
-    this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
-    this.toggleClass([selection], 'hide', 'remove');
-    this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-    if (selection === "word" || selection === "lemma") {
-      this.toggleClass(['input-field-options'], 'hide', 'remove');
-    } else {
-      this.toggleClass(['input-field-options'], 'hide', 'add');
-    }
   }
 }

app/templates/corpora/_analysis/concordance.html.j2

@@ -17,10 +17,10 @@
 <div class="card">
   <div class="card-content">
     <div class="row">
-      <div class="col s1">
+      <div class="col s2">
         <span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
       </div>
-      <div class="col s2">
+      <div class="col s1">
         <div class="switch" style="margin-top:8px; margin-left:0px;">
           <label>
             <input type="checkbox" id="corpus-analysis-concordance-expert-mode-switch">

app/templates/corpora/_analysis/query_builder/_query_builder.html.j2

@@ -162,223 +162,227 @@
           <option value="lemma" >lemma</option>
           <option value="english-pos">english pos</option>
           <option value="german-pos">german pos</option>
-          <option value="simple-pos">simple_pos</option>
+          <option value="simple_pos">simple_pos</option>
           <option value="empty-token">empty token</option>
         </select>
       </div>
     </div>
     <p></p>
-    <div id="corpus-analysis-concordance-token-builder-content">
+    <div id="corpus-analysis-concordance-token-query"></div>
-      <div class="row" >
+    <template id="corpus-analysis-concordance-token-query-template">
-        <div id="corpus-analysis-concordance-token-query"></div>
+      <div class="row">
-        
+        <div class="token-query-template-content"></div>
-        <div id="corpus-analysis-concordance-word-builder" data-toggle-area="word">
+        <div class="col s4" style="margin-top:15px;">
-          <div class= "input-field col s3 l4">
+          <a class="btn-small waves-effect waves-light disabled" data-condition-pretty-text="or" data-condition-cql-text=" | ">or</a>
-            <i class="material-icons prefix">mode_edit</i>
+          <a class="btn-small waves-effect waves-light disabled" data-condition-pretty-text="and" data-condition-cql-text=" & ">and</a>
-            <input placeholder="Type in your word" type="text" id="corpus-analysis-concordance-word-input">
+          <a class="btn-floating waves-effect waves-light red" data-token-query-content-action="delete" style="margin-left:8px;"><i class="material-icons right">delete</i></a>
-          </div>
         </div>
+      </div>
+    </template>
+    <div class="row">
+      <div id="corpus-analysis-concordance-token-builder-content"></div>
 
-        <div id="corpus-analysis-concordance-lemma-builder" class="hide" data-toggle-area="lemma">
+      <template id="ignore-case-checkbox-template">
-          <div class= "input-field col s3 l4">
+        <span class="col s1 center-align tooltipped" style="margin-top: 22px;" data-position="bottom" data-tooltip="Ignore Case">
-            <i class="material-icons prefix">mode_edit</i>
+          <label>
-            <input placeholder="Type in your lemma" type="text" id="corpus-analysis-concordance-lemma-input">
+            <input type="checkbox" class="filled-in"/>
-          </div>
+            <span>%c</span>
+          </label>
+        </span>
+      </template>
+
+      <template class="token-builder-section" data-token-builder-section="word">
+        <div class= "input-field col s4" data-kind-of-token="word">
+          <i class="material-icons prefix">mode_edit</i>
+          <input placeholder="Type in your word" type="text">
         </div>
+      </template>
 
-        <div id="corpus-analysis-concordance-english-pos-builder" class="hide" data-toggle-area="english-pos">
+      <template class="token-builder-section" data-token-builder-section="lemma">
-          <div class="col s6 m4 l4">
+        <div class= "input-field col s4" data-kind-of-token="lemma">
-            <div class="row">
+          <i class="material-icons prefix">mode_edit</i>
-              <div class= "input-field col s12">
+          <input placeholder="Type in your lemma" type="text">
-                <select name="englishpos" id="corpus-analysis-concordance-english-pos-selection">
-                  <option value="default" disabled selected>English pos tagset</option>
-                  <option value="ADD">email</option>
-                  <option value="AFX">affix</option>
-                  <option value="CC">conjunction, coordinating</option>
-                  <option value="CD">cardinal number</option>
-                  <option value="DT">determiner</option>
-                  <option value="EX">existential there</option>
-                  <option value="FW">foreign word</option>
-                  <option value="HYPH">punctuation mark, hyphen</option>
-                  <option value="IN">conjunction, subordinating or preposition</option>
-                  <option value="JJ">adjective</option>
-                  <option value="JJR">adjective, comparative</option>
-                  <option value="JJS">adjective, superlative</option>
-                  <option value="LS">list item marker</option>
-                  <option value="MD">verb, modal auxillary</option>
-                  <option value="NFP">superfluous punctuation</option>
-                  <option value="NN">noun, singular or mass</option>
-                  <option value="NNP">noun, proper singular</option>
-                  <option value="NNPS">noun, proper plural</option>
-                  <option value="NNS">noun, plural</option>
-                  <option value="PDT">predeterminer</option>
-                  <option value="POS">possessive ending</option>
-                  <option value="PRP">pronoun, personal</option>
-                  <option value="PRP$">pronoun, possessive</option>
-                  <option value="RBR">adverb, comparative</option>
-                  <option value="RBS">adverb, superlative</option>
-                  <option value="RP">adverb, particle</option>
-                  <option value="SYM">symbol</option>
-                  <option value="TO">infinitival to</option>
-                  <option value="UH">interjection</option>
-                  <option value="VB">verb, base form</option>
-                  <option value="VBD">verb, past tense</option>
-                  <option value="VBG">verb, gerund or present participle</option>
-                  <option value="VBN">verb, past participle</option>
-                  <option value="VBP">verb, non-3rd person singular present</option>
-                  <option value="VBZ">verb, 3rd person singular present</option>
-                  <option value="WDT">wh-determiner</option>
-                  <option value="WP">wh-pronoun, personal</option>
-                  <option value="WP$">wh-pronoun, possessive</option>
-                  <option value="WRB">wh-adverb</option>
-                  <option value="XX">unknown</option>
-                  <option value="``">opening quotation mark</option>
-                  <option value="$">symbol, currency</option>
-                  <option value='""'>closing quotation mark</option>
-                  <option value="-LRB-">left round bracket</option>
-                  <option value="-RRB-">right round bracket</option>
-                  <option value=".">punctuation mark, sentence closer</option>
-                  <option value=":">punctuation mark, colon or ellipsis</option>
-                </select>
-                <label>Part-of-speech tags</label>
-              </div>
-            </div>
-          </div>
         </div>
+      </template>
 
-        <div id="corpus-analysis-concordance-german-pos-builder" class="hide" data-toggle-area="german-pos">
+      <template class="token-builder-section" data-token-builder-section="english-pos">
-          <div class="col s6 m4 l4">
+        <div class= "input-field col s4" data-kind-of-token="english-pos">
-            <div class="row">
+          <select name="englishpos">
-              <div class= "input-field col s12">
+            <option value="default" disabled selected>English pos tagset</option>
-                <select name="germanpos" id="corpus-analysis-concordance-german-pos-selection">
+            <option value="ADD">email</option>
-                  <option value="default" disabled selected>German pos tagset</option>
+            <option value="AFX">affix</option>
-                  <option value="ADJA">adjective, attributive</option>
+            <option value="CC">conjunction, coordinating</option>
-                  <option value="ADJD">adjective, adverbial or predicative</option>
+            <option value="CD">cardinal number</option>
-                  <option value="ADV">adverb</option>
+            <option value="DT">determiner</option>
-                  <option value="APPO">postposition</option>
+            <option value="EX">existential there</option>
-                  <option value="APPR">preposition; circumposition left</option>
+            <option value="FW">foreign word</option>
-                  <option value="APPRART">preposition with article</option>
+            <option value="HYPH">punctuation mark, hyphen</option>
-                  <option value="APZR">circumposition right</option>
+            <option value="IN">conjunction, subordinating or preposition</option>
-                  <option value="ART">definite or indefinite article</option>
+            <option value="JJ">adjective</option>
-                  <option value="CARD">cardinal number</option>
+            <option value="JJR">adjective, comparative</option>
-                  <option value="FM">foreign word</option>
+            <option value="JJS">adjective, superlative</option>
-                  <option value="ITJ">interjection</option>
+            <option value="LS">list item marker</option>
-                  <option value="KOKOM">comparative conjunction</option>
+            <option value="MD">verb, modal auxillary</option>
-                  <option value="KON">coordinating conjunction</option>
+            <option value="NFP">superfluous punctuation</option>
-                  <option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
+            <option value="NN">noun, singular or mass</option>
-                  <option value="KOUS">subordinating conjunction with sentence</option>
+            <option value="NNP">noun, proper singular</option>
-                  <option value="NE">proper noun</option>
+            <option value="NNPS">noun, proper plural</option>
-                  <option value="NN">noun, singular or mass</option>
+            <option value="NNS">noun, plural</option>
-                  <option value="NNE">proper noun</option>
+            <option value="PDT">predeterminer</option>
-                  <option value="PDAT">attributive demonstrative pronoun</option>
+            <option value="POS">possessive ending</option>
-                  <option value="PDS">substituting demonstrative pronoun</option>
+            <option value="PRP">pronoun, personal</option>
-                  <option value="PIAT">attributive indefinite pronoun without determiner</option>
+            <option value="PRP$">pronoun, possessive</option>
-                  <option value="PIS">substituting indefinite pronoun</option>
+            <option value="RBR">adverb, comparative</option>
-                  <option value="PPER">non-reflexive personal pronoun</option>
+            <option value="RBS">adverb, superlative</option>
-                  <option value="PPOSAT">attributive possessive pronoun</option>
+            <option value="RP">adverb, particle</option>
-                  <option value="PPOSS">substituting possessive pronoun</option>
+            <option value="SYM">symbol</option>
-                  <option value="PRELAT">attributive relative pronoun</option>
+            <option value="TO">infinitival to</option>
-                  <option value="PRELS">substituting relative pronoun</option>
+            <option value="UH">interjection</option>
-                  <option value="PRF">reflexive personal pronoun</option>
+            <option value="VB">verb, base form</option>
-                  <option value="PROAV">pronominal adverb</option>
+            <option value="VBD">verb, past tense</option>
-                  <option value="PTKA">particle with adjective or adverb</option>
+            <option value="VBG">verb, gerund or present participle</option>
-                  <option value="PTKANT">answer particle</option>
+            <option value="VBN">verb, past participle</option>
-                  <option value="PTKNEG">negative particle</option>
+            <option value="VBP">verb, non-3rd person singular present</option>
-                  <option value="PTKVZ">separable verbal particle</option>
+            <option value="VBZ">verb, 3rd person singular present</option>
-                  <option value="PTKZU">"zu" before infinitive</option>
+            <option value="WDT">wh-determiner</option>
-                  <option value="PWAT">attributive interrogative pronoun</option>
+            <option value="WP">wh-pronoun, personal</option>
-                  <option value="PWAV">adverbial interrogative or relative pronoun</option>
+            <option value="WP$">wh-pronoun, possessive</option>
-                  <option value="PWS">substituting interrogative pronoun</option>
+            <option value="WRB">wh-adverb</option>
-                  <option value="TRUNC">word remnant</option>
+            <option value="XX">unknown</option>
-                  <option value="VAFIN">finite verb, auxiliary</option>
+            <option value="``">opening quotation mark</option>
-                  <option value="VAIMP">imperative, auxiliary</option>
+            <option value="$">symbol, currency</option>
-                  <option value="VAINF">infinitive, auxiliary</option>
+            <option value='""'>closing quotation mark</option>
-                  <option value="VAPP">perfect participle, auxiliary</option>
+            <option value="-LRB-">left round bracket</option>
-                  <option value="VMFIN">finite verb, modal</option>
+            <option value="-RRB-">right round bracket</option>
-                  <option value="VMINF">infinitive, modal</option>
+            <option value=".">punctuation mark, sentence closer</option>
-                  <option value="VMPP">perfect participle, modal</option>
+            <option value=":">punctuation mark, colon or ellipsis</option>
-                  <option value="VVFIN">finite verb, full</option>
+          </select>
-                  <option value="VVIMP">imperative, full</option>
+          <label>Part-of-speech tags</label>
-                  <option value="VVINF">infinitive, full</option>
-                  <option value="VVIZU">infinitive with "zu", full</option>
-                  <option value="VVPP">perfect participle, full</option>
-                  <option value="XY">non-word containing non-letter</option>
-                  <option value="$(">other sentence-internal punctuation mark</option>
-                  <option value="$,">comma</option>
-                  <option value="$.">sentence-final punctuation mark</option>
-                </select>
-                <label>Part-of-speech tags</label>
-              </div>
-            </div>
-          </div>
         </div>
+      </template>
       
-        <div id="corpus-analysis-concordance-simple-pos-builder" class="hide" data-toggle-area="simple-pos">
+      <template class="token-builder-section" data-token-builder-section="german-pos">
-          <div class="col s6 m4 l4">
+        <div class= "input-field col s4" data-kind-of-token="german-pos">
-            <div class="row">
+          <select name="germanpos">
-              <div class= "input-field col s12">
+            <option value="default" disabled selected>German pos tagset</option>
-                <select name="simplepos" id="corpus-analysis-concordance-simple-pos-selection">
+            <option value="ADJA">adjective, attributive</option>
-                  <option value="default" disabled selected>simple_pos tagset</option>
+            <option value="ADJD">adjective, adverbial or predicative</option>
-                  <option value="ADJ">adjective</option>
+            <option value="ADV">adverb</option>
-                  <option value="ADP">adposition</option>
+            <option value="APPO">postposition</option>
-                  <option value="ADV">adverb</option>
+            <option value="APPR">preposition; circumposition left</option>
-                  <option value="AUX">auxiliary verb</option>
+            <option value="APPRART">preposition with article</option>
-                  <option value="CONJ">coordinating conjunction</option>
+            <option value="APZR">circumposition right</option>
-                  <option value="DET">determiner</option>
+            <option value="ART">definite or indefinite article</option>
-                  <option value="INTJ">interjection</option>
+            <option value="CARD">cardinal number</option>
-                  <option value="NOUN">noun</option>
+            <option value="FM">foreign word</option>
-                  <option value="NUM">numeral</option>
+            <option value="ITJ">interjection</option>
-                  <option value="PART">particle</option>
+            <option value="KOKOM">comparative conjunction</option>
-                  <option value="PRON">pronoun</option>
+            <option value="KON">coordinating conjunction</option>
-                  <option value="PROPN">proper noun</option>
+            <option value="KOUI">subordinating conjunction with "zu" and infinitive</option>
-                  <option value="PUNCT">punctuation</option>
+            <option value="KOUS">subordinating conjunction with sentence</option>
-                  <option value="SCONJ">subordinating conjunction</option>
+            <option value="NE">proper noun</option>
-                  <option value="SYM">symbol</option>
+            <option value="NN">noun, singular or mass</option>
-                  <option value="VERB">verb</option>
+            <option value="NNE">proper noun</option>
-                  <option value="X">other</option>
+            <option value="PDAT">attributive demonstrative pronoun</option>
-                </select>
+            <option value="PDS">substituting demonstrative pronoun</option>
-                <label>Simple part-of-speech tags</label>
+            <option value="PIAT">attributive indefinite pronoun without determiner</option>
-              </div>
+            <option value="PIS">substituting indefinite pronoun</option>
-            </div>
+            <option value="PPER">non-reflexive personal pronoun</option>
-          </div>
+            <option value="PPOSAT">attributive possessive pronoun</option>
+            <option value="PPOSS">substituting possessive pronoun</option>
+            <option value="PRELAT">attributive relative pronoun</option>
+            <option value="PRELS">substituting relative pronoun</option>
+            <option value="PRF">reflexive personal pronoun</option>
+            <option value="PROAV">pronominal adverb</option>
+            <option value="PTKA">particle with adjective or adverb</option>
+            <option value="PTKANT">answer particle</option>
+            <option value="PTKNEG">negative particle</option>
+            <option value="PTKVZ">separable verbal particle</option>
+            <option value="PTKZU">"zu" before infinitive</option>
+            <option value="PWAT">attributive interrogative pronoun</option>
+            <option value="PWAV">adverbial interrogative or relative pronoun</option>
+            <option value="PWS">substituting interrogative pronoun</option>
+            <option value="TRUNC">word remnant</option>
+            <option value="VAFIN">finite verb, auxiliary</option>
+            <option value="VAIMP">imperative, auxiliary</option>
+            <option value="VAINF">infinitive, auxiliary</option>
+            <option value="VAPP">perfect participle, auxiliary</option>
+            <option value="VMFIN">finite verb, modal</option>
+            <option value="VMINF">infinitive, modal</option>
+            <option value="VMPP">perfect participle, modal</option>
+            <option value="VVFIN">finite verb, full</option>
+            <option value="VVIMP">imperative, full</option>
+            <option value="VVINF">infinitive, full</option>
+            <option value="VVIZU">infinitive with "zu", full</option>
+            <option value="VVPP">perfect participle, full</option>
+            <option value="XY">non-word containing non-letter</option>
+            <option value="$(">other sentence-internal punctuation mark</option>
+            <option value="$,">comma</option>
+            <option value="$.">sentence-final punctuation mark</option>
+          </select>
+          <label>Part-of-speech tags</label>
         </div>
+      </template>
 
-        <div class="col s1 l1 center-align">
+      <template class="token-builder-section" data-token-builder-section="simple_pos">
-            <p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-token-submit">
+        <div class= "input-field col s4" data-kind-of-token="simple_pos">
-              <i class="material-icons right">send</i>
+          <select name="simplepos">
-            </p>
+            <option value="default" disabled selected>simple_pos tagset</option>
+            <option value="ADJ">adjective</option>
+            <option value="ADP">adposition</option>
+            <option value="ADV">adverb</option>
+            <option value="AUX">auxiliary verb</option>
+            <option value="CONJ">coordinating conjunction</option>
+            <option value="DET">determiner</option>
+            <option value="INTJ">interjection</option>
+            <option value="NOUN">noun</option>
+            <option value="NUM">numeral</option>
+            <option value="PART">particle</option>
+            <option value="PRON">pronoun</option>
+            <option value="PROPN">proper noun</option>
+            <option value="PUNCT">punctuation</option>
+            <option value="SCONJ">subordinating conjunction</option>
+            <option value="SYM">symbol</option>
+            <option value="VERB">verb</option>
+            <option value="X">other</option>
+          </select>
+          <label>Simple part-of-speech tags</label>
         </div>
+      </template>
 
-        <div class="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
+      <div class="col s4" data-toggle-area="condition-option-container">
+        <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
+        <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
+        <p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-token-submit" style="margin-left:10px;">
+          <i class="material-icons right">send</i>
+        </p>
       </div>
 
-      <div id="corpus-analysis-concordance-token-edit-options">
+      <div class="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
-        <div class="row">
-          <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
-        </div>
-        <p></p>
-        <div class="row">
-          <div class="col s8" data-toggle-area="input-field-options">
-            <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
-            <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
-            <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown" data-toggle-area="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
-            <span data-toggle-area="ignore-case-checkbox">
-              <label>
-                <input type="checkbox" class="filled-in"  id="corpus-analysis-concordance-ignore-case-checkbox"/>
-                <span>Ignore Case</span>
-              </label>
-            </span>
-          </div>
-          <div class="col s2" data-toggle-area="condition-option-container">
-            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
-            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
-          </div>
-
-          <ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
-            {{ incidence_modifiers_dropdown_content("character") }}
-          </ul>
 
+    </div>
+    <div id="corpus-analysis-concordance-token-edit-options" data-toggle-area="input-field-options">
+      <div class="row">
+        <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-edit-options-tutorial-info-icon">help_outline</i></a></h6>
+      </div>
+      <p></p>
+      <div class="row">
+        <div class="col s8" >
+          <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
+          <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
+          <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown" data-toggle-area="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
+          <span>
+            <label>
+              <input type="checkbox" class="filled-in" id="corpus-analysis-concordance-ignore-case-checkbox"/>
+              <span>Ignore Case</span>
+            </label>
+          </span>
         </div>
+
+        <ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
+          {{ incidence_modifiers_dropdown_content("character") }}
+        </ul>
+
       </div>
     </div>