oxjs/source/Ox.UI/js/Window/Layer.js

'use strict';

/*@
Ox.Layer <f:Ox.Element> Background layer for dialogs and menus
    (options, self) -> <o> Layer
    options <o> Options
        type <s|'dialog'> Layer type ('dialog' or 'menu')
    self <o> Shared private variable
@*/

Ox.Layer = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            type: 'dialog'
        })
        .options(options || {})
        .addClass('OxLayer Ox' + Ox.toTitleCase(self.options.type) + 'Layer')
        .on(self.options.type == 'dialog' ? {
            mousedown: mousedown
        } : {
            click: click
        });

    function click() {
        that.triggerEvent('click').remove();
    }

    function mousedown() {
        that.stop().animate({opacity: 0.5}, 0);
    }

    function mouseup() {
        that.stop().animate({opacity: 0}, 250);
    }

    /*@
    hide <f> hide
        () -> <u>  hide layer
    @*/
    that.hide = function() {
        if (self.options.type == 'dialog') {
            Ox.$window.off({mouseup: mouseup});
        }
        that.remove();
    };

    /*@
    show <f> show
        () -> <o>  show layer
    @*/
    that.show = function() {
        if (self.options.type == 'dialog') {
            Ox.$window.on({mouseup: mouseup});
        }
        that.appendTo(Ox.$body);
        return that;
    }

    return that;

}