Show popup notifications with famous
Install using npm
npm install famous-popup
Or just copy popup.js
to your project.
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!"});
// 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) { .... });
// 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) { .... });
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));
}
};
// 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-`!
- Fix famo.us dependency in package.json
- Little bugfix
- Initial release
Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.
- @markmarijnissen
- http://www.madebymark.nl
- info@madebymark.nl
© 2015 - Mark Marijnissen