diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js index 256dadd2..e221e19b 100644 --- a/app/static/js/CorpusAnalysis/QueryBuilder.js +++ b/app/static/js/CorpusAnalysis/QueryBuilder.js @@ -164,14 +164,20 @@ class ConcordanceQueryBuilder { } + + + // ########################################################################## + // #################### General Functions ################################### + // ########################################################################## + //#region General Functions - closeQueryBuilderModal(closeInstance){ + closeQueryBuilderModal(closeInstance) { let instance = M.Modal.getInstance(closeInstance); instance.close(); } - showPositionalAttrArea(){ + showPositionalAttrArea() { this.elements.positionalAttrArea.classList.remove('hide'); this.elements.wordBuilder.classList.remove("hide"); this.elements.inputOptions.classList.remove("hide"); @@ -194,7 +200,7 @@ class ConcordanceQueryBuilder { this.elements.positionalAttr.value = "word"; } - showStructuralAttrArea(){ + showStructuralAttrArea() { this.elements.positionalAttrArea.classList.add('hide'); this.elements.structuralAttrArea.classList.remove('hide'); } @@ -207,15 +213,15 @@ class ConcordanceQueryBuilder { let chipColor = 'style="background-color:#'; // 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'; - }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 { + } else { chipColor = ''; } @@ -232,9 +238,9 @@ class ConcordanceQueryBuilder { 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); } @@ -242,14 +248,14 @@ class ConcordanceQueryBuilder { 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"; - if (tooltipInstance !== undefined){ + if (tooltipInstance !== undefined) { setTimeout(() => { tooltipInstance.open(); setTimeout(() => { @@ -261,23 +267,23 @@ class ConcordanceQueryBuilder { } } - //#region Drag&Drop Events - dragStartHandler(event){ + //#region Drag&Drop Events + dragStartHandler(event) { this.elements.dropButton = event.target; let targetChip = ` -
- Drop here -
+
+ Drop here +
`.trim(); let childNodes = this.elements.yourQuery.querySelectorAll("div:not(.target)"); setTimeout(() => { - for (let element of childNodes){ - if(element === event.target){ + for (let element of childNodes) { + if (element === event.target) { continue; - }else if (element === event.target.nextSibling){ + } else if (element === event.target.nextSibling) { continue; - }else { + } else { element.insertAdjacentHTML("beforebegin", targetChip) } } @@ -285,37 +291,37 @@ class ConcordanceQueryBuilder { },0); } - dragOverHandler(event){ + dragOverHandler(event) { event.preventDefault(); } - dragEnterHandler(event){ + dragEnterHandler(event) { event.preventDefault(); event.target.style.borderStyle = "solid dotted"; } - dragLeaveHandler(event){ + dragLeaveHandler(event) { event.preventDefault(); event.target.style.borderStyle = "hidden"; } - dragEndHandler(event){ + dragEndHandler(event) { let targets = document.querySelectorAll('.target'); - for (let target of targets){ + for (let target of targets) { target.remove(); } } - dropHandler(event){ + dropHandler(event) { let dropzone = event.target; - for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){ - if (dropzone === dropzone.parentElement.childNodes[i]){ + for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) { + if (dropzone === dropzone.parentElement.childNodes[i]) { nodeIndex = i; } } - for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){ - if (this.elements.dropButton === dropzone.parentElement.childNodes[i]){ + for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) { + if (this.elements.dropButton === dropzone.parentElement.childNodes[i]) { draggedElementIndex = i; } } @@ -325,15 +331,15 @@ class ConcordanceQueryBuilder { } //#endregion Drag&Drop Events - queryPreviewBuilder(){ + queryPreviewBuilder() { this.elements.yourQueryContent = []; for (let element of this.elements.yourQuery.childNodes) { let queryElement = decodeURI(element.dataset.query); - if (queryElement.includes("<")){ + if (queryElement.includes("<")) { queryElement = queryElement.replace("<", "<"); } - if (queryElement.includes(">")){ + if (queryElement.includes(">")) { queryElement = queryElement.replace(">", ">"); } if (queryElement !== "undefined") { @@ -351,7 +357,7 @@ class ConcordanceQueryBuilder { this.elements.yourQuery.removeChild(attr); this.elements.counter -= 1; - if(this.elements.counter === 0){ + if (this.elements.counter === 0) { this.elements.queryContainer.classList.add("hide"); } @@ -362,10 +368,10 @@ class ConcordanceQueryBuilder { this.elements.yourQueryContent = []; for (let element of this.elements.yourQuery.childNodes) { - let queryElement = decodeURI(element.dataset.query); - if (queryElement !== "undefined"){ - this.elements.yourQueryContent.push(queryElement); - } + let queryElement = decodeURI(element.dataset.query); + if (queryElement !== "undefined") { + this.elements.yourQueryContent.push(queryElement); + } } let queryString = this.elements.yourQueryContent.join(' '); @@ -373,7 +379,6 @@ class ConcordanceQueryBuilder { this.elements.concordanceQueryBuilder.classList.add('modal-close'); this.elements.extFormQuery.value = queryString; - } clearAll() { @@ -411,6 +416,13 @@ class ConcordanceQueryBuilder { //#endregion General Functions + + + + // ########################################################################## + // ############## Token Attribute Builder Functions ######################### + // ########################################################################## + //#region Token Attribute Builder Functions //#region General functions of the Token Builder @@ -441,7 +453,7 @@ class ConcordanceQueryBuilder { } } - hideEverything(){ + hideEverything() { this.elements.wordBuilder.classList.add("hide"); this.elements.lemmaBuilder.classList.add("hide"); @@ -472,11 +484,7 @@ class ConcordanceQueryBuilder { this.elements.tokenQuery.appendChild(buttonElement); } - deleteTokenAttr(attr){ - // let tokenQuery = this.elements.tokenQuery.childNodes; - // console.log(tokenQuery); - // console.log(this.elements.tokenQuery); - console.log(this.elements.tokenQuery.childNodes.length); + deleteTokenAttr(attr) { if (this.elements.tokenQuery.childNodes.length < 2) { this.elements.tokenQuery.removeChild(attr); this.wordBuilder(); @@ -493,22 +501,22 @@ class ConcordanceQueryBuilder { this.elements.cancelBool = false; let emptyTokenCheck = false; - if (this.elements.ignoreCase.checked){ + if (this.elements.ignoreCase.checked) { c = ' %c'; - }else{ + } else { c = ''; } - for (let element of this.elements.tokenQuery.childNodes){ + 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){ + if (this.elements.tokenQueryFilled === false) { switch (this.elements.positionalAttr.value) { case "word": 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. - 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). if (emptyTokenCheck === false) { tokenQueryText = '[' + tokenQueryText + ']'; @@ -813,9 +821,9 @@ class ConcordanceQueryBuilder { let tokenQueryText; let c; - if (this.elements.ignoreCase.checked){ + if (this.elements.ignoreCase.checked) { c = ' %c'; - }else{ + } else { c = ''; } @@ -859,10 +867,17 @@ class ConcordanceQueryBuilder { //#endregion Token Attribute Builder Functions + + + + // ########################################################################## + // ############ Structural Attribute Builder Functions ###################### + // ########################################################################## + //#region Structural Attribute Builder Functions addSentence() { this.hideEverything(); - if(this.elements.sentence.text === 'End Sentence') { + if (this.elements.sentence.text === 'End Sentence') { this.buttonfactory('end-sentence', 'Sentence End', ''); this.elements.sentence.innerHTML = 'Sentence'; } else {