`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.

tip

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

Requirements

<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

Name	Type	Required	Description	Default
`selector`	string	yes	CSS selector of the element that will contain the component
`options`	object	yes	Options object

`options`

Name	Type	Required	Description	Default
`mainButton`	object	no	An object to customize the main FAB button
`buttons`	array	no	Array of FAB button objects
`showOverlay`	boolean	no	A visual element that is placed over the rest of the app when a FAB speed dial is opened	true

info

You must provide either mainButton or buttons

`options.mainButton`

Name	Type	Required	Description	Default
`content`	html	no	The content that will render in the main FAB speed dial button
`type`	string	no	Changes the button background color. Options: `default`, `primary`, `success`, `info`, `warning`, `danger`	`primary`

info

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

`options.buttons`

Name	Type	Required	Description	Default
`content`	html	yes	The content will render in the FAB speed dial button
`label`	string	no	This label will be shown next to the FAB speed dial button
`type`	string	no	Changes the button background color. Options: `default`, `primary`, `success`, `info`, `warning`, `danger`	`primary`
`onClick`	function	no	Action 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

Name	Type	Description
`event`	object	The 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);

buildfire.components.fabSpeedDial

Requirements​

Widget​

Methods​

fabSpeedDial() ​

Arguments​

options​

options.mainButton​

options.buttons​

Example​

open() ​

close() ​

isOpen() ​

destroy() ​

Handlers​

onMainButtonClick()​

onOpen()​

onClose()​

onButtonClick()​

Arguments​

Full Example​

`buildfire.components.fabSpeedDial`

Requirements

Widget

Methods

`fabSpeedDial()`

Arguments

`options`

`options.mainButton`

`options.buttons`

Example

`open()`

`close()`

`isOpen()`

`destroy()`

Handlers

`onMainButtonClick()`

`onOpen()`

`onClose()`

`onButtonClick()`

Arguments

Full Example