Customize WebViewer Keyboard Shortcuts

[Matt Parizeau]

Q:

We want to override the default keyboard controls for the WebViewer, specifically change the up and down arrow key to scroll rather than page down/up.

Can you provide pointers how to do this – is it easily customizable?

A:

To override the WebViewer keyboard shortcuts you can take a look at ReaderControl.js and look for $(exports).keydown(...)

To get rid of the page changing on up and down arrow keys you could remove the parts where it says e.which === upArrowKey and e.which === downArrowKey.  You could add your own shortcuts or modify any others here as well.

[Matt Parizeau]

Here is an example of some code to allow scrolling with up/down in continuous display modes and moving between pages in non-continuous modes.

if (!exports.utils.isEditableElement($(document.activeElement))) {
    var displayMode = me.docViewer.GetDisplayModeManager().GetDisplayMode();
    if (displayMode.IsContinuous()) {
        // scroll
        var $viewerElement = $(viewerElement);
        if (e.which === upArrowKey) {
            $viewerElement.scrollTop($viewerElement.scrollTop() - 30);
        } else if ( e.which === downArrowKey) {
            $viewerElement.scrollTop($viewerElement.scrollTop() + 30);
        }
    } else {
        var currentPage = me.docViewer.GetCurrentPage();
        if (/*e.which === leftArrowKey ||*/ e.which === upArrowKey) {
            if (currentPage > 1) {
                me.docViewer.SetCurrentPage(currentPage - 1);
            }
        } else if (/*e.which === rightArrowKey ||*/ e.which === downArrowKey) {
            if (currentPage <= me.docViewer.GetPageCount()) {
                me.docViewer.SetCurrentPage(currentPage + 1);
            }
        }
    }
}