You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
8.1 KiB
318 lines
8.1 KiB
/*! |
|
* jQuery UI Effects Scale 1.10.3 |
|
* http://jqueryui.com |
|
* |
|
* Copyright 2013 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);
|
|
|