KeyboardPagedCursorMixin

Overview

Purpose: map the Page Up and Page Down keys to a cursor operation.

This mixin works in the middle of the Elix render pipeline:

events → methods ➞ setState → render DOM → post-render

Expects the component to provide:

• currentIndex state member updatable.
• internal.keydown method, usually defined by KeyboardMixin.

Provides the component with:

• Mappings from page navigation keyboard events to cursor operations.

Usage

import KeyboardPagedCursorMixin from "elix/src/base/KeyboardPagedCursorMixin.js";
class MyElement extends KeyboardPagedCursorMixin(HTMLElement) {}

Example

The following ListBox shows the mixin in use:

The paging behavior is modeled after that of standard Microsoft Windows list boxes, which seem to provide more useful keyboard paging than those in macOS:

• The Page Up and Page Down keys actually move the item cursor, rather than just scrolling. (In single-selection lists, this also moves the selection.) This Windows behavior lets the user see where the selection is, and more easily refine the selection after paging by using the arrow keys.

• Pressing Page Up/Page Down will change the selection to the topmost/bottommost visible item if the selection is not already there. Thereafter, the key will move the selection up/down by a page.

The KeyboardPagedCursorMixin only updates the cursor by setting the cursorIndex state member. It does not itself scroll the component. That responsibility can be fulfilled with CursorInViewMixin.

This mixin relies on internal.keydown being invoked. That will typically be done with KeyboardMixin, but you can also invoke that yourself.