Frontdrop

Frontdrop provides access to an elevated surface providing additional app functionality such as filtering items, account access or displaying search results.

Example
Confirm Button
Swipeable
Peekable
Methods
Options
HTML Initialization
CSS Customization

Example

A Frontdrop can be created via Frontbx's Container with the Frontdrop method:

const frontdrop = frontbx.Frontdrop( {
    content : '...',
});

Confirm Button

Pass a text value to confirmBtn to add a persistent confirmation button a Frontdrop. Additionally, if the Frontdrop requires validation to be closed you can pass a callback to callbackValidate to run your own validation and validate if the Frontdrop should close.

const frontdrop = frontbx.Frontdrop( {
    content          : '...',
    confirmBtn       : 'Confirm Choice',
    callbackValidate : () => {
        //if (some condition) return false;
        return true;
    }
});

Swipeable

By default, the Frontdrop element itself is Swipeable when expanded. You can make the a frontdrop swipeable with on the window when open or closed by adding the swipeable option. This means you can open and close the frontdrop by simply swiping up or down on the window itself at any time.

const frontdrop = frontbx.Frontdrop({
    content   : '...',
    swipeable : true
});

Peekable

By default, the Frontdrop element will hide completely when collapsed. You can make the a frontdrop collapse to an edge by passing peekable: true in the options. This allows a remain persistent through user-actions.

const frontdrop = frontbx.Frontdrop({
    content   : '...',
    peekable  : true
});

Methods

Once a Frontdrop instance is created, there are a few methods to interact with the drawer:

The open method will animate and open the drawer:

frontdrop.open();

The close method will animate and close the drawer:

frontdrop.close();

The direction method returns the drawer state which will be either collapsed or expanded:

if (frontdrop.state() === 'collapsed')
{

}

The state method returns the drawer state which will be either collapsed or expanded:

if (frontdrop.state() === 'collapsed')
{

}

The opened method returns true if the drawer is open or false if not

if (frontdrop.opened())
{

}

The closed method returns true if the drawer is closed or false if not

if (frontdrop.closed())
{

}

Finally the destroy method completely removes the drawer from the DOM and all related event listeners:

frontdrop.destroy()

Options

There are a number of options for a Frontdrop depending on a given purpose. The table below outlines the available options:

Option key	Var Type	Behavior	Required	Default
`content`	`string` `array` `nodelist` `HTMLElement`	Content to be displayed inside the drawer	`no`	`null`
`peekable`	`Boolean`	Enables peekable drawer.	`no`	`false`
`swipeable`	`boolean`	Enables swipes on the window to open/close drawer	`no`	`false`
`state`	`string`	Default state when first created can be either `collapsed` or `expanded`	`no`	`expanded`
`overlay`	`string`	Either `light` or `dark`	`no`	`dark`
`easing`	`string`	JavaScript easing pattern in `camelCase`	`no`	`easeOut`
`animationTime`	`Integer`	Animation duration in milliseconds.	`no`	`250`
`classes`	`string`	Additional classes to pass to the drawer wrapper	`no`	`dark`
`callbackBuilt`	`function`	Callback function to be called when drawer is first built but not rendered.	`no`	`null`
`callbackRender`	`function`	Callback function to be called when drawer is first rendered into DOM.	`no`	`null`
`callbackOpen`	`function`	Callback function to be called when drawer is opened.	`no`	`null`
`callbackClose`	`function`	Callback function to be called when drawer is closed.	`no`	`null`
`callbackValidate`	`function`	Callback function to validate if drawer can be closed. Must return boolean	`no`	`null`

Note that all callbacks callbacks will receive the following arguments: containerWrap, drawer, overlay, bodyWrap

HTML Initialization

For basic use-cases where access to the underlying JavaScript is not required, Frontdrop can be enabled through HTML markup via an anchor element with the .js-frontdrop-trigger class.

For basic HTML string content, simply use the data-content attribute with any required string content to populate the Frontdrop.

For more complex requirements point to the id of a hidden target element element in the DOM with the data-content attribute. Remember to always include the # character before the ID as this differentiates it from it being interpenetrated as a string.

All other options can be set through data-attributes on the anchor element in hyphen-case. For example to set the closeAnywhere option, you would set the data-close-anywhere="true" attribute.

<button type="button" class="btn js-frontdrop-trigger" data-content="#fd-content">Toggle</button>

<div id="fd-content">...</ul>

CSS Customization

Frontdrop use a combination of both local CSS variables and Sass variables on .frontdrop-wrap, .frontdrop-overlay for enhanced component customization and styling.

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss

$frontdrop-height:               75vh !default;
$frontdrop-peekable-height:      50px !default;
$frontdrop-radius:               10px !default;
$frontdrop-overlay-bg:           rgba(255, 255, 255, 0.8) !default;
$frontdrop-overlay-bg-dark:      rgba(0, 0, 0, 0.5) !default;

scss/components/_frontdrop.scss

.drawer-container.frontdrop.drawer-bottom
{
    // Drawer
    --fbx-drawer-bg: #{$drawer-bg};
    --fbx-drawer-width: var(--fbx-frontdrop-height);
    --fbx-drawer-size-peekable: #{$frontdrop-peekable-height};

    // Overlay
    --fbx-drawer-overlay-bg: #{$frontdrop-overlay-bg};
    --fbx-drawer-overlay-bg-dark: #{$frontdrop-overlay-bg-dark};

    // Frontdrop
    --fbx-frontdrop-height: #{$frontdrop-height};
    --fbx-frontdrop-radius: #{$frontdrop-radius};
}