Flightdeck is a collection of lightweight and powerful Javascript modules for common web UI elements. The goal is to bring object-oriented sensibilities to the script-side of the UI. For example, a button in HTML is tied to an instance of the Button class in Flightdeck.
Starchart Labs' web-applications use Flightdeck to power their frontends, and you can too!
import { Button } from '@starchart-labs/flightdeck';
let myButton = new Button('demo-button');
myButton.onClick(() => console.log('hello'));
Creates an instance of Button.
elementId
{string} - The ID of a DOM element on the page to tie to this instance of ButtonloaderHtml
{string} (optional) - An HTML string to display when the button is in the loading state (see onClickAsync)
Sets up a click event for the Button.
func
{function} - A function to be called whenever the button is clicked
Sets up an asynchronous click event for the Button. While the event is being performed, the button will have the class disabled
added to it, and the text of the button will be temporarily replaced by whatever loaderHtml
was specified in the constructor (by default this is <div class="loader"></div>
).
func
{function returns Promise} - A function to be called whenever the button is clicked. This function must return the typePromise
for the loading state to work correctly
import { Modal } from '@starchart-labs/flightdeck';
let myModal = new Modal('demo-modal');
myModal.open();
Creates an instance of Modal. Any DOM children of this Modal with the class modal-close
will be automatically set up with an event listener to close this Modal when clicked. Additionally, the background area around the Modal will also close the Modal when clicked, unless sticky
is set to true.
elementId
{string} - The ID of a DOM element on the page to tie to this instance of Modalsticky
{boolean} (optional) - If sticky is true, clicking the background around the modal will not close it. This is false by default, so the modal can be easily closed.closeFunction
{function} (optional) - A function to be run whenever the modal is closed. For example, to clear out the fields of a form in the modal.
Shows the Modal by adding the class open
to the DOM element.
Closes the Modal by removing the class open
from the DOM element. Will call closeFunction
if one was provided in the constructor.