sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 02:44:18 +00:00
Code Issues Projects Releases Wiki Activity

Optical adjustments 2.0

Browse Source
This commit is contained in:
Inga Kirschnick 2022-10-12 14:08:42 +02:00
parent f96bac93f2
commit 2e45db10ca
1 changed files with 270 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

540
app/static/js/CorpusAnalysis/QueryBuilder.js
View File

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