Add scrolling modes to web viewer

In addition to the default scrolling mode (vertical), this commit adds
horizontal and wrapped scrolling, implemented primarily with CSS.
This commit is contained in:
Ryan Hendrickson 2018-05-14 23:10:32 -04:00
parent 65c8549759
commit 91cbc185da
17 changed files with 665 additions and 27 deletions

View file

@ -15,6 +15,7 @@
import { CursorTool } from './pdf_cursor_tools';
import { SCROLLBAR_PADDING } from './ui_utils';
import { ScrollMode } from './base_viewer';
/**
* @typedef {Object} SecondaryToolbarOptions
@ -76,6 +77,12 @@ class SecondaryToolbar {
eventDetails: { tool: CursorTool.SELECT, }, close: true, },
{ element: options.cursorHandToolButton, eventName: 'switchcursortool',
eventDetails: { tool: CursorTool.HAND, }, close: true, },
{ element: options.scrollVerticalButton, eventName: 'switchscrollmode',
eventDetails: { mode: ScrollMode.VERTICAL, }, close: true, },
{ element: options.scrollHorizontalButton, eventName: 'switchscrollmode',
eventDetails: { mode: ScrollMode.HORIZONTAL, }, close: true, },
{ element: options.scrollWrappedButton, eventName: 'switchscrollmode',
eventDetails: { mode: ScrollMode.WRAPPED, }, close: true, },
{ element: options.documentPropertiesButton,
eventName: 'documentproperties', close: true, },
];
@ -95,9 +102,10 @@ class SecondaryToolbar {
this.reset();
// Bind the event listeners for click and cursor tool actions.
// Bind the event listeners for click, cursor tool, and scroll mode actions.
this._bindClickListeners();
this._bindCursorToolsListener(options);
this._bindScrollModeListener(options);
// Bind the event listener for adjusting the 'max-height' of the toolbar.
this.eventBus.on('resize', this._setMaxHeight.bind(this));
@ -172,6 +180,17 @@ class SecondaryToolbar {
});
}
_bindScrollModeListener(buttons) {
this.eventBus.on('scrollmodechanged', function(evt) {
buttons.scrollVerticalButton.classList.toggle('toggled',
evt.mode === ScrollMode.VERTICAL);
buttons.scrollHorizontalButton.classList.toggle('toggled',
evt.mode === ScrollMode.HORIZONTAL);
buttons.scrollWrappedButton.classList.toggle('toggled',
evt.mode === ScrollMode.WRAPPED);
});
}
open() {
if (this.opened) {
return;