aboutsummaryrefslogtreecommitdiffstats
path: root/ui/effect-size.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/effect-size.js')
-rw-r--r--ui/effect-size.js206
1 files changed, 79 insertions, 127 deletions
diff --git a/ui/effect-size.js b/ui/effect-size.js
index 984d74105..91a6bf51b 100644
--- a/ui/effect-size.js
+++ b/ui/effect-size.js
@@ -28,63 +28,45 @@
}
}(function( $ ) {
-return $.effects.effect.size = function( o, done ) {
+return $.effects.define( "size", function( options, 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" ],
+ var baseline, factor, temp,
+ element = $( this ),
// 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
- };
+ mode = options.mode,
+ restore = mode !== "effect",
+ scale = options.scale || "both",
+ origin = options.origin || [ "middle", "center" ],
+ position = element.css( "position" ),
+ pos = element.position(),
+ original = $.effects.scaledDimensions( element ),
+ from = options.from || original,
+ to = options.to || $.effects.scaledDimensions( element, 0 );
+
+ $.effects.createPlaceholder( element );
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 );
+ temp = from;
+ from = to;
+ to = temp;
}
// Set scaling factor
factor = {
from: {
- y: el.from.height / original.height,
- x: el.from.width / original.width
+ y: from.height / original.height,
+ x: from.width / original.width
},
to: {
- y: el.to.height / original.height,
- x: el.to.width / original.width
+ y: to.height / original.height,
+ x: to.width / original.width
}
};
@@ -93,16 +75,14 @@ return $.effects.effect.size = function( o, done ) {
// 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 );
+ from = $.effects.setTransition( element, vProps, factor.from.y, from );
+ to = $.effects.setTransition( element, vProps, factor.to.y, 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 );
+ from = $.effects.setTransition( element, hProps, factor.from.x, from );
+ to = $.effects.setTransition( element, hProps, factor.to.x, to );
}
}
@@ -111,128 +91,100 @@ return $.effects.effect.size = function( o, done ) {
// 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 );
+ from = $.effects.setTransition( element, cProps, factor.from.y, from );
+ to = $.effects.setTransition( element, cProps, factor.to.y, to );
}
}
- $.effects.save( el, props );
- el.show();
- $.effects.createWrapper( el );
- el.css( "overflow", "hidden" ).css( el.from );
-
- // Adjust
- if (origin) { // Calculate baseline shifts
+ // Adjust the position properties based on the provided origin points
+ if ( origin ) {
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;
+ from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top;
+ from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left;
+ to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top;
+ to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left;
}
- el.css( el.from ); // set top & left
+ element.css( from );
- // Animate
- if ( scale === "content" || scale === "both" ) { // Scale the children
+ // Animate the children if desired
+ if ( scale === "content" || scale === "both" ) {
- // Add margins/font-size
- vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
+ vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat( cProps );
hProps = hProps.concat([ "marginLeft", "marginRight" ]);
- props2 = props0.concat(vProps).concat(hProps);
- el.find( "*[width]" ).each( function() {
+ // Only animate children with width attributes specified
+ // TODO: is this right? should we include anything with css width specified as well
+ element.find( "*[width]" ).each( function() {
var child = $( this ),
- c_original = {
- height: child.height(),
- width: child.width(),
- outerHeight: child.outerHeight(),
- outerWidth: child.outerWidth()
+ childOriginal = $.effects.scaledDimensions( child ),
+ childFrom = {
+ height: childOriginal.height * factor.from.y,
+ width: childOriginal.width * factor.from.x,
+ outerHeight: childOriginal.outerHeight * factor.from.y,
+ outerWidth: childOriginal.outerWidth * factor.from.x
+ },
+ childTo = {
+ height: childOriginal.height * factor.to.y,
+ width: childOriginal.width * factor.to.x,
+ outerHeight: childOriginal.height * factor.to.y,
+ outerWidth: childOriginal.width * factor.to.x
};
- 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 );
+ childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom );
+ childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo );
}
// 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 );
+ childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom );
+ childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo );
+ }
+
+ if ( restore ) {
+ $.effects.saveStyle( child );
}
// Animate children
- child.css( child.from );
- child.animate( child.to, o.duration, o.easing, function() {
+ child.css( childFrom );
+ child.animate( childTo, options.duration, options.easing, function() {
// Restore children
if ( restore ) {
- $.effects.restore( child, props2 );
+ $.effects.restoreStyle( child );
}
});
});
}
// Animate
- el.animate( el.to, {
+ element.animate( to, {
queue: false,
- duration: o.duration,
- easing: o.easing,
+ duration: options.duration,
+ easing: options.easing,
complete: function() {
- if ( el.to.opacity === 0 ) {
- el.css( "opacity", el.from.opacity );
- }
- if ( mode === "hide" ) {
- el.hide();
+
+ var offset = element.offset();
+
+ if ( to.opacity === 0 ) {
+ element.css( "opacity", from.opacity );
}
- $.effects.restore( el, props );
+
if ( !restore ) {
+ element
+ .css( "position", position === "static" ? "relative" : position )
+ .offset( offset );
- // 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";
- });
- });
- }
+ // Need to save style here so that automatic style restoration
+ // doesn't restore to the original styles from before the animation.
+ $.effects.saveStyle( element );
}
- $.effects.removeWrapper( el );
done();
}
});
-};
+});
}));
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 07:47:16 +0000