https://github.com/wheeyls/flocus
https://github.com/wheeyls/flocus
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wheeyls/flocus
- Owner: wheeyls
- License: mit
- Created: 2013-03-08T21:10:00.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-03-10T23:00:02.000Z (over 12 years ago)
- Last Synced: 2024-12-31T12:52:08.775Z (6 months ago)
- Language: JavaScript
- Size: 184 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Flocus
------
Flocus is a simple state-machine with hooks for building web interactions.
It was originally designed to build a step-by-step wizard. It is also pretty good at rapidly mocking up interfaces.
The chainable API allows you to describe a number of different states that the page will transition between.
Give each state a name and describe their setup and teardown behavior. Then create events that transition between the diffent states.
There are some built in shortcuts around the "next" and "previous" events.
Example
-------
flocus
.add('loggedOut', {
events: {
login: 'loggedIn'
}
, addClasses: [['.selector', 'classes-to-add when-entering']]
, removeClasses: [['.selector', 'classes-to-remove when-entering']]
, enter: function () { /* run when entering this state */ }
})
.add('loggedIn', {
events: {
logout: 'loggedOut'
}
, addClasses: [['.selector', 'classes-to-add when-entering']]
, removeClasses: [['.selector', 'classes-to-remove when-entering']]
, leave: function () { /* run when leaving this state */ }
})
.begin('loggedOut');
You can also see a working demo at https://rawgithub.com/wheeyls/flocus/master/index.html
Changing State
--------------
Calling ```flocus.next()``` and ```flocus.previous()``` will crawl through the states in order.
Calling ```flocus.perform('eventName')``` will change state based on the named event.
Calling ```flocus.setState('stateName')``` can be used to force the state directly.
Changing the state will trigger the custom event ```'flocus:state-change'```.
Next and Previous
-----------------
Flocus looks for the classes .js-next-state and .js-previous-state on begin, and will bind the next and previous events to the click on these elements. This allows an easy way to move through the different states.
Begin
-----
Calling ```flocus.begin('stateName')``` will kick everything into motion, entering the given state, and activating all listeners.
Bookmarklet
-----------
Flocus comes with a bookmarklet that creates an overlay to help to visualize and navigate through the different states on the page.
jQuery/Zepto/ender?
-------------------
Yep.