Skip to content

Effects.core: Storing size and setting in createWrapper for applied to all effects. #326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tomykaira wants to merge 12 commits into from
Closed

Effects.core: Storing size and setting in createWrapper for applied to all effects. #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
007d492
effects.slide: fix: reset width and height on the end of animation, g…
tomykaira May 19, 2011
83800c0
effects.slide: Storing size of element before wrapping, and setting t…
gnarf May 21, 2011
67df90c
Unit Tests: Adding a unit test for #5245 - Slide Effect Broken With R…
gnarf May 21, 2011
7de47f8
Merge commit '83800c0' into ticket-5245
gnarf May 21, 2011
1a3edf3
Effects.core: Storing size and setting in createWrapper for applied t…
tomykaira May 22, 2011
e956f66
Unit Tests: Apply a test to all effects for #5245 - Relative width el…
tomykaira May 23, 2011
958079f
Unit Tests: Add a test for relative height for #5245 - Relative width…
tomykaira May 23, 2011
2dd03e3
whitespace
tomykaira May 23, 2011
7f39ca9
Merged Squashed with tomykaira/bug-5245
gnarf May 23, 2011
f06eaad
Unit Tests: ensuring height / width css inline properties don't stick…
gnarf May 23, 2011
39afa9e
Merged gnarf37/ticket-5245 into bug_5245
tomykaira May 23, 2011
9105dd5
effects.core: Restoring height/width of an element after animation in…
tomykaira May 23, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions tests/unit/effects/effects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@
.testChildren h2 {
font-size: 20px;
}

.relWidth {
width: 50%;
}

.relHeight {
height: 50%;
}
</style>
</head>
<body>
Expand All @@ -70,6 +78,9 @@ <h2 id="qunit-userAgent"></h2>
<div class="animateClass test">
<h2>Child Element Test</h2>
</div>
<div class="relWidth relHeight testAddBorder">
<h2>Slide with relative width</d2>
</div>
</div>

</body>
Expand Down
15 changes: 15 additions & 0 deletions tests/unit/effects/effects_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,21 @@ $.each( $.effects.effect, function( effect ) {
start();
}));
});

asyncTest( "relative width & height - properties are preserved", function() {
var test = $("div.relWidth.relHeight"),
width = test.width(), height = test.height(),
cssWidth = test[0].style.width, cssHeight = test[0].style.height;

expect( 4 );
test.toggle( effect, minDuration, function() {
equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
start();
});
equal( test.width(), width, "Width is the same px after animation started" );
equal( test.height(), height, "Height is the same px after animation started" );
});
});

module("animateClass");
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.blind.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ $.effects.effect.blind = function( o ) {

// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right" ],
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
direction = o.direction || "up",
vertical = rvertical.test( direction ),
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.bounce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $.effects.effect.bounce = function(o) {

return this.queue( function( next ) {
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right" ],
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],

// defaults:
mode = $.effects.setMode( el, o.mode || "effect" ),
Expand Down
8 changes: 7 additions & 1 deletion ui/jquery.effects.core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,12 @@ $.extend( $.effects, {
border: "none",
margin: 0,
padding: 0
});
}),
// Store the size in case width/height are defined in % - Fixes #5245
size = {
width: element.width(),
height: element.height()
};

element.wrap( wrapper );
wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element
Expand Down Expand Up @@ -438,6 +443,7 @@ $.extend( $.effects, {
bottom: "auto"
});
}
element.css(size);

return wrapper.css( props ).show();
},
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.drop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $.effects.effect.drop = function( o ) {
return this.queue( function() {

var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity' ],
props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'left',
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.fold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $.effects.effect.fold = function( o ) {

// Create element
var el = $( this ),
props = ['position','top','bottom','left','right'],
props = ['position','top','bottom','left','right','height','width'],
mode = $.effects.setMode(el, o.mode || 'hide'),
size = o.size || 15,
percent = /([0-9]+)%/.exec(size),
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.scale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ $.effects.effect.size = function( o ) {

// Set options
mode = $.effects.setMode( el, o.mode || 'effect' ),
restore = o.restore || false,
restore = mode === "effect" && !o.restore ? false : true,
scale = o.scale || 'both',
origin = o.origin,
original, baseline, factor;
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.effects.shake.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $.effects.effect.shake = function( o ) {
return this.queue( function() {

var el = $( this ),
props = [ "position", "top", "bottom", "left", "right" ],
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "effect" ),
direction = o.direction || "left",
distance = o.distance || 20,
Expand Down
16 changes: 9 additions & 7 deletions ui/jquery.effects.slide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,26 @@ $.effects.effect.slide = function( o ) {

// Create element
var el = $( this ),
props = ['position','top','bottom','left','right'],
props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
mode = $.effects.setMode( el, o.mode || 'show' ),
direction = o.direction || 'left',
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
distance,
animation = {};
animation = {},
size;

// Adjust
$.effects.save( el, props );
$.effects.save( el, props );
el.show();
distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({
margin: true
});

$.effects.createWrapper( el ).css({
overflow: 'hidden'
});

distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({
margin: true
});

if (mode == 'show') {
el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
}
Expand Down