ActionButton Component - fgta5js Documentation

Overview

The ActionButton class provides an elegant way to bind behavior and state (like disabling, showing/hiding, or updating labels) to one or multiple buttons at the same time. It matches the main button by its ID and optionally matches other buttons sharing the same action name via the data-action attribute. It enforces event intercepts so that disabled or hidden buttons reject click events.

HTML Markup

Designate buttons using the class action-button, or with a specific ID and a data-action attribute to group them together.

<button id="btnSave" class="action-button" data-action="save">
  <span class="action-button-icon">💾</span>
  <span class="action-button-text">Save</span>
</button>

<button class="action-button" data-action="save">
  <span class="action-button-text">Another Save Button</span>
</button>

Initialize and attach listener in Javascript:

import ActionButton from './src/components/ActionButton.mjs';

const btnSave = new ActionButton('btnSave', 'save');

btnSave.addEventListener('click', (event) => {
  console.log('Save clicked!');
});

HTML Attributes

Attribute	Values	Description
`data-action`	`String`	An action name keyword used to associate multiple buttons with a single `ActionButton` instance controller.

Properties

Property	Type	Description
`Elements`	`Array<HTMLElement>`	(Read-only) Returns the array of native DOM elements bound to this ActionButton instance.
`disabled`	`Boolean`	Gets or sets the disabled state of all associated buttons. A suspended button cannot be enabled until unsuspended.

Methods

Method	Arguments	Description
`constructor(id, actionname)`	`(id: String, actionname: String = null)`	Creates a new instance. Resolves the element with the given ID and optionally queries other elements matching `data-action="actionname"`.
`isHidden()`	`()`	Returns `true` if the ActionButton has been hidden.
`hide(hidden)`	`(hidden: Boolean = true)`	Shows or hides all bound buttons by toggling the CSS class `hidden`.
`setText(text)`	`(text: String)`	Updates the inner HTML content of all associated buttons.
`addEventListener(event, callback)`	`(event: String, callback: Function)`	Registers an event listener callback on all bound native button elements.
`click()`	`()`	Triggers a programmatical click on the first associated button element, provided it is not disabled.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean = true, keepState: Boolean = false)`	Suspends the button action. If `keepState` is false, suspending disables the buttons and unsuspending enables them.
`isSuspended()`	`()`	Returns `true` if the button action is currently suspended.
`setAttribute(name, value)`	`(name: String, value: String)`	Applies an attribute on all bound DOM button elements and stores it in the local attributes cache.
`getAttribute(name)`	`(name: String)`	Retrieves the attribute value from the local attributes cache.
`removeAttribute(name)`	`(name: String)`	Removes the attribute from both the local cache and all bound DOM button elements.