From e609bebaae7f3f762dd61d92fb0529af9ef5f2d1 Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Fri, 15 Apr 2011 16:49:29 +0200 Subject: Custom tooltip animations based on widget-animations branch. --- demos/tooltip/custom-animation.html | 11 ++++------- ui/jquery.ui.tooltip.js | 4 ++-- ui/jquery.ui.widget.js | 20 ++++++++++++++++++++ 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index a9745a062..d32bba0d2 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -11,15 +11,12 @@ + + + + + + + + + + + + + +
+ +
Here Be Video (HTML5?)
+
+ + + + + + + + + + + +
+
+ + + + + +
+ +

A fake video player with like/share/stats button, each with a tooltip.

+ +
+ + + + + -- cgit v1.2.3 From 0f24c5a5c99d8ad0b1cff0d613fe71a3d5f418b0 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 12:42:45 +0200 Subject: Tooltip: Custom styles for video player demo --- demos/tooltip/video-player.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 0c251ea83..bf11692c5 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -43,6 +43,12 @@ .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } /* TODO load from jquery.ui.popup.css */ .ui-popup { position: absolute; z-index: 5000; } + + .ui-tooltip { + border: 1px solid white; + background: rgba(20, 20, 20, 1); + color: white; + } -- cgit v1.2.3 From 0c674ca7e35b84bc2c34ce47acd83dc7441bea35 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 13:01:27 +0200 Subject: Tooltip: Update demo description --- demos/tooltip/video-player.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index bf11692c5..9af1c8b10 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -87,7 +87,7 @@
-

A fake video player with like/share/stats button, each with a tooltip.

+

A fake video player with like/share/stats button, each with a custom-styled tooltip.

-- cgit v1.2.3 From a03c222f05aa2364189d264377e0a19da4d4c9ad Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 13:11:58 +0200 Subject: Tooltip: Overhaul widget animations code to allow delay with plain show/hide --- demos/tooltip/custom-animation.html | 8 +++++--- ui/jquery.ui.widget.js | 21 ++++++++++++++++----- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index d0689a0eb..ef8857979 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -17,8 +17,8 @@ delay: 250 }, hide: { - effect: "slideUp", - delay: 500 + effect: "hide", + delay: 250 } }); }); @@ -47,7 +47,9 @@
-

Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.

+

This demo shows how to customize animations. The tooltip is shown, after a +delay of 250ms, using a slide down animation, and hidden, after another delay, +without an animation.

diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 9634eaa1f..a5c59ad3c 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -365,12 +365,23 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { if ( hasOptions && $.effects && $.effects[ effectName ] ) { element[ method ]( options ); } else if ( element[ effectName ] ) { - element[ effectName ]( options.duration, options.easing, callback ); - } else { - element[ method ](); - if ( callback ) { - callback.call( element[ 0 ] ); + if ( /show|hide/.test( effectName ) ) { + element.queue( function() { + element[ effectName ](); + if ( callback ) { + callback.call( element[ 0 ] ); + } + }); + } else { + element[ effectName ]( options.duration, options.easing, callback ); } + } else { + element.queue( function() { + $( this )[ method ](); + if ( callback ) { + callback.call( element[ 0 ] ); + } + }); } }; }); -- cgit v1.2.3 From 56a1b182462ef222cc307a8a81c0fc5226741f87 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 13:15:54 +0200 Subject: Tooltip: update video player demo with custom animations --- demos/tooltip/video-player.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 9af1c8b10..73310e349 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -34,8 +34,12 @@ my: "center top", at: "center bottom+5px" }, - // TODO need to merge tooltip-animations for this to work - hide: false + show: { + duration: "fast" + }, + hide: { + effect: "hide" + } }); }); -- cgit v1.2.3 From c9fb4528673f94a3aa338d113b9ebb72f346b900 Mon Sep 17 00:00:00 2001 From: gnarf Date: Mon, 2 May 2011 06:49:59 -0500 Subject: widget: Updating code for show/hide to use new effects API namespace - DRY'ed out a bit as well --- ui/jquery.ui.widget.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 65a9f1ce4..6a9bd3641 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -365,19 +365,10 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { if (options.delay) { element.delay( options.delay ); } - if ( hasOptions && $.effects && $.effects[ effectName ] ) { + if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) { element[ method ]( options ); - } else if ( element[ effectName ] ) { - if ( /show|hide/.test( effectName ) ) { - element.queue( function() { - element[ effectName ](); - if ( callback ) { - callback.call( element[ 0 ] ); - } - }); - } else { - element[ effectName ]( options.duration, options.easing, callback ); - } + } else if ( effectName !== method && element[ effectName ] ) { + element[ effectName ]( options.duration, options.easing, callback ); } else { element.queue( function() { $( this )[ method ](); -- cgit v1.2.3 From 804a6ca7bf8dac556bac35aa4be91b1be3cde13e Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 14:40:26 +0200 Subject: Tooltip: Add visual testpage for animations --- tests/visual/tooltip/animations.html | 61 ++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 tests/visual/tooltip/animations.html diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html new file mode 100644 index 000000000..76c037b9e --- /dev/null +++ b/tests/visual/tooltip/animations.html @@ -0,0 +1,61 @@ + + + + Tooltip Visual Test: Default + + + + + + + + + + + + + + + + + +
+
    +
+
+ + -- cgit v1.2.3 From c13ef9e037d9ba534697f66d213bbb324db85117 Mon Sep 17 00:00:00 2001 From: gnarf Date: Mon, 2 May 2011 07:49:11 -0500 Subject: Widget: show/hide effects added BackCompat --- ui/jquery.ui.widget.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 6a9bd3641..a74e6b77b 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -365,7 +365,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { if (options.delay) { element.delay( options.delay ); } - if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) { + if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) { element[ method ]( options ); } else if ( effectName !== method && element[ effectName ] ) { element[ effectName ]( options.duration, options.easing, callback ); @@ -384,7 +384,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { if ( $.uiBackCompat !== false ) { $.Widget.prototype._getCreateOptions = function() { return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ]; - } + }; } })( jQuery ); -- cgit v1.2.3 From 94b7e6bf18a0b47531026a558cb88aa932661ca6 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 2 May 2011 14:56:53 +0200 Subject: Tooltip: Add drop effect to tooltip animations test --- tests/visual/tooltip/animations.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html index 76c037b9e..f0deac1d3 100644 --- a/tests/visual/tooltip/animations.html +++ b/tests/visual/tooltip/animations.html @@ -13,6 +13,7 @@ +