Mod
JavaScript APIs

Command Palette

The JavaScript API for the Command Palette component.

The mod.command_palette() method automatically attaches event listeners for all <div class="mod-command-palette"></div> tags on the page and handles interaction events for the element.

Method API

// Using mod(-plus).iife.min.js
window.mod.command_palette(element: HTMLElement, options: object);

// Using mod(-plus).esm.min.js
import { command_palette } from 'path/to/mod(-plus).esm.min.js';
command_palette(element: HTMLElement, options: object);

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Command Palette HTML

<div class="mod-command-palette">
  <div class="mod-command-palette-search">
    <i class="mod-icon-search"></i>
    <input autocomplete="off" type="text" name="search" placeholder="Search for a command..." />
  </div>
  <div class="mod-command-palette-results">
    <section class="mod-command-palette-results-section">
      <ul>
        <li data-id="save_file">
          <div class="result-icon">
            <i class="mod-icon-save"></i>
          </div>
          <p class="result-title">Save <span class="result-title-secondary-text">File</span></p>
          <div class="result-keyboard-action">
            <i class="mod-icon-command"></i> S
          </div>
        </li>
        <li data-id="new_project">
          <div class="result-icon">
            <i class="mod-icon-file-plus-2"></i>
          </div>
          <p class="result-title">New Project <span class="result-title-secondary-text">File</span></p>
          <div class="result-keyboard-action">
            <i class="mod-icon-command"></i> N
          </div>        
        </li>
        <li data-id="find_layer">
          <div class="result-icon">
            <i class="mod-icon-layers"></i>
          </div>
          <p class="result-title">Find Layer <span class="result-title-secondary-text">Edit</span></p>
          <div class="result-keyboard-action">
            <i class="mod-icon-command"></i> F
          </div>
        </li>                
      </ul>
    </section>   
  </div>
</div>

Command Palette JavaScript

const element = document.body.querySelector('.mod-command-palette');
window.mod.command_palette(element, {
  events: {
    on_select_item: (item_id, event, selected_node) => {
      console.log({ item_id, event, selected_node });
    },
    on_clear_search: () => {
      console.log('Search cleared');
    }
  }
});

API

target_element HTMLElement required
The .mod-command-palette element to target.
options object
Configuration options for the command palette functionality.
events object
Event callbacks for command palette actions.
on_select_item function
Callback function when an item is selected. Receives (item_id, event, selected_node) as parameters.
on_clear_search function
Callback function when the search is cleared. Receives no parameters.