From ff1bcb40f3dc94021c28839c40214667026b6ba7 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Mon, 13 Nov 2023 14:20:19 +0100 Subject: [PATCH] update query builder code to fit the new style --- .../query-builder/element-references.js | 4 +- .../js/corpus-analysis/query-builder/index.js | 16 +----- ...-builder-functions.js => query-builder.js} | 37 ++++++------- .../structural-attribute-builder-functions.js | 52 +++++++++---------- .../token-attribute-builder-functions.js | 38 +++++++------- app/templates/_scripts.html.j2 | 2 +- .../corpora/_analysis/concordance.html.j2 | 2 +- 7 files changed, 67 insertions(+), 84 deletions(-) rename app/static/js/corpus-analysis/query-builder/{general-query-builder-functions.js => query-builder.js} (94%) diff --git a/app/static/js/corpus-analysis/query-builder/element-references.js b/app/static/js/corpus-analysis/query-builder/element-references.js index 518975f0..39297967 100644 --- a/app/static/js/corpus-analysis/query-builder/element-references.js +++ b/app/static/js/corpus-analysis/query-builder/element-references.js @@ -1,4 +1,4 @@ -class ElementReferencesQueryBuilder { +nopaque.corpus_analysis.query_builder.ElementReferences = class ElementReferences { constructor() { // General Elements this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field'); @@ -25,4 +25,4 @@ class ElementReferencesQueryBuilder { this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox'); } -} +}; diff --git a/app/static/js/corpus-analysis/query-builder/index.js b/app/static/js/corpus-analysis/query-builder/index.js index 9d85b853..dd8ba80b 100644 --- a/app/static/js/corpus-analysis/query-builder/index.js +++ b/app/static/js/corpus-analysis/query-builder/index.js @@ -1,15 +1 @@ -class ConcordanceQueryBuilder { - - constructor() { - - this.elements = new ElementReferencesQueryBuilder(); - - this.extensions = { - generalFunctions: new GeneralQueryBuilderFunctions(this, this.elements), - structuralAttributeBuilderFunctions: new StructuralAttributeBuilderFunctions(this, this.elements), - tokenAttributeBuilderFunctions: new TokenAttributeBuilderFunctions(this, this.elements), - }; - - } - -} +nopaque.corpus_analysis.query_builder = {}; diff --git a/app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js b/app/static/js/corpus-analysis/query-builder/query-builder.js similarity index 94% rename from app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js rename to app/static/js/corpus-analysis/query-builder/query-builder.js index e48419d4..04f4a3ac 100644 --- a/app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js +++ b/app/static/js/corpus-analysis/query-builder/query-builder.js @@ -1,10 +1,7 @@ -class GeneralQueryBuilderFunctions { - name = 'General Query Builder Functions'; +nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder { + constructor() { + this.elements = new nopaque.corpus_analysis.query_builder.ElementReferences(); - constructor(app, elements) { - this.app = app; - this.elements = elements; - this.incidenceModifierEventListeners(); this.nAndMInputSubmitEventListeners(); @@ -24,9 +21,14 @@ class GeneralQueryBuilderFunctions { this.switchToQueryBuilderParser(); } }); + + this.extensions = { + structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this), + tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this), + }; } - toggleClass(elements, className, action){ + toggleClass(elements, className, action) { elements.forEach(element => { document.querySelector(`[data-toggle-area="${element}"]`).classList[action](className); }); @@ -44,7 +46,7 @@ class GeneralQueryBuilderFunctions { } removePlaceholder() { - let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder'); + let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder'); if (placeholder && this.elements.queryInputField !== undefined) { this.elements.queryInputField.innerHTML = ''; } @@ -138,8 +140,8 @@ class GeneralQueryBuilderFunctions { this.lockClosingChipElement(queryChipElement); } }); - // }); } + // }); } editChipElement(queryChipElement) { @@ -147,14 +149,14 @@ class GeneralQueryBuilderFunctions { this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement); switch (queryChipElement.dataset.type) { case 'start-entity': - this.app.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement); + this.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement); break; case 'text-annotation': - this.app.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement); + this.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement); break; case 'token': - let queryElementsContent = this.app.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement); - this.app.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent); + let queryElementsContent = this.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement); + this.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent); break; default: break; @@ -165,10 +167,10 @@ class GeneralQueryBuilderFunctions { queryChipElement.dataset.closingTag = 'false'; let lockIcon = queryChipElement.querySelector('[data-chip-action="lock"]'); lockIcon.textContent = 'lock'; - //TODO: Write unlock-Function? + // TODO: Write unlock-Function? lockIcon.dataset.chipAction = 'unlock'; } - + deleteChipElement(attr) { let elementIndex = Array.from(this.elements.queryInputField.children).indexOf(attr); switch (attr.dataset.type) { @@ -341,7 +343,7 @@ class GeneralQueryBuilderFunctions { if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') { button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId)); } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') { - button.addEventListener('click', () => this.app.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId)); + button.addEventListener('click', () => this.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId)); } }); } @@ -482,5 +484,4 @@ class GeneralQueryBuilderFunctions { return chipElements; } -} - +}; diff --git a/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js b/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js index 4c98d35e..a5667d2a 100644 --- a/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js +++ b/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js @@ -1,10 +1,8 @@ -class StructuralAttributeBuilderFunctions { - name = 'Token Attribute Builder Functions'; - - constructor(app, elements) { +nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions = class StructuralAttributeBuilderFunctions { + constructor(app) { this.app = app; - this.elements = elements; - + this.elements = app.elements; + this.structuralAttrModalEventlisteners(); document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler()); @@ -26,32 +24,32 @@ class StructuralAttributeBuilderFunctions { }); }); document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => { - this.app.extensions.generalFunctions.submitQueryChipElement('start-empty-entity', 'Entity Start', ''); - this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '', null, true); + this.app.submitQueryChipElement('start-empty-entity', 'Entity Start', ''); + this.app.submitQueryChipElement('end-entity', 'Entity End', '', null, true); this.elements.structuralAttrModal.close(); }); document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => { - this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, ``, null, false, true); + this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, ``, null, false, true); if (!this.elements.editingModusOn) { - this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '', null, true); + this.app.submitQueryChipElement('end-entity', 'Entity End', '', null, true); } this.elements.structuralAttrModal.close(); }); document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => { - this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, ``, null, false, true); + this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, ``, null, false, true); if (!this.elements.editingModusOn) { - this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '', null, true); + this.app.submitQueryChipElement('end-entity', 'Entity End', '', null, true); } this.elements.structuralAttrModal.close(); }); } resetStructuralAttrModal() { - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]); - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address'); + this.app.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]); + this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address'); this.elements.textAnnotationInput.value = ''; - this.app.extensions.generalFunctions.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add'); + this.app.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add'); this.toggleEditingAreaStructuralAttrModal('remove'); this.elements.editingModusOn = false; this.elements.editedQueryChipElementIndex = undefined; @@ -60,17 +58,17 @@ class StructuralAttributeBuilderFunctions { actionButtonInStrucAttrModalHandler(action) { switch (action) { case 'sentence': - this.app.extensions.generalFunctions.submitQueryChipElement('start-sentence', 'Sentence Start', ''); - this.app.extensions.generalFunctions.submitQueryChipElement('end-sentence', 'Sentence End', '', null, true); + this.app.submitQueryChipElement('start-sentence', 'Sentence Start', ''); + this.app.submitQueryChipElement('end-sentence', 'Sentence End', '', null, true); this.elements.structuralAttrModal.close(); break; case 'entity': - this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'toggle'); - this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'add'); + this.app.toggleClass(['entity-builder'], 'hide', 'toggle'); + this.app.toggleClass(['text-annotation-builder'], 'hide', 'add'); break; case 'meta-data': - this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'toggle'); - this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'add'); + this.app.toggleClass(['text-annotation-builder'], 'hide', 'toggle'); + this.app.toggleClass(['entity-builder'], 'hide', 'add'); break; default: break; @@ -79,7 +77,7 @@ class StructuralAttributeBuilderFunctions { toggleEditingAreaStructuralAttrModal(action) { // If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled. - this.app.extensions.generalFunctions.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action); + this.app.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action); } textAnnotationSubmitHandler() { @@ -99,29 +97,29 @@ class StructuralAttributeBuilderFunctions { }, 3000); } else { let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`; - this.app.extensions.generalFunctions.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true); + this.app.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true); this.elements.structuralAttrModal.close(); } } editStartEntityChipElement(queryChipElement) { this.elements.structuralAttrModal.open(); - this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'remove'); + this.app.toggleClass(['entity-builder'], 'hide', 'remove'); this.toggleEditingAreaStructuralAttrModal('add'); let entType = queryChipElement.dataset.query.replace(//g, ''); let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null; let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection; - this.app.extensions.generalFunctions.resetMaterializeSelection([selection], entType); + this.app.resetMaterializeSelection([selection], entType); } editTextAnnotationChipElement(queryChipElement) { this.elements.structuralAttrModal.open(); - this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'remove'); + this.app.toggleClass(['text-annotation-builder'], 'hide', 'remove'); this.toggleEditingAreaStructuralAttrModal('add'); let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query .replace(/:: ?match\.text_|"|"/g, '') .split('='); - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection); + this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection); this.elements.textAnnotationInput.value = textAnnotationContent; } } diff --git a/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js b/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js index 5f897fbe..6bbc20f0 100644 --- a/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js +++ b/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js @@ -1,9 +1,7 @@ -class TokenAttributeBuilderFunctions { - name = 'Token Attribute Builder Functions'; - - constructor(app, elements) { +nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class TokenAttributeBuilderFunctions { + constructor(app) { this.app = app; - this.elements = elements; + this.elements = app.elements; this.elements.positionalAttrSelection.addEventListener('change', () => { this.preparePositionalAttrModal(); @@ -42,9 +40,9 @@ class TokenAttributeBuilderFunctions { this.elements.positionalAttrSelection.innerHTML = originalSelectionList; this.elements.tokenQuery.innerHTML = ''; this.elements.tokenBuilderContent.innerHTML = ''; - this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove'); - this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], "word"); + this.app.toggleClass(['input-field-options'], 'hide', 'remove'); + this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); + this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], "word"); this.elements.ignoreCaseCheckbox.checked = false; this.elements.editingModusOn = false; this.elements.editedQueryChipElementIndex = undefined; @@ -178,7 +176,7 @@ class TokenAttributeBuilderFunctions { } }); - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], selection); + this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], selection); this.preparePositionalAttrModal(); } @@ -201,11 +199,11 @@ class TokenAttributeBuilderFunctions { this.optionToggleHandler(); if (selection === 'word' || selection === 'lemma') { - this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove'); + this.app.toggleClass(['input-field-options'], 'hide', 'remove'); } else if (selection === 'empty-token'){ this.addTokenToQuery(); } else { - this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'add'); + this.app.toggleClass(['input-field-options'], 'hide', 'add'); } } @@ -216,12 +214,12 @@ class TokenAttributeBuilderFunctions { optionToggleHandler() { let input = this.tokenInputCheck(this.elements.tokenBuilderContent); if (input.value === '' && this.elements.editingModusOn === false) { - this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); + this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add'); } else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) { - this.app.extensions.generalFunctions.toggleClass(['and'], 'disabled', 'add'); - this.app.extensions.generalFunctions.toggleClass(['or'], 'disabled', 'remove'); + this.app.toggleClass(['and'], 'disabled', 'add'); + this.app.toggleClass(['or'], 'disabled', 'remove'); } else { - this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove'); + this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove'); } } @@ -257,7 +255,7 @@ class TokenAttributeBuilderFunctions { this.disableTokenSubmit(); } else { tokenQueryCQLText = `[${tokenQueryCQLText}]`; - this.app.extensions.generalFunctions.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true); + this.app.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true); this.elements.positionalAttrModal.close(); } } @@ -280,7 +278,7 @@ class TokenAttributeBuilderFunctions { editTokenChipElement(queryElementsContent) { this.elements.positionalAttrModal.open(); queryElementsContent.forEach((queryElement) => { - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); + this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); this.preparePositionalAttrModal(); switch (queryElement.tokenAttr) { case 'word': @@ -291,12 +289,12 @@ class TokenAttributeBuilderFunctions { // English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos. let selection = this.elements.tokenBuilderContent.querySelector('select'); queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos'; - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); + this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr); this.preparePositionalAttrModal(); - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); + this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); break; case 'simple_pos': - this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); + this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue); default: break; } diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2 index 7b6aad12..e16c7798 100644 --- a/app/templates/_scripts.html.j2 +++ b/app/templates/_scripts.html.j2 @@ -91,7 +91,7 @@ 'js/corpus-analysis/cqi/client.js', 'js/corpus-analysis/query-builder/index.js', 'js/corpus-analysis/query-builder/element-references.js', - 'js/corpus-analysis/query-builder/general-query-builder-functions.js', + 'js/corpus-analysis/query-builder/query-builder.js', 'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js', 'js/corpus-analysis/query-builder/token-attribute-builder-functions.js', 'js/corpus-analysis/app.js', diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index 9ff4a4bd..2c074dfd 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -129,6 +129,6 @@ {% macro scripts() %} {% endmacro %}