sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 12:22:47 +00:00
Code Issues Projects Releases Wiki Activity

Optical code adjustments

Browse Source
This commit is contained in:
Inga Kirschnick
2022-10-12 14:05:01 +02:00
parent 236d3e7ee4
commit f96bac93f2
1 changed files with 70 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {