foundation.reveal.js 14 KB

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