diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index e221e19b..42dc9968 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -8,31 +8,31 @@ class ConcordanceQueryBuilder { counter: 0, yourQueryContent: [], queryContent:[], - concordanceQueryBuilder: document.querySelector("#concordance-query-builder"), - concordanceQueryBuilderButton: document.querySelector("#concordance-query-builder-button"), - closeQueryBuilder: document.querySelector("#close-query-builder"), + concordanceQueryBuilder: document.querySelector('#concordance-query-builder'), + concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'), + closeQueryBuilder: document.querySelector('#close-query-builder'), queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'), //#region QueryBuilder Elements positionalAttrButton: document.querySelector('#positional-attr-button'), positionalAttrArea: document.querySelector('#positional-attr'), - positionalAttr: document.querySelector("#token-attr"), + positionalAttr: document.querySelector('#token-attr'), structuralAttrButton: document.querySelector('#structural-attr-button'), - structuralAttrArea: document.querySelector("#structural-attr"), + structuralAttrArea: document.querySelector('#structural-attr'), queryContainer: document.querySelector('#query-container'), - buttonPreparer: document.querySelector("#button-preparer"), - yourQuery: document.querySelector("#your-query"), - insertQueryButton: document.querySelector("#insert-query-button"), + buttonPreparer: document.querySelector('#button-preparer'), + yourQuery: document.querySelector('#your-query'), + insertQueryButton: document.querySelector('#insert-query-button'), queryPreview: document.querySelector('#query-preview'), - tokenQuery: document.querySelector("#token-query"), - tokenBuilderContent: document.querySelector("#token-builder-content"), - tokenSubmitButton: document.querySelector("#token-submit"), + tokenQuery: document.querySelector('#token-query'), + tokenBuilderContent: document.querySelector('#token-builder-content'), + tokenSubmitButton: document.querySelector('#token-submit'), extFormQuery: document.querySelector('#concordance-extension-form-query'), - dropButton: "", + dropButton: '', queryBuilderTutorialInfoIcon: document.querySelector('#query-builder-tutorial-info-icon'), - tokenTutorialInfoIcon: document.querySelector("#token-tutorial-info-icon"), + tokenTutorialInfoIcon: document.querySelector('#token-tutorial-info-icon'), editTokenTutorialInfoIcon: document.querySelector('#edit-options-tutorial-info-icon'), structuralAttributeTutorialInfoIcon: document.querySelector('#add-structural-attribute-tutorial-info-icon'), generalOptionsQueryBuilderTutorialInfoIcon: document.querySelector('#general-options-query-builder-tutorial-info-icon'), @@ -42,73 +42,73 @@ class ConcordanceQueryBuilder { //#region Strucutral Attributes - sentence:document.querySelector("#sentence"), - entity: document.querySelector("#entity"), - textAnnotation: document.querySelector("#text-annotation"), + sentence:document.querySelector('#sentence'), + entity: document.querySelector('#entity'), + textAnnotation: document.querySelector('#text-annotation'), - entityBuilder: document.querySelector("#entity-builder"), - englishEntType: document.querySelector("#english-ent-type"), - germanEntType: document.querySelector("#german-ent-type"), - emptyEntity: document.querySelector("#empty-entity"), + entityBuilder: document.querySelector('#entity-builder'), + englishEntType: document.querySelector('#english-ent-type'), + germanEntType: document.querySelector('#german-ent-type'), + emptyEntity: document.querySelector('#empty-entity'), entityAnyType: false, - textAnnotationBuilder: document.querySelector("#text-annotation-builder"), - textAnnotationOptions: document.querySelector("#text-annotation-options"), - textAnnotationInput: document.querySelector("#text-annotation-input"), - textAnnotationSubmit: document.querySelector("#text-annotation-submit"), + textAnnotationBuilder: document.querySelector('#text-annotation-builder'), + textAnnotationOptions: document.querySelector('#text-annotation-options'), + textAnnotationInput: document.querySelector('#text-annotation-input'), + textAnnotationSubmit: document.querySelector('#text-annotation-submit'), noValueMetadataMessage: document.querySelector('#no-value-metadata-message'), //#endregion Structural Attributes //#region Token Attributes tokenQueryFilled: false, - lemma: document.querySelector("#lemma"), - emptyToken: document.querySelector("#empty-token"), - word: document.querySelector("#word"), - lemma: document.querySelector("#lemma"), - pos: document.querySelector("#pos"), - simplePosButton: document.querySelector("#simple-pos-button"), - incidenceModifiers: document.querySelector("[data-target='incidence-modifiers']"), - or: document.querySelector("#or"), - and: document.querySelector("#and"), + lemma: document.querySelector('#lemma'), + emptyToken: document.querySelector('#empty-token'), + word: document.querySelector('#word'), + lemma: document.querySelector('#lemma'), + pos: document.querySelector('#pos'), + simplePosButton: document.querySelector('#simple-pos-button'), + incidenceModifiers: document.querySelector('[data-target="incidence-modifiers"]'), + or: document.querySelector('#or'), + and: document.querySelector('#and'), //#region Word and Lemma Elements - wordBuilder: document.querySelector("#word-builder"), - lemmaBuilder: document.querySelector("#lemma-builder"), - inputOptions: document.querySelector("#input-options"), - incidenceModifiersButton: document.querySelector("#incidence-modifiers-button"), + wordBuilder: document.querySelector('#word-builder'), + lemmaBuilder: document.querySelector('#lemma-builder'), + inputOptions: document.querySelector('#input-options'), + incidenceModifiersButton: document.querySelector('#incidence-modifiers-button'), conditionContainer: document.querySelector('#condition-container'), - wordInput: document.querySelector("#word-input"), - lemmaInput: document.querySelector("#lemma-input"), - ignoreCaseCheckbox : document.querySelector("#ignore-case-checkbox"), - ignoreCase: document.querySelector("input[type='checkbox']"), - wildcardChar: document.querySelector("#wildcard-char"), - optionGroup: document.querySelector("#option-group"), + wordInput: document.querySelector('#word-input'), + lemmaInput: document.querySelector('#lemma-input'), + ignoreCaseCheckbox : document.querySelector('#ignore-case-checkbox'), + ignoreCase: document.querySelector('input[type="checkbox"]'), + wildcardChar: document.querySelector('#wildcard-char'), + optionGroup: document.querySelector('#option-group'), //#endregion Word and Lemma Elements //#region posBuilder Elements - englishPosBuilder: document.querySelector("#english-pos-builder"), - englishPos: document.querySelector("#english-pos"), - germanPosBuilder: document.querySelector("#german-pos-builder"), - germanPos: document.querySelector("#german-pos"), + englishPosBuilder: document.querySelector('#english-pos-builder'), + englishPos: document.querySelector('#english-pos'), + germanPosBuilder: document.querySelector('#german-pos-builder'), + germanPos: document.querySelector('#german-pos'), //#endregion posBuilder Elements //#region simple_posBuilder Elements - simplePosBuilder: document.querySelector("#simplepos-builder"), - simplePos: document.querySelector("#simple-pos"), + simplePosBuilder: document.querySelector('#simplepos-builder'), + simplePos: document.querySelector('#simple-pos'), //#endregion simple_posBuilder Elements //#region incidence modifiers - oneOrMore: document.querySelector("#one-or-more"), - zeroOrMore: document.querySelector("#zero-or-more"), - zeroOrOne: document.querySelector("#zero-or-one"), - exactlyN: document.querySelector("#exactlyN"), - betweenNM: document.querySelector("#betweenNM"), - nInput: document.querySelector("#n-input"), - nSubmit: document.querySelector("#n-submit"), - nmInput: document.querySelector("#n-m-input"), - mInput: document.querySelector("#m-input"), - nmSubmit: document.querySelector("#n-m-submit"), + oneOrMore: document.querySelector('#one-or-more'), + zeroOrMore: document.querySelector('#zero-or-more'), + zeroOrOne: document.querySelector('#zero-or-one'), + exactlyN: document.querySelector('#exactlyN'), + betweenNM: document.querySelector('#betweenNM'), + nInput: document.querySelector('#n-input'), + nSubmit: document.querySelector('#n-submit'), + nmInput: document.querySelector('#n-m-input'), + mInput: document.querySelector('#m-input'), + nmSubmit: document.querySelector('#n-m-submit'), //#endregion incidence modifiers cancelBool: false, @@ -116,48 +116,48 @@ class ConcordanceQueryBuilder { //#endregion Token Attributes } - this.elements.closeQueryBuilder.addEventListener("click", () => {this.closeQueryBuilderModal(this.elements.concordanceQueryBuilder);}); - this.elements.concordanceQueryBuilderButton.addEventListener("click", () => {this.clearAll();}); - this.elements.insertQueryButton.addEventListener("click", () => {this.insertQuery();}); - this.elements.positionalAttrButton.addEventListener("click", () => {this.showPositionalAttrArea();}); - this.elements.structuralAttrButton.addEventListener("click", () => {this.showStructuralAttrArea();}); + this.elements.closeQueryBuilder.addEventListener('click', () => {this.closeQueryBuilderModal(this.elements.concordanceQueryBuilder);}); + this.elements.concordanceQueryBuilderButton.addEventListener('click', () => {this.clearAll();}); + this.elements.insertQueryButton.addEventListener('click', () => {this.insertQuery();}); + this.elements.positionalAttrButton.addEventListener('click', () => {this.showPositionalAttrArea();}); + this.elements.structuralAttrButton.addEventListener('click', () => {this.showStructuralAttrArea();}); //#region Structural Attribute Event Listeners - this.elements.sentence.addEventListener("click", () => {this.addSentence();}); - this.elements.entity.addEventListener("click", () => {this.addEntity();}); - this.elements.textAnnotation.addEventListener("click", () => {this.addTextAnnotation();}); + this.elements.sentence.addEventListener('click', () => {this.addSentence();}); + this.elements.entity.addEventListener('click', () => {this.addEntity();}); + this.elements.textAnnotation.addEventListener('click', () => {this.addTextAnnotation();}); - this.elements.englishEntType.addEventListener("change", () => {this.englishEntTypeHandler();}); - this.elements.germanEntType.addEventListener("change", () => {this.germanEntTypeHandler();}); - this.elements.emptyEntity.addEventListener("click", () => {this.emptyEntityButton();}); + this.elements.englishEntType.addEventListener('change', () => {this.englishEntTypeHandler();}); + this.elements.germanEntType.addEventListener('change', () => {this.germanEntTypeHandler();}); + this.elements.emptyEntity.addEventListener('click', () => {this.emptyEntityButton();}); - this.elements.textAnnotationSubmit.addEventListener("click", () => {this.textAnnotationSubmitHandler();}); + this.elements.textAnnotationSubmit.addEventListener('click', () => {this.textAnnotationSubmitHandler();}); //#endregion //#region Token Attribute Event Listeners - this.elements.queryBuilderTutorialInfoIcon.addEventListener("click", () => {this.tutorialIconHandler('#query-builder-tutorial-start');}); - this.elements.tokenTutorialInfoIcon.addEventListener("click", () => {this.tutorialIconHandler('#add-new-token-tutorial');}); - this.elements.editTokenTutorialInfoIcon.addEventListener("click", () => {this.tutorialIconHandler('#edit-options-tutorial');}); - this.elements.structuralAttributeTutorialInfoIcon.addEventListener("click", () => {this.tutorialIconHandler('#add-structural-attribute-tutorial');}); - this.elements.generalOptionsQueryBuilderTutorialInfoIcon.addEventListener("click", () => {this.tutorialIconHandler('#general-options-query-builder');}); + this.elements.queryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#query-builder-tutorial-start');}); + this.elements.tokenTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#add-new-token-tutorial');}); + this.elements.editTokenTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#edit-options-tutorial');}); + this.elements.structuralAttributeTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#add-structural-attribute-tutorial');}); + this.elements.generalOptionsQueryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#general-options-query-builder');}); - this.elements.positionalAttr.addEventListener("change", () => {this.tokenTypeSelector();}); - this.elements.tokenSubmitButton.addEventListener("click", () => {this.addToken();}); + this.elements.positionalAttr.addEventListener('change', () => {this.tokenTypeSelector();}); + this.elements.tokenSubmitButton.addEventListener('click', () => {this.addToken();}); - 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);}); + 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);}); - this.elements.oneOrMore.addEventListener("click", () => {this.incidenceModifiersHandler(this.elements.oneOrMore);}); - this.elements.zeroOrMore.addEventListener("click", () => {this.incidenceModifiersHandler(this.elements.zeroOrMore);}); - this.elements.zeroOrOne.addEventListener("click", () => {this.incidenceModifiersHandler(this.elements.zeroOrOne);}); - this.elements.nSubmit.addEventListener("click", () => {this.nSubmitHandler();}); - this.elements.nmSubmit.addEventListener("click", () => {this.nmSubmitHandler();}); + this.elements.oneOrMore.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.oneOrMore);}); + this.elements.zeroOrMore.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.zeroOrMore);}); + this.elements.zeroOrOne.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.zeroOrOne);}); + this.elements.nSubmit.addEventListener('click', () => {this.nSubmitHandler();}); + this.elements.nmSubmit.addEventListener('click', () => {this.nmSubmitHandler();}); - this.elements.or.addEventListener("click", () => {this.orHandler();}); - this.elements.and.addEventListener("click", () => {this.andHandler();}); + this.elements.or.addEventListener('click', () => {this.orHandler();}); + this.elements.and.addEventListener('click', () => {this.andHandler();}); //#endregion Token Attribute Event Listeners @@ -179,11 +179,11 @@ class ConcordanceQueryBuilder { showPositionalAttrArea() { this.elements.positionalAttrArea.classList.remove('hide'); - this.elements.wordBuilder.classList.remove("hide"); - this.elements.inputOptions.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.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'); @@ -192,12 +192,12 @@ class ConcordanceQueryBuilder { this.elements.tokenQueryFilled = false; - window.location.href = "#token-builder-content"; + 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"; + SelectInstance.input.value = 'word'; + this.elements.positionalAttr.value = 'word'; } showStructuralAttrArea() { @@ -207,7 +207,7 @@ class ConcordanceQueryBuilder { buttonfactory(dataType, prettyText, queryText) { - window.location.href = "#query-container"; + window.location.href = '#query-container'; this.elements.counter += 1; queryText = encodeURI(queryText); let chipColor = 'style="background-color:#'; @@ -215,45 +215,45 @@ class ConcordanceQueryBuilder { // Sets chip color, depending on the type of element if (dataType === 'start-sentence' || dataType === 'end-sentence') { chipColor += 'FD9720'; - } else if (dataType === "start-empty-entity" || dataType === "start-entity" || dataType === "end-entity") { + } else if (dataType === 'start-empty-entity' || dataType === 'start-entity' || dataType === 'end-entity') { chipColor += 'A6E22D'; - } else if (dataType === "text-annotation") { + } else if (dataType === 'text-annotation') { chipColor += '2FBBAB'; - } else if (dataType === "token") { + } else if (dataType === 'token') { chipColor += '28B3D1'; } else { chipColor = ''; } - // Creates a chip with the previously selected element. Is first created in the "BuilderElement" and populated with an EventListener, then moved to "yourQuery". + // Creates a chip with the previously selected element. Is first created in the 'BuilderElement' and populated with an EventListener, then moved to 'yourQuery'. let builderElement = document.createElement('div'); builderElement.innerHTML +=` -
+
${prettyText} - close + close
`.trim(); let buttonElement = builderElement.firstElementChild; - buttonElement.addEventListener("click", () => {this.deleteAttr(buttonElement);}); + buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);}); // 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") { + if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') { this.elements.yourQuery.appendChild(buttonElement); - } else if (this.elements.yourQuery.lastChild.dataset.type === "text-annotation") { + } else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') { this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild); } - this.elements.queryContainer.classList.remove("hide"); + this.elements.queryContainer.classList.remove('hide'); this.queryPreviewBuilder(); // Opens a hint about the possible functions for editing the query when the first chip is added. It is displayed for 5 seconds and then deleted. - if (this.elements.yourQuery.classList.contains("tooltipped")) { + if (this.elements.yourQuery.classList.contains('tooltipped')) { let tooltipInstance = M.Tooltip.getInstance(this.elements.yourQuery); - tooltipInstance.tooltipEl.style.background = "#98ACD2"; - tooltipInstance.tooltipEl.style.borderTop = "solid 4px #0064A3" - tooltipInstance.tooltipEl.style.padding = "10px"; - tooltipInstance.tooltipEl.style.color = "black"; + tooltipInstance.tooltipEl.style.background = '#98ACD2'; + tooltipInstance.tooltipEl.style.borderTop = 'solid 4px #0064A3' + tooltipInstance.tooltipEl.style.padding = '10px'; + tooltipInstance.tooltipEl.style.color = 'black'; if (tooltipInstance !== undefined) { setTimeout(() => { @@ -263,7 +263,7 @@ class ConcordanceQueryBuilder { }, 5000); }, 500); } - this.elements.yourQuery.classList.remove("tooltipped"); + this.elements.yourQuery.classList.remove('tooltipped'); } } @@ -271,11 +271,11 @@ class ConcordanceQueryBuilder { dragStartHandler(event) { this.elements.dropButton = event.target; let targetChip = ` -
+
Drop here
`.trim(); - let childNodes = this.elements.yourQuery.querySelectorAll("div:not(.target)"); + let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)'); setTimeout(() => { for (let element of childNodes) { @@ -284,10 +284,10 @@ class ConcordanceQueryBuilder { } else if (element === event.target.nextSibling) { continue; } else { - element.insertAdjacentHTML("beforebegin", targetChip) + element.insertAdjacentHTML('beforebegin', targetChip) } } - childNodes[childNodes.length-1].insertAdjacentHTML("afterend", targetChip); + childNodes[childNodes.length-1].insertAdjacentHTML('afterend', targetChip); },0); } @@ -297,12 +297,12 @@ class ConcordanceQueryBuilder { dragEnterHandler(event) { event.preventDefault(); - event.target.style.borderStyle = "solid dotted"; + event.target.style.borderStyle = 'solid dotted'; } dragLeaveHandler(event) { event.preventDefault(); - event.target.style.borderStyle = "hidden"; + event.target.style.borderStyle = 'hidden'; } dragEndHandler(event) { @@ -336,19 +336,19 @@ class ConcordanceQueryBuilder { for (let element of this.elements.yourQuery.childNodes) { let queryElement = decodeURI(element.dataset.query); - if (queryElement.includes("<")) { - queryElement = queryElement.replace("<", "<"); + if (queryElement.includes('<')) { + queryElement = queryElement.replace('<', '<'); } - if (queryElement.includes(">")) { - queryElement = queryElement.replace(">", ">"); + if (queryElement.includes('>')) { + queryElement = queryElement.replace('>', '>'); } - if (queryElement !== "undefined") { + if (queryElement !== 'undefined') { this.elements.yourQueryContent.push(queryElement); } } let queryString = this.elements.yourQueryContent.join(' '); - queryString += ";"; + queryString += ';'; this.elements.queryPreview.innerHTML = queryString; } @@ -358,7 +358,7 @@ class ConcordanceQueryBuilder { this.elements.counter -= 1; if (this.elements.counter === 0) { - this.elements.queryContainer.classList.add("hide"); + this.elements.queryContainer.classList.add('hide'); } this.queryPreviewBuilder(); @@ -369,20 +369,20 @@ class ConcordanceQueryBuilder { for (let element of this.elements.yourQuery.childNodes) { let queryElement = decodeURI(element.dataset.query); - if (queryElement !== "undefined") { + if (queryElement !== 'undefined') { this.elements.yourQueryContent.push(queryElement); } } let queryString = this.elements.yourQueryContent.join(' '); - queryString += ";"; + queryString += ';'; this.elements.concordanceQueryBuilder.classList.add('modal-close'); this.elements.extFormQuery.value = queryString; } clearAll() { - // Everything is reset. After 5 seconds for 5 seconds (with "instance"), a message is displayed indicating that further information can be obtained via the question mark icon + // Everything is reset. After 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon let instance = M.Tooltip.getInstance(this.elements.queryBuilderTutorialInfoIcon); this.hideEverything(); @@ -429,22 +429,22 @@ class ConcordanceQueryBuilder { tokenTypeSelector() { this.hideEverything(); switch (this.elements.positionalAttr.value) { - case "word": + case 'word': this.wordBuilder(); break; - case "lemma": + case 'lemma': this.lemmaBuilder(); break; - case "english-pos": + case 'english-pos': this.englishPosHandler(); break; - case "german-pos": + case 'german-pos': this.germanPosHandler(); break; - case "simple-pos-button": + case 'simple-pos-button': this.simplePosBuilder(); break; - case "empty-token": + case 'empty-token': this.emptyTokenHandler(); break; default: @@ -455,17 +455,17 @@ class ConcordanceQueryBuilder { hideEverything() { - this.elements.wordBuilder.classList.add("hide"); - this.elements.lemmaBuilder.classList.add("hide"); - this.elements.ignoreCaseCheckbox.classList.add("hide"); - this.elements.inputOptions.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); - this.elements.conditionContainer.classList.add("hide"); - this.elements.englishPosBuilder.classList.add("hide"); - this.elements.germanPosBuilder.classList.add("hide"); - this.elements.simplePosBuilder.classList.add("hide"); - this.elements.entityBuilder.classList.add("hide"); - this.elements.textAnnotationBuilder.classList.add("hide"); + this.elements.wordBuilder.classList.add('hide'); + this.elements.lemmaBuilder.classList.add('hide'); + this.elements.ignoreCaseCheckbox.classList.add('hide'); + this.elements.inputOptions.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); + this.elements.conditionContainer.classList.add('hide'); + this.elements.englishPosBuilder.classList.add('hide'); + this.elements.germanPosBuilder.classList.add('hide'); + this.elements.simplePosBuilder.classList.add('hide'); + this.elements.entityBuilder.classList.add('hide'); + this.elements.textAnnotationBuilder.classList.add('hide'); } @@ -475,12 +475,12 @@ class ConcordanceQueryBuilder { let buttonElement; builderElement = document.createElement('div'); builderElement.innerHTML = ` -
+
${prettyText} - close + close
`; buttonElement = builderElement.firstElementChild; - buttonElement.addEventListener("click", () => {this.deleteTokenAttr(buttonElement);}); + buttonElement.addEventListener('click', () => {this.deleteTokenAttr(buttonElement);}); this.elements.tokenQuery.appendChild(buttonElement); } @@ -496,8 +496,8 @@ class ConcordanceQueryBuilder { addToken() { let c; - let tokenQueryContent = ""; //for ButtonFactory(prettyText) - let tokenQueryText = ""; //for ButtonFactory(queryText) + let tokenQueryContent = ''; //for ButtonFactory(prettyText) + let tokenQueryText = ''; //for ButtonFactory(queryText) this.elements.cancelBool = false; let emptyTokenCheck = false; @@ -511,55 +511,55 @@ class ConcordanceQueryBuilder { for (let element of this.elements.tokenQuery.childNodes) { tokenQueryContent += ' ' + element.firstChild.data + ' '; tokenQueryText += decodeURI(element.dataset.tokentext); - if (element.innerText.indexOf("empty token") !== -1) { + if (element.innerText.indexOf('empty token') !== -1) { emptyTokenCheck = true; } } if (this.elements.tokenQueryFilled === false) { switch (this.elements.positionalAttr.value) { - case "word": - if (this.elements.wordInput.value === "") { + case 'word': + if (this.elements.wordInput.value === '') { this.disableTokenSubmit(); } else { tokenQueryContent += `word=${this.elements.wordInput.value}${c}`; - tokenQueryText += `word="${this.elements.wordInput.value}"${c}`; + tokenQueryText += `word='${this.elements.wordInput.value}'${c}`; this.elements.wordInput.value = ''; } break; - case "lemma": - if (this.elements.lemmaInput.value === "") { + case 'lemma': + if (this.elements.lemmaInput.value === '') { this.disableTokenSubmit(); } else { tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`; - tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`; + tokenQueryText += `lemma='${this.elements.lemmaInput.value}'${c}`; this.elements.lemmaInput.value = ''; } break; - case "english-pos": - if (this.elements.englishPos.value === "default") { + case 'english-pos': + if (this.elements.englishPos.value === 'default') { this.disableTokenSubmit(); } else { tokenQueryContent += `pos=${this.elements.englishPos.value}`; - tokenQueryText += `pos="${this.elements.englishPos.value}"`; + tokenQueryText += `pos='${this.elements.englishPos.value}'`; this.elements.englishPos.value = ''; } break; - case "german-pos": - if (this.elements.germanPos.value === "default") { + case 'german-pos': + if (this.elements.germanPos.value === 'default') { this.disableTokenSubmit(); } else { tokenQueryContent += `pos=${this.elements.germanPos.value}`; - tokenQueryText += `pos="${this.elements.germanPos.value}"`; + tokenQueryText += `pos='${this.elements.germanPos.value}'`; this.elements.germanPos.value = ''; } break; - case "simple-pos-button": - if (this.elements.simplePos.value === "default") { + case 'simple-pos-button': + if (this.elements.simplePos.value === 'default') { this.disableTokenSubmit(); } else { tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`; - tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`; + tokenQueryText += `simple_pos='${this.elements.simplePos.value}'`; this.elements.simplePos.value = ''; } break; @@ -578,17 +578,17 @@ class ConcordanceQueryBuilder { this.buttonfactory('token', tokenQueryContent, tokenQueryText); this.hideEverything(); this.elements.positionalAttrArea.classList.add('hide'); - this.elements.tokenQuery.innerHTML = ""; + this.elements.tokenQuery.innerHTML = ''; } } disableTokenSubmit() { this.elements.cancelBool = true; - this.elements.tokenSubmitButton.classList.add("red"); + this.elements.tokenSubmitButton.classList.add('red'); this.elements.noValueMessage.classList.remove('hide'); setTimeout(() => { - this.elements.tokenSubmitButton.classList.remove("red"); + this.elements.tokenSubmitButton.classList.remove('red'); }, 500); setTimeout(() => { this.elements.noValueMessage.classList.add('hide'); @@ -600,75 +600,75 @@ class ConcordanceQueryBuilder { //#region Dropdown Select Handler wordBuilder() { this.hideEverything(); - this.elements.wordInput.value = ""; - this.elements.wordBuilder.classList.remove("hide"); - this.elements.inputOptions.classList.remove("hide"); + this.elements.wordInput.value = ''; + 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.conditionContainer.classList.remove('hide'); + this.elements.ignoreCaseCheckbox.classList.remove('hide'); // Resets materialize select field to default value let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr); - SelectInstance.input.value = "word"; - this.elements.positionalAttr.value = "word"; + SelectInstance.input.value = 'word'; + this.elements.positionalAttr.value = 'word'; } lemmaBuilder() { this.hideEverything(); - this.elements.lemmaBuilder.classList.remove("hide"); - this.elements.inputOptions.classList.remove("hide"); + this.elements.lemmaBuilder.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.conditionContainer.classList.remove('hide'); + this.elements.ignoreCaseCheckbox.classList.remove('hide'); } englishPosHandler() { this.hideEverything(); - this.elements.englishPosBuilder.classList.remove("hide"); + this.elements.englishPosBuilder.classList.remove('hide'); this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove("hide"); + this.elements.conditionContainer.classList.remove('hide'); // Resets materialize select dropdown let selectInstance = M.FormSelect.getInstance(this.elements.englishPos); - selectInstance.input.value = "English pos tagset"; - this.elements.englishPos.value = "default"; + selectInstance.input.value = 'English pos tagset'; + this.elements.englishPos.value = 'default'; } germanPosHandler() { this.hideEverything(); - this.elements.germanPosBuilder.classList.remove("hide"); + this.elements.germanPosBuilder.classList.remove('hide'); this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove("hide"); + this.elements.conditionContainer.classList.remove('hide'); // Resets materialize select dropdown let selectInstance = M.FormSelect.getInstance(this.elements.germanPos); - selectInstance.input.value = "German pos tagset"; - this.elements.germanPos.value = "default"; + selectInstance.input.value = 'German pos tagset'; + this.elements.germanPos.value = 'default'; } simplePosBuilder() { this.hideEverything(); - this.elements.simplePosBuilder.classList.remove("hide"); + this.elements.simplePosBuilder.classList.remove('hide'); this.elements.incidenceModifiersButton.classList.remove('hide'); - this.elements.conditionContainer.classList.remove("hide"); + this.elements.conditionContainer.classList.remove('hide'); this.elements.simplePos.selectedIndex = 0; // Resets materialize select dropdown let selectInstance = M.FormSelect.getInstance(this.elements.simplePos); - selectInstance.input.value = "simple_pos tagset"; - this.elements.simplePos.value = "default"; + selectInstance.input.value = 'simple_pos tagset'; + this.elements.simplePos.value = 'default'; } emptyTokenHandler() { - this.tokenButtonfactory("empty token", "[]"); + this.tokenButtonfactory('empty token', '[]'); this.elements.tokenQueryFilled = true; this.hideEverything(); this.elements.incidenceModifiersButton.classList.remove('hide'); } //#endregion Dropdown Select Handler - //#region Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, "and", "or" + //#region Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or' inputOptionHandler(elem) { let input; @@ -695,35 +695,35 @@ class ConcordanceQueryBuilder { instance.close(); switch (this.elements.positionalAttr.value) { - case "word": - this.elements.wordInput.value += " {" + this.elements.nInput.value + "}"; + case 'word': + this.elements.wordInput.value += ' {' + this.elements.nInput.value + '}'; break; - case "lemma": - this.elements.lemmaInput.value += " {" + this.elements.nInput.value + "}"; + case 'lemma': + this.elements.lemmaInput.value += ' {' + this.elements.nInput.value + '}'; break; - case "english-pos": + case 'english-pos': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); - this.tokenButtonfactory("{" + this.elements.nInput.value + "}", "{" + this.elements.nInput.value + "}"); - this.elements.englishPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`); + this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); + this.elements.englishPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "german-pos": + case 'german-pos': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); - this.tokenButtonfactory("{" + this.elements.nInput.value + "}", "{" + this.elements.nInput.value + "}"); - this.elements.germanPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`); + this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); + this.elements.germanPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "simple-pos-button": + case 'simple-pos-button': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); - this.tokenButtonfactory("{" + this.elements.nInput.value + "}", "{" + this.elements.nInput.value + "}"); - this.elements.simplePosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`); + this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); + this.elements.simplePosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "empty-token": - this.tokenButtonfactory("{" + this.elements.nInput.value + "}", "{" + this.elements.nInput.value + "}"); + case 'empty-token': + this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}'); break; default: break; @@ -736,34 +736,34 @@ class ConcordanceQueryBuilder { instance.close(); switch (this.elements.positionalAttr.value) { - case "word": + case 'word': this.elements.wordInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`; break; - case "lemma": + case 'lemma': this.elements.lemmaInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`; break; - case "english-pos": + case 'english-pos': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); + this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`); this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.englishPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.englishPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "german-pos": + case 'german-pos': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); + this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`); this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.germanPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.germanPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "simple-pos-button": + case 'simple-pos-button': this.elements.tokenQueryFilled = true; - this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); + this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`); this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); - this.elements.simplePosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.simplePosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); break; - case "empty-token": + case 'empty-token': this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`); break; default: @@ -773,25 +773,25 @@ class ConcordanceQueryBuilder { incidenceModifiersHandler(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. - if (this.elements.positionalAttr.value === "empty-token") { + if (this.elements.positionalAttr.value === 'empty-token') { this.tokenButtonfactory(elem.innerText, elem.dataset.token); - } else if (this.elements.positionalAttr.value === "english-pos") { - this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`); + } else if (this.elements.positionalAttr.value === 'english-pos') { + this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`); this.tokenButtonfactory(elem.innerText, elem.dataset.token); - this.elements.englishPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.englishPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.tokenQueryFilled = true; - } else if (this.elements.positionalAttr.value === "german-pos") { - this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`); + } else if (this.elements.positionalAttr.value === 'german-pos') { + this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`); this.tokenButtonfactory(elem.innerText, elem.dataset.token); - this.elements.germanPosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.germanPosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.tokenQueryFilled = true; - } else if (this.elements.positionalAttr.value === "simple-pos-button") { - this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`); + } else if (this.elements.positionalAttr.value === 'simple-pos-button') { + this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`); this.tokenButtonfactory(elem.innerText, elem.dataset.token); - this.elements.simplePosBuilder.classList.add("hide"); - this.elements.incidenceModifiersButton.classList.add("hide"); + this.elements.simplePosBuilder.classList.add('hide'); + this.elements.incidenceModifiersButton.classList.add('hide'); this.elements.tokenQueryFilled = true; } else { let input; @@ -808,11 +808,11 @@ class ConcordanceQueryBuilder { } orHandler() { - this.conditionHandler("or", " | "); + this.conditionHandler('or', ' | '); } andHandler() { - this.conditionHandler("and", " & "); + this.conditionHandler('and', ' & '); } conditionHandler(conditionText, conditionQueryContent) { @@ -828,29 +828,29 @@ class ConcordanceQueryBuilder { } switch (this.elements.positionalAttr.value) { - case "word": + case 'word': tokenQueryContent = `word=${this.elements.wordInput.value}${c}`; - tokenQueryText = `word="${this.elements.wordInput.value}"${c}`; + tokenQueryText = `word='${this.elements.wordInput.value}'${c}`; this.elements.wordInput.value = ''; break; - case "lemma": + case 'lemma': tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`; - tokenQueryText = `word="${this.elements.lemmaInput.value}"${c}`; + tokenQueryText = `word='${this.elements.lemmaInput.value}'${c}`; this.elements.lemmaInput.value = ''; break; - case "english-pos": + case 'english-pos': tokenQueryContent = `pos=${this.elements.englishPos.value}`; - tokenQueryText = `pos="${this.elements.englishPos.value}"`; + tokenQueryText = `pos='${this.elements.englishPos.value}'`; this.elements.englishPos.value = ''; break; - case "german-pos": + case 'german-pos': tokenQueryContent = `pos=${this.elements.germanPos.value}`; - tokenQueryText = `pos="${this.elements.germanPos.value}"`; + tokenQueryText = `pos='${this.elements.germanPos.value}'`; this.elements.germanPos.value = ''; break; - case "simple-pos-button": + case 'simple-pos-button': tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`; - tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`; + tokenQueryText = `simple_pos='${this.elements.simplePos.value}'`; this.elements.simplePos.value = ''; break; default: @@ -863,7 +863,7 @@ class ConcordanceQueryBuilder { this.wordBuilder(); } - //#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, "and", "or" + //#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or' //#endregion Token Attribute Builder Functions @@ -899,33 +899,33 @@ class ConcordanceQueryBuilder { this.elements.entity.innerHTML = 'Entity'; } else { this.hideEverything(); - this.elements.entityBuilder.classList.remove("hide"); - window.location.href = "#entity-builder"; + this.elements.entityBuilder.classList.remove('hide'); + window.location.href = '#entity-builder'; } } englishEntTypeHandler() { - this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, ''); + this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, ''); this.elements.entity.innerHTML = 'End Entity'; this.hideEverything(); this.elements.entityAnyType = false; // Resets materialize select dropdown let SelectInstance = M.FormSelect.getInstance(this.elements.englishEntType); - SelectInstance.input.value = "English ent_type"; - this.elements.englishEntType.value = "default"; + SelectInstance.input.value = 'English ent_type'; + this.elements.englishEntType.value = 'default'; } germanEntTypeHandler() { - this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, ''); + this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, ''); this.elements.entity.innerHTML = 'End Entity'; this.hideEverything(); this.elements.entityAnyType = false; // Resets materialize select dropdown let SelectInstance = M.FormSelect.getInstance(this.elements.germanEntType); - SelectInstance.input.value = "German ent_type"; - this.elements.germanEntType.value = "default"; + SelectInstance.input.value = 'German ent_type'; + this.elements.germanEntType.value = 'default'; } emptyEntityButton() { @@ -937,14 +937,14 @@ class ConcordanceQueryBuilder { addTextAnnotation() { this.hideEverything(); - this.elements.textAnnotationBuilder.classList.remove("hide"); - window.location.href = "#text-annotation-builder"; + this.elements.textAnnotationBuilder.classList.remove('hide'); + window.location.href = '#text-annotation-builder'; // Resets materialize select dropdown let SelectInstance = M.FormSelect.getInstance(this.elements.textAnnotationOptions); - SelectInstance.input.value = "address"; - this.elements.textAnnotationOptions.value = "address"; - this.elements.textAnnotationInput.value= ""; + SelectInstance.input.value = 'address'; + this.elements.textAnnotationOptions.value = 'address'; + this.elements.textAnnotationInput.value= ''; } textAnnotationSubmitHandler() { @@ -958,7 +958,7 @@ class ConcordanceQueryBuilder { this.elements.noValueMetadataMessage.classList.add('hide'); }, 3000); } else { - let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}="${this.elements.textAnnotationInput.value}"`; + let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}='${this.elements.textAnnotationInput.value}'`; this.buttonfactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText); this.hideEverything(); }