Optical code adjustments

This commit is contained in:
Inga Kirschnick 2022-10-12 14:05:01 +02:00
parent 236d3e7ee4
commit f96bac93f2

View File

@ -164,14 +164,20 @@ class ConcordanceQueryBuilder {
} }
// ##########################################################################
// #################### General Functions ###################################
// ##########################################################################
//#region General Functions //#region General Functions
closeQueryBuilderModal(closeInstance){ closeQueryBuilderModal(closeInstance) {
let instance = M.Modal.getInstance(closeInstance); let instance = M.Modal.getInstance(closeInstance);
instance.close(); instance.close();
} }
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");
@ -194,7 +200,7 @@ class ConcordanceQueryBuilder {
this.elements.positionalAttr.value = "word"; this.elements.positionalAttr.value = "word";
} }
showStructuralAttrArea(){ showStructuralAttrArea() {
this.elements.positionalAttrArea.classList.add('hide'); this.elements.positionalAttrArea.classList.add('hide');
this.elements.structuralAttrArea.classList.remove('hide'); this.elements.structuralAttrArea.classList.remove('hide');
} }
@ -207,15 +213,15 @@ class ConcordanceQueryBuilder {
let chipColor = 'style="background-color:#'; let chipColor = 'style="background-color:#';
// 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 = '';
} }
@ -232,9 +238,9 @@ class ConcordanceQueryBuilder {
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);
} }
@ -242,14 +248,14 @@ class ConcordanceQueryBuilder {
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(() => {
tooltipInstance.open(); tooltipInstance.open();
setTimeout(() => { setTimeout(() => {
@ -261,23 +267,23 @@ class ConcordanceQueryBuilder {
} }
} }
//#region Drag&Drop Events //#region Drag&Drop Events
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) {
if(element === event.target){ if (element === event.target) {
continue; continue;
}else if (element === event.target.nextSibling){ } else if (element === event.target.nextSibling) {
continue; continue;
}else { } else {
element.insertAdjacentHTML("beforebegin", targetChip) element.insertAdjacentHTML("beforebegin", targetChip)
} }
} }
@ -285,37 +291,37 @@ class ConcordanceQueryBuilder {
},0); },0);
} }
dragOverHandler(event){ dragOverHandler(event) {
event.preventDefault(); event.preventDefault();
} }
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) {
let targets = document.querySelectorAll('.target'); let targets = document.querySelectorAll('.target');
for (let target of targets){ for (let target of targets) {
target.remove(); target.remove();
} }
} }
dropHandler(event){ dropHandler(event) {
let dropzone = event.target; let dropzone = event.target;
for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){ for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
if (dropzone === dropzone.parentElement.childNodes[i]){ if (dropzone === dropzone.parentElement.childNodes[i]) {
nodeIndex = i; nodeIndex = i;
} }
} }
for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){ for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
if (this.elements.dropButton === dropzone.parentElement.childNodes[i]){ if (this.elements.dropButton === dropzone.parentElement.childNodes[i]) {
draggedElementIndex = i; draggedElementIndex = i;
} }
} }
@ -325,15 +331,15 @@ class ConcordanceQueryBuilder {
} }
//#endregion Drag&Drop Events //#endregion Drag&Drop Events
queryPreviewBuilder(){ queryPreviewBuilder() {
this.elements.yourQueryContent = []; this.elements.yourQueryContent = [];
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") {
@ -351,7 +357,7 @@ class ConcordanceQueryBuilder {
this.elements.yourQuery.removeChild(attr); this.elements.yourQuery.removeChild(attr);
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");
} }
@ -362,10 +368,10 @@ class ConcordanceQueryBuilder {
this.elements.yourQueryContent = []; this.elements.yourQueryContent = [];
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(' ');
@ -373,7 +379,6 @@ class ConcordanceQueryBuilder {
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() {
@ -411,6 +416,13 @@ class ConcordanceQueryBuilder {
//#endregion General Functions //#endregion General Functions
// ##########################################################################
// ############## Token Attribute Builder Functions #########################
// ##########################################################################
//#region Token Attribute Builder Functions //#region Token Attribute Builder Functions
//#region General functions of the Token Builder //#region General functions of the Token Builder
@ -441,7 +453,7 @@ 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");
@ -472,11 +484,7 @@ class ConcordanceQueryBuilder {
this.elements.tokenQuery.appendChild(buttonElement); this.elements.tokenQuery.appendChild(buttonElement);
} }
deleteTokenAttr(attr){ deleteTokenAttr(attr) {
// let tokenQuery = this.elements.tokenQuery.childNodes;
// console.log(tokenQuery);
// console.log(this.elements.tokenQuery);
console.log(this.elements.tokenQuery.childNodes.length);
if (this.elements.tokenQuery.childNodes.length < 2) { if (this.elements.tokenQuery.childNodes.length < 2) {
this.elements.tokenQuery.removeChild(attr); this.elements.tokenQuery.removeChild(attr);
this.wordBuilder(); this.wordBuilder();
@ -493,22 +501,22 @@ class ConcordanceQueryBuilder {
this.elements.cancelBool = false; this.elements.cancelBool = false;
let emptyTokenCheck = false; let emptyTokenCheck = false;
if (this.elements.ignoreCase.checked){ if (this.elements.ignoreCase.checked) {
c = ' %c'; c = ' %c';
}else{ } else {
c = ''; c = '';
} }
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 === "") {
@ -562,7 +570,7 @@ class ConcordanceQueryBuilder {
} }
// cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added. // cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added.
if (this.elements.cancelBool === false){ if (this.elements.cancelBool === false) {
// Square brackets are added only if it is not an empty token (where they are already present). // Square brackets are added only if it is not an empty token (where they are already present).
if (emptyTokenCheck === false) { if (emptyTokenCheck === false) {
tokenQueryText = '[' + tokenQueryText + ']'; tokenQueryText = '[' + tokenQueryText + ']';
@ -813,9 +821,9 @@ class ConcordanceQueryBuilder {
let tokenQueryText; let tokenQueryText;
let c; let c;
if (this.elements.ignoreCase.checked){ if (this.elements.ignoreCase.checked) {
c = ' %c'; c = ' %c';
}else{ } else {
c = ''; c = '';
} }
@ -859,10 +867,17 @@ class ConcordanceQueryBuilder {
//#endregion Token Attribute Builder Functions //#endregion Token Attribute Builder Functions
// ##########################################################################
// ############ Structural Attribute Builder Functions ######################
// ##########################################################################
//#region Structural Attribute Builder Functions //#region Structural Attribute Builder Functions
addSentence() { addSentence() {
this.hideEverything(); this.hideEverything();
if(this.elements.sentence.text === 'End Sentence') { if (this.elements.sentence.text === 'End Sentence') {
this.buttonfactory('end-sentence', 'Sentence End', '</s>'); this.buttonfactory('end-sentence', 'Sentence End', '</s>');
this.elements.sentence.innerHTML = 'Sentence'; this.elements.sentence.innerHTML = 'Sentence';
} else { } else {