https://github.com/singuerinc/shifter
Tiny JavaScript library to manage view states.
https://github.com/singuerinc/shifter
Last synced: 28 days ago
JSON representation
Tiny JavaScript library to manage view states.
- Host: GitHub
- URL: https://github.com/singuerinc/shifter
- Owner: singuerinc
- License: mit
- Created: 2014-03-03T00:50:48.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-03-05T19:45:11.000Z (about 11 years ago)
- Last Synced: 2025-02-08T03:43:38.969Z (3 months ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shifter
Shifter is a tiny JavaScript library to manage view states.
It not require any dependency.
The main goal is to bring a simple api to manage states in a single page application.
## Getting started
```javascript
var s = new Shifter();
s.match('about', view1); // only visible in "about" state
s.match('gallery/photo/:id', view2); // visible on all photos state
s.match('*', view3); // always visible
// display view1 & view3
s.shift('about');
```
## Usage
The "view" needs to implement a minimal interface in order to function with Shifter, here is an example:
```javascript
function View(domEl) {
this.transitionIn = function (callback) {
domEl.style.display = 'block';
callback();
};
this.transitionOut = function (callback) {
domEl.style.display = 'none';
callback();
};
};
```
Complete example [here](/example/example.js).
See in action [here](https://rawgithub.com/singuerinc/Shifter/master/example/index.html).