piano/js/modal.js

/*jshint browser:true */
/*globals React, App, $ */

(function () {
    'use strict';
    
    /**
     * Wrap a component in a modal
     *
     * @param {component: ReactClass}   Component class
     * @param {modal: Object}           Vex modal options
     * @param {props: Object}           Modal props
     */
    function Modal(cclass, modal, props) {
        var component;
        
        this.handlers = {
            open: props.onOpen || function () {},
            close: props.onClose || function () {}
        };
        
        delete props.onOpen;
        delete props.onClose;
        
        component = this.component = cclass(props);
        component.props.open = this.open.bind(this);
        component.props.close = this.close.bind(this);
        
        this.id = null;
        this.opened = false;
        this.options = modal;
    }
    
    /**
     * Open the modal
     */
    Modal.prototype.open = function () {
        if (this.opened) {
            return;
        }

        var $el = window.vex.open(this.options);
        
        React.renderComponent(this.component, $el[0]);
        $el.bind('vexClose', this.close.bind(this));
        
        this.id = $el.data().vex.id;
        this.opened = true;
        this.handlers.open();
    };
    
    /**
     * Close the modal
     */
    Modal.prototype.close = function (propagate) {
        if (!this.opened) {
            return;
        }

        window.vex.close(this.id);
        
        this.id = null;
        this.opened = false;
        this.handlers.close();
    };
    
    App.Modal = Modal;
}());