smf_jquery_plugins.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  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 2013 Simple Machines and individual contributors
  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', // ID used on the outer div
  28. tooltipTextID: 'smf_tooltipText', // as above but on the inner div holding the text
  29. tooltipClass: 'tooltip', // The class applied to the outer div (that displays on hover), use this in your css
  30. tooltipSwapClass: 'smf_swaptip', // a class only used internally, change only if you have a conflict
  31. tooltipContent: 'html' // display captured title text as html or text
  32. };
  33. // account for any user options
  34. var oSettings = $.extend({}, $.fn.SMFtooltip.oDefaultsSettings , oInstanceSettings || {});
  35. // move passed selector titles to a hidden span, then remove the selector title to prevent any default browser actions
  36. $(this).each(function()
  37. {
  38. var sTitle = $('<span class="' + oSettings.tooltipSwapClass + '">' + htmlspecialchars(this.title) + '</span>').hide();
  39. $(this).append(sTitle).attr('title', '');
  40. });
  41. // determine where we are going to place the tooltip, while trying to keep it on screen
  42. var positionTooltip = function(event)
  43. {
  44. var iPosx = 0;
  45. var iPosy = 0;
  46. if (!event)
  47. var event = window.event;
  48. if (event.pageX || event.pageY)
  49. {
  50. iPosx = event.pageX;
  51. iPosy = event.pageY;
  52. }
  53. else if (event.clientX || event.clientY)
  54. {
  55. iPosx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  56. iPosy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  57. }
  58. // Position of the tooltip top left corner and its size
  59. var oPosition = {
  60. x: iPosx + oSettings.positionLeft,
  61. y: iPosy + oSettings.positionTop,
  62. w: $('#' + oSettings.tooltipID).width(),
  63. h: $('#' + oSettings.tooltipID).height()
  64. }
  65. // Display limits and window scroll postion
  66. var oLimits = {
  67. x: $(window).scrollLeft(),
  68. y: $(window).scrollTop(),
  69. w: $(window).width() - 24,
  70. h: $(window).height() - 24
  71. };
  72. // don't go off screen with our tooltop
  73. if ((oPosition.y + oPosition.h > oLimits.y + oLimits.h) && (oPosition.x + oPosition.w > oLimits.x + oLimits.w))
  74. {
  75. oPosition.x = (oPosition.x - oPosition.w) - 45;
  76. oPosition.y = (oPosition.y - oPosition.h) - 45;
  77. }
  78. else if ((oPosition.x + oPosition.w) > (oLimits.x + oLimits.w))
  79. {
  80. oPosition.x = oPosition.x - (((oPosition.x + oPosition.w) - (oLimits.x + oLimits.w)) + 24);
  81. }
  82. else if (oPosition.y + oPosition.h > oLimits.y + oLimits.h)
  83. {
  84. oPosition.y = oPosition.y - (((oPosition.y + oPosition.h) - (oLimits.y + oLimits.h)) + 24);
  85. }
  86. // finally set the position we determined
  87. $('#' + oSettings.tooltipID).css({'left': oPosition.x + 'px', 'top': oPosition.y + 'px'});
  88. }
  89. // used to show a tooltip
  90. var showTooltip = function(){
  91. $('#' + oSettings.tooltipID + ' #' + oSettings.tooltipTextID).show();
  92. }
  93. // used to hide a tooltip
  94. var hideTooltip = function(valueOfThis){
  95. $('#' + oSettings.tooltipID).fadeOut('slow').trigger("unload").remove();
  96. }
  97. // used to keep html encoded
  98. function htmlspecialchars(string)
  99. {
  100. return $('<span>').text(string).html();
  101. }
  102. // for all of the elements that match the selector on the page, lets set up some actions
  103. return this.each(function(index)
  104. {
  105. // if we find hoverIntent use it
  106. if ($.fn.hoverIntent)
  107. {
  108. $(this).hoverIntent({
  109. sensitivity: oSettings.hoverIntent.sensitivity,
  110. interval: oSettings.hoverIntent.interval,
  111. over: smf_tooltip_on,
  112. timeout: oSettings.hoverIntent.timeout,
  113. out: smf_tooltip_off
  114. });
  115. }
  116. else
  117. {
  118. // plain old hover it is
  119. $(this).hover(smf_tooltip_on, smf_tooltip_off);
  120. }
  121. // create the on tip action
  122. function smf_tooltip_on(event)
  123. {
  124. // If we have text in the hidden span element we created on page load
  125. if ($(this).children('.' + oSettings.tooltipSwapClass).text())
  126. {
  127. // create a ID'ed div with our style class that holds the tooltip info, hidden for now
  128. $('body').append('<div id="' + oSettings.tooltipID + '" class="' + oSettings.tooltipClass + '"><div id="' + oSettings.tooltipTextID + '" style="display:none;"></div></div>');
  129. // load information in to our newly created div
  130. var tt = $('#' + oSettings.tooltipID);
  131. var ttContent = $('#' + oSettings.tooltipID + ' #' + oSettings.tooltipTextID);
  132. if (oSettings.tooltipContent == 'html')
  133. ttContent.html($(this).children('.' + oSettings.tooltipSwapClass).html());
  134. else
  135. ttContent.text($(this).children('.' + oSettings.tooltipSwapClass).text());
  136. oSettings.tooltipContent
  137. // show then position or it may postion off screen
  138. tt.show();
  139. showTooltip();
  140. positionTooltip(event);
  141. }
  142. return false;
  143. };
  144. // create the Bye bye tip
  145. function smf_tooltip_off(event)
  146. {
  147. hideTooltip(this);
  148. return false;
  149. };
  150. // create the tip move with the cursor
  151. if (oSettings.followMouse)
  152. {
  153. $(this).bind("mousemove", function(event){
  154. positionTooltip(event);
  155. return false;
  156. });
  157. }
  158. // clear the tip on a click
  159. $(this).bind("click", function(event){
  160. hideTooltip(this);
  161. return true;
  162. });
  163. });
  164. };
  165. })(jQuery);
  166. /**
  167. * hoverIntent is similar to jQuery's built-in "hover" function except that
  168. * instead of firing the onMouseOver event immediately, hoverIntent checks
  169. * to see if the user's mouse has slowed down (beneath the sensitivity
  170. * threshold) before firing the onMouseOver event.
  171. *
  172. * hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
  173. * <http://cherne.net/brian/resources/jquery.hoverIntent.html>
  174. *
  175. * hoverIntent is currently available for use in all personal or commercial
  176. * projects under MIT license.
  177. *
  178. * // basic usage (just like .hover) receives onMouseOver and onMouseOut functions
  179. * $("ul li").hoverIntent( showNav , hideNav );
  180. *
  181. * // advanced usage receives configuration object only
  182. * $("ul li").hoverIntent({
  183. * sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
  184. * interval: 100, // number = milliseconds of polling interval
  185. * over: showNav, // function = onMouseOver callback (required)
  186. * timeout: 0, // number = milliseconds delay before onMouseOut function call
  187. * out: hideNav // function = onMouseOut callback (required)
  188. * });
  189. *
  190. * @param f onMouseOver function || An object with configuration options
  191. * @param g onMouseOut function || Nothing (use configuration options object)
  192. * @author Brian Cherne brian(at)cherne(dot)net
  193. */
  194. /*
  195. * PLEASE READ THE FOLLOWING BEFORE PLAYING AROUND WITH ANYTHING. KTHNX.
  196. * SMF Dev copy - Antechinus - 20th October 2011.
  197. * Code has been tweaked to give responsive menus without compromising a11y.
  198. * If contemplating changes, testing for full functionality is essential or a11y will be degraded.
  199. * Since a11y is the whole point of this system, degradation is not at all desirable regardless of personal preferences.
  200. * If you do not understand the a11y advantages of this system, please ask before making changes.
  201. *
  202. * Full functionality means:
  203. * 1/ hoverIntent plugin functions so that drop menus do NOT open or close instantly when cursor touches first level anchor.
  204. * 2/ The drop menus should only open when the cursor actually stops on the first level anchor, or is moving very slowly.
  205. * 3/ There should be a delay before the drop menus close on mouseout, for people with less than perfect tracking ability.
  206. * 4/ Settings for custom tooltips will be done separately in another file.
  207. */
  208. (function($) {
  209. $.fn.hoverIntent = function(f,g) {
  210. // default configuration options
  211. var cfg = {
  212. sensitivity: 7,
  213. interval: 100,
  214. timeout: 0
  215. };
  216. // override configuration options with user supplied object
  217. cfg = $.extend(cfg, g ? { over: f, out: g } : f );
  218. // instantiate variables
  219. // cX, cY = current X and Y position of mouse, updated by mousemove event
  220. // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
  221. var cX, cY, pX, pY;
  222. // A private function for getting mouse position
  223. var track = function(ev) {
  224. cX = ev.pageX;
  225. cY = ev.pageY;
  226. };
  227. // A private function for comparing current and previous mouse position
  228. var compare = function(ev,ob) {
  229. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  230. // compare mouse positions to see if they've crossed the threshold
  231. if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
  232. $(ob).unbind("mousemove",track);
  233. // set hoverIntent state to true (so mouseOut can be called)
  234. ob.hoverIntent_s = 1;
  235. return cfg.over.apply(ob,[ev]);
  236. } else {
  237. // set previous coordinates for next time
  238. pX = cX; pY = cY;
  239. // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
  240. ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
  241. }
  242. };
  243. // A private function for delaying the mouseOut function
  244. var delay = function(ev,ob) {
  245. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  246. ob.hoverIntent_s = 0;
  247. return cfg.out.apply(ob,[ev]);
  248. };
  249. // A private function for handling mouse 'hovering'
  250. var handleHover = function(e) {
  251. // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
  252. var p = (e.type == "mouseenter" ? e.fromElement : e.toElement) || e.relatedTarget;
  253. while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
  254. if ( p == this ) { return false; }
  255. // copy objects to be passed into t (required for event object to be passed in IE)
  256. var ev = jQuery.extend({},e);
  257. var ob = this;
  258. // cancel hoverIntent timer if it exists
  259. if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
  260. // if e.type == "mouseenter"
  261. if (e.type == "mouseenter") {
  262. // set "previous" X and Y position based on initial entry point
  263. pX = ev.pageX; pY = ev.pageY;
  264. // update "current" X and Y position based on mousemove
  265. $(ob).bind("mousemove",track);
  266. // start polling interval (self-calling timeout) to compare mouse coordinates over time
  267. if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
  268. // else e.type == "mouseleave"
  269. } else {
  270. // unbind expensive mousemove event
  271. $(ob).unbind("mousemove",track);
  272. // if hoverIntent state is true, then call the mouseOut function after the specified delay
  273. if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
  274. }
  275. };
  276. // bind the function to the two event listeners
  277. return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
  278. };
  279. })(jQuery);
  280. /*
  281. * Superfish v1.4.8 - jQuery menu widget
  282. * Copyright (c) 2008 Joel Birch
  283. *
  284. * Licensed under the MIT license:
  285. * http://www.opensource.org/licenses/mit-license.php
  286. *
  287. * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
  288. */
  289. /*
  290. * PLEASE READ THE FOLLOWING BEFORE PLAYING AROUND WITH ANYTHING. KTHNX.
  291. * Dev copy. Antechinus - 20th October 2011.
  292. * Code has been tweaked to remove stuff we do not need (IE7 fix, etc).
  293. * Remaining code appears to be essential for full functionality.
  294. * If contemplating changes, testing for full functionality is essential or a11y will be degraded.
  295. * Since a11y is the whole point of this system, degradation is not at all desirable regardless of personal preferences.
  296. * If you do not understand the a11y advantages of this system, please ask before making changes.
  297. *
  298. * Full functionality means:
  299. * 1/ hoverIntent plugin functions so that drop menus do NOT open or close instantly when cursor touches first level anchor.
  300. * 2/ The drop menus should only open when the cursor actually stops on the first level anchor, or is moving very slowly.
  301. * 3/ There should be a delay before the drop menus close on mouseout, for people with less than perfect tracking ability.
  302. * 4/ The drop menus must remain fully accessible via keyboard navigation (eg: the Tab key).
  303. */
  304. ;(function($){
  305. $.fn.superfish = function(op){
  306. var sf = $.fn.superfish,
  307. c = sf.c,
  308. over = function(){
  309. var $$ = $(this), menu = getMenu($$);
  310. clearTimeout(menu.sfTimer);
  311. $$.showSuperfishUl().siblings().hideSuperfishUl();
  312. },
  313. out = function(){
  314. var $$ = $(this), menu = getMenu($$), o = sf.op;
  315. clearTimeout(menu.sfTimer);
  316. menu.sfTimer=setTimeout(function(){
  317. o.retainPath=($.inArray($$[0],o.$path)>-1);
  318. $$.hideSuperfishUl();
  319. if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
  320. },o.delay);
  321. },
  322. getMenu = function($menu){
  323. var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
  324. sf.op = sf.o[menu.serial];
  325. return menu;
  326. },
  327. // This next line is essential, despite the other code for arrows being removed.
  328. // Changing the next line WILL break hoverIntent functionality. Very bad.
  329. addArrow = function($a){$a.addClass(c.anchorClass)};
  330. return this.each(function() {
  331. var s = this.serial = sf.o.length;
  332. var o = $.extend({},sf.defaults,op);
  333. var h = $.extend({},sf.hoverdefaults,{over: over, out: out},op);
  334. o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
  335. $(this).addClass([o.hoverClass,c.bcClass].join(' '))
  336. .filter('li:has(ul)').removeClass(o.pathClass);
  337. });
  338. sf.o[s] = sf.op = o;
  339. $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](($.fn.hoverIntent && !o.disableHI) ? (h) : (over,out)).each(function() {})
  340. .not('.'+c.bcClass)
  341. .hideSuperfishUl();
  342. var $a = $('a',this);
  343. $a.each(function(i){
  344. var $li = $a.eq(i).parents('li');
  345. $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
  346. });
  347. o.onInit.call(this);
  348. }).each(function() {
  349. var menuClasses = [c.menuClass];
  350. $(this).addClass(menuClasses.join(' '));
  351. });
  352. };
  353. var sf = $.fn.superfish;
  354. sf.o = [];
  355. sf.op = {};
  356. sf.c = {
  357. bcClass : 'sf-breadcrumb',
  358. menuClass : 'sf-js-enabled',
  359. anchorClass : 'sf-with-ul',
  360. };
  361. sf.defaults = {
  362. hoverClass : 'sfhover',
  363. pathClass : 'current',
  364. pathLevels : 1,
  365. delay : 700,
  366. animation : {opacity:'show', height:'show'},
  367. speed : 300,
  368. disableHI : false, // Leave as false. True disables hoverIntent detection (not good).
  369. onInit : function(){}, // callback functions
  370. onBeforeShow: function(){},
  371. onShow : function(){},
  372. onHide : function(){}
  373. };
  374. sf.hoverdefaults = {
  375. sensitivity : 10,
  376. interval : 40,
  377. timeout : 1
  378. };
  379. $.fn.extend({
  380. hideSuperfishUl : function(){
  381. var o = sf.op,
  382. not = (o.retainPath===true) ? o.$path : '';
  383. o.retainPath = false;
  384. var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
  385. .find('>ul').hide().css('opacity','0');
  386. o.onHide.call($ul);
  387. return this;
  388. },
  389. showSuperfishUl : function(){
  390. var o = sf.op,
  391. sh = sf.c,
  392. $ul = this.addClass(o.hoverClass)
  393. .find('>ul:hidden').css('opacity','1');
  394. o.onBeforeShow.call($ul);
  395. $ul.animate(o.animation,o.speed,function(){o.onShow.call($ul);});
  396. return this;
  397. }
  398. });
  399. })(jQuery);
  400. /**
  401. * AnimaDrag
  402. * Animated jQuery Drag and Drop Plugin
  403. * Version 0.5.1 beta
  404. * Author Abel Mohler
  405. * Released with the MIT License: http://www.opensource.org/licenses/mit-license.php
  406. */
  407. (function($){
  408. $.fn.animaDrag = function(o, callback) {
  409. var defaults = {
  410. speed: 400,
  411. interval: 300,
  412. easing: null,
  413. cursor: 'move',
  414. boundary: document.body,
  415. grip: null,
  416. overlay: true,
  417. after: function(e) {},
  418. during: function(e) {},
  419. before: function(e) {},
  420. afterEachAnimation: function(e) {}
  421. }
  422. if(typeof callback == 'function') {
  423. defaults.after = callback;
  424. }
  425. o = $.extend(defaults, o || {});
  426. return this.each(function() {
  427. var id, startX, startY, draggableStartX, draggableStartY, dragging = false, Ev, draggable = this,
  428. grip = ($(this).find(o.grip).length > 0) ? $(this).find(o.grip) : $(this);
  429. if(o.boundary) {
  430. var limitTop = $(o.boundary).offset().top, limitLeft = $(o.boundary).offset().left,
  431. limitBottom = limitTop + $(o.boundary).innerHeight(), limitRight = limitLeft + $(o.boundary).innerWidth();
  432. }
  433. grip.mousedown(function(e) {
  434. o.before.call(draggable, e);
  435. var lastX, lastY;
  436. dragging = true;
  437. Ev = e;
  438. startX = lastX = e.pageX;
  439. startY = lastY = e.pageY;
  440. draggableStartX = $(draggable).offset().left;
  441. draggableStartY = $(draggable).offset().top;
  442. $(draggable).css({
  443. position: 'absolute',
  444. left: draggableStartX + 'px',
  445. top: draggableStartY + 'px',
  446. cursor: o.cursor,
  447. zIndex: '1010'
  448. }).addClass('anima-drag').appendTo(document.body);
  449. if(o.overlay && $('#anima-drag-overlay').length == 0) {
  450. $('<div id="anima-drag-overlay"></div>').css({
  451. position: 'absolute',
  452. top: '0',
  453. left: '0',
  454. zIndex: '1000',
  455. width: $(document.body).outerWidth() + 'px',
  456. height: $(document.body).outerHeight() + 'px'
  457. }).appendTo(document.body);
  458. }
  459. else if(o.overlay) {
  460. $('#anima-drag-overlay').show();
  461. }
  462. id = setInterval(function() {
  463. if(lastX != Ev.pageX || lastY != Ev.pageY) {
  464. var positionX = draggableStartX - (startX - Ev.pageX), positionY = draggableStartY - (startY - Ev.pageY);
  465. if(positionX < limitLeft && o.boundary) {
  466. positionX = limitLeft;
  467. }
  468. else if(positionX + $(draggable).innerWidth() > limitRight && o.boundary) {
  469. positionX = limitRight - $(draggable).outerWidth();
  470. }
  471. if(positionY < limitTop && o.boundary) {
  472. positionY = limitTop;
  473. }
  474. else if(positionY + $(draggable).innerHeight() > limitBottom && o.boundary) {
  475. positionY = limitBottom - $(draggable).outerHeight();
  476. }
  477. $(draggable).stop().animate({
  478. left: positionX + 'px',
  479. top: positionY + 'px'
  480. }, o.speed, o.easing, function(){o.afterEachAnimation.call(draggable, Ev)});
  481. }
  482. lastX = Ev.pageX;
  483. lastY = Ev.pageY;
  484. }, o.interval);
  485. ($.browser.safari || e.preventDefault());
  486. });
  487. $(document).mousemove(function(e) {
  488. if(dragging) {
  489. Ev = e;
  490. o.during.call(draggable, e);
  491. }
  492. });
  493. $(document).mouseup(function(e) {
  494. if(dragging) {
  495. $(draggable).css({
  496. cursor: '',
  497. zIndex: '990'
  498. }).removeClass('anima-drag');
  499. $('#anima-drag-overlay').hide().appendTo(document.body);
  500. clearInterval(id);
  501. o.after.call(draggable, e);
  502. dragging = false;
  503. }
  504. });
  505. });
  506. }
  507. })(jQuery);