Skip to content

Commit b6bec79

Browse files
mikesherovmikesherov
committed
Effects: Rewrite
1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes jquerygh-1017
1 parent 2a99bb7 commit b6bec79

31 files changed

+921
-806
lines changed

‎demos/effect/addClass.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<style>
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
13-
#effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
14-
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
13+
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
14+
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
1515
</style>
1616
<script>
1717
$(function() {

‎demos/effect/animate.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<style>
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
13-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
13+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
1414
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
1515
</style>
1616
<script>

‎demos/effect/default.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<style>
2626
.toggler { width: 500px; height: 200px; position: relative; }
2727
#button { padding: .5em 1em; text-decoration: none; }
28-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
28+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2929
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
3030
.ui-effects-transfer { border: 2px dotted gray; }
3131
</style>
@@ -40,7 +40,7 @@
4040
var options = {};
4141
// some effects have required parameters
4242
if ( selectedEffect === "scale" ) {
43-
options = { percent: 0 };
43+
options = { percent: 50 };
4444
} else if ( selectedEffect === "transfer" ) {
4545
options = { to: "#button", className: "ui-effects-transfer" };
4646
} else if ( selectedEffect === "size" ) {

‎demos/effect/hide.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
2324
<style>
2425
.toggler { width: 500px; height: 200px; }
2526
#button { padding: .5em 1em; text-decoration: none; }
26-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
27+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2728
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2829
</style>
2930
<script>
@@ -37,7 +38,7 @@
3738
var options = {};
3839
// some effects have required parameters
3940
if ( selectedEffect === "scale" ) {
40-
options = { percent: 0 };
41+
options = { percent: 50 };
4142
} else if ( selectedEffect === "size" ) {
4243
options = { to: { width: 200, height: 60 } };
4344
}
@@ -77,6 +78,7 @@ <h3 class="ui-widget-header ui-corner-all">Hide</h3>
7778
<option value="clip">Clip</option>
7879
<option value="drop">Drop</option>
7980
<option value="explode">Explode</option>
81+
<option value="fade">Fade</option>
8082
<option value="fold">Fold</option>
8183
<option value="highlight">Highlight</option>
8284
<option value="puff">Puff</option>

‎demos/effect/show.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
2324
<style>
2425
.toggler { width: 500px; height: 200px; }
2526
#button { padding: .5em 1em; text-decoration: none; }
26-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
27+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2728
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2829
</style>
2930
<script>
@@ -37,7 +38,7 @@
3738
var options = {};
3839
// some effects have required parameters
3940
if ( selectedEffect === "scale" ) {
40-
options = { percent: 100 };
41+
options = { percent: 50 };
4142
} else if ( selectedEffect === "size" ) {
4243
options = { to: { width: 280, height: 185 } };
4344
}
@@ -79,6 +80,7 @@ <h3 class="ui-widget-header ui-corner-all">Show</h3>
7980
<option value="clip">Clip</option>
8081
<option value="drop">Drop</option>
8182
<option value="explode">Explode</option>
83+
<option value="fade">Fade</option>
8284
<option value="fold">Fold</option>
8385
<option value="highlight">Highlight</option>
8486
<option value="puff">Puff</option>

‎demos/effect/switchClass.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
1313
#effect { position: relative; }
14-
.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
15-
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
14+
.newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; }
15+
.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
1616
</style>
1717
<script>
1818
$(function() {

‎demos/effect/toggle.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -32,7 +33,7 @@
3233
#effect {
3334
position: relative;
3435
width: 240px;
35-
height: 135px;
36+
height: 170px;
3637
padding: 0.4em;
3738
}
3839
#effect h3 {
@@ -52,7 +53,7 @@
5253
var options = {};
5354
// some effects have required parameters
5455
if ( selectedEffect === "scale" ) {
55-
options = { percent: 0 };
56+
options = { percent: 50 };
5657
} else if ( selectedEffect === "size" ) {
5758
options = { to: { width: 200, height: 60 } };
5859
}
@@ -85,6 +86,7 @@ <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
8586
<option value="clip">Clip</option>
8687
<option value="drop">Drop</option>
8788
<option value="explode">Explode</option>
89+
<option value="fade">Fade</option>
8890
<option value="fold">Fold</option>
8991
<option value="highlight">Highlight</option>
9092
<option value="puff">Puff</option>

‎tests/unit/effects/effects.html‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -88,28 +88,47 @@
8888
width: 100px;
8989
}
9090

91+
.relative {
92+
position: relative;
93+
top: 0px;
94+
left: 0px;
95+
}
96+
.absolute {
97+
position: absolute;
98+
top: 0px;
99+
left: 0px;
100+
}
101+
.fixed {
102+
position: fixed;
103+
top: 0px;
104+
left: 0px;
105+
}
106+
.static {
107+
position: static;
108+
}
109+
91110
</style>
92111
</head>
93112
<body>
94113

95114
<div id="qunit"></div>
96115
<div id="qunit-fixture">
97-
<div id="elem" class="test">
98-
</div>
99-
<div class="hidden test">
100-
<div>.</div>
101-
</div>
102-
<div class="animateClass test">
103-
<h2>Child Element Test</h2>
104-
</div>
105-
<div class="relWidth relHeight testAddBorder">
106-
<h2>Slide with relative width</h2>
107-
</div>
108-
<div class="testScale">
109-
</div>
110-
<div class="ticket7106">
111-
</div>
112-
116+
<div id="elem" class="test"></div>
117+
<div class="hidden test">
118+
<div>.</div>
119+
</div>
120+
<div class="animateClass test">
121+
<h2>Child Element Test</h2>
122+
</div>
123+
<div class="relWidth relHeight testAddBorder">
124+
<h2>Slide with relative width</h2>
125+
</div>
126+
<div class="testScale"></div>
127+
<div class="ticket7106"></div>
128+
<div class="relative"></div>
129+
<div class="absolute"></div>
130+
<div class="fixed"></div>
131+
<div class="static"></div>
113132
</div>
114133
</body>
115134
</html>

‎tests/unit/effects/effects_core.js‎

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
(function($) {
22

33
function present( value, array, message ) {
4-
QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message );
4+
QUnit.push( jQuery.inArray( value, array ) !== -1, value, array, message );
55
}
66

77
function notPresent( value, array, message ) {
8-
QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message );
8+
QUnit.push( jQuery.inArray( value, array ) === -1, value, array, message );
99
}
1010

1111
// minDuration is used for "short" animate tests where we are only concerned about the final
@@ -75,20 +75,6 @@ test( "removeClass", function() {
7575
equal( "", element[ 0 ].className );
7676
});
7777

78-
79-
/* TODO: Disabled - Can't figure out why this is failing in IE 6/7
80-
test( "createWrapper and removeWrapper retain focused elements (#7595)", function() {
81-
expect( 2 );
82-
var test = $( "div.hidden" ).show(),
83-
input = $( "<input type='text'>" ).appendTo( test ).focus();
84-
85-
$.effects.createWrapper( test );
86-
equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" );
87-
$.effects.removeWrapper( test );
88-
equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" );
89-
});
90-
*/
91-
9278
module( "effects.core: animateClass" );
9379

9480
asyncTest( "animateClass works with borderStyle", function() {
@@ -213,6 +199,44 @@ asyncTest( "animateClass: css and class changes during animation are not lost (#
213199
.height( 100 );
214200
});
215201

202+
test( "createPlaceholder: only created for static or relative elements", function() {
203+
expect( 4 );
204+
205+
ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" );
206+
ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" );
207+
ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" );
208+
ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" );
209+
});
210+
211+
test( "createPlaceholder: preserves layout affecting properties", function() {
212+
expect( 7 );
213+
214+
var position = 5,
215+
element = $( ".relative" ).css({
216+
top: position,
217+
left: position
218+
}),
219+
before = {
220+
offset: element.offset(),
221+
outerWidth: element.outerWidth( true ),
222+
outerHeight: element.outerHeight( true ),
223+
"float": element.css( "float" ),
224+
position: element.position()
225+
},
226+
placeholder = $.effects.createPlaceholder( element );
227+
228+
// Placeholders are only placed to preserve the effect on layout. Considering
229+
// top and left do not change layout, they are not preserved, which makes some
230+
// of the math simpler in the implementation.
231+
deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" );
232+
deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" );
233+
deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" );
234+
deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" );
235+
236+
deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" );
237+
deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" );
238+
deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" );
239+
});
216240

217241
$.each( $.effects.effect, function( effect ) {
218242
module( "effects." + effect );
@@ -223,7 +247,7 @@ $.each( $.effects.effect, function( effect ) {
223247
return;
224248
}
225249
asyncTest( "show/hide", function() {
226-
expect( 8 );
250+
expect( 12 );
227251
var hidden = $( "div.hidden" ),
228252
count = 0,
229253
test = 0;
@@ -242,14 +266,40 @@ $.each( $.effects.effect, function( effect ) {
242266
};
243267
}
244268

245-
hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() {
246-
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
247-
})).queue( queueTest() ).hide( effect, minDuration, queueTest(function() {
248-
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
249-
})).queue( queueTest(function() {
250-
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains");
251-
start();
252-
}));
269+
function duringTest( fn ) {
270+
return function( next ) {
271+
setTimeout( fn );
272+
next();
273+
};
274+
}
275+
276+
hidden
277+
.queue( queueTest() )
278+
.queue( duringTest(function() {
279+
ok( hidden.is( ":animated" ),
280+
"Hidden is seen as animated during .show(\"" + effect + "\", time)" );
281+
}) )
282+
.show( effect, minDuration, queueTest(function() {
283+
equal( hidden.css( "display" ), "block",
284+
"Hidden is shown after .show(\"" + effect + "\", time)" );
285+
ok( !$( ".ui-effects-placeholder" ).length,
286+
"No placeholder remains after .show(\"" + effect + "\", time)" );
287+
}) )
288+
.queue( queueTest() )
289+
.queue( duringTest(function() {
290+
ok( hidden.is( ":animated" ),
291+
"Hidden is seen as animated during .hide(\"" + effect + "\", time)" );
292+
}) )
293+
.hide( effect, minDuration, queueTest(function() {
294+
equal( hidden.css( "display" ), "none",
295+
"Back to hidden after .hide(\"" + effect + "\", time)" );
296+
ok( !$( ".ui-effects-placeholder" ).length,
297+
"No placeholder remains after .hide(\"" + effect + "\", time)" );
298+
}) )
299+
.queue( queueTest(function() {
300+
deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" );
301+
start();
302+
}) );
253303
});
254304

255305
asyncTest( "relative width & height - properties are preserved", function() {

‎tests/unit/effects/effects_scale.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ function run( position, v, h, vo, ho ) {
66
asyncTest( desc, function() {
77
expect( 2 );
88
function complete() {
9-
equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
10-
equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
9+
closeEnough( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc );
10+
closeEnough( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc );
1111
start();
1212
}
1313
var test = $( ".testScale" ),

0 commit comments

Comments
 (0)