From 492b85c967474d855d3ba6c02b0c759b48c41df1 Mon Sep 17 00:00:00 2001 From: Yinan Zhou Date: Tue, 11 Jul 2023 12:19:07 -0400 Subject: [PATCH] Wrap updateDisplayAllBtn() --- src/DisplayPanel/DisplayControls.ts | 25 ++++++++++++++++ src/InfoModule.ts | 22 ++------------ src/TextView.ts | 45 +++++------------------------ 3 files changed, 35 insertions(+), 57 deletions(-) diff --git a/src/DisplayPanel/DisplayControls.ts b/src/DisplayPanel/DisplayControls.ts index 0b635a8c5..04dfee1b0 100644 --- a/src/DisplayPanel/DisplayControls.ts +++ b/src/DisplayPanel/DisplayControls.ts @@ -428,6 +428,31 @@ function setDisplayAllListener(): void { }); } +/** + * Update `Display All` button status +*/ +export function updateDisplayAllBtn(): 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; + + // if all options 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 "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'; + } + } +} + /** * Load highlight settings from localStorage */ diff --git a/src/InfoModule.ts b/src/InfoModule.ts index 1d8b82f09..ee25b5b4f 100644 --- a/src/InfoModule.ts +++ b/src/InfoModule.ts @@ -4,6 +4,7 @@ import NeonView from './NeonView'; import { InfoInterface } from './Interfaces'; import { Attributes, ClefAttributes } from './Types'; import { getSettings, setSettings } from './utils/LocalSettings'; +import { updateDisplayAllBtn } from './DisplayPanel/DisplayControls'; /** * Map of contours to neume names. @@ -29,13 +30,8 @@ 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,10 @@ 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'; - } } + updateDisplayAllBtn(); } /** diff --git a/src/TextView.ts b/src/TextView.ts index 95ef6e6e4..b39bfd500 100644 --- a/src/TextView.ts +++ b/src/TextView.ts @@ -1,7 +1,7 @@ import * as Notification from './utils/Notification'; import NeonView from './NeonView'; import { unselect } from './utils/SelectTools'; -import { updateHighlight } from './DisplayPanel/DisplayControls'; +import { updateDisplayAllBtn, updateHighlight } from './DisplayPanel/DisplayControls'; import { TextViewInterface } from './Interfaces'; import { getSettings, setSettings } from './utils/LocalSettings'; @@ -76,12 +76,8 @@ class TextView implements TextViewInterface { */ updateBBoxVisibility (): 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 }); @@ -96,14 +92,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')) { @@ -125,13 +113,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'; - } } + + updateDisplayAllBtn(); updateHighlight(); } @@ -141,12 +125,8 @@ class TextView implements TextViewInterface { */ 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 }); @@ -209,23 +189,12 @@ 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'; - } } + + updateDisplayAllBtn(); } /**