famous-popup

Show popup notifications with famous

Getting started

Install using npm

  npm install famous-popup

Or just copy popup.js to your project.

Usage:

Creating a PopupController:

var PopupController = require('famous-popup');

var popupCtrl = new PopupController({
	inTransition: function(){ ... } // RenderController inTransition
	outTransition: function(){ ... } // RenderController outTransition
	overlap: false // RenderController overlap
	global: false // Respond to Engine events
});

// Create a popup, which is just a RenderNode
var popup = new Surface({content: "Hello World!"});

Adding Popups:

// Add popup to the end of the queue (i.e. below all others)
popupCtrl.push(popup);

// Add popup to the front of the queue (i.e. above all others)
popupCtrl.unshift(popup);

// Replace current popup (or just show if there is no active popup)
popupCtrl.swap(popup);

// Whenever a popup is shown, popupCtrl emits an event:
popupCtrl.on('popup',function(popup) { .... });

Hiding Popups:

// Hide current popup
popupCtrl.hide();

// Hide specific popup
popupCtrl.hide(popup);

// Hide all popups
popupCtrl.clear();

// Popup can hide themselves by emitting a 'hide' event
popup.emit('hide');

// Whenever a popup is shown, popupCtrl emits an event:
popupCtrl.on('hide',function(popup) { .... });

Adding a background

var background = new Surface({
	properties: {
		'background-color':'rgba(0,0,0,0.8)'
	}
});

popupCtrl.backgroundFrom(background, {
	init: function() { .... },
	show: function() { .... },
	hide: function() { .....}
});

init,show and hide are callbacks bound to the background node StateModifier.

For example, the default background callbacks are:

PopupController.DEFAULT_BACKGROUND_OPTIONS = {
    init: function() {
        this.setOpacity(0);
        this.setTransform(HIDDEN);
    },
    show: function() {
        this.setTransform(VISIBLE);
        this.setOpacity(1,{curve:'linear',duration: 300});
    },
    hide: function(){
        this.setOpacity(0,{curve:'linear',duration: 300},function(){
            this.setTransform(HIDDEN);
        }.bind(this));
    }
};

Using events to trigger popups

// All methods exist as events:
popupCtrl.emit('push',popup);
popupCtrl.emit('unshift',popup);
popupCtrl.emit('swap',popup);
popupCtrl.emit('hide',popup);
popupCtrl.emit('clear');

// If you passed `engine: true` in options, 
// then you can use global events.
Engine.emit('popup-push',popup);
Engine.emit('popup-unshift',popup);
Engine.emit('popup-swap',popup);
Engine.emit('popup-hide',popup);
Engine.emit('popup-clear');

// Note: they are prefixed with `popup-`!

Changelog

0.1.2 (20/1/2014)

• Fix famo.us dependency in package.json

0.1.1 (19/1/2014)

• Little bugfix

0.1.0 (19/1/2014)

• Initial release

Contribute

Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.

Contact

• @markmarijnissen
• http://www.madebymark.nl
• [email protected]

© 2015 - Mark Marijnissen