diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js index e8ef3e94..f35d3458 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js @@ -27,34 +27,32 @@ class CorpusAnalysisApp { this.elements.m.initModal.open(); // Setup CQi over SocketIO connection and gather data from the CQPServer - let cqiClient; - let cqiCorpus; try { - cqiClient = new cqi.CQiClient('/cqi_over_sio'); - let response = await cqiClient.api.socket.emitWithAck('init', this.corpusId); + const cqiClient = new cqi.CQiClient('/cqi_over_sio'); + const response = await cqiClient.api.socket.emitWithAck('init', this.corpusId); if (response.code !== 200) {throw new Error();} await cqiClient.connect('anonymous', ''); - cqiCorpus = await cqiClient.corpora.get(`NOPAQUE-${this.corpusId.toUpperCase()}`); + const cqiCorpus = await cqiClient.corpora.get(`NOPAQUE-${this.corpusId.toUpperCase()}`); // TODO: Don't do this hgere await cqiCorpus.updateDb(); + this.data.cqiClient = cqiClient; + this.data.cqiCorpus = cqiCorpus; + this.data.corpus = {o: cqiCorpus}; // legacy } catch (error) { // TODO: Currently we can only handle CQiErrors here, // but we should also handle other errors. - let errorString = `${error.code}: ${error.constructor.name}`; - let errorsElement = this.elements.initModal.querySelector('.errors'); - let progressElement = this.elements.initModal.querySelector('.progress'); + const errorString = `${error.code}: ${error.constructor.name}`; + const errorsElement = this.elements.initModal.querySelector('.errors'); + const progressElement = this.elements.initModal.querySelector('.progress'); errorsElement.innerText = errorString; errorsElement.classList.remove('hide'); progressElement.classList.add('hide'); return; } - this.data.cqiClient = cqiClient; - this.data.cqiCorpus = cqiCorpus; - this.data.corpus = {o: cqiCorpus}; // legacy // Initialize extensions - for (let extension of Object.values(this.extensions)) {extension.init();} - for (let extensionSelectorElement of this.elements.extensionCards.querySelectorAll('.extension-selector')) { + for (const extension of Object.values(this.extensions)) {extension.init();} + for (const extensionSelectorElement of this.elements.extensionCards.querySelectorAll('.extension-selector')) { extensionSelectorElement.addEventListener('click', () => { this.elements.m.extensionTabs.select(extensionSelectorElement.dataset.target); }); @@ -65,35 +63,38 @@ class CorpusAnalysisApp { } registerExtension(extension) { - if (extension.name in this.extensions) { - console.error(`Can't register extension ${extension.name}: Already registered`); - return; - } + if (extension.name in this.extensions) {return;} this.extensions[extension.name] = extension; } disableActionElements() { - let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action'); - for (let actionElement of actionElements) { - if (actionElement.nodeName === 'INPUT') { - actionElement.disabled = true; - } else if (actionElement.nodeName === 'SELECT') { - actionElement.parentNode.querySelector('input.select-dropdown').disabled = true; - } else { - actionElement.classList.add('disabled'); + const actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action'); + for (const actionElement of actionElements) { + switch(actionElement.nodeName) { + case 'INPUT': + actionElement.disabled = true; + break; + case 'SELECT': + actionElement.parentNode.querySelector('input.select-dropdown').disabled = true; + break; + default: + actionElement.classList.add('disabled'); } } } enableActionElements() { - let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action'); - for (let actionElement of actionElements) { - if (actionElement.nodeName === 'INPUT') { - actionElement.disabled = false; - } else if (actionElement.nodeName === 'SELECT') { - actionElement.parentNode.querySelector('input.select-dropdown').disabled = false; - } else { - actionElement.classList.remove('disabled'); + const actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action'); + for (const actionElement of actionElements) { + switch(actionElement.nodeName) { + case 'INPUT': + actionElement.disabled = false; + break; + case 'SELECT': + actionElement.parentNode.querySelector('input.select-dropdown').disabled = false; + break; + default: + actionElement.classList.remove('disabled'); } } } diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js index d6c99926..3e73551d 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js @@ -19,7 +19,11 @@ class CorpusAnalysisReader { 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 + tokenRepresentation: this.elements.form['token-representation'].value, + pagination: { + innerWindow: 5, + outerWindow: 1 + } } this.app.registerExtension(this); @@ -142,7 +146,7 @@ class CorpusAnalysisReader { } // render page buttons (5 before and 5 after current page) - for (let i = this.data.corpus.p.page -5; i <= this.data.corpus.p.page; i++) { + for (let i = this.data.corpus.p.page - this.settings.pagination.innerWindow; i <= this.data.corpus.p.page; i++) { if (i <= 0) {continue;} pageElement = Utils.HTMLToElement( ` @@ -153,7 +157,7 @@ class CorpusAnalysisReader { ); this.elements.corpusPagination.appendChild(pageElement); }; - for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page +5; i++) { + for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page + this.settings.pagination.innerWindow; i++) { if (i > this.data.corpus.p.pages) {break;} pageElement = Utils.HTMLToElement( `