Understanding the Invoker Commands API for Declarative Button Controls

The Invoker Commands API enables developers to declaratively define button behaviors, providing a streamlined approach to control interactive elements through button activation via clicks or keyboard inputs like spacebar and enter keys.

Core Principles and Implementation

Web developers frequently implement buttons that manage various page components, including popover controls, dialog box manipulation, text formatting functions, and other interactive features.

Traditional approaches have required JavaScript event handlers attached to buttons, which then invoke APIs on target elements. The new API introduces two key properties – commandForElement and command – that enable declarative implementation for specific actions. This approach offers performance benefits for built-in commands since users don’t need to wait for JavaScript download and execution to enable button functionality.

HTML Attribute Reference

• commandfor: Transforms a button element into a command controller for specified interactive elements, accepting the target element’s ID as its value
• command: Defines the specific action to execute on the controlled element, working in conjunction with the commandfor attribute

Programming Interfaces

The API introduces the CommandEvent interface, which represents events triggered when commands are executed. This serves as the event object for command events, firing on elements referenced by the commandForElement property.

Enhanced Interface Extensions

Property Extensions

• HTMLButtonElement.commandForElement: Manages the element controlled by the button, serving as the JavaScript equivalent of the commandfor HTML attribute
• HTMLButtonElement.command: Controls the action performed on the target element, reflecting the command HTML attribute value

Event Handling

The API provides a command event that triggers on elements referenced by controlling buttons, enabling custom response handling.

Practical Implementation Examples

Declarative Popover Controls

Create popover functionality without JavaScript:

<button commandfor=”mypopover” command=”toggle-popover”>Toggle the popover</button>
<div popover>
<button commandfor=”mypopover” command=”hide-popover”>Close</button>
Popover content
</div>

Modal Dialog Management

Implement dialog controls declaratively:

<button commandfor=”mydialog” command=”show-modal”>Show modal dialog</button>
<dialog>
<button commandfor=”mydialog” command=”close”>Close</button>
Dialog Content
</dialog>

Custom Command Implementation

Develop custom behaviors using event listeners:

<button commandfor=”my-img” command=”–rotate-left”>Rotate left</button>
<button commandfor=”my-img” command=”–rotate-right”>Rotate right</button>
<img src=”photo.jpg” alt=”sample image” />

JavaScript event handling for custom commands:

const myImg = document.getElementById(“my-img”);
myImg.addEventListener(“command”, (event) => {
if (event.command === “–rotate-left”) {
myImg.style.rotate = “-90deg”;
} else if (event.command === “–rotate-right”) {
myImg.style.rotate = “90deg”;
}
});