Guest User

Untitled

a guest
Sep 23rd, 2018
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.60 KB | None | 0 0
  1. // tipsy, facebook style tooltips for jquery
  2. // version 1.0.0a
  3. // (c) 2008-2010 jason frame [jason@onehackoranother.com]
  4. // released under the MIT license
  5.  
  6. (function($) {
  7.  
  8. function maybeCall(thing, ctx) {
  9. return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
  10. };
  11.  
  12. function Tipsy(element, options) {
  13. this.$element = $(element);
  14. this.options = options;
  15. this.enabled = true;
  16. this.fixTitle();
  17. };
  18.  
  19. Tipsy.prototype = {
  20. show: function() {
  21. var title = this.getTitle();
  22. if (title && this.enabled) {
  23. var $tip = this.tip();
  24.  
  25. $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
  26. $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
  27. $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
  28.  
  29. var pos = $.extend({}, this.$element.offset(), {
  30. width: this.$element[0].offsetWidth || 0,
  31. height: this.$element[0].offsetHeight || 0
  32. });
  33.  
  34. if (typeof this.$element[0].nearestViewportElement == 'object') {
  35. // SVG
  36. var nve = this.$element[0].nearestViewportElement;
  37. var pt = nve.createSVGPoint();
  38. var matrix = this.$element[0].getScreenCTM();
  39. var bbox = this.$element[0].getBBox();
  40. pt.x = bbox.x;
  41. pt.y = bbox.y;
  42. var ul = pt.matrixTransform(matrix);
  43. var sparent = $(this.$element[0]);
  44. if (typeof $(this.$element[0]).scrollParent == 'function') {
  45. sparent = $(this.$element[0]).scrollParent();
  46. }
  47. pos.top = ul.y + sparent.scrollTop();
  48. pos.left = ul.x + sparent.scrollLeft();
  49.  
  50. pt.x += bbox.width;
  51. pt.y += bbox.height;
  52. var lr = pt.matrixTransform(matrix);
  53. pos.width += lr.x - ul.x;
  54. pos.height += lr.y - ul.y;
  55. }
  56.  
  57.  
  58. var actualWidth = $tip[0].offsetWidth,
  59. actualHeight = $tip[0].offsetHeight,
  60. gravity = maybeCall(this.options.gravity, this.$element[0]);
  61.  
  62. var tp;
  63. switch (gravity.charAt(0)) {
  64. case 'n':
  65. tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
  66. break;
  67. case 's':
  68. tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
  69. break;
  70. case 'e':
  71. tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
  72. break;
  73. case 'w':
  74. tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
  75. break;
  76. }
  77.  
  78. if (gravity.length == 2) {
  79. if (gravity.charAt(1) == 'w') {
  80. tp.left = pos.left + pos.width / 2 - 15;
  81. } else {
  82. tp.left = pos.left + pos.width / 2 - actualWidth + 15;
  83. }
  84. }
  85.  
  86. $tip.css(tp).addClass('tipsy-' + gravity);
  87. $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
  88. if (this.options.className) {
  89. $tip.addClass(maybeCall(this.options.className, this.$element[0]));
  90. }
  91.  
  92. if (this.options.fade) {
  93. $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
  94. } else {
  95. $tip.css({visibility: 'visible', opacity: this.options.opacity});
  96. }
  97. var t = this;
  98. var set_hovered = function(set_hover){
  99. return function(){
  100. t.$tip.stop();
  101. t.tipHovered = set_hover;
  102. if (!set_hover){
  103. if (t.options.delayOut == 0) {
  104. t.hide();
  105. } else {
  106. setTimeout(function() {
  107. if (t.hoverState == 'out') t.hide(); }, t.options.delayOut);
  108. }
  109. }
  110. }
  111. }
  112.  
  113. $tip.hover(set_hovered(true), set_hovered(false));
  114. }
  115. },
  116.  
  117. hide: function() {
  118. if (this.options.fade) {
  119. this.tip().stop().fadeOut(function() { $(this).remove(); });
  120. } else {
  121. this.tip().remove();
  122. }
  123. },
  124.  
  125. fixTitle: function() {
  126. var $e = this.$element;
  127. if (typeof $e.context.nearestViewportElement != 'object'){
  128. if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
  129. $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
  130. }
  131. } else{
  132.  
  133. if ($e.children('title').length){
  134. $e.append('<original-title>' + ($e.children('title').text() || '') + '</original-title>')
  135. .children('title').remove();
  136. }
  137. }
  138. },
  139.  
  140. getTitle: function() {
  141.  
  142. var title, $e = this.$element, o = this.options;
  143. this.fixTitle();
  144. var title, o = this.options;
  145.  
  146. if (typeof o.title == 'string') {
  147. var title_name = o.title == 'title' ? 'original-title' : o.title;
  148. if ($e.children(title_name).length){
  149. title = $e.children(title_name).html();
  150. } else{
  151. title = $e.attr(title_name);
  152. }
  153.  
  154. } else if (typeof o.title == 'function') {
  155. title = o.title.call($e[0]);
  156. }
  157. title = ('' + title).replace(/(^\s*|\s*$)/, "");
  158. return title || o.fallback;
  159. },
  160.  
  161. tip: function() {
  162. if (!this.$tip) {
  163. this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
  164. }
  165. return this.$tip;
  166. },
  167.  
  168. validate: function() {
  169. if (!this.$element[0].parentNode) {
  170. this.hide();
  171. this.$element = null;
  172. this.options = null;
  173. }
  174. },
  175.  
  176. enable: function() { this.enabled = true; },
  177. disable: function() { this.enabled = false; },
  178. toggleEnabled: function() { this.enabled = !this.enabled; }
  179. };
  180.  
  181. $.fn.tipsy = function(options) {
  182.  
  183. if (options === true) {
  184. return this.data('tipsy');
  185. } else if (typeof options == 'string') {
  186. var tipsy = this.data('tipsy');
  187. if (tipsy) tipsy[options]();
  188. return this;
  189. }
  190.  
  191. options = $.extend({}, $.fn.tipsy.defaults, options);
  192.  
  193. if (options.hoverlock && options.delayOut == 0) {
  194. options.delayOut = 100;
  195. }
  196.  
  197. function get(ele) {
  198. var tipsy = $.data(ele, 'tipsy');
  199. if (!tipsy) {
  200. tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
  201. $.data(ele, 'tipsy', tipsy);
  202. }
  203. return tipsy;
  204. }
  205.  
  206. function enter() {
  207. var tipsy = get(this);
  208. tipsy.hoverState = 'in';
  209. if (options.delayIn == 0) {
  210. tipsy.show();
  211. } else {
  212. tipsy.fixTitle();
  213. setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
  214. }
  215. };
  216.  
  217. function leave() {
  218. var tipsy = get(this);
  219. tipsy.hoverState = 'out';
  220. if (options.delayOut == 0) {
  221. tipsy.hide();
  222. } else {
  223. var to = function() {
  224. if (!tipsy.tipHovered || !options.hoverlock){
  225. if (tipsy.hoverState == 'out') tipsy.hide();
  226. }
  227. }
  228. setTimeout(to, options.delayOut);
  229. }
  230. };
  231.  
  232. if (options.trigger != 'manual') {
  233. var binder = options.live ? 'live' : 'bind',
  234. eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
  235. eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
  236. this[binder](eventIn, enter)[binder](eventOut, leave);
  237. }
  238.  
  239. return this;
  240.  
  241. };
  242.  
  243. $.fn.tipsy.defaults = {
  244. className: null,
  245. delayIn: 0,
  246. delayOut: 0,
  247. fade: false,
  248. fallback: '',
  249. gravity: 'n',
  250. html: false,
  251. live: false,
  252. offset: 0,
  253. opacity: 0.8,
  254. title: 'title',
  255. trigger: 'hover',
  256. hoverlock: fa;se,
  257. };
  258.  
  259. // Overwrite this method to provide options on a per-element basis.
  260. // For example, you could store the gravity in a 'tipsy-gravity' attribute:
  261. // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
  262. // (remember - do not modify 'options' in place!)
  263. $.fn.tipsy.elementOptions = function(ele, options) {
  264. return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
  265. };
  266.  
  267. $.fn.tipsy.autoNS = function() {
  268. return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
  269. };
  270.  
  271. $.fn.tipsy.autoWE = function() {
  272. return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
  273. };
  274.  
  275. /**
  276. * yields a closure of the supplied parameters, producing a function that takes
  277. * no arguments and is suitable for use as an autogravity function like so:
  278. *
  279. * @param margin (int) - distance from the viewable region edge that an
  280. * element should be before setting its tooltip's gravity to be away
  281. * from that edge.
  282. * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
  283. * if there are no viewable region edges effecting the tooltip's
  284. * gravity. It will try to vary from this minimally, for example,
  285. * if 'sw' is preferred and an element is near the right viewable
  286. * region edge, but not the top edge, it will set the gravity for
  287. * that element's tooltip to be 'se', preserving the southern
  288. * component.
  289. */
  290. $.fn.tipsy.autoBounds = function(margin, prefer) {
  291. return function() {
  292. var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
  293. boundTop = $(document).scrollTop() + margin,
  294. boundLeft = $(document).scrollLeft() + margin,
  295. $this = $(this);
  296.  
  297. if ($this.offset().top < boundTop) dir.ns = 'n';
  298. if ($this.offset().left < boundLeft) dir.ew = 'w';
  299. if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
  300. if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
  301.  
  302. return dir.ns + (dir.ew ? dir.ew : '');
  303. }
  304. };
  305. })(jQuery);
Add Comment
Please, Sign In to add comment