wm-modal.js

(function ($) {

    var emptyFunc = new Function;

    var defaults = {
        type: 'confirm',
        data: {},
        elements: {
            container: 'wm-modal',
            header: 'wm-modal-header',
            body: 'wm-modal-body',
            footer: 'wm-modal-footer',
            close: 'wm-modal-close',
            backdrop: 'wm-modal-backdrop',
            title: 'wm-modal-header-title',
            confirm: 'wm-modal-btn-confirm',
        },
        openAnimation: function() {
            return $(this).fadeIn(400);
        },
        closeAnimation: function() {
            return $(this).fadeOut(400);
        },

        onClick: emptyFunc,
        onClose: emptyFunc,
        onConfirm: emptyFunc,
        onOpen: emptyFunc,

    }

    function element (tag, attr) {

        var tag = "<{tag}/>".replace('{tag}', tag);

        return $(tag, attr);
    }

    function createModalHtml (options) {

        var elements = options.elements;

        var backdrop = element('section', {
            'class': elements.backdrop,
        });

        return backdrop.html(

            element('div', {
                'class': elements.container,
                'html': [

                    element('header', {
                        'class': elements.header,
                        'html': [

                            element('button', {
                                'class': elements.close,
                                'html': '&times;'
                            }),

                            element('h3', {
                                'class': elements.title,
                            })
                        ]
                    }),
                    element('article', {
                        'class': elements.body
                    }),
                    element('footer', {
                        'class': elements.footer,
                        html: function  ()
                        {
                            var buttons = [];

                            if (options.type == 'confirm') {

                                buttons.push(
                                    element('button', {
                                    'type': "button",
                                        'html': 'Confirmar'

                                    })
                                    .addClass(elements.confirm)
                                    .addClass('bt-padrao')
                                );
                            }

                            return buttons;
                        }
                    })
                ]
            })
        );
    }

    function WmModal (options) {

        var options = $.extend({}, defaults, options);

        var $modal = $(createModalHtml(options)).css('display', 'none').attr({
            id: options.id
        });

        var findCaches = {}

        var object = Object.create({

            init : function () {

                var initCallbacks = ['body', 'container', 'header', 'title', 'footer', 'confirm'];

                $.each(initCallbacks, function (i, name) {

                    if ($.isFunction(options[name])) {

                        $.proxy(options[name], object.find(name), object, object)();
                    }
                }); 

                if ($.isFunction(options.init)) {
                    $.proxy(options.init, $modal, object)();
                }

                if (options.priority) {

                    $modal.css('z-index', 100 + options.priority);
                }

                return this;

            },

            find: function (name) {

                if (!name) return $modal;

                if (! findCaches[name]) {

                    findCaches[name] = $modal.find('.' + options.elements[name])
                }

                return findCaches[name];
            },

            open: function() {

                setTimeout(object.centralize);

                options.openAnimation.call($modal).queue(function() {

                    $(window).on('resize.wm-modal', object.centralize);

                    if ($.isFunction(options.onOpen)) {

                       options.onOpen(object);
                    }

                    return $(this).dequeue();
                });


                return this;
            },

            close: function () {
                
                options.closeAnimation.call($modal).queue(function() {

                    $(window).off('resize.wm-modal');

                    if ($.isFunction(options.onClose)) {
                        
                        options.onClose(object);
                    }

                    return $(this).dequeue();
                });

                return this;
            },

            data: function (data) {

                if ($.isPlainObject(data)) {

                    $.extend(options.data, data);

                    return this;

                } else {

                    return options.data[data];
                }

            },

            removeData: function (name) {

                if (name) {

                    delete options.data[name];

                    return this;
                }

                options.data = {};

                return this;
            },

            centralize: function () {

                return object.find('container').css({
                    'margin-top': function() {
                        return ($(window).height() - $(this).height()) / 2;
                    }
                });
            },

            destroy: function ()
            {
                $modal.remove();

                return $.isFunction(options.onDestroy) && options.onDestroy(object)
            },

            caches: function ()
            {
                return $.wmModal.caches;
            }
        });


        // OnConfirm event

        object.find('confirm').click(function (e) {

            e.preventDefault();

            var confirmed = options.onConfirm.call(this, object, e);

            if (confirmed !== false) return object.close();

        });

        object.find('close').on('click', function (e) {

            e.preventDefault();

            object.close();
        });

        $('body').append($modal);

        if ($.fn.draggable) {

            object.find('container').draggable({
                handle: object.find('header')
            });
        }

        return object.init();
    }

    var caches = {};

    $.wmModal = function (name, options) {

        if (caches[name]) {

            return caches[name];
        }

        if ($.isPlainObject(name)) {

            options = name;

            var modal = WmModal(options);

        } else {

            var newOptions = Object.create(options);

            newOptions.onDestroy = function () {

                delete caches[name];
            };
            
            var modal = WmModal(newOptions);

            caches[name] = modal;
        }

        return modal;
    }

})( jQuery );