Query Builder fixes

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -162,9 +162,21 @@ class ConcordanceQueryBuilder {
     this.elements.or.addEventListener('click', () => {this.orHandler();});
     this.elements.and.addEventListener('click', () => {this.andHandler();});
   
-  
     //#endregion Token Attribute Event Listeners
-
+    let selectInstances = this.elements.concordanceQueryBuilder.querySelectorAll('select');
+    M.FormSelect.init(
+      selectInstances,
+      {
+        dropdownOptions: {
+          alignment: 'bottom',
+          coverTrigger: false
+        }
+      }
+    )
+    let dropdownContents = this.elements.concordanceQueryBuilder.querySelectorAll('.dropdown-content');
+    dropdownContents.forEach((dropdownContent) => {
+      dropdownContent.style.paddingBottom = '15px';
+    });
   }
 
 
@@ -182,6 +194,7 @@ class ConcordanceQueryBuilder {
   
   showPositionalAttrArea() {
     this.elements.positionalAttrArea.classList.remove('hide');
+    this.elements.structuralAttrArea.classList.add('hide');
     this.wordBuilder();
 
     this.elements.tokenQueryFilled = false;
@@ -275,7 +288,7 @@ class ConcordanceQueryBuilder {
   queryPreviewBuilder() {
     this.elements.yourQueryContent = [];
     for (let element of this.elements.yourQuery.childNodes) {
-      let queryElement = decodeURI(element.dataset.query);
+      let queryElement = element.dataset.query;
       queryElement = Utils.escape(queryElement);
       if (queryElement !== 'undefined') {
         this.elements.yourQueryContent.push(queryElement);
@@ -307,7 +320,7 @@ class ConcordanceQueryBuilder {
     this.validateValue();
     if (this.elements.valueValidator) {
       for (let element of this.elements.yourQuery.childNodes) {
-        let queryElement = decodeURI(element.dataset.query);
+        let queryElement = element.dataset.query;
         if (queryElement !== 'undefined') {
           this.elements.yourQueryContent.push(queryElement);
         }
@@ -633,8 +646,11 @@ class ConcordanceQueryBuilder {
   englishPosHandler() {
     this.hideEverything();
     this.elements.englishPosBuilder.classList.remove('hide');
-    // this.elements.incidenceModifiersButton.classList.remove('hide');
+    this.elements.incidenceModifiersButton.classList.remove('hide');
     this.elements.conditionContainer.classList.remove('hide');
+    this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
+    this.elements.or.classList.remove('disabled');
+    this.elements.and.classList.remove('disabled');
     
     // Resets materialize select dropdown
     let selectInstance = M.FormSelect.getInstance(this.elements.englishPos);
@@ -645,8 +661,11 @@ class ConcordanceQueryBuilder {
   germanPosHandler() {
     this.hideEverything();
     this.elements.germanPosBuilder.classList.remove('hide');
-    // this.elements.incidenceModifiersButton.classList.remove('hide');
+    this.elements.incidenceModifiersButton.classList.remove('hide');
     this.elements.conditionContainer.classList.remove('hide');
+    this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
+    this.elements.or.classList.remove('disabled');
+    this.elements.and.classList.remove('disabled');
 
     // Resets materialize select dropdown
     let selectInstance = M.FormSelect.getInstance(this.elements.germanPos);
@@ -657,14 +676,27 @@ class ConcordanceQueryBuilder {
   simplePosBuilder() {
   this.hideEverything();
   this.elements.simplePosBuilder.classList.remove('hide');
-  // this.elements.incidenceModifiersButton.classList.remove('hide');
+  this.elements.incidenceModifiersButton.classList.remove('hide');
   this.elements.conditionContainer.classList.remove('hide');
   this.elements.simplePos.selectedIndex = 0;
+  this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
+  this.elements.or.classList.remove('disabled');
+  this.elements.and.classList.remove('disabled');
   
   // Resets materialize select dropdown
   let selectInstance = M.FormSelect.getInstance(this.elements.simplePos);
   selectInstance.input.value = 'simple_pos tagset';
   this.elements.simplePos.value = 'default';
+  M.FormSelect.init(
+    selectInstance,
+    {
+      dropdownOptions: {
+        direction: 'bottom',
+        coverTrigger: false
+      }
+    }
+  )
+
   }
 
   emptyTokenHandler() {
@@ -672,6 +704,8 @@ class ConcordanceQueryBuilder {
     this.elements.tokenQueryFilled = true;
     this.hideEverything();
     this.elements.incidenceModifiersButton.classList.remove('hide');
+    this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
+
   }
   //#endregion Dropdown Select Handler
   
@@ -687,7 +721,7 @@ class ConcordanceQueryBuilder {
     }
 
     if (elem === this.elements.optionGroup) {
-      input.value  += '( option1 | option2 )';
+      input.value  += '(option1|option2)';
       let firstIndex = input.value.indexOf('option1');
       let lastIndex = firstIndex + 'option1'.length;
       input.focus();
@@ -695,6 +729,7 @@ class ConcordanceQueryBuilder {
     } else if (elem === this.elements.wildcardChar) {
       input.value  += '.';
     }
+    this.inputFieldHandler();
   }
 
   nSubmitHandler() {
@@ -808,8 +843,7 @@ class ConcordanceQueryBuilder {
       } else {
         input =  this.elements.lemmaInput;
       }
-
+      input.value += elem.dataset.token;
-      input.value += ' ' + elem.dataset.token;
     }
 
   }

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

@@ -439,6 +439,10 @@ Query your corpus with the CQP query language utilizing a KWIC view.
                     <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>