foundation.reveal.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.reveal = {
  4. name : 'reveal',
  5. version : '5.1.1',
  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('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 && !settings.close_on_background_click) {
  62. return;
  63. }
  64. self.locked = true;
  65. self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open') : S(this).closest('[' + self.attr_name() + ']'));
  66. }
  67. });
  68. if(S('[' + self.attr_name() + ']', this.scope).length > 0) {
  69. S(this.scope)
  70. // .off('.reveal')
  71. .on('open.fndtn.reveal', this.settings.open)
  72. .on('opened.fndtn.reveal', this.settings.opened)
  73. .on('opened.fndtn.reveal', this.open_video)
  74. .on('close.fndtn.reveal', this.settings.close)
  75. .on('closed.fndtn.reveal', this.settings.closed)
  76. .on('closed.fndtn.reveal', this.close_video);
  77. } else {
  78. S(this.scope)
  79. // .off('.reveal')
  80. .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
  81. .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
  82. .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
  83. .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
  84. .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
  85. .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
  86. }
  87. return true;
  88. },
  89. // PATCH #3: turning on key up capture only when a reveal window is open
  90. key_up_on : function (scope) {
  91. var self = this;
  92. // PATCH #1: fixing multiple keyup event trigger from single key press
  93. self.S('body').off('keyup.fndtn.reveal').on('keyup.fndtn.reveal', function ( event ) {
  94. var open_modal = self.S('[' + self.attr_name() + '].open'),
  95. settings = open_modal.data(self.attr_name(true) + '-init');
  96. // PATCH #2: making sure that the close event can be called only while unlocked,
  97. // so that multiple keyup.fndtn.reveal events don't prevent clean closing of the reveal window.
  98. if ( settings && event.which === 27 && settings.close_on_esc && !self.locked) { // 27 is the keycode for the Escape key
  99. self.close.call(self, open_modal);
  100. }
  101. });
  102. return true;
  103. },
  104. // PATCH #3: turning on key up capture only when a reveal window is open
  105. key_up_off : function (scope) {
  106. this.S('body').off('keyup.fndtn.reveal');
  107. return true;
  108. },
  109. open : function (target, ajax_settings) {
  110. var self = this;
  111. if (target) {
  112. if (typeof target.selector !== 'undefined') {
  113. var modal = self.S('#' + target.data(self.data_attr('reveal-id')));
  114. } else {
  115. var modal = self.S(this.scope);
  116. ajax_settings = target;
  117. }
  118. } else {
  119. var modal = self.S(this.scope);
  120. }
  121. var settings = modal.data(self.attr_name(true) + '-init');
  122. if (!modal.hasClass('open')) {
  123. var open_modal = self.S('[' + self.attr_name() + '].open');
  124. if (typeof modal.data('css-top') === 'undefined') {
  125. modal.data('css-top', parseInt(modal.css('top'), 10))
  126. .data('offset', this.cache_offset(modal));
  127. }
  128. this.key_up_on(modal); // PATCH #3: turning on key up capture only when a reveal window is open
  129. modal.trigger('open');
  130. if (open_modal.length < 1) {
  131. this.toggle_bg(modal);
  132. }
  133. if (typeof ajax_settings === 'string') {
  134. ajax_settings = {
  135. url: ajax_settings
  136. };
  137. }
  138. if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
  139. if (open_modal.length > 0) {
  140. var open_modal_settings = open_modal.data(self.attr_name(true) + '-init');
  141. this.hide(open_modal, open_modal_settings.css.close);
  142. }
  143. this.show(modal, settings.css.open);
  144. } else {
  145. var old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
  146. $.extend(ajax_settings, {
  147. success: function (data, textStatus, jqXHR) {
  148. if ( $.isFunction(old_success) ) {
  149. old_success(data, textStatus, jqXHR);
  150. }
  151. modal.html(data);
  152. self.S(modal).foundation('section', 'reflow');
  153. if (open_modal.length > 0) {
  154. var open_modal_settings = open_modal.data(self.attr_name(true));
  155. self.hide(open_modal, open_modal_settings.css.close);
  156. }
  157. self.show(modal, settings.css.open);
  158. }
  159. });
  160. $.ajax(ajax_settings);
  161. }
  162. }
  163. },
  164. close : function (modal) {
  165. var modal = modal && modal.length ? modal : this.S(this.scope),
  166. open_modals = this.S('[' + this.attr_name() + '].open'),
  167. settings = modal.data(this.attr_name(true) + '-init');
  168. if (open_modals.length > 0) {
  169. this.locked = true;
  170. this.key_up_off(modal); // PATCH #3: turning on key up capture only when a reveal window is open
  171. modal.trigger('close');
  172. this.toggle_bg(modal);
  173. this.hide(open_modals, settings.css.close, settings);
  174. }
  175. },
  176. close_targets : function () {
  177. var base = '.' + this.settings.dismiss_modal_class;
  178. if (this.settings.close_on_background_click) {
  179. return base + ', .' + this.settings.bg_class;
  180. }
  181. return base;
  182. },
  183. toggle_bg : function (modal) {
  184. var settings = modal.data(this.attr_name(true));
  185. if (this.S('.' + this.settings.bg_class).length === 0) {
  186. this.settings.bg = $('<div />', {'class': this.settings.bg_class})
  187. .appendTo('body');
  188. }
  189. if (this.settings.bg.filter(':visible').length > 0) {
  190. this.hide(this.settings.bg);
  191. } else {
  192. this.show(this.settings.bg);
  193. }
  194. },
  195. show : function (el, css) {
  196. // is modal
  197. if (css) {
  198. var settings = el.data(this.attr_name(true) + '-init');
  199. if (el.parent('body').length === 0) {
  200. var placeholder = el.wrap('<div style="display: none;" />').parent(),
  201. rootElement = this.settings.rootElement || 'body';
  202. el.on('closed.fndtn.reveal.wrapped', function() {
  203. el.detach().appendTo(placeholder);
  204. el.unwrap().unbind('closed.fndtn.reveal.wrapped');
  205. });
  206. el.detach().appendTo(rootElement);
  207. }
  208. if (/pop/i.test(settings.animation)) {
  209. css.top = $(window).scrollTop() - el.data('offset') + 'px';
  210. var end_css = {
  211. top: $(window).scrollTop() + el.data('css-top') + 'px',
  212. opacity: 1
  213. };
  214. return setTimeout(function () {
  215. return el
  216. .css(css)
  217. .animate(end_css, settings.animation_speed, 'linear', function () {
  218. this.locked = false;
  219. el.trigger('opened');
  220. }.bind(this))
  221. .addClass('open');
  222. }.bind(this), settings.animation_speed / 2);
  223. }
  224. if (/fade/i.test(settings.animation)) {
  225. var end_css = {opacity: 1};
  226. return setTimeout(function () {
  227. return el
  228. .css(css)
  229. .animate(end_css, settings.animation_speed, 'linear', function () {
  230. this.locked = false;
  231. el.trigger('opened');
  232. }.bind(this))
  233. .addClass('open');
  234. }.bind(this), settings.animation_speed / 2);
  235. }
  236. return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
  237. }
  238. var settings = this.settings;
  239. // should we animate the background?
  240. if (/fade/i.test(settings.animation)) {
  241. return el.fadeIn(settings.animation_speed / 2);
  242. }
  243. this.locked = false;
  244. return el.show();
  245. },
  246. hide : function (el, css) {
  247. // is modal
  248. if (css) {
  249. var settings = el.data(this.attr_name(true) + '-init');
  250. if (/pop/i.test(settings.animation)) {
  251. var end_css = {
  252. top: - $(window).scrollTop() - el.data('offset') + 'px',
  253. opacity: 0
  254. };
  255. return setTimeout(function () {
  256. return el
  257. .animate(end_css, settings.animation_speed, 'linear', function () {
  258. this.locked = false;
  259. el.css(css).trigger('closed');
  260. }.bind(this))
  261. .removeClass('open');
  262. }.bind(this), settings.animation_speed / 2);
  263. }
  264. if (/fade/i.test(settings.animation)) {
  265. var end_css = {opacity: 0};
  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. return el.hide().css(css).removeClass('open').trigger('closed');
  276. }
  277. var settings = this.settings;
  278. // should we animate the background?
  279. if (/fade/i.test(settings.animation)) {
  280. return el.fadeOut(settings.animation_speed / 2);
  281. }
  282. return el.hide();
  283. },
  284. close_video : function (e) {
  285. var video = $('.flex-video', e.target),
  286. iframe = $('iframe', video);
  287. if (iframe.length > 0) {
  288. iframe.attr('data-src', iframe[0].src);
  289. iframe.attr('src', 'about:blank');
  290. video.hide();
  291. }
  292. },
  293. open_video : function (e) {
  294. var video = $('.flex-video', e.target),
  295. iframe = video.find('iframe');
  296. if (iframe.length > 0) {
  297. var data_src = iframe.attr('data-src');
  298. if (typeof data_src === 'string') {
  299. iframe[0].src = iframe.attr('data-src');
  300. } else {
  301. var src = iframe[0].src;
  302. iframe[0].src = undefined;
  303. iframe[0].src = src;
  304. }
  305. video.show();
  306. }
  307. },
  308. data_attr: function (str) {
  309. if (this.namespace.length > 0) {
  310. return this.namespace + '-' + str;
  311. }
  312. return str;
  313. },
  314. cache_offset : function (modal) {
  315. var offset = modal.show().height() + parseInt(modal.css('top'), 10);
  316. modal.hide();
  317. return offset;
  318. },
  319. off : function () {
  320. $(this.scope).off('.fndtn.reveal');
  321. },
  322. reflow : function () {}
  323. };
  324. }(jQuery, this, this.document));