smf_jquery_plugins.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. /*
  2. * SMFtooltip, Basic JQuery function to provide styled tooltips
  3. *
  4. * - will use the hoverintent plugin if available
  5. * - shows the tooltip in a div with the class defined in tooltipClass
  6. * - moves all selector titles to a hidden div and removes the title attribute to
  7. * prevent any default browser actions
  8. * - attempts to keep the tooltip on screen
  9. *
  10. * Simple Machines Forum (SMF)
  11. *
  12. * @package SMF
  13. * @author Simple Machines http://www.simplemachines.org
  14. * @copyright 2011 Simple Machines
  15. * @license http://www.simplemachines.org/about/smf/license.php BSD
  16. *
  17. * @version 2.1 Alpha 1
  18. *
  19. */
  20. (function($) {
  21. $.fn.SMFtooltip = function(oInstanceSettings) {
  22. $.fn.SMFtooltip.oDefaultsSettings = {
  23. followMouse: 1,
  24. hoverIntent: {sensitivity: 10, interval: 300, timeout: 50},
  25. positionTop: 12,
  26. positionLeft: 12,
  27. tooltipID: 'smf_tooltip',
  28. tooltipClass: 'tooltip',
  29. tooltipTextID: 'smf_tooltipText'
  30. };
  31. // account for any user options
  32. var oSettings = $.extend({}, $.fn.SMFtooltip.oDefaultsSettings , oInstanceSettings || {});
  33. // move passed selector titles to a hidden span, then remove the selector title to prevent any default browser actions
  34. $(this).each(function()
  35. {
  36. var sTitle = $('<span class="' + oSettings.tooltipClass + '">' + this.title + '</span>').hide();
  37. $(this).append(sTitle).attr('title', '');
  38. });
  39. // determine where we are going to place the tooltip, while trying to keep it on screen
  40. var positionTooltip = function(event)
  41. {
  42. var iPosx = 0;
  43. var iPosy = 0;
  44. if (!event)
  45. var event = window.event;
  46. if (event.pageX || event.pageY)
  47. {
  48. iPosx = event.pageX;
  49. iPosy = event.pageY;
  50. }
  51. else if (event.clientX || event.clientY)
  52. {
  53. iPosx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  54. iPosy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  55. }
  56. // Position of the tooltip top left corner and its size
  57. var oPosition = {
  58. x: iPosx + oSettings.positionLeft,
  59. y: iPosy + oSettings.positionTop,
  60. w: $('#' + oSettings.tooltipID).width(),
  61. h: $('#' + oSettings.tooltipID).height()
  62. }
  63. // Display limits and window scroll postion
  64. var oLimits = {
  65. x: $(window).scrollLeft(),
  66. y: $(window).scrollTop(),
  67. w: $(window).width() - 24,
  68. h: $(window).height() - 24
  69. };
  70. // don't go off screen with our tooltop
  71. if ((oPosition.y + oPosition.h > oLimits.y + oLimits.h) && (oPosition.x + oPosition.w > oLimits.x + oLimits.w))
  72. {
  73. oPosition.x = (oPosition.x - oPosition.w) - 45;
  74. oPosition.y = (oPosition.y - oPosition.h) - 45;
  75. }
  76. else if ((oPosition.x + oPosition.w) > (oLimits.x + oLimits.w))
  77. {
  78. oPosition.x = oPosition.x - (((oPosition.x + oPosition.w) - (oLimits.x + oLimits.w)) + 24);
  79. }
  80. else if (oPosition.y + oPosition.h > oLimits.y + oLimits.h)
  81. {
  82. oPosition.y = oPosition.y - (((oPosition.y + oPosition.h) - (oLimits.y + oLimits.h)) + 24);
  83. }
  84. // finally set the position we determined
  85. $('#' + oSettings.tooltipID).css({'left': oPosition.x + 'px', 'top': oPosition.y + 'px'});
  86. }
  87. // used to show a tooltip
  88. var showTooltip = function(){
  89. $('#' + oSettings.tooltipID + ' #' + oSettings.tooltipTextID).show();
  90. }
  91. // used to hide a tooltip
  92. var hideTooltip = function(valueOfThis){
  93. $('#' + oSettings.tooltipID).fadeOut('slow').trigger("unload").remove();
  94. }
  95. // for all of the elements that match the selector on the page, lets set up some actions
  96. return this.each(function(index)
  97. {
  98. // if we find hoverIntent use it
  99. if ($.fn.hoverIntent)
  100. {
  101. $(this).hoverIntent({
  102. sensitivity: oSettings.hoverIntent.sensitivity,
  103. interval: oSettings.hoverIntent.interval,
  104. over: smf_tooltip_on,
  105. timeout: oSettings.hoverIntent.timeout,
  106. out: smf_tooltip_off
  107. });
  108. }
  109. else
  110. {
  111. // plain old hover it is
  112. $(this).hover(smf_tooltip_on, smf_tooltip_off);
  113. }
  114. // create the on tip action
  115. function smf_tooltip_on(event)
  116. {
  117. // Grab the text from the hidden span element we created on page load
  118. if ($(this).children('.' + oSettings.tooltipClass).text())
  119. {
  120. // create a ID'ed div with our style class that holds the tooltip info, hidden for now
  121. $('body').append('<div id="' + oSettings.tooltipID + '" class="' + oSettings.tooltipClass + '"><div id="' + oSettings.tooltipTextID + '" style="display:none;"></div></div>');
  122. // load information in to our newly created div
  123. var $tt = $('#' + oSettings.tooltipID);
  124. var $ttContent = $('#' + oSettings.tooltipID + ' #' + oSettings.tooltipTextID);
  125. // set the text in the div
  126. $ttContent.text($(this).children('.' + oSettings.tooltipClass).text());
  127. $tt.show();
  128. // show then position or it may postion off screen
  129. showTooltip();
  130. positionTooltip(event);
  131. }
  132. return false;
  133. };
  134. // create the Bye bye tip
  135. function smf_tooltip_off(event)
  136. {
  137. hideTooltip(this);
  138. return false;
  139. };
  140. // create the tip move with the cursor
  141. if (oSettings.followMouse)
  142. {
  143. $(this).bind("mousemove", function(event){
  144. positionTooltip(event);
  145. return false;
  146. });
  147. }
  148. });
  149. };
  150. })(jQuery);
  151. /**
  152. * hoverIntent is similar to jQuery's built-in "hover" function except that
  153. * instead of firing the onMouseOver event immediately, hoverIntent checks
  154. * to see if the user's mouse has slowed down (beneath the sensitivity
  155. * threshold) before firing the onMouseOver event.
  156. *
  157. * hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
  158. * <http://cherne.net/brian/resources/jquery.hoverIntent.html>
  159. *
  160. * hoverIntent is currently available for use in all personal or commercial
  161. * projects under both MIT and GPL licenses. This means that you can choose
  162. * the license that best suits your project, and use it accordingly.
  163. *
  164. * // basic usage (just like .hover) receives onMouseOver and onMouseOut functions
  165. * $("ul li").hoverIntent( showNav , hideNav );
  166. *
  167. * // advanced usage receives configuration object only
  168. * $("ul li").hoverIntent({
  169. * sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
  170. * interval: 100, // number = milliseconds of polling interval
  171. * over: showNav, // function = onMouseOver callback (required)
  172. * timeout: 0, // number = milliseconds delay before onMouseOut function call
  173. * out: hideNav // function = onMouseOut callback (required)
  174. * });
  175. *
  176. * @param f onMouseOver function || An object with configuration options
  177. * @param g onMouseOut function || Nothing (use configuration options object)
  178. * @author Brian Cherne brian(at)cherne(dot)net
  179. */
  180. /*
  181. * PLEASE READ THE FOLLOWING BEFORE PLAYING AROUND WITH ANYTHING. KTHNX.
  182. * SMF Dev copy - Antechinus - 20th October 2011.
  183. * Code has been tweaked to give responsive menus without compromising a11y.
  184. * If contemplating changes, testing for full functionality is essential or a11y will be degraded.
  185. * Since a11y is the whole point of this system, degradation is not at all desirable regardless of personal preferences.
  186. * If you do not understand the a11y advantages of this system, please ask before making changes.
  187. *
  188. * Full functionality means:
  189. * 1/ hoverIntent plugin functions so that drop menus do NOT open or close instantly when cursor touches first level anchor.
  190. * 2/ The drop menus should only open when the cursor actually stops on the first level anchor, or is moving very slowly.
  191. * 3/ There should be a delay before the drop menus close on mouseout, for people with less than perfect tracking ability.
  192. * 4/ Settings for custom tooltips will be done separately in another file.
  193. */
  194. (function($) {
  195. $.fn.hoverIntent = function(f,g) {
  196. // default configuration options
  197. var cfg = {
  198. sensitivity: 7,
  199. interval: 100,
  200. timeout: 0
  201. };
  202. // override configuration options with user supplied object
  203. cfg = $.extend(cfg, g ? { over: f, out: g } : f );
  204. // instantiate variables
  205. // cX, cY = current X and Y position of mouse, updated by mousemove event
  206. // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
  207. var cX, cY, pX, pY;
  208. // A private function for getting mouse position
  209. var track = function(ev) {
  210. cX = ev.pageX;
  211. cY = ev.pageY;
  212. };
  213. // A private function for comparing current and previous mouse position
  214. var compare = function(ev,ob) {
  215. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  216. // compare mouse positions to see if they've crossed the threshold
  217. if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
  218. $(ob).unbind("mousemove",track);
  219. // set hoverIntent state to true (so mouseOut can be called)
  220. ob.hoverIntent_s = 1;
  221. return cfg.over.apply(ob,[ev]);
  222. } else {
  223. // set previous coordinates for next time
  224. pX = cX; pY = cY;
  225. // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
  226. ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
  227. }
  228. };
  229. // A private function for delaying the mouseOut function
  230. var delay = function(ev,ob) {
  231. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  232. ob.hoverIntent_s = 0;
  233. return cfg.out.apply(ob,[ev]);
  234. };
  235. // A private function for handling mouse 'hovering'
  236. var handleHover = function(e) {
  237. // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
  238. var p = (e.type == "mouseenter" ? e.fromElement : e.toElement) || e.relatedTarget;
  239. while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
  240. if ( p == this ) { return false; }
  241. // copy objects to be passed into t (required for event object to be passed in IE)
  242. var ev = jQuery.extend({},e);
  243. var ob = this;
  244. // cancel hoverIntent timer if it exists
  245. if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
  246. // if e.type == "mouseenter"
  247. if (e.type == "mouseenter") {
  248. // set "previous" X and Y position based on initial entry point
  249. pX = ev.pageX; pY = ev.pageY;
  250. // update "current" X and Y position based on mousemove
  251. $(ob).bind("mousemove",track);
  252. // start polling interval (self-calling timeout) to compare mouse coordinates over time
  253. if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
  254. // else e.type == "mouseleave"
  255. } else {
  256. // unbind expensive mousemove event
  257. $(ob).unbind("mousemove",track);
  258. // if hoverIntent state is true, then call the mouseOut function after the specified delay
  259. if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
  260. }
  261. };
  262. // bind the function to the two event listeners
  263. return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
  264. };
  265. })(jQuery);
  266. /*
  267. * Superfish v1.4.8 - jQuery menu widget
  268. * Copyright (c) 2008 Joel Birch
  269. *
  270. * Dual licensed under the MIT and GPL licenses:
  271. * http://www.opensource.org/licenses/mit-license.php
  272. * http://www.gnu.org/licenses/gpl.html
  273. *
  274. * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
  275. */
  276. /*
  277. * PLEASE READ THE FOLLOWING BEFORE PLAYING AROUND WITH ANYTHING. KTHNX.
  278. * Dev copy. Antechinus - 20th October 2011.
  279. * Code has been tweaked to remove stuff we do not need (IE7 fix, etc).
  280. * Remaining code appears to be essential for full functionality.
  281. * If contemplating changes, testing for full functionality is essential or a11y will be degraded.
  282. * Since a11y is the whole point of this system, degradation is not at all desirable regardless of personal preferences.
  283. * If you do not understand the a11y advantages of this system, please ask before making changes.
  284. *
  285. * Full functionality means:
  286. * 1/ hoverIntent plugin functions so that drop menus do NOT open or close instantly when cursor touches first level anchor.
  287. * 2/ The drop menus should only open when the cursor actually stops on the first level anchor, or is moving very slowly.
  288. * 3/ There should be a delay before the drop menus close on mouseout, for people with less than perfect tracking ability.
  289. * 4/ The drop menus must remain fully accessible via keyboard navigation (eg: the Tab key).
  290. */
  291. ;(function($){
  292. $.fn.superfish = function(op){
  293. var sf = $.fn.superfish,
  294. c = sf.c,
  295. over = function(){
  296. var $$ = $(this), menu = getMenu($$);
  297. clearTimeout(menu.sfTimer);
  298. $$.showSuperfishUl().siblings().hideSuperfishUl();
  299. },
  300. out = function(){
  301. var $$ = $(this), menu = getMenu($$), o = sf.op;
  302. clearTimeout(menu.sfTimer);
  303. menu.sfTimer=setTimeout(function(){
  304. o.retainPath=($.inArray($$[0],o.$path)>-1);
  305. $$.hideSuperfishUl();
  306. if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
  307. },o.delay);
  308. },
  309. getMenu = function($menu){
  310. var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
  311. sf.op = sf.o[menu.serial];
  312. return menu;
  313. },
  314. // This next line is essential, despite the other code for arrows being removed.
  315. // Changing the next line WILL break hoverIntent functionality. Very bad.
  316. addArrow = function($a){$a.addClass(c.anchorClass)};
  317. return this.each(function() {
  318. var s = this.serial = sf.o.length;
  319. var o = $.extend({},sf.defaults,op);
  320. var h = $.extend({},sf.hoverdefaults,{over: over, out: out},op);
  321. o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
  322. $(this).addClass([o.hoverClass,c.bcClass].join(' '))
  323. .filter('li:has(ul)').removeClass(o.pathClass);
  324. });
  325. sf.o[s] = sf.op = o;
  326. $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](($.fn.hoverIntent && !o.disableHI) ? (h) : (over,out)).each(function() {})
  327. .not('.'+c.bcClass)
  328. .hideSuperfishUl();
  329. var $a = $('a',this);
  330. $a.each(function(i){
  331. var $li = $a.eq(i).parents('li');
  332. $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
  333. });
  334. o.onInit.call(this);
  335. }).each(function() {
  336. var menuClasses = [c.menuClass];
  337. $(this).addClass(menuClasses.join(' '));
  338. });
  339. };
  340. var sf = $.fn.superfish;
  341. sf.o = [];
  342. sf.op = {};
  343. sf.c = {
  344. bcClass : 'sf-breadcrumb',
  345. menuClass : 'sf-js-enabled',
  346. anchorClass : 'sf-with-ul',
  347. };
  348. sf.defaults = {
  349. hoverClass : 'sfhover',
  350. pathClass : 'current',
  351. pathLevels : 1,
  352. delay : 700,
  353. animation : {opacity:'show', height:'show'},
  354. speed : 300,
  355. disableHI : false, // Leave as false. True disables hoverIntent detection (not good).
  356. onInit : function(){}, // callback functions
  357. onBeforeShow: function(){},
  358. onShow : function(){},
  359. onHide : function(){}
  360. };
  361. sf.hoverdefaults = {
  362. sensitivity : 10,
  363. interval : 40,
  364. timeout : 1
  365. };
  366. $.fn.extend({
  367. hideSuperfishUl : function(){
  368. var o = sf.op,
  369. not = (o.retainPath===true) ? o.$path : '';
  370. o.retainPath = false;
  371. var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
  372. .find('>ul').hide().css('opacity','0');
  373. o.onHide.call($ul);
  374. return this;
  375. },
  376. showSuperfishUl : function(){
  377. var o = sf.op,
  378. sh = sf.c,
  379. $ul = this.addClass(o.hoverClass)
  380. .find('>ul:hidden').css('opacity','1');
  381. o.onBeforeShow.call($ul);
  382. $ul.animate(o.animation,o.speed,function(){o.onShow.call($ul);});
  383. return this;
  384. }
  385. });
  386. })(jQuery);