Alert

Custom alert box plugin to replace the standard javascript alert function.

// ===========================
// CUSTOM ALERT BOX
//
// This plugin is immediately instantiated on runtime and relies on being
// imported at the bottom of the document body.
//
// @param object The custom alert object or an empty object
// @method Alert.render() render the alert box
// @method Alert.ok() close the alert box
// @method createHtmlTemplate() Private method to create the html template
//
// @return object Alert
//
// @author icummings
// @author adamkhoury
// @source https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
var Alert = (function (Alert) {

  // Build the html template if the alert-box doesn't exit yet

  if(!document.getElementById("alert-box")) createHtmlTemplate();

  // If the alert box is visible and "esc" is pressed, close the alert box

  document.onkeydown = function( event ) {
    if ( box.style.display == "block" && event.keyCode == 27 ) Alert.ok();
  };

 // ===========================
 // Render the message, center it on the screen and
 // style it according to the message type.
 //
 // @param string message The message hard-coded in the html
 // @param string type The type of message, [error, success, warning, notice]
 // @return void
 // ===========================
  Alert.render = function(message, type) {

      // If the alert type is missing default to "notice"

      var className = type || "notice";

      // Get the window dimensions

      var winW = window.innerWidth;
      var winH = window.innerHeight;

      // Get the alert box components

      var overlay = document.getElementById('overlay');
      var box = document.getElementById('box');

      // Build the overlay & the alert box style

      overlay.style.display = "block";
      overlay.style.height = winH+"px";
      box.style.top = "100px";
      box.style.display = "block";

      // Maintain 2 separate box widths for smaller and larger screens

      boxW = winW < 769 ? 360 : 560;

      // Center the alert box on the screen according to screen size

      box.style.left = (winW/2) - (boxW * .5)+"px";

      // Format the alert box message

      capitalizedName = className[0].toUpperCase() + className.substr(1);
      document.getElementById('box-header').innerHTML = capitalizedName;
      document.getElementById('box-body').innerHTML = message;
      document.getElementById('box-footer').innerHTML = '<button onclick="Alert.ok()">OK</button>';

      // Style the alert box according to its type, options are [error, success, warning, notice]

      document.getElementById('box-header').className = ""
      document.getElementById('box-header').classList.add(className);
  }

  // ===========================
  // Hide the alert box if the user clicked "OK".
  // @return void
  // ===========================
  Alert.ok = function(){
    document.getElementById('box').style.display = "none";
    document.getElementById('overlay').style.display = "none";
  }

  // ===========================
  // Build the html template.
  // We store the template here to keep the plugin centralized.
  // This makes it a lot easier to maintain.
  // @return void
  // ===========================
  function createHtmlTemplate() {
    var html =   '<div id="overlay"></div>'
                +'<div id="box">'
                + '<div>'
                +   '<div id="box-header"></div>'
                +   '<div id="box-body"></div>'
                +   '<div id="box-footer"></div>'
                + '</div>'
                +'</div>';
    var container = document.createElement("div");
    container.id = "alert-box";
    container.innerHTML = html
    document.body.appendChild(container);
  };

  return Alert;

})(Alert || {});