Overlays

Command palette

A search box over the page that finds pages and actions as you type. Press Ctrl + K (Cmd + K on a Mac) on any page of this site to see it.

From HTML

Write the items as links and buttons. This palette opens with the button only, so it does not fight with the one of this site.

HTML

<button class="pw-btn" data-pw-open="#demo-palette">Open the palette</button>

<div class="pw-command" id="demo-palette" data-pw-command data-hotkey="" hidden>
  <div class="pw-command-box" aria-label="Quick actions">
    <div class="pw-command-search">
      <input class="pw-command-input" placeholder="Type a command or search">
    </div>
    <div class="pw-command-list">
      <div class="pw-command-group" data-label="Go to">
        <a class="pw-command-item" href="#main" data-keywords="home start">Dashboard</a>
        <a class="pw-command-item" href="#main" data-keywords="bills payments">Invoices</a>
        <a class="pw-command-item" href="#main" data-keywords="people members">Team</a>
      </div>
      <div class="pw-command-group" data-label="Actions">
        <button class="pw-command-item" data-value="new-invoice">Create an invoice <kbd>N</kbd></button>
        <button class="pw-command-item" data-value="invite">Invite a teammate</button>
        <button class="pw-command-item" data-value="theme">Switch light and dark</button>
      </div>
    </div>
  </div>
</div>
<p class="demo-out" id="demo-palette-out"></p>

JavaScript

document.getElementById('demo-palette').addEventListener('pw:select', function (e) {
  document.getElementById('demo-palette-out').textContent = 'You chose: ' + e.detail.value;
});

From a script

Give a list and the palette is built for you.

HTML

<button class="pw-btn" id="demo-palette-js">Open the scripted palette</button>

JavaScript

var palette = Partwise.command.create({
  hotkey: '',
  items: [
    { label: 'New document', group: 'Create', kbd: 'N', onSelect: function () { Partwise.toast('New document'); } },
    { label: 'New folder', group: 'Create', onSelect: function () { Partwise.toast('New folder'); } },
    { label: 'Billing', group: 'Settings', hint: 'Plan and invoices', keywords: 'payment card', onSelect: function () { Partwise.toast('Billing'); } },
    { label: 'Guide', group: 'Help', href: '../documentation.html' }
  ]
});
document.getElementById('demo-palette-js').addEventListener('click', function () { palette.open(); });

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-hotkey`	`mod+k`	The key that opens it. `mod` is Ctrl, or Cmd on a Mac. Empty switches it off.
`data-empty`	`No results`	Text when nothing matches.
`data-keywords`		On an item: extra words to find it by.
`data-value`		On an item: the value sent with `pw:select`.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:select`	With `item` and `value`. Call `preventDefault()` to keep the palette open.
`pw:open, pw:close`	On the palette.

From your script

var p = Partwise.get('#demo-palette', 'command');
p.open(); p.close(); p.toggle();
p.refresh();    // after you add or remove items

Keyboard

Key	Action
`Ctrl` `K`	Open or close (Cmd + K on a Mac)
`Down` `Up`	Next and previous result
`Enter`	Choose the marked result
`Esc`	Close

Good to know

Every word you type must be in the item text, its keywords or its hint. Matches in the text are marked.
The number of results is announced to screen readers.
The search runs in the browser over the items in the page. For a search on your server, fill the list from your own code and call refresh().

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/16-command.css, js/16-command.js, css/12-dialog.css (animations).