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

Fix getVisibleElements helper in RTL-locales

Browse Source
This commit is contained in:
Mohamed 2020-10-09 16:20:06 +02:00
parent 88f72d6b1c
commit b7b048e36c
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
test/unit/ui_utils_spec.js
View File

@ -639,12 +639,12 @@ describe("ui_utils", function () {
// This function takes a fixed layout of pages and compares the system under // This function takes a fixed layout of pages and compares the system under
// test to the slower implementation above, for a range of scroll viewport // test to the slower implementation above, for a range of scroll viewport
// sizes and positions. // sizes and positions.
function scrollOverDocument(pages, horizontally = false) { function scrollOverDocument(pages, horizontally = false, rtl = false) {
const size = pages.reduce(function (max, { div }) { const size = pages.reduce(function (max, { div }) {
return Math.max( return Math.max(
max, max,
horizontally horizontally
? div.offsetLeft + div.clientLeft + div.clientWidth ? Math.abs(div.offsetLeft + div.clientLeft + div.clientWidth)
: div.offsetTop + div.clientTop + div.clientHeight : div.offsetTop + div.clientTop + div.clientHeight
); );
}, 0); }, 0);
@ -652,7 +652,7 @@ describe("ui_utils", function () {
// make scrollOverDocument tests faster, decrease them to make the tests // make scrollOverDocument tests faster, decrease them to make the tests
// more scrupulous, and keep them coprime to reduce the chance of missing // more scrupulous, and keep them coprime to reduce the chance of missing
// weird edge case bugs. // weird edge case bugs.
for (let i = 0; i < size; i += 7) { for (let i = -size; i < size; i += 7) {
// The screen height (or width) here (j - i) doubles on each inner loop // The screen height (or width) here (j - i) doubles on each inner loop
// iteration; again, this is just to test an interesting range of cases // iteration; again, this is just to test an interesting range of cases
// without slowing the tests down to check every possible case. // without slowing the tests down to check every possible case.
@ -671,7 +671,7 @@ describe("ui_utils", function () {
clientWidth: 10000, clientWidth: 10000,
}; };
expect( expect(
getVisibleElements(scroll, pages, false, horizontally) getVisibleElements(scroll, pages, false, horizontally, rtl)
).toEqual(slowGetVisibleElements(scroll, pages)); ).toEqual(slowGetVisibleElements(scroll, pages));
} }
} }
@ -737,6 +737,17 @@ describe("ui_utils", function () {
scrollOverDocument(pages, true); scrollOverDocument(pages, true);
}); });
it("works with horizontal scrolling with RTL-documents", function () {
const pages = makePages([
[
[-10, 50],
[-20, 20],
[-30, 10],
],
]);
scrollOverDocument(pages, true, true);
});
it("handles `sortByVisibility` correctly", function () { it("handles `sortByVisibility` correctly", function () {
const scrollEl = { const scrollEl = {
scrollTop: 75, scrollTop: 75,

7
web/base_viewer.js
View File

@ -1006,6 +1006,10 @@ class BaseViewer {
: this._scrollMode === ScrollMode.HORIZONTAL; : this._scrollMode === ScrollMode.HORIZONTAL;
} }
get _isContainerRtl() {
return getComputedStyle(this.container).direction === "rtl";
}
get isInPresentationMode() { get isInPresentationMode() {
return this.presentationModeState === PresentationModeState.FULLSCREEN; return this.presentationModeState === PresentationModeState.FULLSCREEN;
} }
@ -1055,7 +1059,8 @@ class BaseViewer {
this.container, this.container,
this._pages, this._pages,
true, true,
this._isScrollModeHorizontal this._isScrollModeHorizontal,
this._isScrollModeHorizontal && this._isContainerRtl
); );
} }

15
web/ui_utils.js
View File

@ -442,7 +442,8 @@ function getVisibleElements(
scrollEl, scrollEl,
views, views,
sortByVisibility = false, sortByVisibility = false,
horizontal = false horizontal = false,
rtl = false
) { ) {
const top = scrollEl.scrollTop, const top = scrollEl.scrollTop,
bottom = top + scrollEl.clientHeight; bottom = top + scrollEl.clientHeight;
@ -465,11 +466,11 @@ function getVisibleElements(
element.offsetTop + element.clientTop + element.clientHeight; element.offsetTop + element.clientTop + element.clientHeight;
return elementBottom > top; return elementBottom > top;
} }
function isElementRightAfterViewLeft(view) { function isElementNextAfterViewHorizontally(view) {
const element = view.div; const element = view.div;
const elementRight = const elementLeft = element.offsetLeft + element.clientLeft;
element.offsetLeft + element.clientLeft + element.clientWidth; const elementRight = elementLeft + element.clientWidth;
return elementRight > left; return rtl ? elementLeft < right : elementRight > left;
} }
const visible = [], const visible = [],
@ -479,7 +480,9 @@ function getVisibleElements(
? 0 ? 0
: binarySearchFirstItem( : binarySearchFirstItem(
views, views,
horizontal ? isElementRightAfterViewLeft : isElementBottomAfterViewTop horizontal
? isElementNextAfterViewHorizontally
: isElementBottomAfterViewTop
); );
// Please note the return value of the `binarySearchFirstItem` function when // Please note the return value of the `binarySearchFirstItem` function when