Commit ae4595d8 authored by Daniel Hosseinian's avatar Daniel Hosseinian Committed by Commit Bot

PDF Viewer Update: Change page with arrows when focused on thumbnails

Split the behavior of left/right from up/down when focused on
thumbnails. The behavior of up/down stay the same, and they will only
change the focus to an adjacent thumbnail when pressed.

Left/right when focused on a thumbnail now also change the page of the
contents, regardless of the presence of a horizontal zoom bar on the
contents.

Additionally, when the page of the contents change while focused on a
thumbnail, the focus is forwarded to the thumbnail of the new most
visible page.

Bug: 652400
Change-Id: I4da7caadbf6eb25899f8f4091047727b3d719daa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2438984Reviewed-by: default avatardpapad <dpapad@chromium.org>
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812624}
parent 503df9e6
...@@ -20,7 +20,10 @@ export class ViewerThumbnailBarElement extends PolymerElement { ...@@ -20,7 +20,10 @@ export class ViewerThumbnailBarElement extends PolymerElement {
static get properties() { static get properties() {
return { return {
activePage: Number, activePage: {
type: Number,
observer: 'activePageChanged_',
},
clockwiseRotations: Number, clockwiseRotations: Number,
...@@ -71,6 +74,29 @@ export class ViewerThumbnailBarElement extends PolymerElement { ...@@ -71,6 +74,29 @@ export class ViewerThumbnailBarElement extends PolymerElement {
FocusOutlineManager.forDocument(document); FocusOutlineManager.forDocument(document);
} }
/**
* Changes the focus to the thumbnail of the new active page if the focus was
* already on a thumbnail.
* @private
*/
activePageChanged_() {
if (this.shadowRoot.activeElement) {
this.getThumbnailForPage_(this.activePage).focusAndScroll();
}
}
/**
* @param {number} pageNumber
* @private
*/
clickThumbnailForPage(pageNumber) {
if (pageNumber < 1 || pageNumber > this.docLength) {
return;
}
this.getThumbnailForPage_(pageNumber).getClickTarget().click();
}
/** /**
* @return {!Array<number>} The array of page numbers. * @return {!Array<number>} The array of page numbers.
* @private * @private
...@@ -88,6 +114,16 @@ export class ViewerThumbnailBarElement extends PolymerElement { ...@@ -88,6 +114,16 @@ export class ViewerThumbnailBarElement extends PolymerElement {
return loadTimeData.getStringF('thumbnailPageAriaLabel', pageNumber); return loadTimeData.getStringF('thumbnailPageAriaLabel', pageNumber);
} }
/**
* @param {number} pageNumber
* @return {ViewerThumbnailElement}
* @private
*/
getThumbnailForPage_(pageNumber) {
return /** @type {ViewerThumbnailElement} */ (this.shadowRoot.querySelector(
`viewer-thumbnail:nth-child(${pageNumber})`));
}
/** /**
* @param {number} page * @param {number} page
* @return {boolean} Whether the page is the current page. * @return {boolean} Whether the page is the current page.
...@@ -152,6 +188,14 @@ export class ViewerThumbnailBarElement extends PolymerElement { ...@@ -152,6 +188,14 @@ export class ViewerThumbnailBarElement extends PolymerElement {
this.shadowRoot.querySelector('viewer-thumbnail:last-of-type').focus({ this.shadowRoot.querySelector('viewer-thumbnail:last-of-type').focus({
preventScroll: true preventScroll: true
}); });
} else if (keyboardEvent.key === 'ArrowRight') {
// Prevent default arrow scroll behavior.
keyboardEvent.preventDefault();
this.clickThumbnailForPage(this.activePage + 1);
} else if (keyboardEvent.key === 'ArrowLeft') {
// Prevent default arrow scroll behavior.
keyboardEvent.preventDefault();
this.clickThumbnailForPage(this.activePage - 1);
} }
} }
} }
......
...@@ -69,6 +69,12 @@ export class ViewerThumbnailElement extends PolymerElement { ...@@ -69,6 +69,12 @@ export class ViewerThumbnailElement extends PolymerElement {
this.removeAttribute('pending'); this.removeAttribute('pending');
} }
/** @return {!HTMLElement} */
getClickTarget() {
return /** @type {!HTMLElement} */ (
this.shadowRoot.querySelector('#thumbnail'));
}
/** /**
* @return {!HTMLCanvasElement} * @return {!HTMLCanvasElement}
* @private * @private
...@@ -164,13 +170,11 @@ export class ViewerThumbnailElement extends PolymerElement { ...@@ -164,13 +170,11 @@ export class ViewerThumbnailElement extends PolymerElement {
const keyboardEvent = /** @type {!KeyboardEvent} */ (e); const keyboardEvent = /** @type {!KeyboardEvent} */ (e);
switch (keyboardEvent.key) { switch (keyboardEvent.key) {
case 'ArrowDown': case 'ArrowDown':
case 'ArrowRight':
// Prevent default arrow scroll behavior. // Prevent default arrow scroll behavior.
keyboardEvent.preventDefault(); keyboardEvent.preventDefault();
this.focusThumbnailNext_(); this.focusThumbnailNext_();
break; break;
case 'ArrowUp': case 'ArrowUp':
case 'ArrowLeft':
// Prevent default arrow scroll behavior. // Prevent default arrow scroll behavior.
keyboardEvent.preventDefault(); keyboardEvent.preventDefault();
this.focusThumbnailPrev_(); this.focusThumbnailPrev_();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment