Reduce some duplication when toggling "expanded" buttons in the viewe…

…r toolbars This is very similar to PR 16281, but for buttons that use the "aria-expanded" attribute.
mozilla · May 11, 2023 · df24826 · df24826
1 parent d520754
commit df24826
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js
@@ -14,6 +14,7 @@
  */
 
 import { FindState } from "./pdf_find_controller.js";
+import { toggleExpandedBtn } from "./ui_utils.js";
 
 const MATCHES_COUNT_LIMIT = 1000;
 
@@ -173,9 +174,7 @@ class PDFFindBar {
   open() {
     if (!this.opened) {
       this.opened = true;
-      this.toggleButton.classList.add("toggled");
-      this.toggleButton.setAttribute("aria-expanded", "true");
-      this.bar.classList.remove("hidden");
+      toggleExpandedBtn(this.toggleButton, true, this.bar);
     }
     this.findField.select();
     this.findField.focus();
@@ -188,9 +187,7 @@ class PDFFindBar {
       return;
     }
     this.opened = false;
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
-    this.bar.classList.add("hidden");
+    toggleExpandedBtn(this.toggleButton, false, this.bar);
 
     this.eventBus.dispatch("findbarclose", { source: this });
   }

diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js
@@ -18,6 +18,7 @@ import {
   RenderingStates,
   SidebarView,
   toggleCheckedBtn,
+  toggleExpandedBtn,
 } from "./ui_utils.js";
 
 const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
@@ -238,8 +239,7 @@ class PDFSidebar {
       return;
     }
     this.isOpen = true;
-    this.toggleButton.classList.add("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "true");
+    toggleExpandedBtn(this.toggleButton, true, this.bar);
 
     this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
 
@@ -257,8 +257,7 @@ class PDFSidebar {
       return;
     }
     this.isOpen = false;
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
+    toggleExpandedBtn(this.toggleButton, false, this.bar);
 
     this.outerContainer.classList.add("sidebarMoving");
     this.outerContainer.classList.remove("sidebarOpen");

diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
@@ -18,6 +18,7 @@ import {
   ScrollMode,
   SpreadMode,
   toggleCheckedBtn,
+  toggleExpandedBtn,
 } from "./ui_utils.js";
 import { PagesCountLimit } from "./pdf_viewer.js";
 
@@ -292,19 +293,15 @@ class SecondaryToolbar {
       return;
     }
     this.opened = true;
-    this.toggleButton.classList.add("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "true");
-    this.toolbar.classList.remove("hidden");
+    toggleExpandedBtn(this.toggleButton, true, this.toolbar);
   }
 
   close() {
     if (!this.opened) {
       return;
     }
     this.opened = false;
-    this.toolbar.classList.add("hidden");
-    this.toggleButton.classList.remove("toggled");
-    this.toggleButton.setAttribute("aria-expanded", "false");
+    toggleExpandedBtn(this.toggleButton, false, this.toolbar);
   }
 
   toggle() {

diff --git a/web/ui_utils.js b/web/ui_utils.js
@@ -851,6 +851,13 @@ function toggleCheckedBtn(button, toggle, view = null) {
   view?.classList.toggle("hidden", !toggle);
 }
 
+function toggleExpandedBtn(button, toggle, view = null) {
+  button.classList.toggle("toggled", toggle);
+  button.setAttribute("aria-expanded", toggle);
+
+  view?.classList.toggle("hidden", !toggle);
+}
+
 export {
   animationStarted,
   apiPageLayoutToViewerModes,
@@ -891,6 +898,7 @@ export {
   SpreadMode,
   TextLayerMode,
   toggleCheckedBtn,
+  toggleExpandedBtn,
   UNKNOWN_SCALE,
   VERTICAL_PADDING,
   watchScroll,