277 lines
7.8 KiB
JavaScript
277 lines
7.8 KiB
JavaScript
/*jslint unparam: true, browser: true, indent: 2 */
|
|
|
|
;(function ($, window, document, undefined) {
|
|
'use strict';
|
|
|
|
Foundation.libs.reveal = {
|
|
name: 'reveal',
|
|
|
|
version : '4.1.3',
|
|
|
|
locked : false,
|
|
|
|
settings : {
|
|
animation: 'fadeAndPop',
|
|
animationSpeed: 250,
|
|
closeOnBackgroundClick: true,
|
|
dismissModalClass: 'close-reveal-modal',
|
|
bgClass: 'reveal-modal-bg',
|
|
open: function(){},
|
|
opened: function(){},
|
|
close: function(){},
|
|
closed: function(){},
|
|
bg : $('.reveal-modal-bg'),
|
|
css : {
|
|
open : {
|
|
'opacity': 0,
|
|
'visibility': 'visible',
|
|
'display' : 'block'
|
|
},
|
|
close : {
|
|
'opacity': 1,
|
|
'visibility': 'hidden',
|
|
'display': 'none'
|
|
}
|
|
}
|
|
},
|
|
|
|
init : function (scope, method, options) {
|
|
this.scope = scope || this.scope;
|
|
Foundation.inherit(this, 'data_options delay');
|
|
|
|
if (typeof method === 'object') {
|
|
$.extend(true, this.settings, method);
|
|
} else if (typeof options !== 'undefined') {
|
|
$.extend(true, this.settings, options);
|
|
}
|
|
|
|
if (typeof method != 'string') {
|
|
this.events();
|
|
|
|
return this.settings.init;
|
|
} else {
|
|
return this[method].call(this, options);
|
|
}
|
|
},
|
|
|
|
events : function () {
|
|
var self = this;
|
|
|
|
$(this.scope)
|
|
.off('.fndtn.reveal')
|
|
.on('click.fndtn.reveal', '[data-reveal-id]', function (e) {
|
|
e.preventDefault();
|
|
if (!self.locked) {
|
|
self.locked = true;
|
|
self.open.call(self, $(this));
|
|
}
|
|
})
|
|
.on('click.fndtn.reveal touchend.click.fndtn.reveal', this.close_targets(), function (e) {
|
|
e.preventDefault();
|
|
if (!self.locked) {
|
|
var settings = $.extend({}, self.settings, self.data_options($('.reveal-modal.open')));
|
|
if ($(e.target)[0] === $('.' + settings.bgClass)[0] && !settings.closeOnBackgroundClick) {
|
|
return;
|
|
}
|
|
|
|
self.locked = true;
|
|
self.close.call(self, $(this).closest('.reveal-modal'));
|
|
}
|
|
})
|
|
.on('open.fndtn.reveal', '.reveal-modal', this.settings.open)
|
|
.on('opened.fndtn.reveal', '.reveal-modal', this.settings.opened)
|
|
.on('opened.fndtn.reveal', '.reveal-modal', this.open_video)
|
|
.on('close.fndtn.reveal', '.reveal-modal', this.settings.close)
|
|
.on('closed.fndtn.reveal', '.reveal-modal', this.settings.closed)
|
|
.on('closed.fndtn.reveal', '.reveal-modal', this.close_video);
|
|
|
|
return true;
|
|
},
|
|
|
|
open : function (target) {
|
|
if (target) {
|
|
var modal = $('#' + target.data('reveal-id'));
|
|
} else {
|
|
var modal = $(this.scope);
|
|
}
|
|
|
|
if (!modal.hasClass('open')) {
|
|
var open_modal = $('.reveal-modal.open');
|
|
|
|
if (typeof modal.data('css-top') === 'undefined') {
|
|
modal.data('css-top', parseInt(modal.css('top'), 10))
|
|
.data('offset', this.cache_offset(modal));
|
|
}
|
|
|
|
modal.trigger('open');
|
|
|
|
if (open_modal.length < 1) {
|
|
this.toggle_bg(modal);
|
|
}
|
|
this.hide(open_modal, this.settings.css.close);
|
|
this.show(modal, this.settings.css.open);
|
|
}
|
|
},
|
|
|
|
close : function (modal) {
|
|
|
|
var modal = modal || $(this.scope),
|
|
open_modals = $('.reveal-modal.open');
|
|
|
|
if (open_modals.length > 0) {
|
|
this.locked = true;
|
|
modal.trigger('close');
|
|
this.toggle_bg(modal);
|
|
this.hide(open_modals, this.settings.css.close);
|
|
}
|
|
},
|
|
|
|
close_targets : function () {
|
|
var base = '.' + this.settings.dismissModalClass;
|
|
|
|
if (this.settings.closeOnBackgroundClick) {
|
|
return base + ', .' + this.settings.bgClass;
|
|
}
|
|
|
|
return base;
|
|
},
|
|
|
|
toggle_bg : function (modal) {
|
|
if ($('.reveal-modal-bg').length === 0) {
|
|
this.settings.bg = $('<div />', {'class': this.settings.bgClass})
|
|
.appendTo('body');
|
|
}
|
|
|
|
if (this.settings.bg.filter(':visible').length > 0) {
|
|
this.hide(this.settings.bg);
|
|
} else {
|
|
this.show(this.settings.bg);
|
|
}
|
|
},
|
|
|
|
show : function (el, css) {
|
|
// is modal
|
|
if (css) {
|
|
if (/pop/i.test(this.settings.animation)) {
|
|
css.top = $(window).scrollTop() - el.data('offset') + 'px';
|
|
var end_css = {
|
|
top: $(window).scrollTop() + el.data('css-top') + 'px',
|
|
opacity: 1
|
|
};
|
|
|
|
return this.delay(function () {
|
|
return el
|
|
.css(css)
|
|
.animate(end_css, this.settings.animationSpeed, 'linear', function () {
|
|
this.locked = false;
|
|
el.trigger('opened');
|
|
}.bind(this))
|
|
.addClass('open');
|
|
}.bind(this), this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
if (/fade/i.test(this.settings.animation)) {
|
|
var end_css = {opacity: 1};
|
|
|
|
return this.delay(function () {
|
|
return el
|
|
.css(css)
|
|
.animate(end_css, this.settings.animationSpeed, 'linear', function () {
|
|
this.locked = false;
|
|
el.trigger('opened');
|
|
}.bind(this))
|
|
.addClass('open');
|
|
}.bind(this), this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
|
|
}
|
|
|
|
// should we animate the background?
|
|
if (/fade/i.test(this.settings.animation)) {
|
|
return el.fadeIn(this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
return el.show();
|
|
},
|
|
|
|
hide : function (el, css) {
|
|
// is modal
|
|
if (css) {
|
|
if (/pop/i.test(this.settings.animation)) {
|
|
var end_css = {
|
|
top: - $(window).scrollTop() - el.data('offset') + 'px',
|
|
opacity: 0
|
|
};
|
|
|
|
return this.delay(function () {
|
|
return el
|
|
.animate(end_css, this.settings.animationSpeed, 'linear', function () {
|
|
this.locked = false;
|
|
el.css(css).trigger('closed');
|
|
}.bind(this))
|
|
.removeClass('open');
|
|
}.bind(this), this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
if (/fade/i.test(this.settings.animation)) {
|
|
var end_css = {opacity: 0};
|
|
|
|
return this.delay(function () {
|
|
return el
|
|
.animate(end_css, this.settings.animationSpeed, 'linear', function () {
|
|
this.locked = false;
|
|
el.css(css).trigger('closed');
|
|
}.bind(this))
|
|
.removeClass('open');
|
|
}.bind(this), this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
return el.hide().css(css).removeClass('open').trigger('closed');
|
|
}
|
|
|
|
// should we animate the background?
|
|
if (/fade/i.test(this.settings.animation)) {
|
|
return el.fadeOut(this.settings.animationSpeed / 2);
|
|
}
|
|
|
|
return el.hide();
|
|
},
|
|
|
|
close_video : function (e) {
|
|
var video = $(this).find('.flex-video'),
|
|
iframe = video.find('iframe');
|
|
|
|
if (iframe.length > 0) {
|
|
iframe.attr('data-src', iframe[0].src);
|
|
iframe.attr('src', 'about:blank');
|
|
video.fadeOut(100).hide();
|
|
}
|
|
},
|
|
|
|
open_video : function (e) {
|
|
var video = $(this).find('.flex-video'),
|
|
iframe = video.find('iframe');
|
|
|
|
if (iframe.length > 0) {
|
|
var data_src = iframe.attr('data-src');
|
|
if (typeof data_src === 'string') {
|
|
iframe[0].src = iframe.attr('data-src');
|
|
}
|
|
video.show().fadeIn(100);
|
|
}
|
|
},
|
|
|
|
cache_offset : function (modal) {
|
|
var offset = modal.show().height() + parseInt(modal.css('top'), 10);
|
|
|
|
modal.hide();
|
|
|
|
return offset;
|
|
},
|
|
|
|
off : function () {
|
|
$(this.scope).off('.fndtn.reveal');
|
|
}
|
|
};
|
|
}(Foundation.zj, this, this.document)); |