✨ Add Advanced Settings feature

assets/template.html

@@ -39,6 +39,7 @@
             <div id="export" class="navbar-dropdown-item">
               <div class="navbar-dropdown-item-text">Save and Export to File</div>
             </div>
+            <div id="revert" class="navbar-dropdown-item">Revert</div>
             <a id="getmei" class="navbar-dropdown-item">
              <div class="navbar-dropdown-item-text">Download MEI</div>
             </a>
@@ -97,15 +98,14 @@
         </div>
         -->
 
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div id="mei-actions-dropdown" class="navbar-item has-dropdown is-hoverable" style="display: none;">
           <div class="navbar-element navbar-btn">
             <div class="navbar-btn-text">MEI Actions</div>
           </div>
           <div class="navbar-dropdown">
             <div id="remove-empty-syls" class="navbar-dropdown-item">Remove Empty Syllables</div>
             <div id="remove-empty-neumes" class="navbar-dropdown-item">Remove Empty Neumes</div>
             <div id="remove-out-of-bounds-glyphs" class="navbar-dropdown-item">Remove Out-of-bounds Glyphs</div>
-            <div id="revert" class="navbar-dropdown-item">Revert</div>
           </div>
         </div>
 
@@ -134,6 +134,16 @@
             </div>
           </div>
         </div>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+          <div class="navbar-element navbar-btn">
+            <div class="navbar-btn-text">
+              <input class="checkbox" type="checkbox"
+              id="display-advanced">
+              Enable Advanced Settings
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 

cypress/e2e/errorlog.cy.ts

@@ -7,6 +7,8 @@ describe('test: error log', () => {
   beforeEach(() => {
     cy.visit('http://localhost:8080/editor.html?manifest=test');
     cy.clearLocalStorage();
+
+    cy.get('#display-advanced').check({ force: true });
   });
 
   it('startup: error log should not be visible', () => {

src/DisplayPanel/DisplayPanel.ts

@@ -140,7 +140,7 @@ function displayControlsPanel (handleZoom: ZoomHandler): string {
  * A class that sets the content of the display panel to the right and
  * manages controls for viewing.
  */
-class DisplayPanel implements DisplayInterface {
+export class DisplayPanel implements DisplayInterface {
   view: ViewInterface;
   meiClass: string;
   background: string;
@@ -216,4 +216,21 @@ class DisplayPanel implements DisplayInterface {
   }
 }
 
-export { DisplayPanel as default };
+export function updateDisplayAll (): void {
+  const displayAllBtn = document.querySelector<HTMLInputElement>('#display-all-btn');
+
+  const btns = document.querySelector('#display-single-container');
+  const checkboxes = Array.from(btns.querySelectorAll<HTMLInputElement>('input[type=checkbox]'));
+  const allChecked = checkboxes.every(box => box.checked);
+
+  if (allChecked) {
+    displayAllBtn.classList.add('selected');
+    displayAllBtn.innerHTML = 'Hide All';
+  } else {
+    displayAllBtn.classList.remove('selected');
+    displayAllBtn.innerHTML = 'Display All';
+  }
+
+}
+
+export default DisplayPanel;

src/InfoModule.ts

@@ -4,6 +4,7 @@ import NeonView from './NeonView';
 import { InfoInterface } from './Interfaces';
 import { Attributes } from './Types';
 import { getSettings, setSettings } from './utils/LocalSettings';
+import { updateDisplayAll } from './DisplayPanel/DisplayPanel';
 
 /**
  * Map of contours to neume names.
@@ -29,12 +30,7 @@ function startInfoVisibility (): void {
  */
 function updateInfoVisibility (): void {
   const neumeInfo = document.getElementById('neume_info');
-
-  const displayAllBtn = document.getElementById('display-all-btn');
   const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
-  const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
-  const displayText = document.getElementById('displayText') as HTMLInputElement;
-  const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
 
   // save setting to localStorage
   setSettings({ displayInfo: displayInfo.checked });
@@ -43,22 +39,11 @@ function updateInfoVisibility (): void {
     neumeInfo.setAttribute('style', '');
     // scroll neume info into view
     //neumeInfo.scrollIntoView({ behavior: 'smooth' });
-
-    // if this is the 3rd option to be checked (all three are selected),
-    // set "Display/Hide All" button to "Hide All".
-    if (displayInfo?.checked && displayBBoxes?.checked && 
-      displayText?.checked && displayErrLog?.checked) {
-      displayAllBtn.classList.add('selected');
-      displayAllBtn.innerHTML = 'Hide All';
-    }
   } else {
     neumeInfo.setAttribute('style', 'display: none');
-    // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-    if (displayAllBtn.classList.contains('selected')) {
-      displayAllBtn.classList.remove('selected');
-      displayAllBtn.innerHTML = 'Display All';
-    }
   }
+
+  updateDisplayAll();
 }
 
 /**

src/NeonView.ts

@@ -1,5 +1,4 @@
 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';
@@ -13,9 +12,10 @@ import {
   TextViewInterface,
   ViewInterface
 } from './Interfaces';
-import { initErrorLog } from '../src/utils/ErrorLog';
-import { setSavedStatus, listenUnsavedChanges } from './utils/Unsaved';
-import LocalSettings, { getSettings } from './utils/LocalSettings';
+import ErrorLog from '../src/utils/ErrorLog';
+import Unsaved from './utils/Unsaved';
+import LocalSettings from './utils/LocalSettings';
+import AdvancedSettings from './utils/AdvancedSettings';
 
 
 /**
@@ -95,9 +95,9 @@ 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
-      initErrorLog(); // initialize notifications logs
-      listenUnsavedChanges();
+
+      AdvancedSettings.init(this);
+      Unsaved.init();
 
       this.setupEdit(this.params);
       return this.core.initDb();
@@ -123,15 +123,15 @@ class NeonView {
    * Redo an action performed on the current page (if there is one).
    */
   redo (): Promise<boolean> {
-    setSavedStatus(false);
+    Unsaved.setSavedStatus(false);
     return this.core.redo(this.view.getCurrentPageURI());
   }
 
   /**
    * Undo the last action performed on the current page (if there is one).
    */
   undo (): Promise<boolean> {
-    setSavedStatus(false);
+    Unsaved.setSavedStatus(false);
     return this.core.undo(this.view.getCurrentPageURI());
   }
 
@@ -190,7 +190,7 @@ class NeonView {
    * Save the current state to the browser database.
    */
   save (): Promise<void> {
-    setSavedStatus(true);
+    Unsaved.setSavedStatus(true);
     return this.core.updateDatabase();
   }
 
@@ -219,10 +219,10 @@ class NeonView {
 
   /**
    * Get the page's MEI file as a string.
-   * @param pageNo - The identifying URI of the page.
+   * @param pageURI - The identifying URI of the page.
    */
-  getPageMEI (pageNo: string): Promise<string> {
-    return this.core.getMEI(pageNo);
+  getPageMEI (pageURI: string): Promise<string> {
+    return this.core.getMEI(pageURI);
   }
 
   /**

src/SingleView/SingleView.ts

@@ -1,6 +1,6 @@
 import { updateHighlight, setOpacityFromSlider, setBgOpacityFromSlider } from '../DisplayPanel/DisplayControls';
 import NeonView from '../NeonView';
-import DisplayPanel from '../DisplayPanel/DisplayPanel';
+import { DisplayPanel } from '../DisplayPanel/DisplayPanel';
 import ZoomHandler from './Zoom';
 import { ViewInterface, DisplayConstructable } from '../Interfaces';
 

src/TextView.ts

@@ -4,6 +4,7 @@ import { unselect } from './utils/SelectTools';
 import { updateHighlight } from './DisplayPanel/DisplayControls';
 import { TextViewInterface } from './Interfaces';
 import { getSettings, setSettings } from './utils/LocalSettings';
+import { updateDisplayAll } from './DisplayPanel/DisplayPanel';
 
 /*
  * Class that manages getting the text for syllables in Neon from the mei file
@@ -74,12 +75,7 @@ class TextView implements TextViewInterface {
    * Update visibility of text bounding boxes
    */
   updateBBoxViewVisibility (): void {
-
-    const displayAllBtn = document.getElementById('display-all-btn');
-    const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
     const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
-    const displayText = document.getElementById('displayText') as HTMLInputElement;
-    const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
 
     // save to localStorage
     setSettings({ displayBBox: displayBBoxes.checked });
@@ -95,14 +91,6 @@ class TextView implements TextViewInterface {
       if (this.neonView.getUserMode() !== 'viewer' && this.neonView.TextEdit !== undefined) {
         this.neonView.TextEdit.initSelectByBBoxButton();
       }
-
-      // if this is the 3rd option to be checked (all three are selected),
-      // set "Display/Hide All" button to "Hide All".
-      if (displayInfo?.checked && displayBBoxes?.checked && 
-          displayText?.checked && displayErrLog?.checked) {
-        displayAllBtn.classList.add('selected');
-        displayAllBtn.innerHTML = 'Hide All';
-      }
     } 
     else {
       if (document.getElementById('selByBBox')?.classList.contains('is-active')) {
@@ -124,13 +112,9 @@ class TextView implements TextViewInterface {
         document.getElementById('selByBBox').style.display = 'none';
       } 
       catch (e) {}
-
-      // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-      if (displayAllBtn.classList.contains('selected')) {
-        displayAllBtn.classList.remove('selected');
-        displayAllBtn.innerHTML = 'Display All';
-      }
     }
+
+    updateDisplayAll();
     updateHighlight();
   }
 
@@ -139,12 +123,7 @@ class TextView implements TextViewInterface {
   * and add the event listeners to make sure the syl highlights when moused over
   */
   updateTextViewVisibility (): void {
-
-    const displayAllBtn = document.getElementById('display-all-btn');
-    const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
-    const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
     const displayText = document.getElementById('displayText') as HTMLInputElement;
-    const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
 
     // save to localStorage
     setSettings({ displayText: displayText.checked });
@@ -208,23 +187,13 @@ class TextView implements TextViewInterface {
 
       // scroll the syllable text bubble into view
       //sylText.scrollIntoView({ behavior: 'smooth' });
-
-      // if this is the 3rd option to be checked (all three are selected),
-      // set "Display/Hide All" button to "Hide All".
-      if (displayInfo?.checked && displayBBoxes?.checked && 
-          displayText?.checked && displayErrLog?.checked) {
-        displayAllBtn.classList.add('selected');
-        displayAllBtn.innerHTML = 'Hide All';
-      }
     } 
     else {
       document.getElementById('syl_text').style.display = 'none';
       // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-      if (displayAllBtn.classList.contains('selected')) {
-        displayAllBtn.classList.remove('selected');
-        displayAllBtn.innerHTML = 'Display All';
-      }
     }
+
+    updateDisplayAll();
   }
 
   /**

src/Validation.ts

@@ -1,5 +1,5 @@
-import NeonView from "./NeonView";
-import { ModalWindow, ModalWindowView } from "./utils/ModalWindow";
+import NeonView from './NeonView';
+import { ModalWindowView } from './utils/ModalWindow';
 
 const schemaResponse = fetch(__ASSET_PREFIX__ + 'assets/mei-all.rng');
 let worker: Worker, schema: string, statusField: HTMLSpanElement;
@@ -47,7 +47,7 @@ export async function init (neonView: NeonView): Promise<void> {
   if (fileStatusDiv !== null) {
     const statusTitle = document.createElement('div');
     statusTitle.textContent = 'MEI Status:';
-    statusTitle.id = "validation_status_title";
+    statusTitle.id = 'validation_status_title';
     const status = document.createElement('span');
     status.id = 'validation_status';
     status.textContent = 'unknown';
@@ -59,11 +59,23 @@ export async function init (neonView: NeonView): Promise<void> {
   }
 }
 
+async function stop (): Promise<void> {
+  if (worker) {
+    worker.terminate();
+    worker = null;
+  }
+
+  const fileStatusDiv = document.getElementById('file-status');
+  fileStatusDiv.innerHTML = '';
+}
+
 /**
  * Send the contents of an MEI file to the WebWorker for validation.
  * @param {string} meiData
  */
 export async function sendForValidation (meiData: string): Promise<void> {
+  if (!worker) return;
+
   if (statusField === undefined) {
     return;
   }
@@ -89,3 +101,5 @@ export function blankPage (): void {
   statusField.textContent = 'No MEI';
   statusField.style.color = 'color:gray';
 }
+
+export default { init, stop, sendForValidation };