diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 80a021d6..b199e399 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -1,31 +1,30 @@ class CorpusAnalysisConcordance { name = 'Concordance'; - constructor(app) { + constructor(app, idPrefix) { this.app = app; this.data = {}; this.elements = { - // TODO: Prefix elements with "corpus-analysis-app-" - container: document.querySelector('#concordance-extension-container'), - error: document.querySelector('#concordance-extension-error'), - UIForm: document.querySelector('#concordance-extension-ui-form'), - form: document.querySelector('#concordance-extension-form'), - progress: document.querySelector('#concordance-extension-progress'), - subcorpusInfo: document.querySelector('#concordance-extension-subcorpus-info'), - subcorpusActions: document.querySelector('#concordance-extension-subcorpus-actions'), - subcorpusItems: document.querySelector('#concordance-extension-subcorpus-items'), - subcorpusList: document.querySelector('#concordance-extension-subcorpus-list'), - subcorpusPagination: document.querySelector('#concordance-extension-subcorpus-pagination') + container: document.querySelector(`#${idPrefix}-container`), + error: document.querySelector(`#${idPrefix}-error`), + userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`), + form: document.querySelector(`#${idPrefix}-form`), + progress: document.querySelector(`#${idPrefix}-progress`), + subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`), + subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`), + subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`), + subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`), + subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`) }; this.settings = { - context: parseInt(this.elements.UIForm['context'].value), - perPage: parseInt(this.elements.UIForm['per-page'].value), + context: parseInt(this.elements.userInterfaceForm['context'].value), + perPage: parseInt(this.elements.userInterfaceForm['per-page'].value), selectedSubcorpus: undefined, - textStyle: parseInt(this.elements.UIForm['text-style'].value), - tokenRepresentation: this.elements.UIForm['token-representation'].value + textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value), + tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value }; this.app.registerExtension(this); @@ -77,21 +76,24 @@ class CorpusAnalysisConcordance { event.preventDefault(); this.submitForm(); }); - this.elements.UIForm.addEventListener('change', (event) => { - if (event.target === this.elements.UIForm['context']) { - this.settings.context = parseInt(this.elements.UIForm['context'].value); + this.elements.userInterfaceForm.addEventListener('change', (event) => { + if (event.target === this.elements.userInterfaceForm['context']) { + console.log(this.settings.context); + console.log(parseInt(this.elements.userInterfaceForm['context'].value)); + this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value); + console.log(this.settings.context); this.submitForm(); } - if (event.target === this.elements.UIForm['per-page']) { - this.settings.perPage = parseInt(this.elements.UIForm['per-page'].value); + if (event.target === this.elements.userInterfaceForm['per-page']) { + this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value); this.submitForm(); } - if (event.target === this.elements.UIForm['text-style']) { - this.settings.textStyle = parseInt(this.elements.UIForm['text-style'].value); + if (event.target === this.elements.userInterfaceForm['text-style']) { + this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value); this.setTextStyle(); } - if (event.target === this.elements.UIForm['token-representation']) { - this.settings.tokenRepresentation = this.elements.UIForm['token-representation'].value; + if (event.target === this.elements.userInterfaceForm['token-representation']) { + this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value; this.setTokenRepresentation(); } }); @@ -379,7 +381,9 @@ class CorpusAnalysisConcordance { document.getSelection().removeAllRanges(); document.getSelection().addRange(range); }); - this.app.elements.m.extensionTabs.select('reader-extension-container'); + this.app.elements.m.extensionTabs.select( + this.app.extensions.Reader.elements.container.id + ); }); } for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) { diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js index eb63cae9..4990b91a 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js @@ -1,25 +1,24 @@ class CorpusAnalysisReader { name = 'Reader'; - constructor(app) { + constructor(app, idPrefix) { this.app = app; this.data = {}; this.elements = { - // TODO: Prefix elements with "corpus-analysis-app-" - container: document.querySelector('#reader-extension-container'), - error: document.querySelector('#reader-extension-error'), - form: document.querySelector('#reader-extension-form'), - progress: document.querySelector('#reader-extension-progress'), - corpus: document.querySelector('#reader-extension-corpus'), - corpusPagination: document.querySelector('#reader-extension-corpus-pagination') + container: document.querySelector(`#${idPrefix}-container`), + corpus: document.querySelector(`#${idPrefix}-corpus`), + corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`), + error: document.querySelector(`#${idPrefix}-error`), + progress: document.querySelector(`#${idPrefix}-progress`), + userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`) }; this.settings = { - perPage: parseInt(this.elements.form['per-page'].value), - textStyle: parseInt(this.elements.form['text-style'].value), - tokenRepresentation: this.elements.form['token-representation'].value, + perPage: parseInt(this.elements.userInterfaceForm['per-page'].value), + textStyle: parseInt(this.elements.userInterfaceForm['text-style'].value), + tokenRepresentation: this.elements.userInterfaceForm['token-representation'].value, pagination: { innerWindow: 5, outerWindow: 1 @@ -57,21 +56,21 @@ class CorpusAnalysisReader { // Init data this.data.corpus = this.app.data.corpus; // Add event listeners - this.elements.form.addEventListener('submit', (event) => { + this.elements.userInterfaceForm.addEventListener('submit', (event) => { event.preventDefault(); this.submitForm(); }); - this.elements.form.addEventListener('change', (event) => { - if (event.target === this.elements.form['per-page']) { - this.settings.perPage = parseInt(this.elements.form['per-page'].value); + this.elements.userInterfaceForm.addEventListener('change', (event) => { + if (event.target === this.elements.userInterfaceForm['per-page']) { + this.settings.perPage = parseInt(this.elements.userInterfaceForm['per-page'].value); this.submitForm(); } - if (event.target === this.elements.form['text-style']) { - this.settings.textStyle = parseInt(this.elements.form['text-style'].value); + if (event.target === this.elements.userInterfaceForm['text-style']) { + this.settings.textStyle = parseInt(this.elements.userInterfaceForm['text-style'].value); this.setTextStyle(); } - if (event.target === this.elements.form['token-representation']) { - this.settings.tokenRepresentation = this.elements.form['token-representation'].value; + if (event.target === this.elements.userInterfaceForm['token-representation']) { + this.settings.tokenRepresentation = this.elements.userInterfaceForm['token-representation'].value; this.setTokenRepresentation(); } }); diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2 index c3189b75..e7a403fb 100644 --- a/app/templates/corpora/_analysis/concordance.html.j2 +++ b/app/templates/corpora/_analysis/concordance.html.j2 @@ -2,11 +2,10 @@ {% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %} +{% set icon = 'list_alt' %} {% set name = 'Concordance' %} +{% set description = 'Query your corpus with the CQP query language utilizing a KWIC view.' %} -{% set description %} -Query your corpus with the CQP query language utilizing a KWIC view. -{% endset %} {% set id_prefix = name.lower().replace(' ', '-') + '-extension' %} @@ -43,95 +42,93 @@ Query your corpus with the CQP query language utilizing a KWIC view. -