foundation.joyride.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. var Modernizr = Modernizr || false;
  4. Foundation.libs.joyride = {
  5. name : 'joyride',
  6. version : '5.3.3',
  7. defaults : {
  8. expose : false, // turn on or off the expose feature
  9. modal : true, // Whether to cover page with modal during the tour
  10. keyboard : true, // enable left, right and esc keystrokes
  11. tip_location : 'bottom', // 'top' or 'bottom' in relation to parent
  12. nub_position : 'auto', // override on a per tooltip bases
  13. scroll_speed : 1500, // Page scrolling speed in milliseconds, 0 = no scroll animation
  14. scroll_animation : 'linear', // supports 'swing' and 'linear', extend with jQuery UI.
  15. timer : 0, // 0 = no timer , all other numbers = timer in milliseconds
  16. start_timer_on_click : true, // true or false - true requires clicking the first button start the timer
  17. start_offset : 0, // the index of the tooltip you want to start on (index of the li)
  18. next_button : true, // true or false to control whether a next button is used
  19. prev_button : true, // true or false to control whether a prev button is used
  20. tip_animation : 'fade', // 'pop' or 'fade' in each tip
  21. pause_after : [], // array of indexes where to pause the tour after
  22. exposed : [], // array of expose elements
  23. tip_animation_fade_speed : 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
  24. cookie_monster : false, // true or false to control whether cookies are used
  25. cookie_name : 'joyride', // Name the cookie you'll use
  26. cookie_domain : false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
  27. cookie_expires : 365, // set when you would like the cookie to expire.
  28. tip_container : 'body', // Where will the tip be attached
  29. abort_on_close : true, // When true, the close event will not fire any callback
  30. tip_location_patterns : {
  31. top: ['bottom'],
  32. bottom: [], // bottom should not need to be repositioned
  33. left: ['right', 'top', 'bottom'],
  34. right: ['left', 'top', 'bottom']
  35. },
  36. post_ride_callback : function (){}, // A method to call once the tour closes (canceled or complete)
  37. post_step_callback : function (){}, // A method to call after each step
  38. pre_step_callback : function (){}, // A method to call before each step
  39. pre_ride_callback : function (){}, // A method to call before the tour starts (passed index, tip, and cloned exposed element)
  40. post_expose_callback : function (){}, // A method to call after an element has been exposed
  41. template : { // HTML segments for tip layout
  42. link : '<a href="#close" class="joyride-close-tip">&times;</a>',
  43. timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
  44. tip : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
  45. wrapper : '<div class="joyride-content-wrapper"></div>',
  46. button : '<a href="#" class="small button joyride-next-tip"></a>',
  47. prev_button : '<a href="#" class="small button joyride-prev-tip"></a>',
  48. modal : '<div class="joyride-modal-bg"></div>',
  49. expose : '<div class="joyride-expose-wrapper"></div>',
  50. expose_cover : '<div class="joyride-expose-cover"></div>'
  51. },
  52. expose_add_class : '' // One or more space-separated class names to be added to exposed element
  53. },
  54. init : function (scope, method, options) {
  55. Foundation.inherit(this, 'throttle random_str');
  56. this.settings = this.settings || $.extend({}, this.defaults, (options || method));
  57. this.bindings(method, options)
  58. },
  59. go_next : function() {
  60. if (this.settings.$li.next().length < 1) {
  61. this.end();
  62. } else if (this.settings.timer > 0) {
  63. clearTimeout(this.settings.automate);
  64. this.hide();
  65. this.show();
  66. this.startTimer();
  67. } else {
  68. this.hide();
  69. this.show();
  70. }
  71. },
  72. go_prev : function() {
  73. if (this.settings.$li.prev().length < 1) {
  74. // Do nothing if there are no prev element
  75. } else if (this.settings.timer > 0) {
  76. clearTimeout(this.settings.automate);
  77. this.hide();
  78. this.show(null, true);
  79. this.startTimer();
  80. } else {
  81. this.hide();
  82. this.show(null, true);
  83. }
  84. },
  85. events : function () {
  86. var self = this;
  87. $(this.scope)
  88. .off('.joyride')
  89. .on('click.fndtn.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
  90. e.preventDefault();
  91. this.go_next()
  92. }.bind(this))
  93. .on('click.fndtn.joyride', '.joyride-prev-tip', function (e) {
  94. e.preventDefault();
  95. this.go_prev();
  96. }.bind(this))
  97. .on('click.fndtn.joyride', '.joyride-close-tip', function (e) {
  98. e.preventDefault();
  99. this.end(this.settings.abort_on_close);
  100. }.bind(this))
  101. .on("keyup.joyride", function(e) {
  102. if (!this.settings.keyboard) return;
  103. switch (e.which) {
  104. case 39: // right arrow
  105. e.preventDefault();
  106. this.go_next();
  107. break;
  108. case 37: // left arrow
  109. e.preventDefault();
  110. this.go_prev();
  111. break;
  112. case 27: // escape
  113. e.preventDefault();
  114. this.end(this.settings.abort_on_close);
  115. }
  116. }.bind(this));
  117. $(window)
  118. .off('.joyride')
  119. .on('resize.fndtn.joyride', self.throttle(function () {
  120. if ($('[' + self.attr_name() + ']').length > 0 && self.settings.$next_tip && self.settings.riding) {
  121. if (self.settings.exposed.length > 0) {
  122. var $els = $(self.settings.exposed);
  123. $els.each(function () {
  124. var $this = $(this);
  125. self.un_expose($this);
  126. self.expose($this);
  127. });
  128. }
  129. if (self.is_phone()) {
  130. self.pos_phone();
  131. } else {
  132. self.pos_default(false);
  133. }
  134. }
  135. }, 100));
  136. },
  137. start : function () {
  138. var self = this,
  139. $this = $('[' + this.attr_name() + ']', this.scope),
  140. integer_settings = ['timer', 'scrollSpeed', 'startOffset', 'tipAnimationFadeSpeed', 'cookieExpires'],
  141. int_settings_count = integer_settings.length;
  142. if (!$this.length > 0) return;
  143. if (!this.settings.init) this.events();
  144. this.settings = $this.data(this.attr_name(true) + '-init');
  145. // non configureable settings
  146. this.settings.$content_el = $this;
  147. this.settings.$body = $(this.settings.tip_container);
  148. this.settings.body_offset = $(this.settings.tip_container).position();
  149. this.settings.$tip_content = this.settings.$content_el.find('> li');
  150. this.settings.paused = false;
  151. this.settings.attempts = 0;
  152. this.settings.riding = true;
  153. // can we create cookies?
  154. if (typeof $.cookie !== 'function') {
  155. this.settings.cookie_monster = false;
  156. }
  157. // generate the tips and insert into dom.
  158. if (!this.settings.cookie_monster || this.settings.cookie_monster && !$.cookie(this.settings.cookie_name)) {
  159. this.settings.$tip_content.each(function (index) {
  160. var $this = $(this);
  161. this.settings = $.extend({}, self.defaults, self.data_options($this));
  162. // Make sure that settings parsed from data_options are integers where necessary
  163. var i = int_settings_count;
  164. while (i--) {
  165. self.settings[integer_settings[i]] = parseInt(self.settings[integer_settings[i]], 10);
  166. }
  167. self.create({$li : $this, index : index});
  168. });
  169. // show first tip
  170. if (!this.settings.start_timer_on_click && this.settings.timer > 0) {
  171. this.show('init');
  172. this.startTimer();
  173. } else {
  174. this.show('init');
  175. }
  176. }
  177. },
  178. resume : function () {
  179. this.set_li();
  180. this.show();
  181. },
  182. tip_template : function (opts) {
  183. var $blank, content;
  184. opts.tip_class = opts.tip_class || '';
  185. $blank = $(this.settings.template.tip).addClass(opts.tip_class);
  186. content = $.trim($(opts.li).html()) +
  187. this.prev_button_text(opts.prev_button_text, opts.index) +
  188. this.button_text(opts.button_text) +
  189. this.settings.template.link +
  190. this.timer_instance(opts.index);
  191. $blank.append($(this.settings.template.wrapper));
  192. $blank.first().attr(this.add_namespace('data-index'), opts.index);
  193. $('.joyride-content-wrapper', $blank).append(content);
  194. return $blank[0];
  195. },
  196. timer_instance : function (index) {
  197. var txt;
  198. if ((index === 0 && this.settings.start_timer_on_click && this.settings.timer > 0) || this.settings.timer === 0) {
  199. txt = '';
  200. } else {
  201. txt = $(this.settings.template.timer)[0].outerHTML;
  202. }
  203. return txt;
  204. },
  205. button_text : function (txt) {
  206. if (this.settings.tip_settings.next_button) {
  207. txt = $.trim(txt) || 'Next';
  208. txt = $(this.settings.template.button).append(txt)[0].outerHTML;
  209. } else {
  210. txt = '';
  211. }
  212. return txt;
  213. },
  214. prev_button_text : function (txt, idx) {
  215. if (this.settings.tip_settings.prev_button) {
  216. txt = $.trim(txt) || 'Previous';
  217. // Add the disabled class to the button if it's the first element
  218. if (idx == 0)
  219. txt = $(this.settings.template.prev_button).append(txt).addClass('disabled')[0].outerHTML;
  220. else
  221. txt = $(this.settings.template.prev_button).append(txt)[0].outerHTML;
  222. } else {
  223. txt = '';
  224. }
  225. return txt;
  226. },
  227. create : function (opts) {
  228. this.settings.tip_settings = $.extend({}, this.settings, this.data_options(opts.$li));
  229. var buttonText = opts.$li.attr(this.add_namespace('data-button'))
  230. || opts.$li.attr(this.add_namespace('data-text')),
  231. prevButtonText = opts.$li.attr(this.add_namespace('data-button-prev'))
  232. || opts.$li.attr(this.add_namespace('data-prev-text')),
  233. tipClass = opts.$li.attr('class'),
  234. $tip_content = $(this.tip_template({
  235. tip_class : tipClass,
  236. index : opts.index,
  237. button_text : buttonText,
  238. prev_button_text : prevButtonText,
  239. li : opts.$li
  240. }));
  241. $(this.settings.tip_container).append($tip_content);
  242. },
  243. show : function (init, is_prev) {
  244. var $timer = null;
  245. // are we paused?
  246. if (this.settings.$li === undefined
  247. || ($.inArray(this.settings.$li.index(), this.settings.pause_after) === -1)) {
  248. // don't go to the next li if the tour was paused
  249. if (this.settings.paused) {
  250. this.settings.paused = false;
  251. } else {
  252. this.set_li(init, is_prev);
  253. }
  254. this.settings.attempts = 0;
  255. if (this.settings.$li.length && this.settings.$target.length > 0) {
  256. if (init) { //run when we first start
  257. this.settings.pre_ride_callback(this.settings.$li.index(), this.settings.$next_tip);
  258. if (this.settings.modal) {
  259. this.show_modal();
  260. }
  261. }
  262. this.settings.pre_step_callback(this.settings.$li.index(), this.settings.$next_tip);
  263. if (this.settings.modal && this.settings.expose) {
  264. this.expose();
  265. }
  266. this.settings.tip_settings = $.extend({}, this.settings, this.data_options(this.settings.$li));
  267. this.settings.timer = parseInt(this.settings.timer, 10);
  268. this.settings.tip_settings.tip_location_pattern = this.settings.tip_location_patterns[this.settings.tip_settings.tip_location];
  269. // scroll if not modal
  270. if (!/body/i.test(this.settings.$target.selector)) {
  271. this.scroll_to();
  272. }
  273. if (this.is_phone()) {
  274. this.pos_phone(true);
  275. } else {
  276. this.pos_default(true);
  277. }
  278. $timer = this.settings.$next_tip.find('.joyride-timer-indicator');
  279. if (/pop/i.test(this.settings.tip_animation)) {
  280. $timer.width(0);
  281. if (this.settings.timer > 0) {
  282. this.settings.$next_tip.show();
  283. setTimeout(function () {
  284. $timer.animate({
  285. width: $timer.parent().width()
  286. }, this.settings.timer, 'linear');
  287. }.bind(this), this.settings.tip_animation_fade_speed);
  288. } else {
  289. this.settings.$next_tip.show();
  290. }
  291. } else if (/fade/i.test(this.settings.tip_animation)) {
  292. $timer.width(0);
  293. if (this.settings.timer > 0) {
  294. this.settings.$next_tip
  295. .fadeIn(this.settings.tip_animation_fade_speed)
  296. .show();
  297. setTimeout(function () {
  298. $timer.animate({
  299. width: $timer.parent().width()
  300. }, this.settings.timer, 'linear');
  301. }.bind(this), this.settings.tip_animation_fade_speed);
  302. } else {
  303. this.settings.$next_tip.fadeIn(this.settings.tip_animation_fade_speed);
  304. }
  305. }
  306. this.settings.$current_tip = this.settings.$next_tip;
  307. // skip non-existant targets
  308. } else if (this.settings.$li && this.settings.$target.length < 1) {
  309. this.show();
  310. } else {
  311. this.end();
  312. }
  313. } else {
  314. this.settings.paused = true;
  315. }
  316. },
  317. is_phone : function () {
  318. return matchMedia(Foundation.media_queries.small).matches &&
  319. !matchMedia(Foundation.media_queries.medium).matches;
  320. },
  321. hide : function () {
  322. if (this.settings.modal && this.settings.expose) {
  323. this.un_expose();
  324. }
  325. if (!this.settings.modal) {
  326. $('.joyride-modal-bg').hide();
  327. }
  328. // Prevent scroll bouncing...wait to remove from layout
  329. this.settings.$current_tip.css('visibility', 'hidden');
  330. setTimeout($.proxy(function() {
  331. this.hide();
  332. this.css('visibility', 'visible');
  333. }, this.settings.$current_tip), 0);
  334. this.settings.post_step_callback(this.settings.$li.index(),
  335. this.settings.$current_tip);
  336. },
  337. set_li : function (init, is_prev) {
  338. if (init) {
  339. this.settings.$li = this.settings.$tip_content.eq(this.settings.start_offset);
  340. this.set_next_tip();
  341. this.settings.$current_tip = this.settings.$next_tip;
  342. } else {
  343. if (is_prev)
  344. this.settings.$li = this.settings.$li.prev();
  345. else
  346. this.settings.$li = this.settings.$li.next();
  347. this.set_next_tip();
  348. }
  349. this.set_target();
  350. },
  351. set_next_tip : function () {
  352. this.settings.$next_tip = $(".joyride-tip-guide").eq(this.settings.$li.index());
  353. this.settings.$next_tip.data('closed', '');
  354. },
  355. set_target : function () {
  356. var cl = this.settings.$li.attr(this.add_namespace('data-class')),
  357. id = this.settings.$li.attr(this.add_namespace('data-id')),
  358. $sel = function () {
  359. if (id) {
  360. return $(document.getElementById(id));
  361. } else if (cl) {
  362. return $('.' + cl).first();
  363. } else {
  364. return $('body');
  365. }
  366. };
  367. this.settings.$target = $sel();
  368. },
  369. scroll_to : function () {
  370. var window_half, tipOffset;
  371. window_half = $(window).height() / 2;
  372. tipOffset = Math.ceil(this.settings.$target.offset().top - window_half + this.settings.$next_tip.outerHeight());
  373. if (tipOffset != 0) {
  374. $('html, body').stop().animate({
  375. scrollTop: tipOffset
  376. }, this.settings.scroll_speed, 'swing');
  377. }
  378. },
  379. paused : function () {
  380. return ($.inArray((this.settings.$li.index() + 1), this.settings.pause_after) === -1);
  381. },
  382. restart : function () {
  383. this.hide();
  384. this.settings.$li = undefined;
  385. this.show('init');
  386. },
  387. pos_default : function (init) {
  388. var $nub = this.settings.$next_tip.find('.joyride-nub'),
  389. nub_width = Math.ceil($nub.outerWidth() / 2),
  390. nub_height = Math.ceil($nub.outerHeight() / 2),
  391. toggle = init || false;
  392. // tip must not be "display: none" to calculate position
  393. if (toggle) {
  394. this.settings.$next_tip.css('visibility', 'hidden');
  395. this.settings.$next_tip.show();
  396. }
  397. if (!/body/i.test(this.settings.$target.selector)) {
  398. var topAdjustment = this.settings.tip_settings.tipAdjustmentY ? parseInt(this.settings.tip_settings.tipAdjustmentY) : 0,
  399. leftAdjustment = this.settings.tip_settings.tipAdjustmentX ? parseInt(this.settings.tip_settings.tipAdjustmentX) : 0;
  400. if (this.bottom()) {
  401. if (this.rtl) {
  402. this.settings.$next_tip.css({
  403. top: (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
  404. left: this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth() + leftAdjustment});
  405. } else {
  406. this.settings.$next_tip.css({
  407. top: (this.settings.$target.offset().top + nub_height + this.settings.$target.outerHeight() + topAdjustment),
  408. left: this.settings.$target.offset().left + leftAdjustment});
  409. }
  410. this.nub_position($nub, this.settings.tip_settings.nub_position, 'top');
  411. } else if (this.top()) {
  412. if (this.rtl) {
  413. this.settings.$next_tip.css({
  414. top: (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
  415. left: this.settings.$target.offset().left + this.settings.$target.outerWidth() - this.settings.$next_tip.outerWidth()});
  416. } else {
  417. this.settings.$next_tip.css({
  418. top: (this.settings.$target.offset().top - this.settings.$next_tip.outerHeight() - nub_height + topAdjustment),
  419. left: this.settings.$target.offset().left + leftAdjustment});
  420. }
  421. this.nub_position($nub, this.settings.tip_settings.nub_position, 'bottom');
  422. } else if (this.right()) {
  423. this.settings.$next_tip.css({
  424. top: this.settings.$target.offset().top + topAdjustment,
  425. left: (this.settings.$target.outerWidth() + this.settings.$target.offset().left + nub_width + leftAdjustment)});
  426. this.nub_position($nub, this.settings.tip_settings.nub_position, 'left');
  427. } else if (this.left()) {
  428. this.settings.$next_tip.css({
  429. top: this.settings.$target.offset().top + topAdjustment,
  430. left: (this.settings.$target.offset().left - this.settings.$next_tip.outerWidth() - nub_width + leftAdjustment)});
  431. this.nub_position($nub, this.settings.tip_settings.nub_position, 'right');
  432. }
  433. if (!this.visible(this.corners(this.settings.$next_tip)) && this.settings.attempts < this.settings.tip_settings.tip_location_pattern.length) {
  434. $nub.removeClass('bottom')
  435. .removeClass('top')
  436. .removeClass('right')
  437. .removeClass('left');
  438. this.settings.tip_settings.tip_location = this.settings.tip_settings.tip_location_pattern[this.settings.attempts];
  439. this.settings.attempts++;
  440. this.pos_default();
  441. }
  442. } else if (this.settings.$li.length) {
  443. this.pos_modal($nub);
  444. }
  445. if (toggle) {
  446. this.settings.$next_tip.hide();
  447. this.settings.$next_tip.css('visibility', 'visible');
  448. }
  449. },
  450. pos_phone : function (init) {
  451. var tip_height = this.settings.$next_tip.outerHeight(),
  452. tip_offset = this.settings.$next_tip.offset(),
  453. target_height = this.settings.$target.outerHeight(),
  454. $nub = $('.joyride-nub', this.settings.$next_tip),
  455. nub_height = Math.ceil($nub.outerHeight() / 2),
  456. toggle = init || false;
  457. $nub.removeClass('bottom')
  458. .removeClass('top')
  459. .removeClass('right')
  460. .removeClass('left');
  461. if (toggle) {
  462. this.settings.$next_tip.css('visibility', 'hidden');
  463. this.settings.$next_tip.show();
  464. }
  465. if (!/body/i.test(this.settings.$target.selector)) {
  466. if (this.top()) {
  467. this.settings.$next_tip.offset({top: this.settings.$target.offset().top - tip_height - nub_height});
  468. $nub.addClass('bottom');
  469. } else {
  470. this.settings.$next_tip.offset({top: this.settings.$target.offset().top + target_height + nub_height});
  471. $nub.addClass('top');
  472. }
  473. } else if (this.settings.$li.length) {
  474. this.pos_modal($nub);
  475. }
  476. if (toggle) {
  477. this.settings.$next_tip.hide();
  478. this.settings.$next_tip.css('visibility', 'visible');
  479. }
  480. },
  481. pos_modal : function ($nub) {
  482. this.center();
  483. $nub.hide();
  484. this.show_modal();
  485. },
  486. show_modal : function () {
  487. if (!this.settings.$next_tip.data('closed')) {
  488. var joyridemodalbg = $('.joyride-modal-bg');
  489. if (joyridemodalbg.length < 1) {
  490. $('body').append(this.settings.template.modal).show();
  491. }
  492. if (/pop/i.test(this.settings.tip_animation)) {
  493. joyridemodalbg.show();
  494. } else {
  495. joyridemodalbg.fadeIn(this.settings.tip_animation_fade_speed);
  496. }
  497. }
  498. },
  499. expose : function () {
  500. var expose,
  501. exposeCover,
  502. el,
  503. origCSS,
  504. origClasses,
  505. randId = 'expose-' + this.random_str(6);
  506. if (arguments.length > 0 && arguments[0] instanceof $) {
  507. el = arguments[0];
  508. } else if(this.settings.$target && !/body/i.test(this.settings.$target.selector)){
  509. el = this.settings.$target;
  510. } else {
  511. return false;
  512. }
  513. if(el.length < 1){
  514. if(window.console){
  515. console.error('element not valid', el);
  516. }
  517. return false;
  518. }
  519. expose = $(this.settings.template.expose);
  520. this.settings.$body.append(expose);
  521. expose.css({
  522. top: el.offset().top,
  523. left: el.offset().left,
  524. width: el.outerWidth(true),
  525. height: el.outerHeight(true)
  526. });
  527. exposeCover = $(this.settings.template.expose_cover);
  528. origCSS = {
  529. zIndex: el.css('z-index'),
  530. position: el.css('position')
  531. };
  532. origClasses = el.attr('class') == null ? '' : el.attr('class');
  533. el.css('z-index',parseInt(expose.css('z-index'))+1);
  534. if (origCSS.position == 'static') {
  535. el.css('position','relative');
  536. }
  537. el.data('expose-css',origCSS);
  538. el.data('orig-class', origClasses);
  539. el.attr('class', origClasses + ' ' + this.settings.expose_add_class);
  540. exposeCover.css({
  541. top: el.offset().top,
  542. left: el.offset().left,
  543. width: el.outerWidth(true),
  544. height: el.outerHeight(true)
  545. });
  546. if (this.settings.modal) this.show_modal();
  547. this.settings.$body.append(exposeCover);
  548. expose.addClass(randId);
  549. exposeCover.addClass(randId);
  550. el.data('expose', randId);
  551. this.settings.post_expose_callback(this.settings.$li.index(), this.settings.$next_tip, el);
  552. this.add_exposed(el);
  553. },
  554. un_expose : function () {
  555. var exposeId,
  556. el,
  557. expose ,
  558. origCSS,
  559. origClasses,
  560. clearAll = false;
  561. if (arguments.length > 0 && arguments[0] instanceof $) {
  562. el = arguments[0];
  563. } else if(this.settings.$target && !/body/i.test(this.settings.$target.selector)){
  564. el = this.settings.$target;
  565. } else {
  566. return false;
  567. }
  568. if(el.length < 1){
  569. if (window.console) {
  570. console.error('element not valid', el);
  571. }
  572. return false;
  573. }
  574. exposeId = el.data('expose');
  575. expose = $('.' + exposeId);
  576. if (arguments.length > 1) {
  577. clearAll = arguments[1];
  578. }
  579. if (clearAll === true) {
  580. $('.joyride-expose-wrapper,.joyride-expose-cover').remove();
  581. } else {
  582. expose.remove();
  583. }
  584. origCSS = el.data('expose-css');
  585. if (origCSS.zIndex == 'auto') {
  586. el.css('z-index', '');
  587. } else {
  588. el.css('z-index', origCSS.zIndex);
  589. }
  590. if (origCSS.position != el.css('position')) {
  591. if(origCSS.position == 'static') {// this is default, no need to set it.
  592. el.css('position', '');
  593. } else {
  594. el.css('position', origCSS.position);
  595. }
  596. }
  597. origClasses = el.data('orig-class');
  598. el.attr('class', origClasses);
  599. el.removeData('orig-classes');
  600. el.removeData('expose');
  601. el.removeData('expose-z-index');
  602. this.remove_exposed(el);
  603. },
  604. add_exposed: function(el){
  605. this.settings.exposed = this.settings.exposed || [];
  606. if (el instanceof $ || typeof el === 'object') {
  607. this.settings.exposed.push(el[0]);
  608. } else if (typeof el == 'string') {
  609. this.settings.exposed.push(el);
  610. }
  611. },
  612. remove_exposed: function(el){
  613. var search, i;
  614. if (el instanceof $) {
  615. search = el[0]
  616. } else if (typeof el == 'string'){
  617. search = el;
  618. }
  619. this.settings.exposed = this.settings.exposed || [];
  620. i = this.settings.exposed.length;
  621. while (i--) {
  622. if (this.settings.exposed[i] == search) {
  623. this.settings.exposed.splice(i, 1);
  624. return;
  625. }
  626. }
  627. },
  628. center : function () {
  629. var $w = $(window);
  630. this.settings.$next_tip.css({
  631. top : ((($w.height() - this.settings.$next_tip.outerHeight()) / 2) + $w.scrollTop()),
  632. left : ((($w.width() - this.settings.$next_tip.outerWidth()) / 2) + $w.scrollLeft())
  633. });
  634. return true;
  635. },
  636. bottom : function () {
  637. return /bottom/i.test(this.settings.tip_settings.tip_location);
  638. },
  639. top : function () {
  640. return /top/i.test(this.settings.tip_settings.tip_location);
  641. },
  642. right : function () {
  643. return /right/i.test(this.settings.tip_settings.tip_location);
  644. },
  645. left : function () {
  646. return /left/i.test(this.settings.tip_settings.tip_location);
  647. },
  648. corners : function (el) {
  649. var w = $(window),
  650. window_half = w.height() / 2,
  651. //using this to calculate since scroll may not have finished yet.
  652. tipOffset = Math.ceil(this.settings.$target.offset().top - window_half + this.settings.$next_tip.outerHeight()),
  653. right = w.width() + w.scrollLeft(),
  654. offsetBottom = w.height() + tipOffset,
  655. bottom = w.height() + w.scrollTop(),
  656. top = w.scrollTop();
  657. if (tipOffset < top) {
  658. if (tipOffset < 0) {
  659. top = 0;
  660. } else {
  661. top = tipOffset;
  662. }
  663. }
  664. if (offsetBottom > bottom) {
  665. bottom = offsetBottom;
  666. }
  667. return [
  668. el.offset().top < top,
  669. right < el.offset().left + el.outerWidth(),
  670. bottom < el.offset().top + el.outerHeight(),
  671. w.scrollLeft() > el.offset().left
  672. ];
  673. },
  674. visible : function (hidden_corners) {
  675. var i = hidden_corners.length;
  676. while (i--) {
  677. if (hidden_corners[i]) return false;
  678. }
  679. return true;
  680. },
  681. nub_position : function (nub, pos, def) {
  682. if (pos === 'auto') {
  683. nub.addClass(def);
  684. } else {
  685. nub.addClass(pos);
  686. }
  687. },
  688. startTimer : function () {
  689. if (this.settings.$li.length) {
  690. this.settings.automate = setTimeout(function () {
  691. this.hide();
  692. this.show();
  693. this.startTimer();
  694. }.bind(this), this.settings.timer);
  695. } else {
  696. clearTimeout(this.settings.automate);
  697. }
  698. },
  699. end : function (abort) {
  700. if (this.settings.cookie_monster) {
  701. $.cookie(this.settings.cookie_name, 'ridden', { expires: this.settings.cookie_expires, domain: this.settings.cookie_domain });
  702. }
  703. if (this.settings.timer > 0) {
  704. clearTimeout(this.settings.automate);
  705. }
  706. if (this.settings.modal && this.settings.expose) {
  707. this.un_expose();
  708. }
  709. // Unplug keystrokes listener
  710. $(this.scope).off('keyup.joyride')
  711. this.settings.$next_tip.data('closed', true);
  712. this.settings.riding = false;
  713. $('.joyride-modal-bg').hide();
  714. this.settings.$current_tip.hide();
  715. if (typeof abort === 'undefined' || abort === false) {
  716. this.settings.post_step_callback(this.settings.$li.index(), this.settings.$current_tip);
  717. this.settings.post_ride_callback(this.settings.$li.index(), this.settings.$current_tip);
  718. }
  719. $('.joyride-tip-guide').remove();
  720. },
  721. off : function () {
  722. $(this.scope).off('.joyride');
  723. $(window).off('.joyride');
  724. $('.joyride-close-tip, .joyride-next-tip, .joyride-modal-bg').off('.joyride');
  725. $('.joyride-tip-guide, .joyride-modal-bg').remove();
  726. clearTimeout(this.settings.automate);
  727. this.settings = {};
  728. },
  729. reflow : function () {}
  730. };
  731. }(jQuery, window, window.document));