Flat Notifications - FlatNotify.js v0.1

flat-notifications-flatnotify-js-v0-1.markdown

Flat Notifications - FlatNotify.js v0.1

This is a Javascript plugin I am working on for floating notifications. It is a work in progress.

A Pen by Saransh Sinha on CodePen.

License.

index.haml

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
%div.title-container
  .title
    FlatNotifiy.js v0.1
  %a.sub-title{href: 'http://www.twitter.com/screenshake', target: '_blank'}
    Super simple notifications by @screenshake
%div.button-container
  %a.alert{href: '#', onclick: "flatNotify().alert('Testing Alert Notification',2000)"} Alert
  %a.success{href: '#', onclick: "flatNotify().success('Testing Success Notification with a two line message. Sweet right?',1500)"} Success
  %a.error{href: '#', onclick: "flatNotify().error('Testing Error Notification with a really long message. I mean come on? Who notifies people like this? This is so wrong on so many levels.',3000)"} Error

script.js

/**
 * 
 * flatNotify.js v0.1
 * @screenshake
 *
 * Inspired by :
 * http://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/
 * 
 * Animation courtesy :
 * bounce.js - http://bouncejs.com/
 * 
 * Class manipulation
 * classie.js https://github.com/desandro/classie
 * 
 */
;( function( window ) {

  var proto_methods = {
    options: {
      wrapper: document.body,
      dismissIn: 5000
    },
    init: function() {
      this.ntf = document.createElement('div');
      this.ntf.className = 'f-notification';
      var strinner = '<div class="f-notification-inner"></div><div class="f-close">x</div></div>';
      this.ntf.innerHTML = strinner;

      // append to body or the element specified in options.wrapper
      this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.lastChild);

      // init events
      this.initEvents();
    },
    initEvents: function() {
      var self = this;
      // dismiss notification
      this.ntf.querySelector('.f-close').addEventListener('click', function() {
        self.dismiss();
      });
    },
    dismiss: function() {
      var self = this;
      clearTimeout(this.dismissttl);

      classie.remove(self.ntf, 'f-show');
      setTimeout(function() {
        classie.add(self.ntf, 'f-hide');
      }, 25);

      setTimeout(function() {
        self.options.wrapper.removeChild( self.ntf );
      }, 500);
      
    },
    setType: function(newType) {
      var self = this;

      classie.remove(self.ntf, 'f-notification-error');
      classie.remove(self.ntf, 'f-notification-alert');
      classie.remove(self.ntf, 'f-notification-success');

      classie.add(self.ntf, newType);

    },
    success: function(message, dismissIn) {
      var self = this;

      /**
       * Use supplied dismiss timeout if present, else uses default value.
       * If set to 0, doesnt automatically dismiss.
       */
      dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;

      /**
       * Set notification type styling
       */
      self.setType('f-notification-success');

      self.ntf.querySelector('.f-notification-inner').innerHTML = message;

      classie.remove(self.ntf, 'f-hide');
      classie.add(self.ntf, 'f-show');

      if (dismissIn > 0) {
        this.dismissttl = setTimeout(function() {
          self.dismiss();
        }, dismissIn);
      }
    },
    error: function(message, dismissIn) {
      var self = this;

      /**
       * Use supplied dismiss timeout if present, else uses default value.
       * If set to 0, doesnt automatically dismiss.
       */
      dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;

      /**
       * Set notification type styling
       */
      self.setType('f-notification-error');

      self.ntf.querySelector('.f-notification-inner').innerHTML = message;

      classie.remove(self.ntf, 'f-hide');
      classie.add(self.ntf, 'f-show');

      if (dismissIn > 0) {
        this.dismissttl = setTimeout(function() {
          self.dismiss();
        }, dismissIn);
      }
    },
    alert: function(message, dismissIn) {
      var self = this;

      /**
       * Use supplied dismiss timeout if present, else uses default value.
       * If set to 0, doesnt automatically dismiss.
       */
      dismissIn = (typeof dismissIn === "undefined") ? this.options['dismissIn'] : dismissIn;

      /**
       * Set notification type styling
       */
      self.setType('f-notification-alert');

      self.ntf.querySelector('.f-notification-inner').innerHTML = message;

      classie.remove(self.ntf, 'f-hide');
      classie.add(self.ntf, 'f-show');

      if (dismissIn > 0) {
        this.dismissttl = setTimeout(function() {
          self.dismiss();
        }, dismissIn);
      }
    }
  }, flatNotify, _flatNotifiy;

  _flatNotifiy = function() {
    this.init();
  };

  _flatNotifiy.prototype = proto_methods;

  flatNotify = function() {
    return new _flatNotifiy();
  };

  /**
   * add to global namespace
   */
  window.flatNotify = flatNotify;

} )( window );

scripts

<script src="http://yourjavascript.com/30914111154/classie.js"></script>

style.sass

@import compass

body
  background: #eee
  font-family: 'Brandon Grotesque', Avenir, 'Lato', sans-serif

.title-container
  margin: 120px auto 0
  text-align: center
  width: 350px
  .title
    font-size: 40px
    margin-bottom: 15px
  .sub-title
    text-decoration: none
    font-size: 20px
    color: #D3D3D3
    
.button-container
  width: 438px
  height: 78px
  margin: 40px auto 0
  
  a
    text-decoration: none
    padding: 20px 0
    width: 130px
    text-align: center
    margin: 20px 6px
    display: inline-block
    color: #FFF
    font-size: 20px
    border-radius: 5px
    transition: all 0.3s
    
    &.success
      background: #2ecc71
      
    &.error
      background: #e74c3c
      
    &.alert
      background: #f1c40f
      
    &:hover
      opacity: 0.6
  
.f-notification
  position: fixed
  bottom: 20px
  right: 20px
  text-align: left
  width: 300px
  min-height: 20px
  padding: 20px 40px 20px 18px
  border-radius: 5px
  color: rgba(255, 255, 255, 0.85)
        
  &:hover
    opacity: 0.9
    
    .f-notification-close
      background: rgba(77, 77, 79, 0.1)

  .f-notification-title
    font-weight: 600
    color: #4D4D4F
    cursor: default
  
  .f-close
    position: absolute
    right: 15px
    top: 20px
    height: 20px
    width: 20px
    line-height: 18px
    vertical-align: middle
    text-align: center
    border-radius: 20px
    color: #4D4D4F
    cursor: pointer
    background: rgba(255, 255, 255, 0.25)
      
    &:hover
      background: rgba(77, 77, 79, 0.2)
    
.f-notification-success
  background: #2ecc71
  
.f-notification-error
  background: #e74c3c
  
.f-notification-alert
  background: #f1c40f
      
.f-show
  animation-name: animSlideElastic
  animation-duration: 1s
  animation-timing-function: linear
  
.f-hide
  animation-name: animSlideElastic
  animation-duration: 0.5s
  animation-direction: reverse

@keyframes animSlideElastic
  0%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1)
  3.333333%
    transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1)
  6.666667%
    transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1)
  10%
    transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1)
  13.333333%
    transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1)
  16.666667%
    transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1)
  20%
    transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1)
  23.333333%
    transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1)
  26.666667%
    transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1)
  30%
    transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1)
  33.333333%
    transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1)
  36.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1)
  40%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1)
  43.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1)
  46.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1)
  50%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1)
  53.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1)
  56.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1)
  60%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1)
  63.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1)
  66.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1)
  70%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1)
  73.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1)
  76.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1)
  80%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1)
  83.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1)
  86.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1)
  90%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1)
  93.333333%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1)
  96.666667%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1)
  100%
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)