famous-popup

0.1.2 • Public • Published

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

© 2015 - Mark Marijnissen

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i famous-popup

    Weekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • markmarijnissen