flyout-overlay-js v0.10.0
Flyouts-js
Plugin for creating and managing collapsible content areas like additional information screens or tutorials
Table of contents
- Installation
- Examples
- Public Methods
- Flyouts - Class
- .collapseAll()
- .registerFlyout()
- .getFlyout()
- .getFlyouts()
- Flyout - Instance
- .toggle()
- .collapse()
- .isExpanded()
- InitFlyout()
- Flyouts - Class
- HTML Attributes
Installation
You can use NPM to download package into your project
npm install flyout-overlay-js
OR you can import the module directly in your project with ES6 Modules
<script type="module">
import { Flyouts, initFlyouts } from './flyout-overlay-js/flyouts.js';
</script>
Basic Usage
See '/demo/basic-usage.html' in repo for complete example
CSS
<link rel="stylesheet" href="./flyout-overlay-js/flyouts.css">
HTML
<button data-flyout-trigger data-flyout-target="exampleFlyout">
<strong>></strong> Open Flyout
</button>
<div class="flyout-containers">
<div class="flyout-container" data-flyout-container="collapsed" data-flyout-target="exampleFlyout">
<h1>Flyout</h1>
<button type="button" data-close-flyout="exampleFlyout">
<strong>×</strong> Close
</button>
</div>
</div>
JavaScript
<script type="module">
// ES6 Module Import
import {Flyouts, initFlyouts} from '/flyout-overlay-js/flyouts.js';
// Initialize Plugin
initFlyouts();
</script>
Custom Trigger Event
See '/demo/basic-usage.html' in repo for complete example
By default the trigger event for modals is a click event. However, you can use other events by updating the data-flyout-trigger attribute.
HTML
<button data-flyout-trigger="mouseover" data-flyout-target="exampleFlyout">
<strong>></strong> Open Flyout
</button>
<div class="flyout-containers">
<div class="flyout-container" data-flyout-container="collapsed" data-flyout-target="exampleFlyout">
<h1>Flyout</h1>
<button type="button" data-close-flyout="exampleFlyout">
<strong>×</strong> Close
</button>
</div>
</div>
Custom Callback
See '/demo/basic-usage.html' in repo for complete example
The default event for triggering expandable expansion can be overwritten by adding data-flyout-override and data-flyout-callback attributes to the expandable trigger. If you a developer does this, they become responsible for toggling the expandable expansion exchange for being able to add custom behavior around the interaction.
HTML
<div class="flyout-container" data-flyout-container="collapsed" data-flyout-target="exampleFlyout" data-flyout-override=true data-flyout-callback="exampleCallback">
<h1>Flyout</h1>
<button type="button" data-close-flyout="exampleFlyout">
<strong>×</strong> Close
</button>
</div>
JavaScript
<script type="module">
// ES6 Module Import
import { Flyouts, initFlyouts } from './flyout-overlay-js/flyouts.js';
// Initialize Plugin
initFlyouts();
// Custom callback where the developer has to trigger the flyout's visibility
window.exampleCallback = ( event ) => {
let targetName = event.target.getAttribute( 'data-flyout-target' );
Flyouts.getFlyout( targetName ).toggle();
alert( 'Custom callback triggered on ' + targetName + '; expanded = ' + Flyouts.getFlyout( targetName ).getSettings().expanded );
}
</script>
Public Methods
Object | Method | Description |
---|---|---|
Flyouts | .collapseAll() | Collapses all flyouts outside of accordions |
.getFlyout( name ) | Expected string to equal value of data-flyout-target attribute on expandable HTML element. Returns single HTML element for corresponding expandable. | |
.getFlyouts() | Returns HTMLCollection of all flyouts. | |
.registerFlyout( HTMLelement ) | Expected HTML element; Takes an HTML element representing the expandable. The attributes are read from the expandable element and used to build a expandable instance. | |
Flyout | .toggle() | Toggles the value of the data attribute data-flyout-container between "collapsed" and "expanded" |
.collapse() | Changes the value of the data attribute data-flyout-container to "collapsed" | |
.isExpanded() | Returns boolean of true or false representing whether the expandable is expanded or collapsed | |
initFlyouts() | Initializes flyouts in the document by calling the Flyouts.registerFlyout() HTML element. |
HTML Attribute
HTML Element | Attribute | Description |
---|
(Pending)