Swap

Simple element classname swapping.

Demos
Options
Methods
Events
Styles

Demos

Basic

Basic

Swap classes on a target element.

<!-- Demo coming soon -->

import { Swap, Utils } from 'Formstone';

Utils.ready(() =&gt; {
  // Demo coming soon
});

/* Demo coming soon */

Options

Set instance options by passing a valid object at initialization, or to the public .defaults() method. Custom options for a specific instance can also be set by attaching a data-swap-options attribute containing a properly formatted JSON object to the target element.

Name	Type	Default	Description
`classes`	`object`	`...`	State classes applied by the plugin
`classes.enabled`	`string`	`'fs-swap-enabled'`	Class applied when instance is enabled
`classes.active`	`string`	`'fs-swap-active'`	Class applied when instance is active
`classes.inactive`	`string`	`'fs-swap-inactive'`	Class applied when instance is inactive
`collapse`	`boolean`	`true`	Allow instance to collapse
`maxWidth`	`string \| number`	`Infinity`	Maximum viewport width to enable plugin
`minWidth`	`string`	`'0px'`	Width to auto-enable plugin

Data attributes can be used for instance setup.

Name	Type	Description
`data-swap-options`	`string` (JSON)	JSON encoded object containing instance options
`data-swap-target`	`string`	Selector for element(s) that should share swap state classes
`data-swap-group`	`string`	Group key for mutually exclusive swap behavior
`data-swap-linked`	`string`	Link key for synchronized swap instances
`data-swap-active`	`string`	Marks an instance as active by default when enabled

Methods

Methods are publicly available to all active instances, unless otherwise stated.

Name	Description
`.activate()`	Activates instance
`.construct()`	Initializes plugin on target elements
`.deactivate()`	Deactivates instance
`.defaults()`	Sets default options for future initialization
`.destroy()`	Removes plugin and all related data
`.disable()`	Disables instance
`.enable()`	Enables instance

.activate()

Activates instance.

Parameters

Name	Type	Default	Description
`internal`	`boolean` (optional)	`false`	Internal flag to prevent linked recursion

Examples

el.Swap.activate();

.construct()

Initializes plugin on target elements.

Returns

Type	Description
`NodeList`	NodeList of target elements

Parameters

Name	Type	Default	Description
`selector`	`string` (required)	`''`	Selector string to target
`options`	`object` (optional)	`{}`	Object containing instance options

Examples

let targets = Swap.construct('.js-swap');
Swap.construct('.js-swap', { collapse: false });

.deactivate()

Deactivates instance.

Parameters

Name	Type	Default	Description
`internal`	`boolean` (optional)	`false`	Internal flag to prevent linked recursion

Examples

el.Swap.deactivate();

.defaults()

Sets default options for future initialization.

Parameters

Name	Type	Default	Description
`options`	`object` (required)	`{}`	Object containing default options

Examples

Swap.defaults({
  collapse: false
});

.destroy()

Removes plugin and all related data.

Examples

el.Swap.destroy();

.disable()

Disables instance.

Parameters

Name	Type	Default	Description
`internal`	`boolean` (optional)	`false`	Internal flag to prevent linked recursion

Examples

el.Swap.disable();

.enable()

Enables instance.

Parameters

Name	Type	Default	Description
`internal`	`boolean` (optional)	`false`	Internal flag to prevent linked recursion

Examples

el.Swap.enable();

Events

Events are triggered on the target instance's element, unless otherwise stated.

Name	Description
`swap:activate`	Instance activated
`swap:deactivate`	Instance deactivated
`swap:enable`	Instance enabled
`swap:disable`	Instance disabled

Styles

Classes allow deeper customization and indicate the current state of a specific instance.

Classname	Type	Description
`.fs-swap-enabled`	`modifier`	Indicates enabled state
`.fs-swap-active`	`modifier`	Indicates active state
`.fs-swap-inactive`	`modifier`	Indicates inactive state