From f96bac93f28ed27b691230fd836c6aee6b8dce92 Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Wed, 12 Oct 2022 14:05:01 +0200
Subject: [PATCH] Optical code adjustments
---
app/static/js/CorpusAnalysis/QueryBuilder.js | 125 +++++++++++--------
1 file changed, 70 insertions(+), 55 deletions(-)
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 = `
- <div class="chip target" ondragover="concordanceQueryBuilder.dragOverHandler(event)" ondragenter="concordanceQueryBuilder.dragEnterHandler(event)" ondragleave="concordanceQueryBuilder.dragLeaveHandler(event)" ondrop="concordanceQueryBuilder.dropHandler(event)">
- Drop here
- </div>
+ <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)");
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', '</s>');
this.elements.sentence.innerHTML = 'Sentence';
} else {
--
GitLab