Skip to content
Snippets Groups Projects
Commit f96bac93 authored by Inga Kirschnick's avatar Inga Kirschnick
Browse files

Optical code adjustments

parent 236d3e7e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/CorpusAnalysis/QueryBuilder.js
+ 70
− 55
View file @ f96bac93
......@@ -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("<", "&#60;");
}
if (queryElement.includes(">")){
if (queryElement.includes(">")) {
queryElement = queryElement.replace(">", "&#62;");
}
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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment