Full-screen overlay

Overlay.js

/*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;