Small fixes

This commit is contained in:
Inga Kirschnick 2022-10-24 15:01:13 +02:00
parent cbf3abb424
commit 0b3456f877
4 changed files with 28 additions and 35 deletions

View File

@ -166,7 +166,6 @@ class ConcordanceQueryBuilder {
} }
// ########################################################################## // ##########################################################################
// #################### General Functions ################################### // #################### General Functions ###################################
// ########################################################################## // ##########################################################################
@ -229,27 +228,13 @@ class ConcordanceQueryBuilder {
this.elements.queryContainer.classList.remove('hide'); this.elements.queryContainer.classList.remove('hide');
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. // Shows a hint about possible functions for editing the query at the first added element in the query
if (this.elements.yourQuery.classList.contains('tooltipped')) { if (this.elements.yourQuery.childNodes.length === 1) {
let tooltipInstance = M.Tooltip.getInstance(this.elements.yourQuery); app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.');
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) {
setTimeout(() => {
tooltipInstance.open();
setTimeout(() => {
tooltipInstance.destroy();
}, 5000);
}, 500);
}
this.elements.yourQuery.classList.remove('tooltipped');
} }
} }
//#region Drag&Drop Events //#region Drag&Drop Events
dragStartHandler(event) { dragStartHandler(event) {
// Creates element with the class 'target' and all necessary drop functions, in which drop content can be released // Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
this.elements.dropButton = event.target; this.elements.dropButton = event.target;
@ -329,12 +314,15 @@ class ConcordanceQueryBuilder {
deleteAttr(attr) { deleteAttr(attr) {
this.elements.yourQuery.removeChild(attr); this.elements.yourQuery.removeChild(attr);
if (attr.dataset.type === "start-sentence") {
this.elements.sentence.innerHTML = 'Sentence';
} else if (attr.dataset.type === "start-entity" || attr.dataset.type === "start-empty-entity") {
this.elements.entity.innerHTML = 'Entity';
}
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');
} }
this.queryPreviewBuilder(); this.queryPreviewBuilder();
} }
@ -374,12 +362,19 @@ class ConcordanceQueryBuilder {
entityEndCounter += 1; entityEndCounter += 1;
} }
} }
if (sentenceCounter !== sentenceEndCounter) { // Checks if the same number of opening and closing tags (entity and sentence) are present. Depending on what is missing, the corresponding error message is ejected
app.flash('Please add a closing sentence tag', 'error'); if (sentenceCounter > sentenceEndCounter) {
app.flash('Please add the closing sentence tag', 'error');
this.elements.valueValidator = false;
} else if (sentenceCounter < sentenceEndCounter) {
app.flash('Please remove the closing sentence tag', 'error');
this.elements.valueValidator = false; this.elements.valueValidator = false;
} }
if (entityCounter !== entityEndCounter) { if (entityCounter > entityEndCounter) {
app.flash('Please add a closing entity tag', 'error'); app.flash('Please add the closing entity tag', 'error');
this.elements.valueValidator = false;
} else if (entityCounter < entityEndCounter) {
app.flash('Please remove the closing entity tag', 'error');
this.elements.valueValidator = false; this.elements.valueValidator = false;
} }
} }
@ -395,6 +390,8 @@ class ConcordanceQueryBuilder {
this.elements.structuralAttrArea.classList.add('hide'); this.elements.structuralAttrArea.classList.add('hide');
this.elements.yourQuery.innerHTML = ''; this.elements.yourQuery.innerHTML = '';
this.elements.queryContainer.classList.add('hide'); this.elements.queryContainer.classList.add('hide');
this.elements.entity.innerHTML = 'Entity';
this.elements.sentence.innerHTML = 'Sentence';
instance.tooltipEl.style.background = '#98ACD2'; instance.tooltipEl.style.background = '#98ACD2';
instance.tooltipEl.style.borderTop = 'solid 4px #0064A3'; instance.tooltipEl.style.borderTop = 'solid 4px #0064A3';
@ -420,15 +417,13 @@ class ConcordanceQueryBuilder {
//#endregion General Functions //#endregion General Functions
// ########################################################################## // ##########################################################################
// ############## Token Attribute Builder 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
tokenTypeSelector() { tokenTypeSelector() {
this.hideEverything(); this.hideEverything();
switch (this.elements.positionalAttr.value) { switch (this.elements.positionalAttr.value) {
@ -871,8 +866,6 @@ class ConcordanceQueryBuilder {
//#endregion Token Attribute Builder Functions //#endregion Token Attribute Builder Functions
// ########################################################################## // ##########################################################################
// ############ Structural Attribute Builder Functions ###################### // ############ Structural Attribute Builder Functions ######################
// ########################################################################## // ##########################################################################
@ -961,7 +954,7 @@ class ConcordanceQueryBuilder {
this.elements.noValueMetadataMessage.classList.add('hide'); this.elements.noValueMetadataMessage.classList.add('hide');
}, 3000); }, 3000);
} else { } else {
let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}='${this.elements.textAnnotationInput.value}'`; let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}="${this.elements.textAnnotationInput.value}"`;
this.buttonfactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText); this.buttonfactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText);
this.hideEverything(); this.hideEverything();
} }

View File

@ -66,7 +66,7 @@
<p class="hide-on-small-only">&nbsp;</p> <p class="hide-on-small-only">&nbsp;</p>
<a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button"> <a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button">
<i class="material-icons left">build</i> <i class="material-icons left">build</i>
Query builder Query builder (beta)
</a> </a>
<button class="btn waves-effect waves-light corpus-analysis-action" id="concordance-extension-form-submit" type="submit" name="submit"> <button class="btn waves-effect waves-light corpus-analysis-action" id="concordance-extension-form-submit" type="submit" name="submit">
Send Send

View File

@ -254,7 +254,7 @@
<div> <div>
<nav> <nav>
<div class="nav-wrapper" id="query-builder-nav"> <div class="nav-wrapper" id="query-builder-nav">
<a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a> <a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder (beta)</a>
<i class="material-icons close right" id="close-query-builder">close</i> <i class="material-icons close right" id="close-query-builder">close</i>
<a class="modal-trigger" href="#query-builder-tutorial-modal" > <a class="modal-trigger" href="#query-builder-tutorial-modal" >
<i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i> <i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
@ -274,7 +274,7 @@
</h6> </h6>
</div> </div>
<div class="row"> <div class="row">
<div class="col s10 tooltipped" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div> <div class="col s10" id="your-query"></div>
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button"> <a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
<i class="material-icons">send</i> <i class="material-icons">send</i>
</a> </a>

View File

@ -106,7 +106,7 @@
</h6> </h6>
</div> </div>
<div class="row"> <div class="row">
<div class="col s10 tooltipped" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div> <div class="col s10" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div>
<a class="btn-small waves-effect waves-teal col s1" id="insert-query-button"> <a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
<i class="material-icons">send</i> <i class="material-icons">send</i>
</a> </a>