minsky-dom-state-manager

DomState Manager

Manages states of dom elements, …

State isn’t always easy to track, especially when state changes have to run through different steps in specific order while also performing specific tasks like css class management. States can be defined in advance, called when necessary and listened to when activated. It will apply the defined classes and attributes to a dom element during the step change.

Class type: Manager

Dependencies

• EventDispatcher - 1.0.0
• Ticker - 1.0.0

---

Getting started

DomStateManager can both be instantiated and extended as one wishes.

// Init manager to manage states of .overlay
const mgr = new DomStateManager({
    el: document.querySelector('.overlay'),
});

// add states
mgr.add('visible', [
	{ addClass: 'overlay--prepareForShow' },
	{ addClass: 'overlay--show', removeClass: 'overlay--prepareForShow' }
]);

mgr.add('hidden', [
	{ addClass: 'overlay--prepareForHide', duration: 100 },
	{ addClass: 'overlay--hidden', removeClass: 'overlay--prepareForHide' }
]);

Constructor Parameters

Args

Type: Object Default: {}

Configuration of the instance that will be created

---

Interface

Options

el

Type: DOM Element Default: null

The element that needs to be managed

states

Type: Object Default: null

A collection of state definition objects that will define what needs to happen when set. Property names of this object will be used as states, values will be used as step definitions of these states (must be array).

Properties

state

Type: Object Default: null

Active state definition. Changes when different state is set using set() method. Changing this value directly with a state definition will automatically trigger the manager to go through all the steps.

states

Type: Object Default: {}

Object collection of all the defined states that were added through the constructor or by using the add() method

currentStep (read-only)

Type: integer Default: 0

Current step the instance is at during a state change.

allClasses

Type: Array Default: []

List of all the classes that can be found in the states.

running (read-only)

Type: Boolean Default: null

Flag that defines if the manager is running through steps of a state.

version (static)

Type: String Default: ''

Version of the class definition

Methods

add

Parameters: state [, steps] Return: self

Adds a state to the state collection. States have an array of steps through which the manager will run when the state is activated.

set

Parameters: state [, args] Return: self

Sets the given state and triggers the manager to run through all the steps. Immediate and instant can be passed in args to set the first step immediately or jump to the last step instantly.

get

Parameters: state Return: state

Returns the requested state definition.

nextStep

Parameters: none Return: self

Applies the next step in the list of steps in the current state without applying anything. Won’t do anything if next step index exceeds the bounds of the step list.

tick

Parameters: [none] Return: self

Applies the next step in the list of steps in the current state and applies everything and will dispatch events. Won’t do anything if next step index exceeds the bounds of the step list.

destroy

Parameters: [none] Return: self

Clears all the states and destroys the object, leaving the element like it was when constructed.

Events

stateChange

Parameters: Event

Dispatched when a new state was activated. Event data contains step index, current step and current state.

stepChange

Parameters: Event

Dispatches when a new step was activated Event data contains step index, current step and current state.

[state name]

Parameters: Event

Dispatched when a new state was activated. Event data contains step index, current step and current state.

[step name]

Parameters: Event

Dispatches when a new step was activated Event data contains step index, current step and current state.

---

To Do

• Make nextStep private as it dubious with the tick method.
• Manage keyframe animations instead of class steps?
• Handle tweens for js defined state changes?
• Fix issue with first step not being held in momory while it is running (next step is now, which is wrong)