foundation.reveal.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. ;(function ($, window, document, undefined) {
  2. 'use strict';
  3. Foundation.libs.reveal = {
  4. name : 'reveal',
  5. version : '5.0.0',
  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. Foundation.inherit(this, 'delay');
  34. this.bindings(method, options);
  35. },
  36. events : function (scope) {
  37. var self = this;
  38. $('[data-reveal-id]', this.scope)
  39. .off('.reveal')
  40. .on('click.fndtn.reveal', function (e) {
  41. e.preventDefault();
  42. if (!self.locked) {
  43. var element = $(this),
  44. ajax = element.data('reveal-ajax');
  45. self.locked = true;
  46. if (typeof ajax === 'undefined') {
  47. self.open.call(self, element);
  48. } else {
  49. var url = ajax === true ? element.attr('href') : ajax;
  50. self.open.call(self, element, {url: url});
  51. }
  52. }
  53. });
  54. $(this.scope)
  55. .off('.reveal')
  56. .on('click.fndtn.reveal', this.close_targets(), function (e) {
  57. e.preventDefault();
  58. if (!self.locked) {
  59. var settings = $('[data-reveal].open').data('reveal-init'),
  60. bg_clicked = $(e.target)[0] === $('.' + 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 ? $('[data-reveal].open') : $(this).closest('[data-reveal]'));
  66. }
  67. });
  68. if($('[data-reveal]', this.scope).length > 0) {
  69. $(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. $(this.scope)
  79. // .off('.reveal')
  80. .on('open.fndtn.reveal', '[data-reveal]', this.settings.open)
  81. .on('opened.fndtn.reveal', '[data-reveal]', this.settings.opened)
  82. .on('opened.fndtn.reveal', '[data-reveal]', this.open_video)
  83. .on('close.fndtn.reveal', '[data-reveal]', this.settings.close)
  84. .on('closed.fndtn.reveal', '[data-reveal]', this.settings.closed)
  85. .on('closed.fndtn.reveal', '[data-reveal]', this.close_video);
  86. }
  87. $('body').on('keyup.fndtn.reveal', function ( event ) {
  88. var open_modal = $('[data-reveal].open'),
  89. settings = open_modal.data('reveal-init');
  90. if ( event.which === 27 && settings.close_on_esc) { // 27 is the keycode for the Escape key
  91. open_modal.foundation('reveal', 'close');
  92. }
  93. });
  94. return true;
  95. },
  96. open : function (target, ajax_settings) {
  97. if (target) {
  98. if (typeof target.selector !== 'undefined') {
  99. var modal = $('#' + target.data('reveal-id'));
  100. } else {
  101. var modal = $(this.scope);
  102. ajax_settings = target;
  103. }
  104. } else {
  105. var modal = $(this.scope);
  106. }
  107. if (!modal.hasClass('open')) {
  108. var open_modal = $('[data-reveal].open');
  109. if (typeof modal.data('css-top') === 'undefined') {
  110. modal.data('css-top', parseInt(modal.css('top'), 10))
  111. .data('offset', this.cache_offset(modal));
  112. }
  113. modal.trigger('open');
  114. if (open_modal.length < 1) {
  115. this.toggle_bg();
  116. }
  117. if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
  118. this.hide(open_modal, this.settings.css.close);
  119. this.show(modal, this.settings.css.open);
  120. } else {
  121. var self = this,
  122. old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
  123. $.extend(ajax_settings, {
  124. success: function (data, textStatus, jqXHR) {
  125. if ( $.isFunction(old_success) ) {
  126. old_success(data, textStatus, jqXHR);
  127. }
  128. modal.html(data);
  129. $(modal).foundation('section', 'reflow');
  130. self.hide(open_modal, self.settings.css.close);
  131. self.show(modal, self.settings.css.open);
  132. }
  133. });
  134. $.ajax(ajax_settings);
  135. }
  136. }
  137. },
  138. close : function (modal) {
  139. var modal = modal && modal.length ? modal : $(this.scope),
  140. open_modals = $('[data-reveal].open');
  141. if (open_modals.length > 0) {
  142. this.locked = true;
  143. modal.trigger('close');
  144. this.toggle_bg();
  145. this.hide(open_modals, this.settings.css.close);
  146. }
  147. },
  148. close_targets : function () {
  149. var base = '.' + this.settings.dismiss_modal_class;
  150. if (this.settings.close_on_background_click) {
  151. return base + ', .' + this.settings.bg_class;
  152. }
  153. return base;
  154. },
  155. toggle_bg : function () {
  156. if ($('.' + this.settings.bg_class).length === 0) {
  157. this.settings.bg = $('<div />', {'class': this.settings.bg_class})
  158. .appendTo('body');
  159. }
  160. if (this.settings.bg.filter(':visible').length > 0) {
  161. this.hide(this.settings.bg);
  162. } else {
  163. this.show(this.settings.bg);
  164. }
  165. },
  166. show : function (el, css) {
  167. // is modal
  168. if (css) {
  169. if (el.parent('body').length === 0) {
  170. var placeholder = el.wrap('<div style="display: none;" />').parent();
  171. el.on('closed.fndtn.reveal.wrapped', function() {
  172. el.detach().appendTo(placeholder);
  173. el.unwrap().unbind('closed.fndtn.reveal.wrapped');
  174. });
  175. el.detach().appendTo('body');
  176. }
  177. if (/pop/i.test(this.settings.animation)) {
  178. css.top = $(window).scrollTop() - el.data('offset') + 'px';
  179. var end_css = {
  180. top: $(window).scrollTop() + el.data('css-top') + 'px',
  181. opacity: 1
  182. };
  183. return this.delay(function () {
  184. return el
  185. .css(css)
  186. .animate(end_css, this.settings.animation_speed, 'linear', function () {
  187. this.locked = false;
  188. el.trigger('opened');
  189. }.bind(this))
  190. .addClass('open');
  191. }.bind(this), this.settings.animation_speed / 2);
  192. }
  193. if (/fade/i.test(this.settings.animation)) {
  194. var end_css = {opacity: 1};
  195. return this.delay(function () {
  196. return el
  197. .css(css)
  198. .animate(end_css, this.settings.animation_speed, 'linear', function () {
  199. this.locked = false;
  200. el.trigger('opened');
  201. }.bind(this))
  202. .addClass('open');
  203. }.bind(this), this.settings.animation_speed / 2);
  204. }
  205. return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
  206. }
  207. // should we animate the background?
  208. if (/fade/i.test(this.settings.animation)) {
  209. return el.fadeIn(this.settings.animation_speed / 2);
  210. }
  211. return el.show();
  212. },
  213. hide : function (el, css) {
  214. // is modal
  215. if (css) {
  216. if (/pop/i.test(this.settings.animation)) {
  217. var end_css = {
  218. top: - $(window).scrollTop() - el.data('offset') + 'px',
  219. opacity: 0
  220. };
  221. return this.delay(function () {
  222. return el
  223. .animate(end_css, this.settings.animation_speed, 'linear', function () {
  224. this.locked = false;
  225. el.css(css).trigger('closed');
  226. }.bind(this))
  227. .removeClass('open');
  228. }.bind(this), this.settings.animation_speed / 2);
  229. }
  230. if (/fade/i.test(this.settings.animation)) {
  231. var end_css = {opacity: 0};
  232. return this.delay(function () {
  233. return el
  234. .animate(end_css, this.settings.animation_speed, 'linear', function () {
  235. this.locked = false;
  236. el.css(css).trigger('closed');
  237. }.bind(this))
  238. .removeClass('open');
  239. }.bind(this), this.settings.animation_speed / 2);
  240. }
  241. return el.hide().css(css).removeClass('open').trigger('closed');
  242. }
  243. // should we animate the background?
  244. if (/fade/i.test(this.settings.animation)) {
  245. return el.fadeOut(this.settings.animation_speed / 2);
  246. }
  247. return el.hide();
  248. },
  249. close_video : function (e) {
  250. var video = $(this).find('.flex-video'),
  251. iframe = video.find('iframe');
  252. if (iframe.length > 0) {
  253. iframe.attr('data-src', iframe[0].src);
  254. iframe.attr('src', 'about:blank');
  255. video.hide();
  256. }
  257. },
  258. open_video : function (e) {
  259. var video = $(this).find('.flex-video'),
  260. iframe = video.find('iframe');
  261. if (iframe.length > 0) {
  262. var data_src = iframe.attr('data-src');
  263. if (typeof data_src === 'string') {
  264. iframe[0].src = iframe.attr('data-src');
  265. } else {
  266. var src = iframe[0].src;
  267. iframe[0].src = undefined;
  268. iframe[0].src = src;
  269. }
  270. video.show();
  271. }
  272. },
  273. cache_offset : function (modal) {
  274. var offset = modal.show().height() + parseInt(modal.css('top'), 10);
  275. modal.hide();
  276. return offset;
  277. },
  278. off : function () {
  279. $(this.scope).off('.fndtn.reveal');
  280. },
  281. reflow : function () {}
  282. };
  283. }(jQuery, this, this.document));