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

Merge pull request #11570 from Snuffleupagus/zoom_adjustScaleWidth

Browse Source 
Re-factor `Toolbar._adjustScaleWidth` to improve/simplify how the zoom dropdown width is calculated
This commit is contained in:
Tim van der Meij 2020-02-08 20:31:58 +01:00 committed by GitHub
commit 45e2ab80e4
2 changed files with 52 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/toolbar.js
View File

@ -24,8 +24,9 @@ import {
} from "./ui_utils.js";
const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
const SCALE_SELECT_CONTAINER_PADDING = 8;
const SCALE_SELECT_PADDING = 22;
// Keep the two values below up-to-date with the values in `web/viewer.css`:
const SCALE_SELECT_CONTAINER_WIDTH = 140; // px
const SCALE_SELECT_WIDTH = 162; // px
/**
* @typedef {Object} ToolbarOptions
@ -233,30 +234,54 @@ class Toolbar {
pageNumberInput.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
}
_adjustScaleWidth() {
const container = this.items.scaleSelectContainer;
const select = this.items.scaleSelect;
/**
* 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.
* @private
*/
async _adjustScaleWidth() {
const { items, l10n } = this;
animationStarted.then(function() {
// Adjust the width of the zoom box to fit the content.
// Note: If the window is narrow enough that the zoom box is not
// visible, we temporarily show it to be able to adjust its width.
if (container.clientWidth === 0) {
container.setAttribute("style", "display: inherit;");
const predefinedValuesPromise = Promise.all([
l10n.get("page_scale_auto", null, "Automatic Zoom"),
l10n.get("page_scale_actual", null, "Actual Size"),
l10n.get("page_scale_fit", null, "Page Fit"),
l10n.get("page_scale_width", null, "Page Width"),
]);
// The temporary canvas is used to measure text length in the DOM.
let canvas = document.createElement("canvas");
if (
typeof PDFJSDev === "undefined" ||
PDFJSDev.test("MOZCENTRAL || GENERIC")
) {
canvas.mozOpaque = true;
}
let ctx = canvas.getContext("2d", { alpha: false });
await animationStarted;
const { fontSize, fontFamily } = getComputedStyle(items.scaleSelect);
ctx.font = `${fontSize} ${fontFamily}`;
let maxWidth = 0;
for (const predefinedValue of await predefinedValuesPromise) {
const { width } = ctx.measureText(predefinedValue);
if (width > maxWidth) {
maxWidth = width;
}
if (container.clientWidth > 0) {
select.setAttribute("style", "min-width: inherit;");
const width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
select.setAttribute(
"style",
`min-width: ${width + SCALE_SELECT_PADDING}px;`
);
container.setAttribute(
"style",
`min-width: ${width}px; max-width: ${width}px;`
);
}
});
}
const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
maxWidth += 1.5 * overflow;
if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
items.scaleSelect.style.width = `${maxWidth + overflow}px`;
items.scaleSelectContainer.style.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;
canvas = ctx = null;
}
}

6
web/viewer.css
View File

@ -696,8 +696,7 @@ html[dir='rtl'] .dropdownToolbarButton {
}
.dropdownToolbarButton {
width: 120px;
max-width: 120px;
width: 140px;
padding: 0;
overflow: hidden;
background: url(images/toolbarButton-menuArrows.png) no-repeat;
@ -710,7 +709,8 @@ html[dir='rtl'] .dropdownToolbarButton {
}
.dropdownToolbarButton > select {
min-width: 140px;
width: 162px;
height: 23px;
font-size: 12px;
color: rgba(242, 242, 242, 1);
margin: 0;