dist/ui/chico.js
function Transition(el, options) {

        if (el === undefined || options === undefined) {
            options = {};
        }

        options.content = (function () {
            var dummyElement = document.createElement('div'),
                content = options.waiting || '';

            // TODO: options.content could be a HTMLElement
            dummyElement.innerHTML = '<div class="ch-loading-large"></div><p>' + content + '</p>';

            return dummyElement.firstChild;
        }());

        // el is not defined
        if (el === undefined) {
            el = tiny.extend(tiny.clone(this._defaults), options);
        // el is present as a object configuration
        } else if (el.nodeType === undefined && typeof el === 'object') {
            el = tiny.extend(tiny.clone(this._defaults), el);
        } else if (options !== undefined) {
            options = tiny.extend(tiny.clone(this._defaults), options);
        }

        return new ch.Modal(el, options);
    }
function Transition(el, options) {

        if (el === undefined || options === undefined) {
            options = {};
        }

        options.content = (function () {
            var dummyElement = document.createElement('div'),
                content = options.waiting || '';

            // TODO: options.content could be a HTMLElement
            dummyElement.innerHTML = '<div class="ch-loading-large"></div><p>' + content + '</p>';

            return dummyElement.firstChild;
        }());

        // el is not defined
        if (el === undefined) {
            el = tiny.extend(tiny.clone(this._defaults), options);
        // el is present as a object configuration
        } else if (el.nodeType === undefined && typeof el === 'object') {
            el = tiny.extend(tiny.clone(this._defaults), el);
        } else if (options !== undefined) {
            options = tiny.extend(tiny.clone(this._defaults), options);
        }

        return new ch.Modal(el, options);
    }
function Transition ( el , options ) { if ( el === undefined || options === undefined ) { options = { } ; } options . content = ( function ( ) { var dummyElement = document . createElement ( 'div' ) , content = options . waiting || '' ; // TODO: options.content could be a HTMLElement dummyElement . innerHTML = '<div class="ch-loading-large"></div><p>' + content + '</p>' ; return dummyElement . firstChild ; } ( ) ) ; // el is not defined if ( el === undefined ) { el = tiny . extend ( tiny . clone ( this . _defaults ) , options ) ; // el is present as a object configuration } else if ( el . nodeType === undefined && typeof el === 'object' ) { el = tiny . extend ( tiny . clone ( this . _defaults ) , el ) ; } else if ( options !== undefined ) { options = tiny . extend ( tiny . clone ( this . _defaults ) , options ) ; } return new ch . Modal ( el , options ) ; }
Transition lets you give feedback to the users when their have to wait for an action.
@memberof ch
@constructor
@augments ch.Popover
@param {HTMLElement} [el] A HTMLElement to create an instance of ch.Transition.
@param {Object} [options] Options to customize an instance.
@param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
@param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
@param {String} [options.width] Set a width for the container. Default: "50%".
@param {String} [options.height] Set a height for the container. Default: "auto".
@param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointertap".
@param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
@param {String} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: ch.viewport.
@param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
@param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "center".
@param {Number} [options.offsetX] Distance to displace the target horizontally. Default: 0.
@param {Number} [options.offsetY] Distance to displace the target vertically. Default: 0.
@param {String} [options.position] The type of positioning used. Its value must be "absolute" or "fixed". Default: "fixed".
@param {String} [options.method] The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
@param {String} [options.params] Params like query string to be sent to the server.
@param {Boolean} [options.cache] Force to cache the request by the browser. Default: true.
@param {Boolean} [options.async] Force to sent request asynchronously. Default: true.
@param {(HTMLElement | String)} [options.waiting] Temporary content to use while the ajax request is loading. Default: '&lt;div class="ch-loading-large ch-loading-centered"&gt;&lt;/div&gt;'.
@param {(HTMLElement | String)} [options.content] The content to be shown into the Transition container. Default: "Please wait..."
@returns {transition} Returns a new instance of Transition.
@example
// Create a new Transition.
var transition = new ch.Transition([el], [options]);
@example
// Create a new Transition with disabled effects.
var transition = new ch.Transition({
'fx': 'none'
});
@example
// Create a new Transition using the shorthand way (content as parameter).
var transition = new ch.Transition('http://ui.ml.com:3040/ajax');
Transition lets you give feedback to the users when their have to wait for an action .