Skip to content

Effects: Rewrote "clip" effect to animate CSS clip property #876

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
wants to merge 28 commits into from
Closed

Effects: Rewrote "clip" effect to animate CSS clip property #876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
351cd16
Clip rewrite: Work in progress
mpetrovich Dec 26, 2012
9b34a0e
Feedback per mikesherov
mpetrovich Dec 26, 2012
05ec39a
Work in progress
mpetrovich Jan 2, 2013
1e8dd3b
Feedback per mikesherov, scottgonzalez, Jellyfrog
mpetrovich Jan 14, 2013
2cb4c6d
Moar refactors and fixes
mpetrovich Jan 14, 2013
fd39c4e
What a petro
mpetrovich Jan 14, 2013
3751c4d
abstract out createPlaceholder
mikesherov Jan 14, 2013
edb0213
Merge pull request #3 from mikesherov/clip
mpetrovich Jan 14, 2013
68a0c32
With use of outerWidth/outerHeight, no corrections necessary for Webk…
mpetrovich Jan 14, 2013
a306181
Renamed 'shadow' element to 'placeholder' for consistency
mpetrovich Jan 14, 2013
b3e2408
fix margin-collapse
mikesherov Jan 14, 2013
3ec774a
Merge pull request #4 from mikesherov/clip
mpetrovich Jan 14, 2013
3903dc0
encapsulate more information into createPlaceholder
mikesherov Jan 14, 2013
91a9ff7
Merge pull request #5 from mikesherov/clip
mpetrovich Jan 14, 2013
2bc76ab
temp
mikesherov Jan 15, 2013
41e1d7d
generalize clip getting / setting / stepping
mikesherov Jan 15, 2013
02674dd
updated demo
mikesherov Jan 15, 2013
4a7dc42
Merge pull request #6 from mikesherov/clip
mpetrovich Jan 16, 2013
ece2f36
DRY out common functionality
mikesherov Jan 16, 2013
94d2994
ensure all showing/hiding happens before width and margins are locked in
mikesherov Jan 18, 2013
83e8bd3
bug fix for effects that yet don't have a pre filter
mikesherov Jan 18, 2013
163b30c
More cleanup.
mikesherov Jan 19, 2013
c774fb9
Finally squash all margin-collapse issues
mikesherov Jan 19, 2013
c646f37
Annotate for the future!
mikesherov Jan 19, 2013
2892857
forgot to duplicate this, needs to be DRYed soon
mikesherov Jan 19, 2013
4b4fefa
updated blind effect!
mikesherov Jan 20, 2013
00a613e
DRY out effects pre filters, and make sure correct "show" animations …
mikesherov Jan 20, 2013
52a2b7b
Merge pull request #7 from mikesherov/clip
mpetrovich Jan 21, 2013
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
95 changes: 95 additions & 0 deletions tests/visual/effects/clip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.8.3.js"></script>
<script src="../../../ui/jquery.ui.effect.js"></script>
<script src="../../../ui/jquery.ui.effect-clip.js"></script>
<script>
$(function() {
$("a[href$='#toggle']").click(function(event) {
event.preventDefault();
$(this).closest(".container").find(".target").toggle("clip", {
direction: "horizontal"
}, 2000);
});
$("a[href$='#effect']").click(function(event) {
event.preventDefault();
$(this).closest(".container").find(".target").effect("clip", {
direction: "vertical",
mode: "toggle"
}, 2000);
});
});
</script>
<style>
.container {
overflow: hidden;
clear: both;
}
.content-box {
background: lightblue;
}
.border-box {
margin-top: 50px;
background: lightyellow;
}
.content-box * {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.border-box * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column {
position: relative;
top: 40px;
float: left;
width: 600px;
}
.target {
border: 5px solid red;
}
p.target {
overflow: hidden;
background: lightgreen;
}
</style>
</head>
<body>
<div class="container content-box">
<h2>With box-sizing: content-box</h2>
<a href="#toggle">Toggle</a>
<a href="#effect">Effect</a>
<p>Bacon ipsum dolor sit amet chuck cow ground round, ham hock short loin tail jowl sausage flank. Venison andouille turducken sausage. Boudin filet mignon shoulder, prosciutto sirloin tail cow pastrami. Salami jerky flank rump, sirloin spare ribs pork belly. Biltong brisket boudin ground round, venison chicken shankle short ribs meatball corned beef. Swine short ribs shoulder, short loin turducken biltong prosciutto ball tip. Biltong beef bresaola sausage prosciutto spare ribs, short loin swine pork chop cow flank pork turkey shankle.</p>
<img class="target" style="position: absolute; clip: rect(10px, auto, 100px, 20px);" src="image.png" alt="">
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
<div class="column">
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
<img class="target" style="margin: 10px 20px 30px 40px;" src="image.png" alt="">
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
</div>
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
<p class="target">Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
</div>
<div class="container border-box">
<h2>With box-sizing: border-box</h2>
<a href="#toggle">Toggle</a>
<a href="#effect">Effect</a>
<p>Bacon ipsum dolor sit amet chuck cow ground round, ham hock short loin tail jowl sausage flank. Venison andouille turducken sausage. Boudin filet mignon shoulder, prosciutto sirloin tail cow pastrami. Salami jerky flank rump, sirloin spare ribs pork belly. Biltong brisket boudin ground round, venison chicken shankle short ribs meatball corned beef. Swine short ribs shoulder, short loin turducken biltong prosciutto ball tip. Biltong beef bresaola sausage prosciutto spare ribs, short loin swine pork chop cow flank pork turkey shankle.</p>
<img class="target" style="position: absolute; clip: rect(10px, auto, 100px, 20px);" src="image.png" alt="">
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
<div class="column">
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
<img class="target" style="margin: 10px 20px 30px 40px;" src="image.png" alt="">
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
</div>
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
<p class="target">Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
</div>
</body>
Binary file added tests/visual/effects/image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 91 additions & 0 deletions tests/visual/effects/shake.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.8.3.js"></script>
<script src="../../../ui/jquery.ui.effect.js"></script>
<script src="../../../ui/jquery.ui.effect-shake.js"></script>
<script>
$(function(){
$("#btn").click(function() {
$(".pd").effect("shake", {
duration: +$("#duration").val(),
mode: "toggle"
});
});
});
</script>
<style>
#inputbox {
background: green;
}
#selectbox {
background: red;
}
#divbox {
background: yellow;
}
#inputbox_abs {
background: orange;
position: absolute;
top: 400px;
left: 300px;
}
#divbox_abs {
background: purple;
position: absolute;
top: 400px;
left: 500px;
}
div.pd {
background: blue;
}

.m {
margin: 3px;
}
.b {
border: 1px solid black;
}
.p {
padding: 10px;
}
</style>
</head>
<body>
<button id="btn">Click</button><input id="duration" value="1000">
<div id="divbox">
<div class="pd m">hi</div>
<div class="pd b">hi</div>
<div class="pd p m">hi</div>
</div>
<div id="inputbox" class="m">
<div class="pd m">hi</div>
<div class="pd m b">hi</div>
<div class="pd p">hi</div>
<input type="text" class="pd" />
</div>
<div id="selectbox">
<div class="pd">hi</div>
<div class="pd">hi</div>
<div class="pd">hi</div>
<select class="pd">
<option value="a">a</option>
<option value="abcdef">abcdef</option>
</select>
</div>
<div id="inputbox_abs" class="m">
<div class="pd m">hi</div>
<div class="pd m b">hi</div>
<div class="pd p">hi</div>
<input type="text" class="pd" />
</div>
<div id="divbox_abs" class="m">
<div class="pd m">hi</div>
<div class="pd m b">hi</div>
<div class="pd p">hi</div>
</div>

</body>
78 changes: 28 additions & 50 deletions ui/jquery.ui.effect-blind.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,66 +13,44 @@
*/
(function( $, undefined ) {

var rvertical = /up|down|vertical/,
rpositivemotion = /up|left|vertical|horizontal/;

$.effects.effect.blind = function( o, done ) {
// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
direction = o.direction || "up",
vertical = rvertical.test( direction ),
ref = vertical ? "height" : "width",
ref2 = vertical ? "top" : "left",
motion = rpositivemotion.test( direction ),
animation = {},
show = mode === "show",
wrapper, distance, margin;

// if already wrapped, the wrapper's properties are my property. #6245
if ( el.parent().is( ".ui-effects-wrapper" ) ) {
$.effects.save( el.parent(), props );
} else {
$.effects.save( el, props );
}
el.show();
wrapper = $.effects.createWrapper( el ).css({
overflow: "hidden"
});

distance = wrapper[ ref ]();
margin = parseFloat( wrapper.css( ref2 ) ) || 0;

animation[ ref ] = show ? distance : 0;
if ( !motion ) {
el
.css( vertical ? "bottom" : "right", 0 )
.css( vertical ? "top" : "left", "auto" )
.css({ position: "absolute" });

animation[ ref2 ] = show ? margin : distance + margin;
}
var start, placeholder,
animate = {},
map = {
up: [ "bottom", "top" ],
vertical: [ "bottom", "top" ],
down: [ "top", "bottom" ],
left: [ "right", "left" ],
horizontal: [ "right", "left" ],
right: [ "left", "right" ]
},
el = $( this ),
show = $.effects.effectsMode( el ) === "show",
direction = o.direction || "up";

start = el.cssClip();
animate.clip = el.cssClip();
animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ];

placeholder = $.effects.createPlaceholder( el );

// start at 0 if we are showing
if ( show ) {
wrapper.css( ref, 0 );
if ( ! motion ) {
wrapper.css( ref2, margin + distance );
}
el.cssClip( animate.clip );
animate.clip = start;
}

// Animate
wrapper.animate( animation, {
el.animate( animate, {
queue: false,
duration: o.duration,
easing: o.easing,
queue: false,
complete: function() {
if ( mode === "hide" ) {

$.effects.removePlaceholder( placeholder, el );

if ( !show ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );

done();
}
});
Expand Down
52 changes: 22 additions & 30 deletions ui/jquery.ui.effect-clip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,50 +14,42 @@
(function( $, undefined ) {

$.effects.effect.clip = function( o, done ) {
// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
show = mode === "show",
var start, placeholder,
animate = {},
el = $( this ),
show = $.effects.effectsMode( el ) === "show",
direction = o.direction || "vertical",
vert = direction === "vertical",
size = vert ? "height" : "width",
position = vert ? "top" : "left",
animation = {},
wrapper, animate, distance;
both = direction === "both",
horizontal = both || direction === "horizontal",
vertical = both || direction === "vertical";

// Save & Show
$.effects.save( el, props );
el.show();
start = el.cssClip();
animate.clip = {
top: vertical ? ( start.bottom - start.top ) / 2 : start.top,
right: horizontal ? ( start.right - start.left ) / 2 : start.right,
bottom: vertical ? ( start.bottom - start.top ) / 2 : start.bottom,
left: horizontal ? ( start.right - start.left ) / 2 : start.left
};

// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: "hidden"
});
animate = ( el[0].tagName === "IMG" ) ? wrapper : el;
distance = animate[ size ]();
placeholder = $.effects.createPlaceholder( el );

// Shift
if ( show ) {
animate.css( size, 0 );
animate.css( position, distance / 2 );
el.cssClip( animate.clip );
animate.clip = start;
}

// Create Animation Object:
animation[ size ] = show ? distance : 0;
animation[ position ] = show ? 0 : distance / 2;

// Animate
animate.animate( animation, {
el.animate( animate, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {

$.effects.removePlaceholder( placeholder, el );

if ( !show ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );

done();
}
});
Expand Down
Loading