From 21d6072f6fffee51284f27c02dc405898da9aff6 Mon Sep 17 00:00:00 2001 From: Inga Kirschnick Date: Mon, 12 Jun 2023 11:53:51 +0200 Subject: [PATCH] Query Builder input fix --- app/static/js/CorpusAnalysis/QueryBuilder.js | 72 +++++++++++++------- 1 file changed, 46 insertions(+), 26 deletions(-) diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index a1130c65..6b6aa4c5 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -147,7 +147,8 @@ class ConcordanceQueryBuilder { this.elements.positionalAttr.addEventListener('change', () => {this.tokenTypeSelector();}); this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();}); - + this.elements.wordInput.addEventListener('input', () => {this.inputFieldHandler();}); + this.elements.lemmaInput.addEventListener('input', () => {this.inputFieldHandler();}); this.elements.ignoreCase.addEventListener('change', () => {this.inputOptionHandler(this.elements.ignoreCase);}); this.elements.wildcardChar.addEventListener('click', () => {this.inputOptionHandler(this.elements.wildcardChar);}); this.elements.optionGroup.addEventListener('click', () => {this.inputOptionHandler(this.elements.optionGroup);}); @@ -181,25 +182,11 @@ class ConcordanceQueryBuilder { showPositionalAttrArea() { this.elements.positionalAttrArea.classList.remove('hide'); - this.elements.wordBuilder.classList.remove('hide'); - this.elements.inputOptions.classList.remove('hide'); - this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove('hide'); - this.elements.ignoreCaseCheckbox.classList.remove('hide'); - this.elements.structuralAttrArea.classList.add('hide'); - this.elements.lemmaBuilder.classList.add('hide'); - this.elements.englishPosBuilder.classList.add('hide'); - this.elements.germanPosBuilder.classList.add('hide'); - this.elements.simplePosBuilder.classList.add('hide'); + this.wordBuilder(); this.elements.tokenQueryFilled = false; window.location.href = '#token-builder-content'; - - // Resets materialize select field to default value - let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr); - SelectInstance.input.value = 'word'; - this.elements.positionalAttr.value = 'word'; } showStructuralAttrArea() { @@ -266,11 +253,15 @@ class ConcordanceQueryBuilder { }); // Ensures that metadata is always at the end of the query: - if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') { + const lastChild = this.elements.yourQuery.lastChild; + const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation'; + + if (!isLastChildTextAnnotation) { this.elements.yourQuery.appendChild(queryChipElement); - } else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') { - this.elements.yourQuery.insertBefore(queryChipElement, this.elements.yourQuery.lastChild); + } else { + this.elements.yourQuery.insertBefore(queryChipElement, lastChild); } + this.elements.queryContainer.classList.remove('hide'); this.queryPreviewBuilder(); @@ -313,7 +304,7 @@ class ConcordanceQueryBuilder { insertQuery() { this.elements.yourQueryContent = []; this.validateValue(); - if (this.elements.valueValidator === true) { + if (this.elements.valueValidator) { for (let element of this.elements.yourQuery.childNodes) { let queryElement = decodeURI(element.dataset.query); if (queryElement !== 'undefined') { @@ -493,7 +484,6 @@ class ConcordanceQueryBuilder { c = ''; } - for (let element of this.elements.tokenQuery.childNodes) { tokenQueryContent += ' ' + element.firstChild.data + ' '; tokenQueryText += decodeURI(element.dataset.tokentext); @@ -581,6 +571,26 @@ class ConcordanceQueryBuilder { }, 3000); } + inputFieldHandler() { + let input; + + if (this.elements.wordBuilder.classList.contains('hide') === false) { + input = this.elements.wordInput; + } else { + input = this.elements.lemmaInput; + } + + if (input.value === '') { + this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); + this.elements.or.classList.add('disabled'); + this.elements.and.classList.add('disabled'); + } else { + this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled'); + this.elements.or.classList.remove('disabled'); + this.elements.and.classList.remove('disabled'); + } + } + //#endregion General functions of the Token Builder //#region Dropdown Select Handler @@ -592,7 +602,11 @@ class ConcordanceQueryBuilder { this.elements.incidenceModifiersButton.classList.remove('hide'); this.elements.conditionContainer.classList.remove('hide'); this.elements.ignoreCaseCheckbox.classList.remove('hide'); - + + this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); + this.elements.or.classList.add('disabled'); + this.elements.and.classList.add('disabled'); + // Resets materialize select field to default value let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr); SelectInstance.input.value = 'word'; @@ -602,17 +616,23 @@ class ConcordanceQueryBuilder { lemmaBuilder() { this.hideEverything(); + this.elements.lemmaInput.value = ''; this.elements.lemmaBuilder.classList.remove('hide'); this.elements.inputOptions.classList.remove('hide'); this.elements.incidenceModifiersButton.classList.remove('hide'); + this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); this.elements.conditionContainer.classList.remove('hide'); this.elements.ignoreCaseCheckbox.classList.remove('hide'); + + this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled'); + this.elements.or.classList.add('disabled'); + this.elements.and.classList.add('disabled'); } 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'); // Resets materialize select dropdown @@ -624,7 +644,7 @@ 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'); // Resets materialize select dropdown @@ -636,7 +656,7 @@ 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; @@ -662,7 +682,7 @@ class ConcordanceQueryBuilder { if (this.elements.wordBuilder.classList.contains('hide') === false) { input = this.elements.wordInput; } else { - input = this.elements.lemmaInput; + input = this.elements.lemmaInput; } if (elem === this.elements.optionGroup) {