wp-includes/js/wp-pointer.dev.js

   1 /**
   2  * Pointer jQuery widget.
   3  */
   4 (function($){
   5         var identifier = 0,
   6                 zindex = 9999;
   7
   8         $.widget("wp.pointer", {
   9                 options: {
  10                         pointerClass: 'wp-pointer',
  11                         pointerWidth: 320,
  12                         content: function( respond, event, t ) {
  13                                 return $(this).text();
  14                         },
  15                         buttons: function( event, t ) {
  16                                 var close  = ( wpPointerL10n ) ? wpPointerL10n.dismiss : 'Dismiss',
  17                                         button = $('<a class="close" href="#">' + close + '</a>');
  18
  19                                 return button.bind( 'click.pointer', function(e) {
  20                                         e.preventDefault();
  21                                         t.element.pointer('close');
  22                                 });
  23                         },
  24                         position: 'top',
  25                         show: function( event, t ) {
  26                                 t.pointer.show();
  27                                 t.opened();
  28                         },
  29                         hide: function( event, t ) {
  30                                 t.pointer.hide();
  31                                 t.closed();
  32                         },
  33                         document: document
  34                 },
  35
  36                 _create: function() {
  37                         var positioning,
  38                                 family;
  39
  40                         this.content = $('<div class="wp-pointer-content"></div>');
  41                         this.arrow   = $('<div class="wp-pointer-arrow"><div class="wp-pointer-arrow-inner"></div></div>');
  42
  43                         family = this.element.parents().add( this.element );
  44                         positioning = 'absolute';
  45
  46                         if ( family.filter(function(){ return 'fixed' === $(this).css('position'); }).length )
  47                                 positioning = 'fixed';
  48
  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                         }, position )); // the object comes before this.options.position so the user can override position.of.
 161
 162                         this.repoint();
 163                 },
 164
 165                 repoint: function() {
 166                         var o = this.options,
 167                                 edge;
 168
 169                         if ( o.disabled )
 170                                 return;
 171
 172                         edge = ( typeof o.position == 'string' ) ? o.position : o.position.edge;
 173
 174                         // Remove arrow classes.
 175                         this.pointer[0].className = this.pointer[0].className.replace( /wp-pointer-[^\s'"]*/, '' );
 176
 177                         // Add arrow class.
 178                         this.pointer.addClass( 'wp-pointer-' + edge );
 179                 },
 180
 181                 _processPosition: function( position ) {
 182                         var opposite = {
 183                                         top: 'bottom',
 184                                         bottom: 'top',
 185                                         left: 'right',
 186                                         right: 'left'
 187                                 },
 188                                 result;
 189
 190                         // If the position object is a string, it is shorthand for position.edge.
 191                         if ( typeof position == 'string' ) {
 192                                 result = {
 193                                         edge: position + ''
 194                                 };
 195                         } else {
 196                                 result = $.extend( {}, position );
 197                         }
 198
 199                         if ( ! result.edge )
 200                                 return result;
 201
 202                         if ( result.edge == 'top' || result.edge == 'bottom' ) {
 203                                 result.align = result.align || 'left';
 204
 205                                 result.at = result.at || result.align + ' ' + opposite[ result.edge ];
 206                                 result.my = result.my || result.align + ' ' + result.edge;
 207                         } else {
 208                                 result.align = result.align || 'top';
 209
 210                                 result.at = result.at || opposite[ result.edge ] + ' ' + result.align;
 211                                 result.my = result.my || result.edge + ' ' + result.align;
 212                         }
 213
 214                         return result;
 215                 },
 216
 217                 open: function( event ) {
 218                         var self = this,
 219                                 o    = this.options;
 220
 221                         if ( this.active || o.disabled || this.element.is(':hidden') )
 222                                 return;
 223
 224                         this.update().done( function() {
 225                                 self._open( event );
 226                         });
 227                 },
 228
 229                 _open: function( event ) {
 230                         var self = this,
 231                                 o    = this.options;
 232
 233                         if ( this.active || o.disabled || this.element.is(':hidden') )
 234                                 return;
 235
 236                         this.active = true;
 237
 238                         this._trigger( "open", event, this._handoff() );
 239
 240                         this._trigger( "show", event, this._handoff({
 241                                 opened: function() {
 242                                         self._trigger( "opened", event, self._handoff() );
 243                                 }
 244                         }));
 245                 },
 246
 247                 close: function( event ) {
 248                         if ( !this.active || this.options.disabled )
 249                                 return;
 250
 251                         var self = this;
 252                         this.active = false;
 253
 254                         this._trigger( "close", event, this._handoff() );
 255                         this._trigger( "hide", event, this._handoff({
 256                                 closed: function() {
 257                                         self._trigger( "closed", event, self._handoff() );
 258                                 }
 259                         }));
 260                 },
 261
 262                 sendToTop: function( event ) {
 263                         if ( this.active )
 264                                 this.pointer.css( 'z-index', zindex++ );
 265                 },
 266
 267                 toggle: function( event ) {
 268                         if ( this.pointer.is(':hidden') )
 269                                 this.open( event );
 270                         else
 271                                 this.close( event );
 272                 },
 273
 274                 _handoff: function( extend ) {
 275                         return $.extend({
 276                                 pointer: this.pointer,
 277                                 element: this.element
 278                         }, extend);
 279                 }
 280         });
 281 })(jQuery);