Toaster Plugin

by Zuhaib Siddiqui

HTML

<div class="container">
  <div id="toast-btn">Show me toast</div>
  <input type="text" id="textbox" placeholder="type something here!"/>
</div>

CSS

* {
  box-sizing: border-box;
}

input {
  outline: none;
}

body {
  font-family: "BentonSans", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
  background-color: #3B2F63;
  background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%,rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%,rgba(121,74,162,0) 57%);
  background-image: radial-gradient( at 50% top, rgba(84,90,182,0.6) 0%,rgba(84,90,182,0) 75%),radial-gradient( at right top, #794aa2 0%,rgba(121,74,162,0) 57%);
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  margin: 0;
  padding: 0;
}

.container {
  width: 500px;
  margin: 100px auto;
  background: transparent;
  overflow: hidden;
  border: 2px solid #fff;
  display: flex;
}

#toast-btn {
  display: inline-block;
  float: left;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  border: 2px solid #3B2F63;
  white-space: no-wrap;
  font-size: 20px;
  color: #3B2F63;
  width: 40%;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#toast-btn:hover {
  background: #3B2F63;
  color: #fff;
}

#textbox {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 0 10px;
  color: #fff;
  border-left: 2px solid #fff;
  width: 60%;
}

.toast {
  padding: 15px 20px;
  color: #fff;
  background: rgba(0,0,10,0.7);
  display: inline-block;
  position: fixed;
  top: -100px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s ease-out;
}

JavaScript

// requires jQuery ... for now

function ToastBuilder(options) {
  // options are optional
  var opts = options || {};
  
  // setup some defaults
  opts.defaultText = opts.defaultText || 'default text';
  opts.displayTime = opts.displayTime || 3000;
  opts.target = opts.target || 'body';

  return function (text) {
    $('<div/>')
      .addClass('toast')
      .prependTo($(opts.target))
      .text(text || opts.defaultText)
      .queue(function(next) {
        $(this).css({
          'opacity': 1
        });
        var topOffset = 15;
        $('.toast').each(function() {
          var $this = $(this);
          var height = $this.outerHeight();
          var offset = 15;
          $this.css('top', topOffset + 'px');

          topOffset += height + offset;
        });
        next();
      })
      .delay(opts.displayTime)
      .queue(function(next) {
        var $this = $(this);
        var width = $this.outerWidth() + 20;
        $this.css({
          'right': '-' + width + 'px',
          'opacity': 0
        });
        next();
      })
      .delay(600)
      .queue(function(next) {
        $(this).remove();
        next();
      });
  };
}

// customize it with your own options
var myOptions = {
  defaultText: 'Toast, yo!',
  displayTime: 3000,
  target: 'body'
};
  //position: 'top right',   /* TODO: make this */
  //bgColor: 'rgba(0,0,0,0.5)', /* TODO: make this */

// to get it started, instantiate a copy of
// ToastBuilder passing our custom options
var showtoast = new ToastBuilder(myOptions);

// now you can fire off a toast just calling
// our new instance passing a string, like this:
// showtoast('hello, world!');


// wire it up
$('#toast-btn').click(function() {
  showtoast($('#textbox').val());
});

// fires off a toast when you hit enter
$('#textbox').keypress(function(e) {
  if (e.which == 13) {
    showtoast($('#textbox').val());
    return false;
  }
});

// Demo:

$('body')
  .queue(function(next) {
    showtoast('Hey look, toast!');
  ...