diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js index 7134fa5e3e218..193d0a9446133 100644 --- 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 index cc9126b938d86..3dd99fd4fdc6c 100644 --- 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.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.outerContainer.classList.add("sidebarMoving"); this.outerContainer.classList.remove("sidebarOpen"); diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js index c3484d8e6521b..ece13bb511463 100644 --- 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,9 +293,7 @@ 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() { @@ -302,9 +301,7 @@ class SecondaryToolbar { 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 index b557ee82a37c1..e0f4e979bfed6 100644 --- 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, diff --git a/web/viewer.html b/web/viewer.html index 4845807c3cffa..afee3100d12b9 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -332,10 +332,10 @@
- -