Merge pull request #16410 from Snuffleupagus/toggleExpandedBtn

Reduce some duplication when toggling "expanded" buttons in the viewer toolbars
This commit is contained in:
Jonas Jenwald 2023-05-11 13:10:39 +02:00 committed by GitHub
commit 9417a37c71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 18 deletions

View File

@ -14,6 +14,7 @@
*/ */
import { FindState } from "./pdf_find_controller.js"; import { FindState } from "./pdf_find_controller.js";
import { toggleExpandedBtn } from "./ui_utils.js";
const MATCHES_COUNT_LIMIT = 1000; const MATCHES_COUNT_LIMIT = 1000;
@ -173,9 +174,7 @@ class PDFFindBar {
open() { open() {
if (!this.opened) { if (!this.opened) {
this.opened = true; this.opened = true;
this.toggleButton.classList.add("toggled"); toggleExpandedBtn(this.toggleButton, true, this.bar);
this.toggleButton.setAttribute("aria-expanded", "true");
this.bar.classList.remove("hidden");
} }
this.findField.select(); this.findField.select();
this.findField.focus(); this.findField.focus();
@ -188,9 +187,7 @@ class PDFFindBar {
return; return;
} }
this.opened = false; this.opened = false;
this.toggleButton.classList.remove("toggled"); toggleExpandedBtn(this.toggleButton, false, this.bar);
this.toggleButton.setAttribute("aria-expanded", "false");
this.bar.classList.add("hidden");
this.eventBus.dispatch("findbarclose", { source: this }); this.eventBus.dispatch("findbarclose", { source: this });
} }

View File

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

View File

@ -18,6 +18,7 @@ import {
ScrollMode, ScrollMode,
SpreadMode, SpreadMode,
toggleCheckedBtn, toggleCheckedBtn,
toggleExpandedBtn,
} from "./ui_utils.js"; } from "./ui_utils.js";
import { PagesCountLimit } from "./pdf_viewer.js"; import { PagesCountLimit } from "./pdf_viewer.js";
@ -292,9 +293,7 @@ class SecondaryToolbar {
return; return;
} }
this.opened = true; this.opened = true;
this.toggleButton.classList.add("toggled"); toggleExpandedBtn(this.toggleButton, true, this.toolbar);
this.toggleButton.setAttribute("aria-expanded", "true");
this.toolbar.classList.remove("hidden");
} }
close() { close() {
@ -302,9 +301,7 @@ class SecondaryToolbar {
return; return;
} }
this.opened = false; this.opened = false;
this.toolbar.classList.add("hidden"); toggleExpandedBtn(this.toggleButton, false, this.toolbar);
this.toggleButton.classList.remove("toggled");
this.toggleButton.setAttribute("aria-expanded", "false");
} }
toggle() { toggle() {

View File

@ -851,6 +851,13 @@ function toggleCheckedBtn(button, toggle, view = null) {
view?.classList.toggle("hidden", !toggle); 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 { export {
animationStarted, animationStarted,
apiPageLayoutToViewerModes, apiPageLayoutToViewerModes,
@ -891,6 +898,7 @@ export {
SpreadMode, SpreadMode,
TextLayerMode, TextLayerMode,
toggleCheckedBtn, toggleCheckedBtn,
toggleExpandedBtn,
UNKNOWN_SCALE, UNKNOWN_SCALE,
VERTICAL_PADDING, VERTICAL_PADDING,
watchScroll, watchScroll,

View File

@ -332,10 +332,10 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="verticalToolbarSeparator hiddenMediumView"></div> <div class="verticalToolbarSeparator hiddenMediumView"></div>
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup"> <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" tabindex="34" data-l10n-id="editor_free_text2"> <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="editor_free_text2">
<span data-l10n-id="editor_free_text2_label">Text</span> <span data-l10n-id="editor_free_text2_label">Text</span>
</button> </button>
<button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" tabindex="35" data-l10n-id="editor_ink2"> <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="editor_ink2">
<span data-l10n-id="editor_ink2_label">Draw</span> <span data-l10n-id="editor_ink2_label">Draw</span>
</button> </button>
</div> </div>