Command Palette

A search box for the whole app: press ⌘K (Ctrl K), type a few letters, and go to a page or run an action without looking through menus. Every command must also be reachable another way: the palette is a shortcut, not the only door. Specification: docs/components/command-palette.md

Basics

A modal <dialog class="canon-command-palette"> opened by a button with command="show-modal"; its aria-keyshortcuts (Meta+K Control+K) opens it from anywhere on the page. Inside: a .canon-command-search row (an icon and a search input), then a .canon-command-list of .canon-command-groups, each with a heading and its items. An item is a link (it goes) or a button (it does): an icon, a .canon-command-label, an optional .canon-command-hint and a Kbd for its own shortcut. Type to narrow the list (words in any order, accents ignored; data-keywords adds words to match), ↑ ↓ to move, Enter to run; it closes, as it does with Esc or a click beside it. Try "inv", "dark" or "ada".

Actions

People

↑ ↓ to move Enter to run Esc to close

The app's results

Items written in the page are filtered by canon.js. For results only the app knows (people, records), it listens to canon-search (detail: { query }, a quarter second after typing stops) and puts items in a group with data-remote: canon.js shows them as they are, marks their words and keeps the keyboard working. Above, the People group works this way.

An item runs as a click: a link goes, a button fires its listeners; the palette then closes, unless a listener cancels the click or the item has data-keep-open. The dialog's returnValue is the item's data-value, else its text.

Edge cases

Nothing matches: the empty message says so, with what was typed. Right to left, everything runs from the right.