foundation.reveal.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.reveal = {
  4. name : 'reveal',
  5. version : '5.2.2',
  6. locked : false,
  7. settings : {
  8. animation: 'fadeAndPop',
  9. animation_speed: 250,
  10. close_on_background_click: true,
  11. close_on_esc: true,
  12. dismiss_modal_class: 'close-reveal-modal',
  13. bg_class: 'reveal-modal-bg',
  14. open: function(){},
  15. opened: function(){},
  16. close: function(){},
  17. closed: function(){},
  18. bg : $('.reveal-modal-bg'),
  19. css : {
  20. open : {
  21. 'opacity': 0,
  22. 'visibility': 'visible',
  23. 'display' : 'block'
  24. },
  25. close : {
  26. 'opacity': 1,
  27. 'visibility': 'hidden',
  28. 'display': 'none'
  29. }
  30. }
  31. },
  32. init : function (scope, method, options) {
  33. $.extend(true, this.settings, method, options);
  34. this.bindings(method, options);
  35. },
  36. events : function (scope) {
  37. var self = this,
  38. S = self.S;
  39. S(this.scope)
  40. .off('.reveal')
  41. .on('click.fndtn.reveal', '[' + this.add_namespace('data-reveal-id') + ']', function (e) {
  42. e.preventDefault();
  43. if (!self.locked) {
  44. var element = S(this),
  45. ajax = element.data(self.data_attr('reveal-ajax'));
  46. self.locked = true;
  47. if (typeof ajax === 'undefined') {
  48. self.open.call(self, element);
  49. } else {
  50. var url = ajax === true ? element.attr('href') : ajax;
  51. self.open.call(self, element, {url: url});
  52. }
  53. }
  54. });
  55. S(document)
  56. .on('touchend.fndtn.reveal click.fndtn.reveal', this.close_targets(), function (e) {
  57. e.preventDefault();
  58. if (!self.locked) {
  59. var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init'),
  60. bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0];
  61. if (bg_clicked) {
  62. if (settings.close_on_background_click) {
  63. e.stopPropagation();
  64. } else {
  65. return;
  66. }
  67. }
  68. self.locked = true;
  69. self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open') : S(this).closest('[' + self.attr_name() + ']'));
  70. }
  71. });
  72. if(S('[' + self.attr_name() + ']', this.scope).length > 0) {
  73. S(this.scope)
  74. // .off('.reveal')
  75. .on('open.fndtn.reveal', this.settings.open)
  76. .on('opened.fndtn.reveal', this.settings.opened)
  77. .on('opened.fndtn.reveal', this.open_video)
  78. .on('close.fndtn.reveal', this.settings.close)
  79. .on('closed.fndtn.reveal', this.settings.closed)
  80. .on('closed.fndtn.reveal', this.close_video);
  81. } else {
  82. S(this.scope)
  83. // .off('.reveal')
  84. .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
  85. .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
  86. .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
  87. .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
  88. .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
  89. .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
  90. }
  91. return true;
  92. },
  93. // PATCH #3: turning on key up capture only when a reveal window is open
  94. key_up_on : function (scope) {
  95. var self = this;
  96. // PATCH #1: fixing multiple keyup event trigger from single key press
  97. self.S('body').off('keyup.fndtn.reveal').on('keyup.fndtn.reveal', function ( event ) {
  98. var open_modal = self.S('[' + self.attr_name() + '].open'),
  99. settings = open_modal.data(self.attr_name(true) + '-init');
  100. // PATCH #2: making sure that the close event can be called only while unlocked,
  101. // so that multiple keyup.fndtn.reveal events don't prevent clean closing of the reveal window.
  102. if ( settings && event.which === 27 && settings.close_on_esc && !self.locked) { // 27 is the keycode for the Escape key
  103. self.close.call(self, open_modal);
  104. }
  105. });
  106. return true;
  107. },
  108. // PATCH #3: turning on key up capture only when a reveal window is open
  109. key_up_off : function (scope) {
  110. this.S('body').off('keyup.fndtn.reveal');
  111. return true;
  112. },
  113. open : function (target, ajax_settings) {
  114. var self = this;
  115. if (target) {
  116. if (typeof target.selector !== 'undefined') {
  117. var modal = self.S('#' + target.data(self.data_attr('reveal-id')));
  118. } else {
  119. var modal = self.S(this.scope);
  120. ajax_settings = target;
  121. }
  122. } else {
  123. var modal = self.S(this.scope);
  124. }
  125. var settings = modal.data(self.attr_name(true) + '-init');
  126. if (!modal.hasClass('open')) {
  127. var open_modal = self.S('[' + self.attr_name() + '].open');
  128. if (typeof modal.data('css-top') === 'undefined') {
  129. modal.data('css-top', parseInt(modal.css('top'), 10))
  130. .data('offset', this.cache_offset(modal));
  131. }
  132. this.key_up_on(modal); // PATCH #3: turning on key up capture only when a reveal window is open
  133. modal.trigger('open');
  134. if (open_modal.length < 1) {
  135. this.toggle_bg(modal);
  136. }
  137. if (typeof ajax_settings === 'string') {
  138. ajax_settings = {
  139. url: ajax_settings
  140. };
  141. }
  142. if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
  143. if (open_modal.length > 0) {
  144. this.hide(open_modal, settings.css.close);
  145. }
  146. this.show(modal, settings.css.open);
  147. } else {
  148. var old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
  149. $.extend(ajax_settings, {
  150. success: function (data, textStatus, jqXHR) {
  151. if ( $.isFunction(old_success) ) {
  152. old_success(data, textStatus, jqXHR);
  153. }
  154. modal.html(data);
  155. self.S(modal).foundation('section', 'reflow');
  156. if (open_modal.length > 0) {
  157. self.hide(open_modal, settings.css.close);
  158. }
  159. self.show(modal, settings.css.open);
  160. }
  161. });
  162. $.ajax(ajax_settings);
  163. }
  164. }
  165. },
  166. close : function (modal) {
  167. var modal = modal && modal.length ? modal : this.S(this.scope),
  168. open_modals = this.S('[' + this.attr_name() + '].open'),
  169. settings = modal.data(this.attr_name(true) + '-init');
  170. if (open_modals.length > 0) {
  171. this.locked = true;
  172. this.key_up_off(modal); // PATCH #3: turning on key up capture only when a reveal window is open
  173. modal.trigger('close');
  174. this.toggle_bg(modal);
  175. this.hide(open_modals, settings.css.close, settings);
  176. }
  177. },
  178. close_targets : function () {
  179. var base = '.' + this.settings.dismiss_modal_class;
  180. if (this.settings.close_on_background_click) {
  181. return base + ', .' + this.settings.bg_class;
  182. }
  183. return base;
  184. },
  185. toggle_bg : function (modal) {
  186. var settings = modal.data(this.attr_name(true));
  187. if (this.S('.' + this.settings.bg_class).length === 0) {
  188. this.settings.bg = $('<div />', {'class': this.settings.bg_class})
  189. .appendTo('body').hide();
  190. }
  191. if (this.settings.bg.filter(':visible').length > 0) {
  192. this.hide(this.settings.bg);
  193. } else {
  194. this.show(this.settings.bg);
  195. }
  196. },
  197. show : function (el, css) {
  198. // is modal
  199. if (css) {
  200. var settings = el.data(this.attr_name(true) + '-init');
  201. if (el.parent('body').length === 0) {
  202. var placeholder = el.wrap('<div style="display: none;" />').parent(),
  203. rootElement = this.settings.rootElement || 'body';
  204. el.on('closed.fndtn.reveal.wrapped', function() {
  205. el.detach().appendTo(placeholder);
  206. el.unwrap().unbind('closed.fndtn.reveal.wrapped');
  207. });
  208. el.detach().appendTo(rootElement);
  209. }
  210. var animData = getAnimationData(settings.animation);
  211. if (!animData.animate) {
  212. this.locked = false;
  213. }
  214. if (animData.pop) {
  215. css.top = $(window).scrollTop() - el.data('offset') + 'px';
  216. var end_css = {
  217. top: $(window).scrollTop() + el.data('css-top') + 'px',
  218. opacity: 1
  219. };
  220. return setTimeout(function () {
  221. return el
  222. .css(css)
  223. .animate(end_css, settings.animation_speed, 'linear', function () {
  224. this.locked = false;
  225. el.trigger('opened');
  226. }.bind(this))
  227. .addClass('open');
  228. }.bind(this), settings.animation_speed / 2);
  229. }
  230. if (animData.fade) {
  231. css.top = $(window).scrollTop() + el.data('css-top') + 'px';
  232. var end_css = {opacity: 1};
  233. return setTimeout(function () {
  234. return el
  235. .css(css)
  236. .animate(end_css, settings.animation_speed, 'linear', function () {
  237. this.locked = false;
  238. el.trigger('opened');
  239. }.bind(this))
  240. .addClass('open');
  241. }.bind(this), settings.animation_speed / 2);
  242. }
  243. return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
  244. }
  245. var settings = this.settings;
  246. // should we animate the background?
  247. if (getAnimationData(settings.animation).fade) {
  248. return el.fadeIn(settings.animation_speed / 2);
  249. }
  250. this.locked = false;
  251. return el.show();
  252. },
  253. hide : function (el, css) {
  254. // is modal
  255. if (css) {
  256. var settings = el.data(this.attr_name(true) + '-init');
  257. var animData = getAnimationData(settings.animation);
  258. if (!animData.animate) {
  259. this.locked = false;
  260. }
  261. if (animData.pop) {
  262. var end_css = {
  263. top: - $(window).scrollTop() - el.data('offset') + 'px',
  264. opacity: 0
  265. };
  266. return setTimeout(function () {
  267. return el
  268. .animate(end_css, settings.animation_speed, 'linear', function () {
  269. this.locked = false;
  270. el.css(css).trigger('closed');
  271. }.bind(this))
  272. .removeClass('open');
  273. }.bind(this), settings.animation_speed / 2);
  274. }
  275. if (animData.fade) {
  276. var end_css = {opacity: 0};
  277. return setTimeout(function () {
  278. return el
  279. .animate(end_css, settings.animation_speed, 'linear', function () {
  280. this.locked = false;
  281. el.css(css).trigger('closed');
  282. }.bind(this))
  283. .removeClass('open');
  284. }.bind(this), settings.animation_speed / 2);
  285. }
  286. return el.hide().css(css).removeClass('open').trigger('closed');
  287. }
  288. var settings = this.settings;
  289. // should we animate the background?
  290. if (getAnimationData(settings.animation).fade) {
  291. return el.fadeOut(settings.animation_speed / 2);
  292. }
  293. return el.hide();
  294. },
  295. close_video : function (e) {
  296. var video = $('.flex-video', e.target),
  297. iframe = $('iframe', video);
  298. if (iframe.length > 0) {
  299. iframe.attr('data-src', iframe[0].src);
  300. iframe.attr('src', 'about:blank');
  301. video.hide();
  302. }
  303. },
  304. open_video : function (e) {
  305. var video = $('.flex-video', e.target),
  306. iframe = video.find('iframe');
  307. if (iframe.length > 0) {
  308. var data_src = iframe.attr('data-src');
  309. if (typeof data_src === 'string') {
  310. iframe[0].src = iframe.attr('data-src');
  311. } else {
  312. var src = iframe[0].src;
  313. iframe[0].src = undefined;
  314. iframe[0].src = src;
  315. }
  316. video.show();
  317. }
  318. },
  319. data_attr: function (str) {
  320. if (this.namespace.length > 0) {
  321. return this.namespace + '-' + str;
  322. }
  323. return str;
  324. },
  325. cache_offset : function (modal) {
  326. var offset = modal.show().height() + parseInt(modal.css('top'), 10);
  327. modal.hide();
  328. return offset;
  329. },
  330. off : function () {
  331. $(this.scope).off('.fndtn.reveal');
  332. },
  333. reflow : function () {}
  334. };
  335. /*
  336. * getAnimationData('popAndFade') // {animate: true, pop: true, fade: true}
  337. * getAnimationData('fade') // {animate: true, pop: false, fade: true}
  338. * getAnimationData('pop') // {animate: true, pop: true, fade: false}
  339. * getAnimationData('foo') // {animate: false, pop: false, fade: false}
  340. * getAnimationData(null) // {animate: false, pop: false, fade: false}
  341. */
  342. function getAnimationData(str) {
  343. var fade = /fade/i.test(str);
  344. var pop = /pop/i.test(str);
  345. return {
  346. animate: fade || pop,
  347. pop: pop,
  348. fade: fade
  349. };
  350. }
  351. }(jQuery, this, this.document));