Add debug mode functionalities

DDMAL · Jan 31, 2024 · 120ccf0 · 120ccf0
1 parent 7565d57
commit 120ccf0
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 27 deletions.
diff --git a/src/DisplayPanel/DisplayControls.ts b/src/DisplayPanel/DisplayControls.ts
@@ -460,7 +460,7 @@ function setDisplayAllListener(): void {
     if (selectAllBtn.classList.contains('selected')) {
       selectAllBtn.classList.remove('selected');
       selectAllBtn.innerHTML = 'Display All';
-      const options =  document.querySelectorAll('.checkbox-container > .checkbox');
+      const options =  document.querySelectorAll('.checkbox-container:not([style*="display: none;"]) > .checkbox');
 
       Array.from(options).forEach((option: HTMLInputElement) => {
         if (option.checked) option.click();
@@ -469,7 +469,7 @@ function setDisplayAllListener(): void {
     else {
       selectAllBtn.classList.add('selected');
       selectAllBtn.innerHTML = 'Hide All';
-      const options =  document.querySelectorAll('.checkbox-container > .checkbox');
+      const options =  document.querySelectorAll('.checkbox-container:not([style*="display: none;"]) > .checkbox');
 
       Array.from(options).forEach((option: HTMLInputElement) => {
         if (!option.checked) option.click();

diff --git a/src/NeonView.ts b/src/NeonView.ts
@@ -13,7 +13,7 @@ import {
   TextViewInterface,
   ViewInterface
 } from './Interfaces';
-import { initErrorLog } from '../src/utils/ErrorLog';
+import { setDebugMode } from './utils/DebugMode';
 import { setSavedStatus, listenUnsavedChanges } from './utils/Unsaved';
 import LocalSettings, { getSettings } from './utils/LocalSettings';
 
@@ -109,7 +109,7 @@ class NeonView {
       this.info = new this.params.Info(this);
       this.modal = new ModalWindow(this);
       Validation.init(this); // initialize validation
-      initErrorLog(); // initialize notifications logs
+      setDebugMode(); 
       listenUnsavedChanges();
 
       this.setupEdit(this.params);

diff --git a/src/utils/DebugMode.ts b/src/utils/DebugMode.ts
@@ -0,0 +1,36 @@
+import { initErrorLog, updateErrorLogVisibility } from './ErrorLog';
+import { getSettings, setSettings } from './LocalSettings';
+
+export function setDebugMode(): void {
+  const debugModeCheckbox = document.querySelector<HTMLInputElement>('#debug-mode-checkbox');
+
+  const { debugMode } = getSettings();
+
+  debugModeCheckbox.checked = debugMode;
+
+  initErrorLog();
+
+  updateDebugModeStatus();
+
+  debugModeCheckbox.addEventListener('click', () => {
+    updateDebugModeStatus();
+  });
+}
+
+
+export function updateDebugModeStatus(): void {
+  const debugModeCheckbox = document.getElementById('debug-mode-checkbox') as HTMLInputElement;
+  setSettings({ debugMode: debugModeCheckbox.checked });
+
+  const errorLogLabel =  document.getElementById('display-errors').parentNode as HTMLElement;
+  const notifPanel = document.querySelector('#error_log');
+  if (debugModeCheckbox.checked) {
+    errorLogLabel.style.display = '';
+  }
+  else {
+    errorLogLabel.style.display = 'none';
+    notifPanel.classList.remove('visible');
+  }
+
+  updateErrorLogVisibility();
+}
diff --git a/src/utils/ErrorLog.ts b/src/utils/ErrorLog.ts
@@ -118,7 +118,6 @@ export function initErrorLogControls(): void {
  * Initializes click listener on "Show error logs" button in "View" dropdown.
  */
 export function initDisplayListener(): void {
-  const notifPanel = document.querySelector('#error_log');
   const checkboxesContainer = document.querySelector('#display-single-container');
   const errorsLabel = document.createElement('label');
   const erorrsBtn = document.createElement('input');
@@ -132,43 +131,52 @@ export function initDisplayListener(): void {
   errorsLabel.appendChild(erorrsBtn);
   checkboxesContainer.append(errorsLabel);
 
-
   const { displayErrLog } = getSettings();
-  if (displayErrLog) erorrsBtn.checked = true;
+  erorrsBtn.checked = displayErrLog;
 
   erorrsBtn.addEventListener('click', () => {
-    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;
+    setSettings({ displayErrLog: erorrsBtn.checked });
+    updateErrorLogVisibility();
+  });
+}
 
 
-    if (erorrsBtn.checked) {
-      notifPanel.classList.add('visible');
-      setSettings({ displayErrLog: true });
+function openErrorLogWindow(log: string) {
+  const modalWindow = new ModalWindow();
+  modalWindow.setModalWindowView(ModalWindowView.ERROR_LOG, log);
+  modalWindow.openModalWindow();
+}
+
+export function updateErrorLogVisibility(): void {
+  const notifPanel = document.querySelector('#error_log');
+  const { debugMode, displayErrLog, displayInfo, displayBBox, displayText } = getSettings();
 
-      if (displayInfo?.checked && displayBBoxes?.checked && 
-        displayText?.checked && displayErrLog?.checked) {
+  const displayAllBtn = document.getElementById('display-all-btn');
+
+  if (debugMode) {
+    if (displayErrLog) {
+      notifPanel.classList.add('visible');
+      if (displayInfo && displayBBox && 
+        displayText && displayErrLog) {
         displayAllBtn.classList.add('selected');
         displayAllBtn.innerHTML = 'Hide All';
       }
     }
     else {
       notifPanel.classList.remove('visible');
-      setSettings({ displayErrLog: false });
       if (displayAllBtn.classList.contains('selected')) {
         displayAllBtn.classList.remove('selected');
         displayAllBtn.innerHTML = 'Display All';
       }
     }
-
-  });
-}
-
-
-function openErrorLogWindow(log: string) {
-  const modalWindow = new ModalWindow();
-  modalWindow.setModalWindowView(ModalWindowView.ERROR_LOG, log);
-  modalWindow.openModalWindow();
+  } else {
+    notifPanel.classList.remove('visible');
+    if (displayInfo && displayBBox && displayText) {
+      displayAllBtn.classList.add('selected');
+      displayAllBtn.innerHTML = 'Hide All';
+    } else {
+      displayAllBtn.classList.remove('selected');
+      displayAllBtn.innerHTML = 'Display All';
+    }
+  }
 }
diff --git a/src/utils/LocalSettings.ts b/src/utils/LocalSettings.ts
@@ -26,6 +26,7 @@ export interface Settings {
   insertMode: InsertType;
   insertTab: InsertTabType;
   selectionMode: SelectionType;
+  debugMode: boolean;
   displayBBox: boolean;
   displayText: boolean;
   displayInfo: boolean;
@@ -50,6 +51,7 @@ const DEFAULT_SETTINGS: Settings = {
   insertMode: 'punctum',
   insertTab: 'primitiveTab',
   selectionMode: 'selBySyllable',
+  debugMode: false,
   displayBBox: false,
   displayText: false,
   displayInfo: false,