Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #17138 from Snuffleupagus/issue-17137

Browse Source 
Use a CSS-only solution to set the `dropdownToolbarButton` width (issue 17137)
This commit is contained in:
Jonas Jenwald 2023-10-19 13:49:05 +02:00 committed by GitHub
commit f39bedd06c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/l10n_utils.js
View File

@ -58,10 +58,6 @@ const DEFAULT_L10N_STRINGS = {
"pdfjs-find-match-count-limit[other]": "More than { $limit } matches",
"pdfjs-find-not-found": "Phrase not found",
"pdfjs-page-scale-width": "Page Width",
"pdfjs-page-scale-fit": "Page Fit",
"pdfjs-page-scale-auto": "Automatic Zoom",
"pdfjs-page-scale-actual": "Actual Size",
"pdfjs-page-scale-percent": "{ $scale }%",
"pdfjs-loading-error": "An error occurred while loading the PDF.",

50
web/toolbar.js
View File

@ -13,15 +13,14 @@
* limitations under the License.
*/
import { AnnotationEditorType, noContextMenu } from "pdfjs-lib";
import {
animationStarted,
DEFAULT_SCALE,
DEFAULT_SCALE_VALUE,
MAX_SCALE,
MIN_SCALE,
toggleCheckedBtn,
} from "./ui_utils.js";
import { AnnotationEditorType, noContextMenu } from "pdfjs-lib";
const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
@ -209,7 +208,6 @@ class Toolbar {
this.eventBus._on("localized", () => {
this.#wasLocalized = true;
this.#adjustScaleWidth();
this.#updateUIState(true);
});
@ -317,52 +315,6 @@ class Toolbar {
pageNumber.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
}
/**
* Increase the width of the zoom dropdown DOM element if, and only if, it's
* too narrow to fit the *longest* of the localized strings.
*/
async #adjustScaleWidth() {
const { items, l10n } = this;
const predefinedValuesPromise = l10n.get([
"pdfjs-page-scale-auto",
"pdfjs-page-scale-actual",
"pdfjs-page-scale-fit",
"pdfjs-page-scale-width",
]);
await animationStarted;
const style = getComputedStyle(items.scaleSelect);
const scaleSelectWidth = parseFloat(
style.getPropertyValue("--scale-select-width")
);
// The temporary canvas is used to measure text length in the DOM.
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d", { alpha: false });
ctx.font = `${style.fontSize} ${style.fontFamily}`;
let maxWidth = 0;
for (const predefinedValue of await predefinedValuesPromise) {
const { width } = ctx.measureText(predefinedValue);
if (width > maxWidth) {
maxWidth = width;
}
}
// Account for the icon width, and ensure that there's always some spacing
// between the text and the icon.
maxWidth += 0.3 * scaleSelectWidth;
if (maxWidth > scaleSelectWidth) {
const container = items.scaleSelect.parentNode;
container.style.setProperty("--scale-select-width", `${maxWidth}px`);
}
// Zeroing the width and height cause Firefox to release graphics resources
// immediately, which can greatly reduce memory consumption.
canvas.width = 0;
canvas.height = 0;
}
}
export { Toolbar };

13
web/viewer.css
View File

@ -792,11 +792,9 @@ body {
}
.dropdownToolbarButton {
/* Define this variable here, and not in :root, to avoid reflowing the
entire viewer when updating the width. */
--scale-select-width: 140px;
width: var(--scale-select-width);
display: flex;
width: fit-content;
min-width: 140px;
padding: 0;
background-color: var(--dropdown-btn-bg-color);
border: var(--dropdown-btn-border);
@ -811,12 +809,13 @@ body {
.dropdownToolbarButton > select {
appearance: none;
width: inherit;
min-width: inherit;
height: 28px;
font-size: 12px;
color: var(--main-color);
margin: 0;
padding: 1px 0 2px;
padding-inline-start: 6px;
padding-block: 1px 2px;
padding-inline: 6px 38px;
border: none;
background-color: var(--dropdown-btn-bg-color);
}