Optical adjustments 2.0

This commit is contained in:
Inga Kirschnick 2022-10-12 14:08:42 +02:00
parent f96bac93f2
commit 2e45db10ca

View File

@ -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 +=`
<div class="chip" ${chipColor}" data-type="${dataType}" data-query="${queryText}" draggable="true" style="cursor:pointer;" ondragstart="concordanceQueryBuilder.dragStartHandler(event)" ondragend="concordanceQueryBuilder.dragEndHandler(event)">
<div class='chip' ${chipColor}' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
${prettyText}
<i class="material-icons close">close</i>
<i class='material-icons close'>close</i>
</div>
`.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 = `
<div class="chip target" ondragover="concordanceQueryBuilder.dragOverHandler(event)" ondragenter="concordanceQueryBuilder.dragEnterHandler(event)" ondragleave="concordanceQueryBuilder.dragLeaveHandler(event)" ondrop="concordanceQueryBuilder.dropHandler(event)">
<div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
Drop here
</div>
`.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("<", "&#60;");
if (queryElement.includes('<')) {
queryElement = queryElement.replace('<', '&#60;');
}
if (queryElement.includes(">")) {
queryElement = queryElement.replace(">", "&#62;");
if (queryElement.includes('>')) {
queryElement = queryElement.replace('>', '&#62;');
}
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 = `
<div class="chip col s2 l2" style="margin-top:20px;" data-tokentext="${tokenText}">
<div class='chip col s2 l2' style='margin-top:20px;' data-tokentext='${tokenText}'>
${prettyText}
<i class="material-icons close">close</i>
<i class='material-icons close'>close</i>
</div>`;
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, '<ent_type="' + this.elements.englishEntType.value + '">');
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_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, '<ent_type="' + this.elements.germanEntType.value + '">');
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_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();
}