From 496650c0b7bf9ea3f3dcab26663464fb03694e05 Mon Sep 17 00:00:00 2001 From: David Peterman Date: Fri, 17 Jun 2022 12:01:56 -0400 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Moved=20error=20logs=20into?= =?UTF-8?q?=20a=20modal=20window=20(but=20left=20the=20option=20to=20expor?= =?UTF-8?q?t=20logs=20into=20a=20file)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/style.css | 6 +++++- src/NeonCore.ts | 2 +- src/NeonView.ts | 3 ++- src/Validation.ts | 41 +++++++++++++++++++++++++--------------- src/utils/ModalWindow.ts | 34 ++++++++++++++++++++++++++++----- 5 files changed, 63 insertions(+), 23 deletions(-) diff --git a/assets/style.css b/assets/style.css index f642935ba..35c76718f 100644 --- a/assets/style.css +++ b/assets/style.css @@ -421,8 +421,12 @@ a:hover { #displayContents .button { width: 10.5em; } -#validation_status a { +#validation_status { color: inherit; + +} +#validation_status_title { + margin-right: 5px; } #display-actions-container { display: flex; diff --git a/src/NeonCore.ts b/src/NeonCore.ts index aff79e4db..7516bca96 100644 --- a/src/NeonCore.ts +++ b/src/NeonCore.ts @@ -46,7 +46,7 @@ class NeonCore { */ constructor (manifest: NeonManifest) { this.verovioWrapper = new VerovioWrapper(); - Validation.init(); + //Validation.init(); /** * Stacks of previous MEI files representing actions that can be undone for each page. diff --git a/src/NeonView.ts b/src/NeonView.ts index 68adc70c9..b24ea200b 100644 --- a/src/NeonView.ts +++ b/src/NeonView.ts @@ -1,5 +1,5 @@ import NeonCore from './NeonCore'; - +import * as Validation from './Validation'; import { parseManifest } from './utils/NeonManifest'; import setBody from './utils/template/Template'; import { ModalWindow } from './utils/ModalWindow'; @@ -88,6 +88,7 @@ class NeonView { this.core = new NeonCore(this.manifest); this.info = new this.params.Info(this); this.modal = new ModalWindow(this); + Validation.init(this); // initialize validation this.setupEdit(this.params); return this.core.initDb(); diff --git a/src/Validation.ts b/src/Validation.ts index a54b63c29..6a8b7f95e 100644 --- a/src/Validation.ts +++ b/src/Validation.ts @@ -1,3 +1,6 @@ +import NeonView from "./NeonView"; +import { ModalWindow, ModalWindowView } from "./utils/ModalWindow"; + const schemaResponse = fetch(__ASSET_PREFIX__ + 'assets/mei-all.rng'); let worker: Worker, schema: string, statusField: HTMLSpanElement; @@ -19,32 +22,40 @@ function updateUI (message: { data: string[] }): void { }); statusField.textContent = ''; statusField.style.color = 'red'; - const link = document.createElement('a'); - link.setAttribute('href', 'data:text/plain;charset=utf-8,' + - encodeURIComponent(log)); - link.setAttribute('download', 'validation.log'); - link.textContent = 'INVALID'; - statusField.appendChild(link); + const status = document.createElement('div'); + //link.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(log)}`); + //link.setAttribute('download', 'validation.log'); + status.textContent = 'INVALID'; + status.style.cursor = 'pointer'; + statusField.appendChild(status); + + status.addEventListener('click', statusOnClick.bind(this, log)); } } +function statusOnClick(log: string) { + this.modal.setModalWindowView(ModalWindowView.VALIDATION_STATUS, log); + this.modal.openModalWindow(); +} + /** * Add the validation information to the display and create the WebWorker * for validation MEI. */ -export async function init (): Promise { +export async function init (neonView: NeonView): Promise { const fileStatusDiv = document.getElementById('file-status'); if (fileStatusDiv !== null) { - const pNotif = document.createElement('p'); - pNotif.textContent = 'MEI Status: '; - const span = document.createElement('span'); - span.id = 'validation_status'; - span.textContent = 'unknown'; - pNotif.appendChild(span); - fileStatusDiv.appendChild(pNotif); + const statusTitle = document.createElement('div'); + statusTitle.textContent = 'MEI Status:'; + statusTitle.id = "validation_status_title"; + const status = document.createElement('span'); + status.id = 'validation_status'; + status.textContent = 'unknown'; + fileStatusDiv.appendChild(statusTitle); + fileStatusDiv.appendChild(status); statusField = document.getElementById('validation_status'); worker = new Worker(__ASSET_PREFIX__ + 'workers/Worker.js'); - worker.onmessage = updateUI; + worker.onmessage = updateUI.bind(neonView); } } diff --git a/src/utils/ModalWindow.ts b/src/utils/ModalWindow.ts index 889f0a831..9cc7faec4 100644 --- a/src/utils/ModalWindow.ts +++ b/src/utils/ModalWindow.ts @@ -10,7 +10,8 @@ import { selectBBox, unselect } from './SelectTools'; */ export enum ModalWindowView { EDIT_TEXT, - HOTKEYS + HOTKEYS, + VALIDATION_STATUS } enum ModalWindowState { @@ -52,9 +53,9 @@ export class ModalWindow implements ModalWindowInterface { * Update the content based on passed view. * @param view Type of modal to open (ModalView enum) */ - setModalWindowView(view: ModalWindowView): void { + setModalWindowView(view: ModalWindowView, content?: string): void { this.modalWindowView = view; - this.setModalWindowContent(); + this.setModalWindowContent(content); } @@ -70,13 +71,23 @@ export class ModalWindow implements ModalWindowInterface { * Open a model window with content representing the current ModalView. */ openModalWindow(): void { + // make sure no other modal content is being displayed + Array.from(document.getElementsByClassName('neon-modal-window-content')).forEach((elem) => { + elem.classList.remove('visible'); + }); switch(this.modalWindowView) { + case ModalWindowView.EDIT_TEXT: this.openEditSylTextModalWindow(); break; + case ModalWindowView.HOTKEYS: - this.openHotkeyModalWindow(); + // set up and diplay hotkey modal content + document.getElementById('neon-modal-window-content-hotkeys').classList.add('visible'); + default: + document.getElementById('neon-modal-window-container').style.display = 'flex'; + this.focusModalWindow(); break; } this.modalWindowState = ModalWindowState.OPEN; @@ -107,7 +118,7 @@ export class ModalWindow implements ModalWindowInterface { /** * Set content of modal window */ - private setModalWindowContent(): void { + private setModalWindowContent(content?: string): void { switch (this.modalWindowView) { case ModalWindowView.EDIT_TEXT: document.getElementById('neon-modal-window-content-container').innerHTML = editTextModal; @@ -128,6 +139,17 @@ export class ModalWindow implements ModalWindowInterface { document.getElementById('neon-modal-window-header-title').innerText = 'HOTKEYS'; break; + case ModalWindowView.VALIDATION_STATUS: + document.getElementById('neon-modal-window-content-container').innerHTML = + `
${content}
+
+ + Export + +
`; + document.getElementById('neon-modal-window-header-title').innerText = 'ERROR LOG'; + break; + default: } } @@ -217,6 +239,7 @@ export class ModalWindow implements ModalWindowInterface { /** * Fill modal window with hotkey info content */ + /* private openHotkeyModalWindow = function() { // make sure no other modal content is being displayed Array.from(document.getElementsByClassName('neon-modal-window-content')).forEach((elem) => { @@ -229,6 +252,7 @@ export class ModalWindow implements ModalWindowInterface { document.getElementById('neon-modal-window-container').style.display = 'flex'; this.focusModalWindow(); }; + */ /** From e8843997e38b94f06b98d0d08fa8d35b46022e56 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Sun, 19 Jun 2022 00:18:07 -0400 Subject: [PATCH 2/2] handle default case && change line --- src/utils/ModalWindow.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/ModalWindow.ts b/src/utils/ModalWindow.ts index 9cc7faec4..3ce1be1db 100644 --- a/src/utils/ModalWindow.ts +++ b/src/utils/ModalWindow.ts @@ -141,7 +141,7 @@ export class ModalWindow implements ModalWindowInterface { case ModalWindowView.VALIDATION_STATUS: document.getElementById('neon-modal-window-content-container').innerHTML = - `
${content}
+ `
${content}
Export @@ -151,6 +151,7 @@ export class ModalWindow implements ModalWindowInterface { break; default: + console.error('Unknown selection type. This should not have occurred.'); } }