From e7be72ff06d4152245a674c37abc7e8577bfc7a1 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 27 May 2011 20:05:20 -0400 Subject: Tooltip: Coding standards. --- ui/jquery.ui.tooltip.js | 84 ++++++++++++++++++++++++++----------------------- 1 file changed, 45 insertions(+), 39 deletions(-) (limited to 'ui/jquery.ui.tooltip.js') diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index a8a44f1c0..b781174c9 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -12,7 +12,7 @@ * jquery.ui.widget.js * jquery.ui.position.js */ -(function($) { +(function( $ ) { var increments = 0; @@ -28,63 +28,68 @@ $.widget("ui.tooltip", { at: "right center" } }, + _create: function() { - this._bind( { + this._bind({ mouseover: "open", focusin: "open" }); }, - + enable: function() { this.options.disabled = false; }, - + disable: function() { // only set option, disable element style changes this.options.disabled = true; }, - - open: function(event) { - var target = $(event && event.target || this.element).closest(this.options.items); + + open: function( event ) { + var target = $( event ? event.target : this.element ).closest( this.options.items ); if ( !target.length ) { return; } - var self = this; - if ( !target.data("tooltip-title") ) { - target.data("tooltip-title", target.attr("title")); + + var that = this; + if ( !target.data( "tooltip-title" ) ) { + target.data( "tooltip-title", target.attr( "title" ) ); } - var content = this.options.content.call(target[0], function(response) { + var content = this.options.content.call( target[0], function( response ) { // IE may instantly serve a cached response, need to give it a chance to finish with _open before that setTimeout(function() { // when undefined, it got removeAttr, then ignore (ajax response) - // intially its an empty string, so not undefined + // initially its an empty string, so not undefined // TODO is there a better approach to enable ajax tooltips to have two updates? - if (target.attr( "aria-describedby" ) !== undefined) { - self._open(event, target, response); + if ( target.attr( "aria-describedby" ) !== undefined ) { + that._open( event, target, response ); } - }, 13); + }, 13 ); }); - if (content) { - self._open(event, target, content); + if ( content ) { + that._open( event, target, content ); } }, - + _open: function( event, target, content ) { - if ( !content ) + if ( !content ) { return; + } - target.attr("title", ""); + target.attr( "title", "" ); - if ( this.options.disabled ) + // TODO: why is this check after we clear the title? + if ( this.options.disabled ) { return; + } // ajaxy tooltip can update an existing one var tooltip = this._find( target ); - if (!tooltip.length) { + if ( !tooltip.length ) { tooltip = this._tooltip(); target.attr( "aria-describedby", tooltip.attr( "id" ) ); } - tooltip.find(".ui-tooltip-content").html( content ); + tooltip.find( ".ui-tooltip-content" ).html( content ); tooltip.position( $.extend({ of: target }, this.options.position ) ).hide(); @@ -100,36 +105,37 @@ $.widget("ui.tooltip", { click: "close" }); }, - + close: function( event ) { - var target = $( event && event.currentTarget || this.element ); + var target = $( event ? event.currentTarget : this.element ); target.attr( "title", target.data( "tooltip-title" ) ); - - if ( this.options.disabled ) + + if ( this.options.disabled ) { return; + } var tooltip = this._find( target ); target.removeAttr( "aria-describedby" ); - + tooltip.stop( true ); this._hide( tooltip, this.options.hide, function() { $( this ).remove(); }); - + target.unbind( "mouseleave.tooltip blur.tooltip" ); - + this._trigger( "close", event ); }, _tooltip: function() { - var tooltip = $( "
" ) - .attr( "id", "ui-tooltip-" + increments++ ) - .attr( "role", "tooltip" ) - .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content" ); - if (this.options.tooltipClass) { - tooltip.addClass(this.options.tooltipClass); - } - $( "
" ) + var tooltip = $( "
" ) + .attr({ + id: "ui-tooltip-" + increments++, + role: "tooltip" + }) + .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content" + + ( this.options.tooltipClass || "" ) ); + $( "
" ) .addClass( "ui-tooltip-content" ) .appendTo( tooltip ); tooltip.appendTo( document.body ); @@ -144,4 +150,4 @@ $.widget("ui.tooltip", { $.ui.tooltip.version = "@VERSION"; -})(jQuery); \ No newline at end of file +}( jQuery ) ); -- cgit v1.2.3 From d4f6f17c8de859bcc4b76e15e523fb8b74703afe Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 10:18:39 -0400 Subject: Tooltip: Changed custom animation demo and changed the logic for showing tooltips so custom position options can perform animations. --- demos/tooltip/custom-animation.html | 40 +++++++++++++++++++++---------------- ui/jquery.ui.tooltip.js | 13 ++++++++---- ui/jquery.ui.widget.js | 2 +- 3 files changed, 33 insertions(+), 22 deletions(-) (limited to 'ui/jquery.ui.tooltip.js') diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 23fa9aefe..b8f012d91 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -9,25 +9,35 @@ + + - @@ -35,14 +45,10 @@
-

Tooltips can be attached to any element. When you hover -the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

-

But as it's not a native tooltip, it can be styled. Any themes built with -ThemeRoller -will also style tooltips accordingly.

-

Tooltips are also useful for form elements, to show some additional information in the context of each field.

-

-

Hover the field to see the tooltip.

+

There are various ways to customize the animation of a tooltip.

+

You can use the show and +hide options.

+

You can also use the position option.

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index b781174c9..c0aaa4fbe 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -90,11 +90,16 @@ $.widget("ui.tooltip", { target.attr( "aria-describedby", tooltip.attr( "id" ) ); } tooltip.find( ".ui-tooltip-content" ).html( content ); - tooltip.position( $.extend({ - of: target - }, this.options.position ) ).hide(); + tooltip + .stop( true ) + .position( $.extend({ + of: target, + using: function( pos ) { + // we only want to hide if there's no custom using defined + $( this ).css( pos ).hide(); + } + }, this.options.position ) ); - tooltip.stop( true ); this._show( tooltip, this.options.show ); this._trigger( "open", event ); diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 4167fd4e5..3bf735cd3 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -379,7 +379,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { var hasOptions = !$.isEmptyObject( options ), effectName = options.effect || defaultEffect; options.complete = callback; - if (options.delay) { + if ( options.delay ) { element.delay( options.delay ); } if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) { -- cgit v1.2.3 From d43118dfbab9591caa5181a9e50608921d19bd5b Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 11:43:57 -0400 Subject: Tooltip: Cleanup. --- ui/jquery.ui.tooltip.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'ui/jquery.ui.tooltip.js') diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index c0aaa4fbe..756fe0f7b 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -16,7 +16,7 @@ var increments = 0; -$.widget("ui.tooltip", { +$.widget( "ui.tooltip", { options: { tooltipClass: null, items: "[title]", @@ -56,7 +56,8 @@ $.widget("ui.tooltip", { target.data( "tooltip-title", target.attr( "title" ) ); } var content = this.options.content.call( target[0], function( response ) { - // IE may instantly serve a cached response, need to give it a chance to finish with _open before that + // IE may instantly serve a cached response for ajax requests + // delay this call to _open so the other call to _open runs first setTimeout(function() { // when undefined, it got removeAttr, then ignore (ajax response) // initially its an empty string, so not undefined @@ -64,7 +65,7 @@ $.widget("ui.tooltip", { if ( target.attr( "aria-describedby" ) !== undefined ) { that._open( event, target, response ); } - }, 13 ); + }, 1 ); }); if ( content ) { that._open( event, target, content ); @@ -127,6 +128,7 @@ $.widget("ui.tooltip", { $( this ).remove(); }); + // TODO: why isn't click unbound here? target.unbind( "mouseleave.tooltip blur.tooltip" ); this._trigger( "close", event ); @@ -149,7 +151,7 @@ $.widget("ui.tooltip", { _find: function( target ) { var id = target.attr( "aria-describedby" ); - return id ? $( document.getElementById( id ) ) : $(); + return id ? $( "#" + id ) : $(); } }); -- cgit v1.2.3 From 2f3284811c867408652bea044849085bda923b34 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 15:25:05 -0400 Subject: Tooltip: Proper handled of disabled option. --- ui/jquery.ui.tooltip.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/jquery.ui.tooltip.js') diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 756fe0f7b..56e5fa5c2 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -36,13 +36,13 @@ $.widget( "ui.tooltip", { }); }, - enable: function() { - this.options.disabled = false; - }, - - disable: function() { + _setOption: function( key, value ) { // only set option, disable element style changes - this.options.disabled = true; + if ( key === "disabled" ) { + this.options[ key ] = value; + return; + } + this._super( "_setOption", key, value ); }, open: function( event ) { -- cgit v1.2.3 From 6a5b21fda2730a0650e0144658d47b9b01bffc64 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 28 May 2011 15:39:55 -0400 Subject: All: Moved version numbers into prototypes. Fixed #7436 - Widget: Store version numbers on instances. --- ui/jquery.ui.accordion.js | 2 +- ui/jquery.ui.autocomplete.js | 2 +- ui/jquery.ui.button.js | 3 +-- ui/jquery.ui.dialog.js | 3 +-- ui/jquery.ui.draggable.js | 5 +---- ui/jquery.ui.droppable.js | 5 +---- ui/jquery.ui.menu.js | 3 +-- ui/jquery.ui.menubar.js | 1 + ui/jquery.ui.mouse.js | 1 + ui/jquery.ui.popup.js | 1 + ui/jquery.ui.progressbar.js | 5 +---- ui/jquery.ui.resizable.js | 5 +---- ui/jquery.ui.selectable.js | 5 +---- ui/jquery.ui.slider.js | 6 +----- ui/jquery.ui.sortable.js | 5 +---- ui/jquery.ui.spinner.js | 3 +-- ui/jquery.ui.tabs.js | 5 +---- ui/jquery.ui.tooltip.js | 3 +-- ui/jquery.ui.widget.js | 2 +- 19 files changed, 19 insertions(+), 46 deletions(-) (limited to 'ui/jquery.ui.tooltip.js') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index c6b33befb..7602ae9bc 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -15,6 +15,7 @@ // TODO: use ui-accordion-header-active class and fix styling $.widget( "ui.accordion", { + version: "@VERSION", options: { active: 0, animated: "slide", @@ -432,7 +433,6 @@ $.widget( "ui.accordion", { }); $.extend( $.ui.accordion, { - version: "@VERSION", animations: { slide: function( options, additions ) { var showOverflow = options.toShow.css( "overflow" ), diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index 4619949fb..e39b4649e 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -19,6 +19,7 @@ var requestIndex = 0; $.widget( "ui.autocomplete", { + version: "@VERSION", defaultElement: "", options: { appendTo: "body", @@ -475,7 +476,6 @@ $.widget( "ui.autocomplete", { }); $.extend( $.ui.autocomplete, { - version: "@VERSION", escapeRegex: function( value ) { return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }, diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index 32e00e9e0..482cdc24c 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -41,6 +41,7 @@ var lastActive, startXPos, startYPos, clickDragged, }; $.widget( "ui.button", { + version: "@VERSION", defaultElement: "