Frameworkless-stage NPM

Frameworkless Stage

Transition those views to the stage.

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 git@github.com: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);
		}
	});
});