wikimedia/mediawiki-core

View on GitHub
resources/lib/jquery.ui/jquery.ui.effect-scale.js

Summary

Maintainability
F
4 days
Test Coverage
/*!
 * jQuery UI Effects Scale 1.9.2
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/scale-effect/
 *
 * Depends:
 *    jquery.ui.effect.js
 */
(function( $, undefined ) {

$.effects.effect.puff = function( o, done ) {
    var elem = $( this ),
        mode = $.effects.setMode( elem, o.mode || "hide" ),
        hide = mode === "hide",
        percent = parseInt( o.percent, 10 ) || 150,
        factor = percent / 100,
        original = {
            height: elem.height(),
            width: elem.width(),
            outerHeight: elem.outerHeight(),
            outerWidth: elem.outerWidth()
        };

    $.extend( o, {
        effect: "scale",
        queue: false,
        fade: true,
        mode: mode,
        complete: done,
        percent: hide ? percent : 100,
        from: hide ?
            original :
            {
                height: original.height * factor,
                width: original.width * factor,
                outerHeight: original.outerHeight * factor,
                outerWidth: original.outerWidth * factor
            }
    });

    elem.effect( o );
};

$.effects.effect.scale = function( o, done ) {

    // Create element
    var el = $( this ),
        options = $.extend( true, {}, o ),
        mode = $.effects.setMode( el, o.mode || "effect" ),
        percent = parseInt( o.percent, 10 ) ||
            ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode === "hide" ? 0 : 100 ) ),
        direction = o.direction || "both",
        origin = o.origin,
        original = {
            height: el.height(),
            width: el.width(),
            outerHeight: el.outerHeight(),
            outerWidth: el.outerWidth()
        },
        factor = {
            y: direction !== "horizontal" ? (percent / 100) : 1,
            x: direction !== "vertical" ? (percent / 100) : 1
        };

    // We are going to pass this effect to the size effect:
    options.effect = "size";
    options.queue = false;
    options.complete = done;

    // Set default origin and restore for show/hide
    if ( mode !== "effect" ) {
        options.origin = origin || ["middle","center"];
        options.restore = true;
    }

    options.from = o.from || ( mode === "show" ? {
        height: 0,
        width: 0,
        outerHeight: 0,
        outerWidth: 0
    } : original );
    options.to = {
        height: original.height * factor.y,
        width: original.width * factor.x,
        outerHeight: original.outerHeight * factor.y,
        outerWidth: original.outerWidth * factor.x
    };

    // Fade option to support puff
    if ( options.fade ) {
        if ( mode === "show" ) {
            options.from.opacity = 0;
            options.to.opacity = 1;
        }
        if ( mode === "hide" ) {
            options.from.opacity = 1;
            options.to.opacity = 0;
        }
    }

    // Animate
    el.effect( options );

};

$.effects.effect.size = function( o, done ) {

    // Create element
    var original, baseline, factor,
        el = $( this ),
        props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ],

        // Always restore
        props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ],

        // Copy for children
        props2 = [ "width", "height", "overflow" ],
        cProps = [ "fontSize" ],
        vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
        hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],

        // Set options
        mode = $.effects.setMode( el, o.mode || "effect" ),
        restore = o.restore || mode !== "effect",
        scale = o.scale || "both",
        origin = o.origin || [ "middle", "center" ],
        position = el.css( "position" ),
        props = restore ? props0 : props1,
        zero = {
            height: 0,
            width: 0,
            outerHeight: 0,
            outerWidth: 0
        };

    if ( mode === "show" ) {
        el.show();
    }
    original = {
        height: el.height(),
        width: el.width(),
        outerHeight: el.outerHeight(),
        outerWidth: el.outerWidth()
    };

    if ( o.mode === "toggle" && mode === "show" ) {
        el.from = o.to || zero;
        el.to = o.from || original;
    } else {
        el.from = o.from || ( mode === "show" ? zero : original );
        el.to = o.to || ( mode === "hide" ? zero : original );
    }

    // Set scaling factor
    factor = {
        from: {
            y: el.from.height / original.height,
            x: el.from.width / original.width
        },
        to: {
            y: el.to.height / original.height,
            x: el.to.width / original.width
        }
    };

    // Scale the css box
    if ( scale === "box" || scale === "both" ) {

        // Vertical props scaling
        if ( factor.from.y !== factor.to.y ) {
            props = props.concat( vProps );
            el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
            el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
        }

        // Horizontal props scaling
        if ( factor.from.x !== factor.to.x ) {
            props = props.concat( hProps );
            el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
            el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
        }
    }

    // Scale the content
    if ( scale === "content" || scale === "both" ) {

        // Vertical props scaling
        if ( factor.from.y !== factor.to.y ) {
            props = props.concat( cProps ).concat( props2 );
            el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
            el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
        }
    }

    $.effects.save( el, props );
    el.show();
    $.effects.createWrapper( el );
    el.css( "overflow", "hidden" ).css( el.from );

    // Adjust
    if (origin) { // Calculate baseline shifts
        baseline = $.effects.getBaseline( origin, original );
        el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y;
        el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x;
        el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y;
        el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x;
    }
    el.css( el.from ); // set top & left

    // Animate
    if ( scale === "content" || scale === "both" ) { // Scale the children

        // Add margins/font-size
        vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
        hProps = hProps.concat([ "marginLeft", "marginRight" ]);
        props2 = props0.concat(vProps).concat(hProps);

        el.find( "*[width]" ).each( function(){
            var child = $( this ),
                c_original = {
                    height: child.height(),
                    width: child.width(),
                    outerHeight: child.outerHeight(),
                    outerWidth: child.outerWidth()
                };
            if (restore) {
                $.effects.save(child, props2);
            }

            child.from = {
                height: c_original.height * factor.from.y,
                width: c_original.width * factor.from.x,
                outerHeight: c_original.outerHeight * factor.from.y,
                outerWidth: c_original.outerWidth * factor.from.x
            };
            child.to = {
                height: c_original.height * factor.to.y,
                width: c_original.width * factor.to.x,
                outerHeight: c_original.height * factor.to.y,
                outerWidth: c_original.width * factor.to.x
            };

            // Vertical props scaling
            if ( factor.from.y !== factor.to.y ) {
                child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
                child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
            }

            // Horizontal props scaling
            if ( factor.from.x !== factor.to.x ) {
                child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
                child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
            }

            // Animate children
            child.css( child.from );
            child.animate( child.to, o.duration, o.easing, function() {

                // Restore children
                if ( restore ) {
                    $.effects.restore( child, props2 );
                }
            });
        });
    }

    // Animate
    el.animate( el.to, {
        queue: false,
        duration: o.duration,
        easing: o.easing,
        complete: function() {
            if ( el.to.opacity === 0 ) {
                el.css( "opacity", el.from.opacity );
            }
            if( mode === "hide" ) {
                el.hide();
            }
            $.effects.restore( el, props );
            if ( !restore ) {

                // we need to calculate our new positioning based on the scaling
                if ( position === "static" ) {
                    el.css({
                        position: "relative",
                        top: el.to.top,
                        left: el.to.left
                    });
                } else {
                    $.each([ "top", "left" ], function( idx, pos ) {
                        el.css( pos, function( _, str ) {
                            var val = parseInt( str, 10 ),
                                toRef = idx ? el.to.left : el.to.top;

                            // if original was "auto", recalculate the new value from wrapper
                            if ( str === "auto" ) {
                                return toRef + "px";
                            }

                            return val + toRef + "px";
                        });
                    });
                }
            }

            $.effects.removeWrapper( el );
            done();
        }
    });

};

})(jQuery);