b2evolution PHP Cross Reference Blogging Systems

Source: /rsc/js/jquery/jquery.bubbletip.js - 396 lines - 15301 bytes - Summary - Text - Print

   1  /*
   2  * bubbletip
   3  *
   4  * Copyright (c) 2009-2010, UhLeeKa.
   5  * Version: 
   6  *      1.0.6
   7  * Licensed under the GNU Lesser General Public License:
   8  *     http://www.gnu.org/licenses/lgpl-3.0.html
   9  * Author Website: 
  10  *     http://www.uhleeka.com
  11  * Project Hosting on Google Code: 
  12  *     http://code.google.com/p/bubbletip/
  13  */
  14  ; (function($) {
  15      var bindIndex = 0;
  16      var bubbletipZIndex = 1000;
  17      $.fn.extend({
  18          bubbletip: function(tip, options) {
  19              // check to see if the tip is a descendant of 
  20              // a table.bubbletip element and therefore
  21              // has already been instantiated as a bubbletip
  22              if ($('table.bubbletip #' + $(tip).get(0).id).length > 0) {
  23                  return this;
  24              }
  25  
  26              var _this, _tip, _options, _calc, _timeoutAnimate, _timeoutRefresh, _isActive, _isHiding, _wrapper, _bindIndex;
  27              // hack for IE6,IE7
  28              var _windowWidth, _windowHeight;
  29  
  30              _this = $(this);
  31              _tip = $(tip);
  32              _bindIndex = bindIndex++;  // for window.resize namespace binding
  33              _options = {
  34                  positionAt: 'element', // element | body | mouse
  35                  positionAtElement: _this,
  36                  offsetTop: 0,
  37                  offsetLeft: 0,
  38                  deltaPosition: 30,
  39                  deltaShift: 10,
  40                  deltaDirection: 'up', // direction: up | down | left | right
  41                  animationDuration: 250,
  42                  animationEasing: 'swing', // linear | swing
  43                  bindShow: 'mouseover', // mouseover | focus | click | etc.
  44                  bindHide: 'mouseout', // mouseout | blur | etc.
  45                  bindClose: 'click', // click | etc.
  46                  delayShow: 0,
  47                  delayHide: 500,
  48                  calculateOnShow: false,
  49                  showOnInit: false
  50              };
  51              if (options) {
  52                  _options = $.extend(_options, options);
  53              }
  54              // calculated values
  55              _calc = {
  56                  top: 0,
  57                  left: 0,
  58                  delta: 0,
  59                  mouseTop: 0,
  60                  mouseLeft: 0,
  61                  tipHeight: 0,
  62                  bindShow: (_options.bindShow + ' ').replace(/ +/g, '.bubbletip' + _bindIndex),
  63                  bindHide: (_options.bindHide + ' ').replace(/ +/g, '.bubbletip' + _bindIndex),
  64                  bindClose: (_options.bindClose + ' ').replace(/ +/g, '.bubbletip' + _bindIndex)
  65              };
  66              _timeoutAnimate = null;
  67              _timeoutRefresh = null;
  68              _isActive = false;
  69              _isHiding = false;
  70  
  71              // store the tip id for removeBubbletip
  72              if (!_this.data('bubbletip_tips')) {
  73                  _this.data('bubbletip_tips', [[_tip.get(0).id, _bindIndex]]);
  74              } else {
  75                  _this.data('bubbletip_tips', $.merge(_this.data('bubbletip_tips'), [[_tip.get(0).id, _bindIndex]]));
  76              }
  77  
  78  
  79              // validate _options
  80              if (!_options.positionAt.match(/^element|body|mouse$/i)) {
  81                  _options.positionAt = 'element';
  82              }
  83              if (!_options.deltaDirection.match(/^up|down|left|right$/i)) {
  84                  _options.deltaDirection = 'up';
  85              }
  86  
  87              // create the wrapper table element
  88              if (_options.deltaDirection.match(/^up$/i)) {
  89                  _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td><table class="bt-bottom" cellspacing="0" cellpadding="0"><tr><th></th><td><div></div></td><th></th></tr></table></td><td class="bt-bottomright"></td></tr></tbody></table>');
  90              } else if (_options.deltaDirection.match(/^down$/i)) {
  91                  _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td><table class="bt-top" cellspacing="0" cellpadding="0"><tr><th></th><td><div></div></td><th></th></tr></table></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
  92              } else if (_options.deltaDirection.match(/^left$/i)) {
  93                  _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left"></td><td class="bt-content"></td><td class="bt-right-tail"><div class="bt-right"></div><div class="bt-right-tail"></div><div class="bt-right"></div></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
  94              } else if (_options.deltaDirection.match(/^right$/i)) {
  95                  _wrapper = $('<table class="bubbletip" cellspacing="0" cellpadding="0"><tbody><tr><td class="bt-topleft"></td><td class="bt-top"></td><td class="bt-topright"></td></tr><tr><td class="bt-left-tail"><div class="bt-left"></div><div class="bt-left-tail"></div><div class="bt-left"></div></td><td class="bt-content"></td><td class="bt-right"></td></tr><tr><td class="bt-bottomleft"></td><td class="bt-bottom"></td><td class="bt-bottomright"></td></tr></tbody></table>');
  96              }
  97  
  98              // append the wrapper to the document body
  99              _wrapper.appendTo('body');
 100  
 101              // apply IE filters to _wrapper elements
 102              if ((/msie/.test(navigator.userAgent.toLowerCase())) && (!/opera/.test(navigator.userAgent.toLowerCase()))) {
 103                  $('*', _wrapper).each(function() {
 104                      var image = $(this).css('background-image');
 105                      if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
 106                          image = RegExp.$1;
 107                          $(this).css({
 108                              'backgroundImage': 'none',
 109                              'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=' + ($(this).css('backgroundRepeat') == 'no-repeat' ? 'crop' : 'scale') + ', src=\'' + image + '\')'
 110                          }).each(function() {
 111                              var position = $(this).css('position');
 112                              if (position != 'absolute' && position != 'relative')
 113                                  $(this).css('position', 'relative');
 114                          });
 115                      }
 116                  });
 117              }
 118  
 119              // move the tip element into the content section of the wrapper
 120              $('.bt-content', _wrapper).append(_tip);
 121              // show the tip (in case it is hidden) so that we can calculate its dimensions
 122              _tip.show();
 123              // handle left|right delta
 124              if (_options.deltaDirection.match(/^left|right$/i)) {
 125                  // tail is 40px, so divide height by two and subtract 20px;
 126                  _calc.tipHeight = parseInt(_tip.height() / 2);
 127                  // handle odd integer height
 128                  if ((_tip.height() % 2) == 1) {
 129                      _calc.tipHeight++;
 130                  }
 131                  _calc.tipHeight = (_calc.tipHeight < 20) ? 1 : _calc.tipHeight - 20;
 132                  if (_options.deltaDirection.match(/^left$/i)) {
 133                      $('div.bt-right', _wrapper).css('height', _calc.tipHeight + 'px');
 134                  } else {
 135                      $('div.bt-left', _wrapper).css('height', _calc.tipHeight + 'px');
 136                  }
 137              }
 138              // set the opacity of the wrapper to 0
 139              _wrapper.css('opacity', 0);
 140              // hack for FF 3.6
 141              _wrapper.css({ 'width': _wrapper.width(), 'height': _wrapper.height() });
 142              // execute initial calculations
 143              _Calculate();
 144              _wrapper.hide();
 145  
 146              // handle window.resize
 147              $(window).bind('resize.bubbletip' + _bindIndex, function() {
 148                  var w = $(window).width();
 149                  var h = $(window).height();
 150  
 151                  if ((w === _windowWidth) && (h === _windowHeight)) {
 152                      return;
 153                  }
 154                  _windowWidth = w;
 155                  _windowHeight = h;
 156  
 157                  if (_timeoutRefresh) {
 158                      clearTimeout(_timeoutRefresh);
 159                  }
 160                  _timeoutRefresh = setTimeout(function() {
 161                      _Calculate();
 162                  }, 250);
 163              });
 164  
 165              // handle mouseover and mouseout events
 166              $([_wrapper.get(0), this.get(0)]).bind(_calc.bindShow, function() {
 167                  if (_timeoutAnimate) {
 168                      clearTimeout(_timeoutAnimate);
 169                  }
 170                  if (_options.delayShow === 0) {
 171                      _Show();
 172                  } else {
 173                      _timeoutAnimate = setTimeout(function() {
 174                          _Show();
 175                      }, _options.delayShow);
 176                  }
 177                  return false;
 178              }).bind(_calc.bindHide, function() {
 179                  if (_timeoutAnimate) {
 180                      clearTimeout(_timeoutAnimate);
 181                  }
 182                  if (_options.delayHide === 0) {
 183                      _Hide();
 184                  } else {
 185                      _timeoutAnimate = setTimeout(function() {
 186                          _Hide();
 187                      }, _options.delayHide);
 188                  }
 189                  return false;
 190              });
 191  
 192              // handle click event (only for wrapper)
 193              $(_wrapper.get(0)).bind(_calc.bindClose, function() {
 194                  _isHiding = true;
 195                  _wrapper.animate({ 'opacity': 0 }, _options.animationDuration, _options.animationEasing, function() {
 196                      _wrapper.hide();
 197                      _isHiding = false;
 198                      _isActive = false;
 199                  });
 200              });
 201  
 202  			function _Show() {
 203                  var animation;
 204  
 205                  if (_isActive) { // the tip is currently showing; do nothing
 206                      return;
 207                  }
 208                  _isActive = true;
 209                  if (_isHiding) { // the tip is currently hiding; interrupt and start showing again
 210                      _wrapper.stop(true, false);
 211                  }
 212  
 213                  if (_options.calculateOnShow) {
 214                      _Calculate();
 215                  }
 216                  if (_options.positionAt.match(/^element|body$/i)) {
 217                      if (_options.deltaDirection.match(/^up|down$/i)) {
 218                          if (!_isHiding) {
 219                              _wrapper.css('top', parseInt(_calc.top + _calc.delta) + 'px');
 220                          }
 221                          animation = { 'top': _calc.top + 'px' };
 222                      } else {
 223                          if (!_isHiding) {
 224                              _wrapper.css('left', parseInt(_calc.left + _calc.delta) + 'px');
 225                          }
 226                          animation = { 'left': _calc.left + 'px' };
 227                      }
 228                  } else {
 229                      if (_options.deltaDirection.match(/^up|down$/i)) {
 230                          if (!_isHiding) {
 231                              _calc.mouseTop = e.pageY + _calc.top;
 232                              _wrapper.css({ 'top': parseInt(_calc.mouseTop + _calc.delta) + 'px', 'left': parseInt(e.pageX - (_wrapper.width() / 2)) + 'px' });
 233                          }
 234                          animation = { 'top': _calc.mouseTop + 'px' };
 235                      } else {
 236                          if (!_isHiding) {
 237                              _calc.mouseLeft = e.pageX + _calc.left;
 238                              _wrapper.css({ 'left': parseInt(_calc.mouseLeft + _calc.delta) + 'px', 'top': parseInt(e.pageY - (_wrapper.height() / 2)) + 'px' });
 239                          }
 240                          animation = { 'left': _calc.left + 'px' };
 241                      }
 242                  }
 243                  _isHiding = false;
 244                  _this.css('z-index', bubbletipZIndex+1);
 245                  _this.css('position', 'relative');
 246                  _wrapper.css('z-index', bubbletipZIndex);
 247                  bubbletipZIndex++;
 248                  _wrapper.show();
 249                  animation = $.extend(animation, { 'opacity': 1 });
 250                  _wrapper.animate(animation, _options.animationDuration, _options.animationEasing, function() {
 251                      _wrapper.css('opacity', '');
 252                      _isActive = true;
 253                  });
 254              };
 255  			function _Hide() {
 256                  var animation;
 257  
 258                  _isActive = false;
 259                  _isHiding = true;
 260                  if (_options.positionAt.match(/^element|body$/i)) {
 261                      if (_options.deltaDirection.match(/^up|down$/i)) {
 262                          animation = { 'top': parseInt(_calc.top - _calc.delta) + 'px' };
 263                      } else {
 264                          animation = { 'left': parseInt(_calc.left - _calc.delta) + 'px' };
 265                      }
 266                  } else {
 267                      if (_options.deltaDirection.match(/^up|down$/i)) {
 268                          animation = { 'top': parseInt(_calc.mouseTop - _calc.delta) + 'px' };
 269                      } else {
 270                          animation = { 'left': parseInt(_calc.mouseLeft - _calc.delta) + 'px' };
 271                      }
 272                  }
 273                  animation = $.extend(animation, { 'opacity': 0 });
 274                  _wrapper.animate(animation, _options.animationDuration, _options.animationEasing, function() {
 275                      _wrapper.hide();
 276                      _isHiding = false;
 277                  });
 278              };
 279  			function _Calculate() {
 280                  // calculate values
 281                  if (_options.positionAt.match(/^element$/i)) {
 282                      var offset = _options.positionAtElement.offset();
 283                      if (_options.deltaDirection.match(/^up$/i)) {
 284                          _calc.top = offset.top + _options.offsetTop - _wrapper.outerHeight() + _options.deltaShift;
 285                          _calc.left = offset.left + _options.offsetLeft + ((_options.positionAtElement.outerWidth() - _wrapper.outerWidth()) / 2);
 286                          _calc.delta = _options.deltaPosition;
 287                      } else if (_options.deltaDirection.match(/^down$/i)) {
 288                          _calc.top = offset.top + _options.positionAtElement.outerHeight() + _options.offsetTop - _options.deltaShift;
 289                          _calc.left = offset.left + _options.offsetLeft + ((_options.positionAtElement.outerWidth() - _wrapper.outerWidth()) / 2);
 290                          _calc.delta = -_options.deltaPosition;
 291                      } else if (_options.deltaDirection.match(/^left$/i)) {
 292                          _calc.top = offset.top + _options.offsetTop + ((_options.positionAtElement.outerHeight() - _wrapper.outerHeight()) / 2);
 293                          _calc.left = offset.left + _options.offsetLeft - _wrapper.outerWidth() + _options.deltaShift;
 294                          _calc.delta = _options.deltaPosition;
 295                      } else if (_options.deltaDirection.match(/^right$/i)) {
 296                          _calc.top = offset.top + _options.offsetTop + ((_options.positionAtElement.outerHeight() - _wrapper.outerHeight()) / 2);
 297                          _calc.left = offset.left + _options.positionAtElement.outerWidth() + _options.offsetLeft - _options.deltaShift;
 298                          _calc.delta = -_options.deltaPosition;
 299                      }
 300                  } else if (_options.positionAt.match(/^body$/i)) {
 301                      if (_options.deltaDirection.match(/^up|left$/i)) {
 302                          _calc.top = _options.offsetTop;
 303                          _calc.left = _options.offsetLeft;
 304                          // up or left
 305                          _calc.delta = _options.deltaPosition;
 306                      } else {
 307                          if (_options.deltaDirection.match(/^down$/i)) {
 308                              _calc.top = parseInt(_options.offsetTop + _wrapper.outerHeight());
 309                              _calc.left = _options.offsetLeft;
 310                          } else {
 311                              _calc.top = _options.offsetTop;
 312                              _calc.left = parseInt(_options.offsetLeft + _wrapper.outerWidth());
 313                          }
 314                          // down or right
 315                          _calc.delta = -_options.deltaPosition;
 316                      }
 317                  } else if (_options.positionAt.match(/^mouse$/i)) {
 318                      if (_options.deltaDirection.match(/^up|left$/i)) {
 319                          if (_options.deltaDirection.match(/^up$/i)) {
 320                              _calc.top = -(_options.offsetTop + _wrapper.outerHeight());
 321                              _calc.left = _options.offsetLeft;
 322                          } else if (_options.deltaDirection.match(/^left$/i)) {
 323                              _calc.top = _options.offsetTop;
 324                              _calc.left = -(_options.offsetLeft + _wrapper.outerWidth());
 325                          }
 326                          // up or left
 327                          _calc.delta = _options.deltaPosition;
 328                      } else {
 329                          _calc.top = _options.offsetTop;
 330                          _calc.left = _options.offsetLeft;
 331                          // down or right
 332                          _calc.delta = -_options.deltaPosition;
 333                      }
 334                  }
 335                  // handle the wrapper (element|body) positioning
 336                  if (_options.positionAt.match(/^element|body$/i)) {
 337                      _wrapper.css({
 338                          'position': 'absolute',
 339                          'top': _calc.top + 'px',
 340                          'left': _calc.left + 'px'
 341                      });
 342                  }
 343              };
 344              
 345              if (_options.showOnInit) {
 346                  _Show();
 347              }
 348              return this;
 349          },
 350          removeBubbletip: function(tips) {
 351              var tipsActive;
 352              var tipsToRemove = new Array();
 353              var tipsActiveAdjusted = new Array();
 354              var arr, i, ix;
 355              var elem;
 356  
 357              tipsActive = $.makeArray($(this).data('bubbletip_tips'));
 358  
 359              // convert the parameter array of tip id's or elements to id's
 360              arr = $.makeArray(tips);
 361              for (i = 0; i < arr.length; i++) {
 362                  tipsToRemove.push($(arr[i]).get(0).id);
 363              }
 364  
 365              for (i = 0; i < tipsActive.length; i++) {
 366                  ix = null;
 367                  if ((tipsToRemove.length == 0) || ((ix = $.inArray(tipsActive[i][0], tipsToRemove)) >= 0)) {
 368                      // remove all tips if there are none specified
 369                      // otherwise, remove only specified tips
 370  
 371                      // find the surrounding table.bubbletip
 372                      elem = $('#' + tipsActive[i][0]).get(0).parentNode;
 373                      while (elem.tagName.toLowerCase() != 'table') {
 374                          elem = elem.parentNode;
 375                      }
 376                      // attach the tip element to body and hide
 377                      $('#' + tipsActive[i][0]).appendTo('body').hide();
 378                      // remove the surrounding table.bubbletip
 379                      $(elem).remove();
 380  
 381                      // unbind show/hide events
 382                      $(this).unbind('.bubbletip' + tipsActive[i][1]);
 383  
 384                      // unbind window.resize event
 385                      $(window).unbind('.bubbletip' + tipsActive[i][1]);
 386                  } else {
 387                      // tip is not being removed, so add it to the adjusted array
 388                      tipsActiveAdjusted.push(tipsActive[i]);
 389                  }
 390              }
 391              $(this).data('bubbletip_tips', tipsActiveAdjusted);
 392  
 393              return this;
 394          }
 395      });
 396  })(jQuery);

title

Description

title

Description

title

Description

title

title

Body