Class: Flyout

Embeds an html flyout component to house off canvas content that overlays a container pain from either the right or the left.

Parameters:

Name Type Description

options

object

The options for the flyout.

Properties

Name	Type	Description
`animationDelay`	number	Total runtime of close animation. must be synced with css.
`closeButtonClasses`	string	Classes for the close button.
`closeButtonTitle`	string	Text for the close button title.
`closeOnOutsideClick`	boolean	Close the flyout on a click outside of it?
`closeOnOutsideClickExceptions`	Array	Array of selectors to ignore when checking for outside clicks.
`content`	string	The html content.
`expandable`	boolean	Whether the flyout shows an extra trigger to allow expanding to a larger width (set below).
`expandableTitle`	string	Title/a11y text for the expandable button.
`expandableWidth`	number	Width to expand to if expandable is true.
`description`	string	The optional description for the flyout.
`desktopWidth`	number	Desktop width in percent.
`direction`	string	Direction to fly in from, left or right.
`id`	string	Id for the flyout.
`insertPosition`	string	Insert position relative to target.
`lockBody`	boolean	Whether to lock body scroll when open.
`maxWidth`	number	Max width in pixels.
`mobileBreakpoint`	number	Mobile breakpoint.
`mobileWidth`	number	Mobile width in percent.
`onClose`	function	Function to fire when closed.
`onOpen`	function	Function to fire when opened.
`position`	string	Fixed or absolute positioning.
`renderOnInit`	boolean	Render on initialization?
`showDivider`	boolean	Show the divider below optional title?
`simplebar`	boolean	Enable the simple bar ui for the body content scroll?
`target`	string	The selector to append the flyout to.
`title`	string	The optional title for the flyout.
`triggers`	string	The selector[s] of the trigger that shows it.
`wrapperClasses`	string	Additional classes for the wrapper.
`zIndex`	number	Z-index for the flyout.

Since: 1.0.5
Source: modules/Flyout/index.js, line 120

Returns:

The class instance.

Type:: Class

Example

import Flyout from '@gravityforms/components/html/admin/modules/Flyout';

function Example() {
     const flyoutInstance = new Flyout( {
         id: 'example-flyout',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
         theme: 'cosmos',
     } );

     // Some time later we can render it. This is only done if we set renderOnInit to false.
     // If true it will render on initialization.
     flyoutInstance.init();
}

Members

(static) closeFlyout

Closes the flyout and fires the onClose function that can be passed in. Can be used by external developers by firing the method on the instance. Also closes all instances if the event 'gform/flyout/close-all' is fired on the document.

Since: 1.0.5
Source: modules/Flyout/index.js, line 281

(static) handleExpandable

Handles expanding the flyout on a trigger click if the option is enabled.

Since: 1.0.5
Source: modules/Flyout/index.js, line 468

(static) handleKeyEvents

Handles accessibility focus looping on the flyout using the focusLoop util.

Since: 1.0.5
Source: modules/Flyout/index.js, line 376

(static) handleResize

Handle window resize events for the flyout

Since: 1.0.5
Source: modules/Flyout/index.js, line 484

(static) handleTriggerClick

Handles opening/closing the flyout on a trigger click.

Since: 1.0.5
Source: modules/Flyout/index.js, line 394

(static) maybeCloseFlyout

Closes all instances except the one that gets passed the activeId when the event 'gform/flyout/close' is fired on the document.

Since: 1.0.5
Source: modules/Flyout/index.js, line 320

Methods

(static) bindEvents() → {void}

Bind events to the component.

Since: 1.0.5
Source: modules/Flyout/index.js, line 540

Returns:

Type:: void

(static) expandFlyout() → {void}

Expands the flyout to the defined expandableWidth while removing the max-width setting.

Since: 1.0.5
Source: modules/Flyout/index.js, line 415

Returns:

Type:: void

(static) flyoutTemplate(options) → {string}

The template function that returns html for the flyout. Options below are passed from constructor and described there.

Parameters:

Name Type Description

options

object

The options for the flyout.

Properties

Name	Type	Description
`closeButtonClasses`	string	The classes for the close button.
`closeButtonTitle`	string	The title for the close button.
`content`	string	The content for the flyout.
`description`	string	The description for the flyout. Found under the title in the header.
`desktopWidth`	number	The flyout desktop width in percentage.
`direction`	string	Direction to fly in from, left or right.
`expandable`	boolean	Whether the flyout shows an extra trigger to allow expanding to a larger width.
`expandableTitle`	string	The title for the expandable trigger.
`id`	string	The id for the flyout.
`maxWidth`	number	The flyout max width in pixels.
`mobileBreakpoint`	number	The breakpoint for mobile in pixels.
`mobileWidth`	number	The flyout mobile width in percentage.
`position`	string	The position of the flyout, fixed or absolute positioning
`showDivider`	boolean	Whether to show the divider between the header and content.
`simplebar`	boolean	Whether to use simplebar for the content.
`title`	string	The title for the flyout.
`wrapperClasses`	string	The classes for the wrapper.
`zIndex`	number	The z-index for the flyout.

Since: 1.0.5
Source: modules/Flyout/index.js, line 16

Returns:

Type:: string

Example

import { flyoutTemplate } from '@gravityforms/components/html/admin/modules/Flyout';

function Example() {
     const flyoutTemplateHTML = flyoutTemplateTemplate( options );
     document.body.insertAdjacentHTML( 'beforeend', flyoutTemplateHTML );
}

(static) init() → {void}

Initialize the component.

Since: 1.0.5
Source: modules/Flyout/index.js, line 581

Fires:

event:gform/flyout/post_render

Returns:

Type:: void

(static) render() → {void}

Renders the component into the dom.

Since: 1.0.5
Source: modules/Flyout/index.js, line 517

Returns:

Type:: void

(static) showFlyout() → {void}

Opens the flyout and fires the onOpen function that can be passed in.

Since: 1.0.5
Source: modules/Flyout/index.js, line 249

Returns:

Type:: void

(static) shrinkFlyout() → {void}

Returns the flyout to its natural width. The complexity comes from handling a mix of max-width (which doesn't animate) and % widths for responsive.

Since: 1.0.5
Source: modules/Flyout/index.js, line 445

Returns:

Type:: void

(static) storeElements() → {void}

Stores useful HTMLElements on the instance in the elements namespace after render.

Since: 1.0.5
Source: modules/Flyout/index.js, line 496

Returns:

Type:: void

(static) updateFlyoutWidth() → {void}

Hides the expander button if the flyout fills its available space.

Since: 1.0.5
Source: modules/Flyout/index.js, line 341

Returns:

Type:: void

new Flyout(options) → {Class}

Properties

Members

(static) closeFlyout

(static) handleExpandable

(static) handleKeyEvents

(static) handleResize

(static) handleTriggerClick

(static) maybeCloseFlyout

Methods

(static) bindEvents() → {void}

(static) expandFlyout() → {void}

(static) flyoutTemplate(options) → {string}

Properties

(static) init() → {void}

(static) render() → {void}

(static) showFlyout() → {void}

(static) shrinkFlyout() → {void}

(static) storeElements() → {void}

(static) updateFlyoutWidth() → {void}