1 /* global wpPointerL10n */
3 * Pointer jQuery widget.
9 $.widget('wp.pointer', {
11 pointerClass: 'wp-pointer',
14 return $(this).text();
16 buttons: function( event, t ) {
17 var close = ( wpPointerL10n ) ? wpPointerL10n.dismiss : 'Dismiss',
18 button = $('<a class="close" href="#">' + close + '</a>');
20 return button.bind( 'click.pointer', function(e) {
22 t.element.pointer('close');
26 show: function( event, t ) {
30 hide: function( event, t ) {
41 this.content = $('<div class="wp-pointer-content"></div>');
42 this.arrow = $('<div class="wp-pointer-arrow"><div class="wp-pointer-arrow-inner"></div></div>');
44 family = this.element.parents().add( this.element );
45 positioning = 'absolute';
47 if ( family.filter(function(){ return 'fixed' === $(this).css('position'); }).length )
48 positioning = 'fixed';
50 this.pointer = $('<div />')
51 .append( this.content )
53 .attr('id', 'wp-pointer-' + identifier++)
54 .addClass( this.options.pointerClass )
55 .css({'position': positioning, 'width': this.options.pointerWidth+'px', 'display': 'none'})
56 .appendTo( this.options.document.body );
59 _setOption: function( key, value ) {
63 // Handle document transfer
64 if ( key === 'document' && value !== o.document ) {
65 tip.detach().appendTo( value.body );
67 // Handle class change
68 } else if ( key === 'pointerClass' ) {
69 tip.removeClass( o.pointerClass ).addClass( value );
73 $.Widget.prototype._setOption.apply( this, arguments );
75 // Reposition automatically
76 if ( key === 'position' ) {
79 // Update content automatically if pointer is open
80 } else if ( key === 'content' && this.active ) {
86 this.pointer.remove();
87 $.Widget.prototype.destroy.call( this );
94 update: function( event ) {
103 dfd.done( function( content ) {
104 self._update( event, content );
107 // Either o.content is a string...
108 if ( typeof o.content === 'string' ) {
111 // ...or o.content is a callback.
113 content = o.content.call( this.element[0], dfd.resolve, event, this._handoff() );
116 // If content is set, then complete the update.
118 dfd.resolve( content );
120 return dfd.promise();
124 * Update is separated into two functions to allow events to defer
125 * updating the pointer (e.g. fetch content with ajax, etc).
127 _update: function( event, content ) {
134 this.pointer.stop(); // Kill any animations on the pointer.
135 this.content.html( content );
137 buttons = o.buttons.call( this.element[0], event, this._handoff() );
139 buttons.wrap('<div class="wp-pointer-buttons" />').parent().appendTo( this.content );
145 reposition: function() {
148 if ( this.options.disabled )
151 position = this._processPosition( this.options.position );
153 // Reposition pointer.
157 zIndex: zindex++ // Increment the z-index so that it shows above other opened pointers.
158 }).show().position($.extend({
160 collision: 'fit none'
161 }, position )); // the object comes before this.options.position so the user can override position.of.
166 repoint: function() {
167 var o = this.options,
173 edge = ( typeof o.position == 'string' ) ? o.position : o.position.edge;
175 // Remove arrow classes.
176 this.pointer[0].className = this.pointer[0].className.replace( /wp-pointer-[^\s'"]*/, '' );
179 this.pointer.addClass( 'wp-pointer-' + edge );
182 _processPosition: function( position ) {
191 // If the position object is a string, it is shorthand for position.edge.
192 if ( typeof position == 'string' ) {
197 result = $.extend( {}, position );
203 if ( result.edge == 'top' || result.edge == 'bottom' ) {
204 result.align = result.align || 'left';
206 result.at = result.at || result.align + ' ' + opposite[ result.edge ];
207 result.my = result.my || result.align + ' ' + result.edge;
209 result.align = result.align || 'top';
211 result.at = result.at || opposite[ result.edge ] + ' ' + result.align;
212 result.my = result.my || result.edge + ' ' + result.align;
218 open: function( event ) {
222 if ( this.active || o.disabled || this.element.is(':hidden') )
225 this.update().done( function() {
230 _open: function( event ) {
234 if ( this.active || o.disabled || this.element.is(':hidden') )
239 this._trigger( 'open', event, this._handoff() );
241 this._trigger( 'show', event, this._handoff({
243 self._trigger( 'opened', event, self._handoff() );
248 close: function( event ) {
249 if ( !this.active || this.options.disabled )
255 this._trigger( 'close', event, this._handoff() );
256 this._trigger( 'hide', event, this._handoff({
258 self._trigger( 'closed', event, self._handoff() );
263 sendToTop: function() {
265 this.pointer.css( 'z-index', zindex++ );
268 toggle: function( event ) {
269 if ( this.pointer.is(':hidden') )
275 _handoff: function( extend ) {
277 pointer: this.pointer,
278 element: this.element