wp-includes/js/wp-pointer.js

   1 /* global wpPointerL10n */
   2 /**
   3  * Pointer jQuery widget.
   4  */
   5 (function($){
   6         var identifier = 0,
   7                 zindex = 9999;
   8
   9         $.widget('wp.pointer', {
  10                 options: {
  11                         pointerClass: 'wp-pointer',
  12                         pointerWidth: 320,
  13                         content: function() {
  14                                 return $(this).text();
  15                         },
  16                         buttons: function( event, t ) {
  17                                 var close  = ( wpPointerL10n ) ? wpPointerL10n.dismiss : 'Dismiss',
  18                                         button = $('<a class="close" href="#">' + close + '</a>');
  19
  20                                 return button.bind( 'click.pointer', function(e) {
  21                                         e.preventDefault();
  22                                         t.element.pointer('close');
  23                                 });
  24                         },
  25                         position: 'top',
  26                         show: function( event, t ) {
  27                                 t.pointer.show();
  28                                 t.opened();
  29                         },
  30                         hide: function( event, t ) {
  31                                 t.pointer.hide();
  32                                 t.closed();
  33                         },
  34                         document: document
  35                 },
  36
  37                 _create: function() {
  38                         var positioning,
  39                                 family;
  40
  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>');
  43
  44                         family = this.element.parents().add( this.element );
  45                         positioning = 'absolute';
  46
  47                         if ( family.filter(function(){ return 'fixed' === $(this).css('position'); }).length )
  48                                 positioning = 'fixed';
  49
  50                         this.pointer = $('<div />')
  51                                 .append( this.content )
  52                                 .append( this.arrow )
  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 );
  57                 },
  58
  59                 _setOption: function( key, value ) {
  60                         var o   = this.options,
  61                                 tip = this.pointer;
  62
  63                         // Handle document transfer
  64                         if ( key === 'document' && value !== o.document ) {
  65                                 tip.detach().appendTo( value.body );
  66
  67                         // Handle class change
  68                         } else if ( key === 'pointerClass' ) {
  69                                 tip.removeClass( o.pointerClass ).addClass( value );
  70                         }
  71
  72                         // Call super method.
  73                         $.Widget.prototype._setOption.apply( this, arguments );
  74
  75                         // Reposition automatically
  76                         if ( key === 'position' ) {
  77                                 this.reposition();
  78
  79                         // Update content automatically if pointer is open
  80                         } else if ( key === 'content' && this.active ) {
  81                                 this.update();
  82                         }
  83                 },
  84
  85                 destroy: function() {
  86                         this.pointer.remove();
  87                         $.Widget.prototype.destroy.call( this );
  88                 },
  89
  90                 widget: function() {
  91                         return this.pointer;
  92                 },
  93
  94                 update: function( event ) {
  95                         var self = this,
  96                                 o    = this.options,
  97                                 dfd  = $.Deferred(),
  98                                 content;
  99
 100                         if ( o.disabled )
 101                                 return;
 102
 103                         dfd.done( function( content ) {
 104                                 self._update( event, content );
 105                         });
 106
 107                         // Either o.content is a string...
 108                         if ( typeof o.content === 'string' ) {
 109                                 content = o.content;
 110
 111                         // ...or o.content is a callback.
 112                         } else {
 113                                 content = o.content.call( this.element[0], dfd.resolve, event, this._handoff() );
 114                         }
 115
 116                         // If content is set, then complete the update.
 117                         if ( content )
 118                                 dfd.resolve( content );
 119
 120                         return dfd.promise();
 121                 },
 122
 123                 /**
 124                  * Update is separated into two functions to allow events to defer
 125                  * updating the pointer (e.g. fetch content with ajax, etc).
 126                  */
 127                 _update: function( event, content ) {
 128                         var buttons,
 129                                 o = this.options;
 130
 131                         if ( ! content )
 132                                 return;
 133
 134                         this.pointer.stop(); // Kill any animations on the pointer.
 135                         this.content.html( content );
 136
 137                         buttons = o.buttons.call( this.element[0], event, this._handoff() );
 138                         if ( buttons ) {
 139                                 buttons.wrap('<div class="wp-pointer-buttons" />').parent().appendTo( this.content );
 140                         }
 141
 142                         this.reposition();
 143                 },
 144
 145                 reposition: function() {
 146                         var position;
 147
 148                         if ( this.options.disabled )
 149                                 return;
 150
 151                         position = this._processPosition( this.options.position );
 152
 153                         // Reposition pointer.
 154                         this.pointer.css({
 155                                 top: 0,
 156                                 left: 0,
 157                                 zIndex: zindex++ // Increment the z-index so that it shows above other opened pointers.
 158                         }).show().position($.extend({
 159                                 of: this.element,
 160                                 collision: 'fit none'
 161                         }, position )); // the object comes before this.options.position so the user can override position.of.
 162
 163                         this.repoint();
 164                 },
 165
 166                 repoint: function() {
 167                         var o = this.options,
 168                                 edge;
 169
 170                         if ( o.disabled )
 171                                 return;
 172
 173                         edge = ( typeof o.position == 'string' ) ? o.position : o.position.edge;
 174
 175                         // Remove arrow classes.
 176                         this.pointer[0].className = this.pointer[0].className.replace( /wp-pointer-[^\s'"]*/, '' );
 177
 178                         // Add arrow class.
 179                         this.pointer.addClass( 'wp-pointer-' + edge );
 180                 },
 181
 182                 _processPosition: function( position ) {
 183                         var opposite = {
 184                                         top: 'bottom',
 185                                         bottom: 'top',
 186                                         left: 'right',
 187                                         right: 'left'
 188                                 },
 189                                 result;
 190
 191                         // If the position object is a string, it is shorthand for position.edge.
 192                         if ( typeof position == 'string' ) {
 193                                 result = {
 194                                         edge: position + ''
 195                                 };
 196                         } else {
 197                                 result = $.extend( {}, position );
 198                         }
 199
 200                         if ( ! result.edge )
 201                                 return result;
 202
 203                         if ( result.edge == 'top' || result.edge == 'bottom' ) {
 204                                 result.align = result.align || 'left';
 205
 206                                 result.at = result.at || result.align + ' ' + opposite[ result.edge ];
 207                                 result.my = result.my || result.align + ' ' + result.edge;
 208                         } else {
 209                                 result.align = result.align || 'top';
 210
 211                                 result.at = result.at || opposite[ result.edge ] + ' ' + result.align;
 212                                 result.my = result.my || result.edge + ' ' + result.align;
 213                         }
 214
 215                         return result;
 216                 },
 217
 218                 open: function( event ) {
 219                         var self = this,
 220                                 o    = this.options;
 221
 222                         if ( this.active || o.disabled || this.element.is(':hidden') )
 223                                 return;
 224
 225                         this.update().done( function() {
 226                                 self._open( event );
 227                         });
 228                 },
 229
 230                 _open: function( event ) {
 231                         var self = this,
 232                                 o    = this.options;
 233
 234                         if ( this.active || o.disabled || this.element.is(':hidden') )
 235                                 return;
 236
 237                         this.active = true;
 238
 239                         this._trigger( 'open', event, this._handoff() );
 240
 241                         this._trigger( 'show', event, this._handoff({
 242                                 opened: function() {
 243                                         self._trigger( 'opened', event, self._handoff() );
 244                                 }
 245                         }));
 246                 },
 247
 248                 close: function( event ) {
 249                         if ( !this.active || this.options.disabled )
 250                                 return;
 251
 252                         var self = this;
 253                         this.active = false;
 254
 255                         this._trigger( 'close', event, this._handoff() );
 256                         this._trigger( 'hide', event, this._handoff({
 257                                 closed: function() {
 258                                         self._trigger( 'closed', event, self._handoff() );
 259                                 }
 260                         }));
 261                 },
 262
 263                 sendToTop: function() {
 264                         if ( this.active )
 265                                 this.pointer.css( 'z-index', zindex++ );
 266                 },
 267
 268                 toggle: function( event ) {
 269                         if ( this.pointer.is(':hidden') )
 270                                 this.open( event );
 271                         else
 272                                 this.close( event );
 273                 },
 274
 275                 _handoff: function( extend ) {
 276                         return $.extend({
 277                                 pointer: this.pointer,
 278                                 element: this.element
 279                         }, extend);
 280                 }
 281         });
 282 })(jQuery);