frameworkless-stage

v0.7.5
Push views onto a stage, with optional view transitions.
frameworkless stage mvc

Frameworkless Stage NPM Version Bower Version

Transition those views to the stage.

View Demo

Build Status Dependency Status devDependency Status

Deploy


Use a Package Manager

bower:

bower install frameworkless-stage
# copy the stuff you want
cp bower_components/frameworkless-stage/dist/stage.js src/lib
cp bower_components/frameworkless-stage/dist/less/stage.less src/less/lib

npm:

npm install frameworkless-stage
# copy the stuff you want
cp node_modules/frameworkless-stage/dist/stage.js src/lib
cp node_modules/frameworkless-stage/dist/less/stage.less src/less/lib

Use the Source

Get started right away, so you can disassemble and play around at your leisure.

# Clone frameworkless-stage
git clone [email protected]:synacorinc/frameworkless-stage.git

# Install development dependencies
npm install

# Build the library
npm run-script build      # or just `grunt` if you have grunt-cli installed globally

# Check out the demo
PORT=8080 npm start       # this just does `node server.js`

Quick Repo Tour

  • /src is where the source code lives
  • /dist is the built library
  • /demo is a simple demo, using requirejs

Usage

var stage = require('stage');

// stage views into <body>:
stage.init(document.body);

// A view can just be a DOM node:
var view = document.createElement('div');
view.innerHTML = '<h1>Hello, world!</h1>';

// Push the view onto the stage:
stage.show(view, {
    animation : 'fade',
    duration : 500
}, function() {

    // add some content to the view after it has been shown:
    var more = document.createElement('p');
    more.textContent = 'I am visible now!';
    view.appendChild(more);

});

Usage with frameworkless-view

Setup:

define(['stage'], function(stage) {
    stage.init(document.body);
});

In a route:

define(['view', 'stage'], function(view, stage) {
    return view({
        template : '<h1>Hello, world!</h1>',

        load : function() {
            // push the view-presenter onto the stage:
            stage.show(this);
        }
    });
});

License

BSD

npm i frameworkless-stage

Metadata

  • BSD
  • Whatever
  • Unknown
  • released 10/2/2015

Downloads

Maintainers