f792d24_jquery.joyride-2.0.3_10.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. /*
  2. * jQuery Foundation Joyride Plugin 2.0.3
  3. * http://foundation.zurb.com
  4. * Copyright 2012, ZURB
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. */
  8. /*jslint unparam: true, browser: true, indent: 2 */
  9. ;(function ($, window, undefined) {
  10. 'use strict';
  11. var defaults = {
  12. 'version' : '2.0.3',
  13. 'tipLocation' : 'bottom', // 'top' or 'bottom' in relation to parent
  14. 'nubPosition' : 'auto', // override on a per tooltip bases
  15. 'scrollSpeed' : 300, // Page scrolling speed in milliseconds
  16. 'timer' : 0, // 0 = no timer , all other numbers = timer in milliseconds
  17. 'startTimerOnClick' : true, // true or false - true requires clicking the first button start the timer
  18. 'startOffset' : 0, // the index of the tooltip you want to start on (index of the li)
  19. 'nextButton' : true, // true or false to control whether a next button is used
  20. 'tipAnimation' : 'fade', // 'pop' or 'fade' in each tip
  21. 'pauseAfter' : [], // array of indexes where to pause the tour after
  22. 'tipAnimationFadeSpeed': 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
  23. 'cookieMonster' : false, // true or false to control whether cookies are used
  24. 'cookieName' : 'joyride', // Name the cookie you'll use
  25. 'cookieDomain' : false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
  26. 'tipContainer' : 'body', // Where will the tip be attached
  27. 'postRideCallback' : $.noop, // A method to call once the tour closes (canceled or complete)
  28. 'postStepCallback' : $.noop, // A method to call after each step
  29. 'template' : { // HTML segments for tip layout
  30. 'link' : '<a href="#close" class="joyride-close-tip">X</a>',
  31. 'timer' : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
  32. 'tip' : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
  33. 'wrapper' : '<div class="joyride-content-wrapper"></div>',
  34. 'button' : '<a href="#" class="joyride-next-tip"></a>'
  35. }
  36. },
  37. Modernizr = Modernizr || false,
  38. settings = {},
  39. methods = {
  40. init : function (opts) {
  41. return this.each(function () {
  42. if ($.isEmptyObject(settings)) {
  43. settings = $.extend(true, defaults, opts);
  44. // non configurable settings
  45. settings.document = window.document;
  46. settings.$document = $(settings.document);
  47. settings.$window = $(window);
  48. settings.$content_el = $(this);
  49. settings.body_offset = $(settings.tipContainer).position();
  50. settings.$tip_content = $('> li', settings.$content_el);
  51. settings.paused = false;
  52. settings.attempts = 0;
  53. settings.tipLocationPatterns = {
  54. top: ['bottom'],
  55. bottom: [], // bottom should not need to be repositioned
  56. left: ['right', 'top', 'bottom'],
  57. right: ['left', 'top', 'bottom']
  58. };
  59. // are we using jQuery 1.7+
  60. methods.jquery_check();
  61. // can we create cookies?
  62. if (!$.isFunction($.cookie)) {
  63. settings.cookieMonster = false;
  64. }
  65. // generate the tips and insert into dom.
  66. if (!settings.cookieMonster || !$.cookie(settings.cookieName)) {
  67. settings.$tip_content.each(function (index) {
  68. methods.create({$li : $(this), index : index});
  69. });
  70. // show first tip
  71. if (!settings.startTimerOnClick && settings.timer > 0) {
  72. methods.show('init');
  73. methods.startTimer();
  74. } else {
  75. methods.show('init');
  76. }
  77. }
  78. settings.$document.on('click.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
  79. e.preventDefault();
  80. if (settings.$li.next().length < 1) {
  81. methods.end();
  82. } else if (settings.timer > 0) {
  83. clearTimeout(settings.automate);
  84. methods.hide();
  85. methods.show();
  86. methods.startTimer();
  87. } else {
  88. methods.hide();
  89. methods.show();
  90. }
  91. });
  92. settings.$document.on('click.joyride', '.joyride-close-tip', function (e) {
  93. e.preventDefault();
  94. methods.end();
  95. });
  96. settings.$window.bind('resize.joyride', function (e) {
  97. if (methods.is_phone()) {
  98. methods.pos_phone();
  99. } else {
  100. methods.pos_default();
  101. }
  102. });
  103. } else {
  104. methods.restart();
  105. }
  106. });
  107. },
  108. // call this method when you want to resume the tour
  109. resume : function () {
  110. methods.set_li();
  111. methods.show();
  112. },
  113. nextTip: function(){
  114. if (settings.$li.next().length < 1) {
  115. methods.end();
  116. } else if (settings.timer > 0) {
  117. clearTimeout(settings.automate);
  118. methods.hide();
  119. methods.show();
  120. methods.startTimer();
  121. } else {
  122. methods.hide();
  123. methods.show();
  124. }
  125. },
  126. tip_template : function (opts) {
  127. var $blank, content;
  128. opts.tip_class = opts.tip_class || '';
  129. $blank = $(settings.template.tip).addClass(opts.tip_class);
  130. content = $.trim($(opts.li).html()) +
  131. methods.button_text(opts.button_text) +
  132. settings.template.link +
  133. methods.timer_instance(opts.index);
  134. $blank.append($(settings.template.wrapper));
  135. $blank.first().attr('data-index', opts.index);
  136. $('.joyride-content-wrapper', $blank).append(content);
  137. return $blank[0];
  138. },
  139. timer_instance : function (index) {
  140. var txt;
  141. if ((index === 0 && settings.startTimerOnClick && settings.timer > 0) || settings.timer === 0) {
  142. txt = '';
  143. } else {
  144. txt = methods.outerHTML($(settings.template.timer)[0]);
  145. }
  146. return txt;
  147. },
  148. button_text : function (txt) {
  149. if (settings.nextButton) {
  150. txt = $.trim(txt) || 'Next';
  151. txt = methods.outerHTML($(settings.template.button).append(txt)[0]);
  152. } else {
  153. txt = '';
  154. }
  155. return txt;
  156. },
  157. create : function (opts) {
  158. // backwards compatibility with data-text attribute
  159. var buttonText = opts.$li.attr('data-button') || opts.$li.attr('data-text'),
  160. tipClass = opts.$li.attr('class'),
  161. $tip_content = $(methods.tip_template({
  162. tip_class : tipClass,
  163. index : opts.index,
  164. button_text : buttonText,
  165. li : opts.$li
  166. }));
  167. $(settings.tipContainer).append($tip_content);
  168. },
  169. show : function (init) {
  170. var opts = {}, ii, opts_arr = [], opts_len = 0, p,
  171. $timer = null;
  172. // are we paused?
  173. if (settings.$li === undefined || ($.inArray(settings.$li.index(), settings.pauseAfter) === -1)) {
  174. // don't go to the next li if the tour was paused
  175. if (settings.paused) {
  176. settings.paused = false;
  177. } else {
  178. methods.set_li(init);
  179. }
  180. settings.attempts = 0;
  181. if (settings.$li.length && settings.$target.length > 0) {
  182. opts_arr = (settings.$li.data('options') || ':').split(';');
  183. opts_len = opts_arr.length;
  184. // parse options
  185. for (ii = opts_len - 1; ii >= 0; ii--) {
  186. p = opts_arr[ii].split(':');
  187. if (p.length === 2) {
  188. opts[$.trim(p[0])] = $.trim(p[1]);
  189. }
  190. }
  191. settings.tipSettings = $.extend({}, settings, opts);
  192. settings.tipSettings.tipLocationPattern = settings.tipLocationPatterns[settings.tipSettings.tipLocation];
  193. // scroll if not modal
  194. if (!/body/i.test(settings.$target.selector)) {
  195. methods.scroll_to();
  196. }
  197. if (methods.is_phone()) {
  198. methods.pos_phone(true);
  199. } else {
  200. methods.pos_default(true);
  201. }
  202. $timer = $('.joyride-timer-indicator', settings.$next_tip);
  203. if (/pop/i.test(settings.tipAnimation)) {
  204. $timer.outerWidth(0);
  205. if (settings.timer > 0) {
  206. settings.$next_tip.show();
  207. $timer.animate({
  208. width: $('.joyride-timer-indicator-wrap', settings.$next_tip).outerWidth()
  209. }, settings.timer);
  210. } else {
  211. settings.$next_tip.show();
  212. }
  213. } else if (/fade/i.test(settings.tipAnimation)) {
  214. $timer.outerWidth(0);
  215. if (settings.timer > 0) {
  216. settings.$next_tip.fadeIn(settings.tipAnimationFadeSpeed);
  217. settings.$next_tip.show();
  218. $timer.animate({
  219. width: $('.joyride-timer-indicator-wrap', settings.$next_tip).outerWidth()
  220. }, settings.timer);
  221. } else {
  222. settings.$next_tip.fadeIn(settings.tipAnimationFadeSpeed);
  223. }
  224. }
  225. settings.$current_tip = settings.$next_tip;
  226. // skip non-existent targets
  227. } else if (settings.$li && settings.$target.length < 1) {
  228. methods.show();
  229. } else {
  230. methods.end();
  231. }
  232. } else {
  233. settings.paused = true;
  234. }
  235. },
  236. // detect phones with media queries if supported.
  237. is_phone : function () {
  238. if (Modernizr) {
  239. return Modernizr.mq('only screen and (max-width: 767px)');
  240. }
  241. return (settings.$window.width() < 767) ? true : false;
  242. },
  243. hide : function () {
  244. settings.postStepCallback(settings.$li.index(), settings.$current_tip);
  245. $('.joyride-modal-bg').hide();
  246. settings.$current_tip.hide();
  247. },
  248. set_li : function (init) {
  249. if (init) {
  250. settings.$li = settings.$tip_content.eq(settings.startOffset);
  251. methods.set_next_tip();
  252. settings.$current_tip = settings.$next_tip;
  253. } else {
  254. settings.$li = settings.$li.next();
  255. methods.set_next_tip();
  256. }
  257. methods.set_target();
  258. },
  259. set_next_tip : function () {
  260. settings.$next_tip = $('.joyride-tip-guide[data-index=' + settings.$li.index() + ']');
  261. },
  262. set_target : function () {
  263. var cl = settings.$li.attr('data-class'),
  264. id = settings.$li.attr('data-id'),
  265. $sel = function () {
  266. if (id) {
  267. return $(settings.document.getElementById(id));
  268. } else if (cl) {
  269. return $('.' + cl).first();
  270. } else {
  271. return $('body');
  272. }
  273. };
  274. settings.$target = $sel();
  275. },
  276. scroll_to : function () {
  277. var window_half, tipOffset;
  278. window_half = settings.$window.height() / 2;
  279. tipOffset = Math.ceil(settings.$target.offset().top - window_half + settings.$next_tip.outerHeight());
  280. $("html, body").stop().animate({
  281. scrollTop: tipOffset
  282. }, settings.scrollSpeed);
  283. },
  284. paused : function () {
  285. if (($.inArray((settings.$li.index() + 1), settings.pauseAfter) === -1)) {
  286. return true;
  287. }
  288. return false;
  289. },
  290. destroy : function () {
  291. settings.$document.off('.joyride');
  292. $(window).off('.joyride');
  293. $('.joyride-close-tip, .joyride-next-tip, .joyride-modal-bg').off('.joyride');
  294. $('.joyride-tip-guide, .joyride-modal-bg').remove();
  295. clearTimeout(settings.automate);
  296. settings = {};
  297. },
  298. restart : function () {
  299. methods.hide();
  300. settings.$li = undefined;
  301. methods.show('init');
  302. },
  303. pos_default : function (init) {
  304. var half_fold = Math.ceil(settings.$window.height() / 2),
  305. tip_position = settings.$next_tip.offset(),
  306. $nub = $('.joyride-nub', settings.$next_tip),
  307. nub_height = Math.ceil($nub.outerHeight() / 2),
  308. toggle = init || false;
  309. // tip must not be "display: none" to calculate position
  310. if (toggle) {
  311. settings.$next_tip.css('visibility', 'hidden');
  312. settings.$next_tip.show();
  313. }
  314. if (!/body/i.test(settings.$target.selector)) {
  315. if (methods.bottom()) {
  316. settings.$next_tip.css({
  317. top: (settings.$target.offset().top + nub_height + settings.$target.outerHeight()),
  318. left: settings.$target.offset().left});
  319. methods.nub_position($nub, settings.tipSettings.nubPosition, 'top');
  320. } else if (methods.top()) {
  321. settings.$next_tip.css({
  322. top: (settings.$target.offset().top - settings.$next_tip.outerHeight() - nub_height),
  323. left: settings.$target.offset().left});
  324. methods.nub_position($nub, settings.tipSettings.nubPosition, 'bottom');
  325. } else if (methods.right()) {
  326. settings.$next_tip.css({
  327. top: settings.$target.offset().top,
  328. left: (settings.$target.outerWidth() + settings.$target.offset().left)});
  329. methods.nub_position($nub, settings.tipSettings.nubPosition, 'left');
  330. } else if (methods.left()) {
  331. settings.$next_tip.css({
  332. top: settings.$target.offset().top,
  333. left: (settings.$target.offset().left - settings.$next_tip.outerWidth() - nub_height)});
  334. methods.nub_position($nub, settings.tipSettings.nubPosition, 'right');
  335. }
  336. if (!methods.visible(methods.corners(settings.$next_tip)) && settings.attempts < settings.tipSettings.tipLocationPattern.length) {
  337. $nub.removeClass('bottom')
  338. .removeClass('top')
  339. .removeClass('right')
  340. .removeClass('left');
  341. settings.tipSettings.tipLocation = settings.tipSettings.tipLocationPattern[settings.attempts];
  342. settings.attempts++;
  343. methods.pos_default(true);
  344. }
  345. } else if (settings.$li.length) {
  346. methods.pos_modal($nub);
  347. }
  348. if (toggle) {
  349. settings.$next_tip.hide();
  350. settings.$next_tip.css('visibility', 'visible');
  351. }
  352. },
  353. pos_phone : function (init) {
  354. var tip_height = settings.$next_tip.outerHeight(),
  355. tip_offset = settings.$next_tip.offset(),
  356. target_height = settings.$target.outerHeight(),
  357. $nub = $('.joyride-nub', settings.$next_tip),
  358. nub_height = Math.ceil($nub.outerHeight() / 2),
  359. toggle = init || false;
  360. $nub.removeClass('bottom')
  361. .removeClass('top')
  362. .removeClass('right')
  363. .removeClass('left');
  364. if (toggle) {
  365. settings.$next_tip.css('visibility', 'hidden');
  366. settings.$next_tip.show();
  367. }
  368. if (!/body/i.test(settings.$target.selector)) {
  369. if (methods.top()) {
  370. settings.$next_tip.offset({top: settings.$target.offset().top - tip_height - nub_height});
  371. $nub.addClass('bottom');
  372. } else {
  373. settings.$next_tip.offset({top: settings.$target.offset().top + target_height + nub_height});
  374. $nub.addClass('top');
  375. }
  376. } else if (settings.$li.length) {
  377. methods.pos_modal($nub);
  378. }
  379. if (toggle) {
  380. settings.$next_tip.hide();
  381. settings.$next_tip.css('visibility', 'visible');
  382. }
  383. },
  384. pos_modal : function ($nub) {
  385. methods.center();
  386. $nub.hide();
  387. if ($('.joyride-modal-bg').length < 1) {
  388. $('body').append('<div class="joyride-modal-bg">').show();
  389. }
  390. if (/pop/i.test(settings.tipAnimation)) {
  391. $('.joyride-modal-bg').show();
  392. } else {
  393. $('.joyride-modal-bg').fadeIn(settings.tipAnimationFadeSpeed);
  394. }
  395. },
  396. center : function () {
  397. var $w = settings.$window;
  398. settings.$next_tip.css({
  399. top : ((($w.height() - settings.$next_tip.outerHeight()) / 2) + $w.scrollTop()),
  400. left : ((($w.width() - settings.$next_tip.outerWidth()) / 2) + $w.scrollLeft())
  401. });
  402. return true;
  403. },
  404. bottom : function () {
  405. return /bottom/i.test(settings.tipSettings.tipLocation);
  406. },
  407. top : function () {
  408. return /top/i.test(settings.tipSettings.tipLocation);
  409. },
  410. right : function () {
  411. return /right/i.test(settings.tipSettings.tipLocation);
  412. },
  413. left : function () {
  414. return /left/i.test(settings.tipSettings.tipLocation);
  415. },
  416. corners : function (el) {
  417. var w = settings.$window,
  418. right = w.width() + w.scrollLeft(),
  419. bottom = w.width() + w.scrollTop();
  420. return [
  421. el.offset().top <= w.scrollTop(),
  422. right <= el.offset().left + el.outerWidth(),
  423. bottom <= el.offset().top + el.outerHeight(),
  424. w.scrollLeft() >= el.offset().left
  425. ];
  426. },
  427. visible : function (hidden_corners) {
  428. var i = hidden_corners.length;
  429. while (i--) {
  430. if (hidden_corners[i]) return false;
  431. }
  432. return true;
  433. },
  434. nub_position : function (nub, pos, def) {
  435. if (pos === 'auto') {
  436. nub.addClass(def);
  437. } else {
  438. nub.addClass(pos);
  439. }
  440. },
  441. startTimer : function () {
  442. if (settings.$li.length) {
  443. settings.automate = setTimeout(function () {
  444. methods.hide();
  445. methods.show();
  446. methods.startTimer();
  447. }, settings.timer);
  448. } else {
  449. clearTimeout(settings.automate);
  450. }
  451. },
  452. end : function () {
  453. if (settings.cookieMonster) {
  454. $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
  455. }
  456. if (settings.timer > 0) {
  457. clearTimeout(settings.automate);
  458. }
  459. $('.joyride-modal-bg').hide();
  460. settings.$current_tip.hide();
  461. settings.postStepCallback(settings.$li.index(), settings.$current_tip);
  462. settings.postRideCallback(settings.$li.index(), settings.$current_tip);
  463. },
  464. jquery_check : function () {
  465. // define on() and off() for older jQuery
  466. if (!$.isFunction($.fn.on)) {
  467. $.fn.on = function (types, sel, fn) {
  468. return this.delegate(sel, types, fn);
  469. };
  470. $.fn.off = function (types, sel, fn) {
  471. return this.undelegate(sel, types, fn);
  472. };
  473. return false;
  474. }
  475. return true;
  476. },
  477. outerHTML : function (el) {
  478. // support FireFox < 11
  479. return el.outerHTML || new XMLSerializer().serializeToString(el);
  480. },
  481. version : function () {
  482. return settings.version;
  483. }
  484. };
  485. $.fn.joyride = function (method) {
  486. if (methods[method]) {
  487. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  488. } else if (typeof method === 'object' || !method) {
  489. return methods.init.apply(this, arguments);
  490. } else {
  491. $.error('Method ' + method + ' does not exist on jQuery.joyride');
  492. }
  493. };
  494. }(jQuery, this));