From 120ccf046293f6979e332e97201631e8b6cf1596 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Wed, 31 Jan 2024 16:12:20 -0500 Subject: [PATCH] Add debug mode functionalities --- src/DisplayPanel/DisplayControls.ts | 4 +-- src/NeonView.ts | 4 +-- src/utils/DebugMode.ts | 36 +++++++++++++++++++ src/utils/ErrorLog.ts | 54 +++++++++++++++++------------ src/utils/LocalSettings.ts | 2 ++ 5 files changed, 73 insertions(+), 27 deletions(-) create mode 100644 src/utils/DebugMode.ts diff --git a/src/DisplayPanel/DisplayControls.ts b/src/DisplayPanel/DisplayControls.ts index b0c24215b..eae9e7c7a 100644 --- 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 index 323784773..cd78c9ef7 100644 --- 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 new file mode 100644 index 000000000..9faae802b --- /dev/null +++ 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('#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(); +} \ No newline at end of file diff --git a/src/utils/ErrorLog.ts b/src/utils/ErrorLog.ts index 74eb68c5d..070060367 100644 --- 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'; + } + } } \ No newline at end of file diff --git a/src/utils/LocalSettings.ts b/src/utils/LocalSettings.ts index d060fcf94..1911e70ee 100644 --- 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,