💄 Moved error logs into a modal window (but left the option to export logs into a file)

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;

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.

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();

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<void> {
+export async function init (neonView: NeonView): Promise<void> {
   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);
   }
 }
 

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,7 +139,19 @@ 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 = 
+          `<div style="margin-bottom: 30px;white-space: pre-line;">${content}</div>
+          <div class="neon-modal-window-btn">
+            <a href="data:text/plain;charset=utf-8,${encodeURIComponent(content)}" download="validation.log">
+              Export
+            </a>
+            </div>`;
+        document.getElementById('neon-modal-window-header-title').innerText = 'ERROR LOG';
+        break;
+
       default:
+        console.error('Unknown selection type. This should not have occurred.');
     } 
   }
 
@@ -217,6 +240,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 +253,7 @@ export class ModalWindow implements ModalWindowInterface {
     document.getElementById('neon-modal-window-container').style.display = 'flex';
     this.focusModalWindow();
   };
+  */
 
 
   /**