backbone-notify

Backbone Notify

Simple and lightweight Backbone notification system uses ES6 (babel.js)

NPM package

npm i backbone-notify --save

How to use?

'use strict';

//Depends
const $               = require('jquery');
const notify          = require('./notify');

//set default notification settinds
notify.settings({
  delay: 2 * 1000,    //how many seconds
  autohide: false,    //set true if u want to hide them
  position: 'top',    //initial position top || bottom
  margin: 10,         //margin between current and next notify
  start: 20           //start position from window border top:{start} || bottom:{start}
});

$(function() {
  notify('danger',   'BB:NOTIFY:ALERT (hide after 4sec)', {
    autohide: true,
    delay: 4 * 1000
  });
  notify('warning',  'BB:NOTIFY:WARNING (hide after 6sec)', {
    autohide: true,
    delay: 6 * 1000
  });
  notify('info',     'BB:NOTIFY:INFO (8sec)', {
    delay: 8 * 1000,
    position: 'bottom',
    css: {
      'font-size': 14,
      'font-weight': 'bold'
    }
  });
  notify('success',  'BB:NOTIFY:SUCCESS (20sec)', {
    delay: 20 * 1000,
    position: 'bottom',
    css: {
      'font-size': 15,
      'font-weight': 'bold'
    }
  });
});

Want to make it better?

Sure, i'll glad to see pull requests ^_^

git clone https://github.com/mrsum/backbone-notify.git 
  && cd $_ 
  && npm i 
  && gulp watch

Want to compile standalone backbone-notify via Gulp?

gulp build

And look into dist/ folder

Customize

.notify {
  right: 10px;
  color: #fff;
  position: fixed;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 15px 20px;
  border-radius: 6px;
}
.notify:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.notify, .close {
  cursor: pointer;
}
.notify .close {
  font-size: 14px;
  position: absolute;
  top: 3px;
  right: 3px;
}

.notify.danger        {background-color: rgba(131, 0, 25, 0.8);}
.notify.danger:hover  {background-color: rgba(131, 0, 25, 0.6);}

.notify.warning       {background-color: rgba(155, 21, 21, 0.8);}
.notify.warning:hover {background-color: rgba(155, 21, 21, 0.6);}

.notify.info          {background-color: rgba(9, 93, 129, 0.8);}
.notify.info:hover    {background-color: rgba(9, 93, 129, 0.6);}

.notify.success       {background-color: rgba(12, 129, 9, 0.8);}
.notify.success:hover {background-color: rgba(12, 129, 9, 0.6);}

WTF is ES6?

Simply, the next version of JavaScript that contains some really cool features. You might check out some of these:

• https://wiki.mozilla.org/ES6_plans
• http://globaldev.co.uk/2013/09/es6-part-1/
• http://code.tutsplus.com/tutorials/eight-cool-features-coming-in-es6--net-33175

Info about dev tools

Babel

Transpiles ES6 code into regular ES5 (today's JavaScript) so that it can be run in a today browser. Like traceur but doesn't need a runtime to work. Formerly known as 6to5.

CommonJS

Babel is configured to transpile ES6 modules into CommonJS syntax and we use browserify to bundle the code into one file to deliver it to the browser.

Browserify

Browserify walks through all files and traces down all require()s to bundle all files together.

Gulp

Task runner to make defining and running the tasks simpler.