Wrap updateDisplayAllBtn()

DDMAL · Jul 11, 2023 · 492b85c · 492b85c
1 parent e5f1848
commit 492b85c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 57 deletions.
diff --git 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
@@ -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,36 +30,19 @@ 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 });
 
   if (displayInfo.checked) {
     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
@@ -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();
   }
 
   /**