Skip to main content

buildfire.components.fabSpeedDial

The FAB Speed Dial is typically used to provide users with quick access to a set of related actions by presenting a menu when the FAB button is tapped. The FAB Speed Dial allows users to focus on the content of the app without being distracted by a cluttered interface.

FAB speed-dial dark demo                        FAB speed-dial light demo

tip

This component adapts to your theme colors automatically. However, you still can override the colors if you need to.

Requirements

Widget

<head>
<!-- CSS -->
<link rel="stylesheet" href="../../../styles/components/fabSpeedDial/fabSpeedDial.css" />

<!-- JS -->
<script src="../../../scripts/buildfire.min.js"></script>
<script src="../../../scripts/buildfire/components/fabSpeedDial/fabSpeedDial.js"></script>
</head>

In your widget body, create an html container element for the FAB speed dial.

<body>
<div id="fabSpeedDialContainer"></div>
</body>

Methods

fabSpeedDial()

new buildfire.components.fabSpeedDial(selector<String>, options<Object>);

Class constructor method which initializes the FAB component.

warning

Only one FAB component can be active at once

Arguments

NameTypeRequiredDescriptionDefault
selectorstringyesCSS selector of the element that will contain the component
optionsobjectyesOptions object

options

NameTypeRequiredDescriptionDefault
mainButtonobjectnoAn object to customize the main FAB button
buttonsarraynoArray of FAB button objects
showOverlaybooleannoA visual element that is placed over the rest of the app when a FAB speed dial is openedtrue
info

You must provide either mainButton or buttons

options.mainButton

NameTypeRequiredDescriptionDefault
contenthtmlnoThe content that will render in the main FAB speed dial button
typestringnoChanges the button background color. Options: default, primary, success, info, warning, dangerprimary
info

If the button content has an image, the recommended size is 56px by 56px

options.buttons

NameTypeRequiredDescriptionDefault
contenthtmlyesThe content will render in the FAB speed dial button
labelstringnoThis label will be shown next to the FAB speed dial button
typestringnoChanges the button background color. Options: default, primary, success, info, warning, dangerprimary
onClickfunctionnoAction to be executed when the button is clicked
info

If the button content has an image, the recommended size is 68px by 68px

warning

The buttons length should be up to 6 buttons. If exceeded, the component will only show the first 6 buttons.

If only one button is provided, it can be used as the main button if mainButton is not passed.

Example

const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', {
showOverlay: true,
mainButton: {
content: '<i class="icon">add</i>',
type: 'success',
},
buttons: [
{
content: `<img src=${buildfire.imageLib.cropImage('https://app.buildfire.com/app/media/avatar.png', { width: 68, height: 68 })} alt="person">`,
label: 'Alex Park',
type: 'success',
onClick: () => console.log('button clicked'),
data: {
id: '123456789abcd',
firstName: 'Alex',
lastName: 'Park',
age: '23',
},
},
{
content: '<i class="icon" style="color:blue;">home</i>',
label: 'Home',
type: 'primary',
onClick: () => console.log('button clicked'),
},
{
content: '<span class="icon danger" style="font-size:30px; font-weight:700;">!</span>',
label: 'Info',
type: 'info',
onClick: () => console.log('button clicked'),
},
],
});

open()

function fabSpeedDial.open();

Opens the FAB speed dial buttons.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Open the FAB speed dial
fabSpeedDial.open();

close()

function fabSpeedDial.close();

Close the FAB speed dial buttons.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Close the FAB speed dial
fabSpeedDial.close();

isOpen()

function fabSpeedDial.isOpen();

Return true if the speed dial FAB is opened, and return false if it’s closed.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Check if the FAB speed dial is open
const currentState = fabSpeedDial.isOpen() ? 'open' : 'closed';

console.log(`The FAB speed dial is ${currentState}`);

destroy()

function fabSpeedDial.destroy();

Destroys the speed dial component and removes its elements from the DOM.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Destroy FAB Component
fabSpeedDial.destroy();

Handlers

The following event handlers can be assigned:

onMainButtonClick()

function fabSpeedDial.onMainButtonClick(event<Object>)

Triggered when a FAB speed dial's main button is clicked. Passes the main button data in the event parameter.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Listen for main button click
fabSpeedDial.onMainButtonClick = event => {
console.log(`FAB speed dial main button clicked`, event);
};
note

You can use this handler only if options doesn't contain buttons


onOpen()

function fabSpeedDial.onOpen()

Triggered when the FAB speed dial is opened.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Listen for the component to open
fabSpeedDial.onOpen = event => {
console.log(`FAB speed dial opened`);
};

onClose()

function fabSpeedDial.onClose()

Triggered when the FAB speed dial is closed.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Listen for component to close
fabSpeedDial.onClose = event => {
console.log(`FAB speed dial closed`);
};

onButtonClick()

function fabSpeedDial.onButtonClick(event<Object>)

Triggered when a FAB speed dial button is clicked. Passes the button data in the event parameter.

// Set up component options
const options = {
mainButton: {
content: '<i class="icon">add</i>',
},
buttons: [
{
content: '<i class="icon">home</i>',
label: 'Home',
onClick: () => console.log('Home button clicked'),
},
{
content: '<span class="icon danger">!</span>',
label: 'Info',
onClick: () => console.log('Info button clicked'),
},
],
};

// Instantiate FAB Component
const fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

// Listen for button clicks
fabSpeedDial.onButtonClick = event => {
console.log('FAB speed dial button clicked');
};

Arguments

NameTypeDescription
eventobjectThe clicked button object

Full Example

A working example of a state-managed FAB Component that shows a customized user button, offers navigation to different plugins, and can open the user profile or prompt for login.

//*********************************** BUTTONS ***********************************//

// Default buttons
const goHomeButton = {
content: '<i class="icon success">Home</i>',
label: 'Go Home',
type: 'primary',
onClick: () => buildfire.navigation.navigateHome(),
};
const openSocialWallButton = {
content: '<i class="icon" style="color:blue;">Sign Up</i>',
label: 'Sign Up',
type: 'primary',
onClick: () => buildfire.navigation.openWindow("https://buildfire.com", "_system"),
};

// Build a profile button for the user, or a guest profile if not logged in
const buildProfileButton = user => {

const { userId, firstName, lastName } = user;

// Set default guest profile image
let imageUrl = 'https://app.buildfire.com/app/media/avatar.png';

// Get logged in user profile image
if (userId !== 'guest') {
imageUrl = buildfire.auth.getUserPictureUrl({ userId });
}
// Use CDN for cropping
let profilePicture = buildfire.imageLib.cropImage(imageUrl, { width: 68, height: 68 });

// Return the profile button object
const profileButton = {
content: `<img src="${profilePicture}" alt="person">`,
label: `${firstName} ${lastName}`,
type: 'success',
onClick: () => openUserProfile(userId),
data: user
};

return profileButton;

// Open the user profile, or prompt for login
function openUserProfile(currentUserId) {
if (userId !== 'guest') return buildfire.auth.openProfile(currentUserId);

buildfire.dialog.toast({
message: "Please log in to view your profile",
actionButton: {
text: 'Login',
action: buildfire.auth.login
},
duration: 1.5e3 // 1.5 seconds
});
}
};

//*************************** COMPONENT INITIALIZATION ***************************//

// Keep FAB Component reference for re-renders
let fabSpeedDial;

// Sets up a new FAB Component, and replaces the existing one if active
const initializeFabSpeedDial = user => {
console.log('initializing FAB Component', user);
// Set up FAB Speed Dial options
const options = {
showOverlay: true,
mainButton: {
content: '<i class="icon">add</i>',
type: 'success',
},
buttons: [openSocialWallButton, goHomeButton, buildProfileButton(user)]
};

let isOpen = false;

if (fabSpeedDial) {
// Save open state if re-rendering
isOpen = fabSpeedDial.isOpen();
// Destroy existing FAB Component
fabSpeedDial.destroy();
}

// initializes the FAB speed dial component.
fabSpeedDial = new buildfire.components.fabSpeedDial('#fabSpeedDialContainer', options);

if (isOpen) fabSpeedDial.open();

// Triggered when the FAB speed dial is opened.
fabSpeedDial.onOpen = () => {
console.log('Triggered on open FAB speed dial');
};
// Triggered when the FAB speed dial is closed.
fabSpeedDial.onClose = () => {
console.log('Triggered on close FAB speed dial');
};
// Triggered when the main FAB speed dial button is clicked.
fabSpeedDial.onMainButtonClick = event => {
console.log(`FAB speed dial main button clicked`, event);
};
// Triggered when a FAB speed dial button is clicked.
fabSpeedDial.onButtonClick = event => {
console.log('Triggered on FAB speed dial button clicked', event);
};
};

//**************************** AUTH STATE MANAGEMENT ****************************//

// Guest Profile
const guest = {
userId: 'guest',
firstName: 'Guest',
lastName: 'User',
};

// Get the logged-in user. If not logged in, build guest profile.
// Entry point of this example triggers the initial render of the component
buildfire.auth.getCurrentUser((err, user) => {
if (err) return console.error(err);
initializeFabSpeedDial(user || guest);
});

// Rebuild FAB Component with user profile on login
buildfire.auth.onLogin(user => {
initializeFabSpeedDial(user);
}, true);

// Rebuild FAB Component with a guest profile on logout
buildfire.auth.onLogout(() => {
initializeFabSpeedDial(guest);
}, true);