Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Full-screen overlay
/*globals $, TweenLite, Power3*/
/*jshint node:true*/
'use strict';
/**
* Overlay
*
* Controls creating, showing, hiding and removing of overlays
*/
var Overlay = (function() {
var $body = $('body');
function Overlay() {
this.assignClass = 'c-overlay';
this.el = false;
this.animate = {
duration: 0.3,
visible: {
display: 'block',
autoAlpha: 1,
ease: Power3.easeInOut
},
hidden: {
display: 'none',
autoAlpha: 0,
ease: Power3.easeInOut
}
};
}
/**
* Check if the overlay has already been created
*/
Overlay.prototype.isCreated = function() {
return this.el === false || typeof this.el === 'undefined' ? false: true;
};
/**
* Create the overlay
*/
Overlay.prototype.create = function() {
var self = this;
this.el = $('<div/>', {
'class': this.assignClass
}).appendTo($body);
$(this.el).on('click', function() {
self.hide();
});
};
/**
* Show the overlay
*/
Overlay.prototype.show = function() {
$body.addClass('prevent-overflow');
TweenLite.fromTo(this.el, this.animate.duration, this.animate.hidden, this.animate.visible);
};
/**
* Hide the overlay
*/
Overlay.prototype.hide = function() {
$body.removeClass('prevent-overflow');
TweenLite.fromTo(this.el, this.animate.duration, this.animate.visible, this.animate.hidden);
};
/**
* Remove the overlay
*/
Overlay.prototype.destroy = function() {
$body.removeClass('prevent-overflow');
$(this.el).remove();
this.el = false;
};
return Overlay;
})();
module.exports = Overlay;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment