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                         this.pointer = $('<div />')
  50                                 .append( this.content )
  51                                 .append( this.arrow )
  52                                 .attr('id', 'wp-pointer-' + identifier++)
  53                                 .addClass( this.options.pointerClass )
  54                                 .css({'position': positioning, 'width': this.options.pointerWidth+'px', 'display': 'none'})
  55                                 .appendTo( this.options.document.body );
  56                 },
  57
  58                 _setOption: function( key, value ) {
  59                         var o   = this.options,
  60                                 tip = this.pointer;
  61
  62                         // Handle document transfer
  63                         if ( key === "document" && value !== o.document ) {
  64                                 tip.detach().appendTo( value.body );
  65
  66                         // Handle class change
  67                         } else if ( key === "pointerClass" ) {
  68                                 tip.removeClass( o.pointerClass ).addClass( value );
  69                         }
  70
  71                         // Call super method.
  72                         $.Widget.prototype._setOption.apply( this, arguments );
  73
  74                         // Reposition automatically
  75                         if ( key === "position" ) {
  76                                 this.reposition();
  77
  78                         // Update content automatically if pointer is open
  79                         } else if ( key === "content" && this.active ) {
  80                                 this.update();
  81                         }
  82                 },
  83
  84                 destroy: function() {
  85                         this.pointer.remove();
  86                         $.Widget.prototype.destroy.call( this );
  87                 },
  88
  89                 widget: function() {
  90                         return this.pointer;
  91                 },
  92
  93                 update: function( event ) {
  94                         var self = this,
  95                                 o    = this.options,
  96                                 dfd  = $.Deferred(),
  97                                 content;
  98
  99                         if ( o.disabled )
 100                                 return;
 101
 102                         dfd.done( function( content ) {
 103                                 self._update( event, content );
 104                         })
 105
 106                         // Either o.content is a string...
 107                         if ( typeof o.content === 'string' ) {
 108                                 content = o.content;
 109
 110                         // ...or o.content is a callback.
 111                         } else {
 112                                 content = o.content.call( this.element[0], dfd.resolve, event, this._handoff() );
 113                         }
 114
 115                         // If content is set, then complete the update.
 116                         if ( content )
 117                                 dfd.resolve( content );
 118
 119                         return dfd.promise();
 120                 },
 121
 122                 /**
 123                  * Update is separated into two functions to allow events to defer
 124                  * updating the pointer (e.g. fetch content with ajax, etc).
 125                  */
 126                 _update: function( event, content ) {
 127                         var buttons,
 128                                 o = this.options;
 129
 130                         if ( ! content )
 131                                 return;
 132
 133                         this.pointer.stop(); // Kill any animations on the pointer.
 134                         this.content.html( content );
 135
 136                         buttons = o.buttons.call( this.element[0], event, this._handoff() );
 137                         if ( buttons ) {
 138                                 buttons.wrap('<div class="wp-pointer-buttons" />').parent().appendTo( this.content );
 139                         }
 140
 141                         this.reposition();
 142                 },
 143
 144                 reposition: function() {
 145                         var position;
 146
 147                         if ( this.options.disabled )
 148                                 return;
 149
 150                         position = this._processPosition( this.options.position );
 151
 152                         // Reposition pointer.
 153                         this.pointer.css({
 154                                 top: 0,
 155                                 left: 0,
 156                                 zIndex: zindex++ // Increment the z-index so that it shows above other opened pointers.
 157                         }).show().position($.extend({
 158                                 of: this.element,
 159                                 collision: 'fit none'
 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);