Flash notifier
A notification class that creates a
by Renoir Boulanger
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div class="container">
<div class="row">
<div class="span6 offset3" id="patate">
<div class="hero-unit">
<h1>Hello world</h1>
<p>Messages should appear on top of this unit</p>
<button data-message="Message!!!" class="btn btn-primary">Hit me!</button>
</div>
</div>
</div>
</div>
JavaScript
/**
* Dependencies
* - UnderscoreJS
* - jQuery
* - counter {methods:[newNode,create,remNode]}
*
* NOT WORKING YET!
* NEEDS:
* - insert dependencies
* - initialization
* - Refactor into a constructor class
*
* @author Renoir Boulanger <[email protected]>
*/
function FlashNotifier(insertionNodeName){
'use strict';
var module = {},
dependencies = {'_':null,'counter':null,'jQ':null};
module.options = {
flashMessageIds: [],
'insertion':null
};
module.init = function(insertionNodeName){
module.options.insertion = insertionNodeName;
/**
* Dependency with counter,
*
* must have methods:
* - newNode(name)
* - create(name)
* - remNode(name,id)
*/
// create an init method
dependencies.counter = G.counter;
dependencies._ = G._;
dependencies.jQ = G.jQ;
};
module.flashMessage = function (text,type,ttl) {
if(typeof dependencies.counter !== 'object') {
//console.log(message);
throw new Error("Required Counter facility is not available, look if all the files are loaded, or try again that everything is loaded");
}
var allowedTypes = ['error','info','danger','success'];
var tType = (dependencies._.contains(allowedTypes,type))?type:'danger';
dependencies.counter.create('flash-messages');
var flashId = dependencies.counter.newNode('flash-messages');
//console.log(JSON.stringify(flashId));
var newElement = dependencies.jQ('<div class="alert-block alert alert-'+tType+' fade in" id="flash-'+flashId+'"><a class="close pull-right" data-dismiss="alert">×</a><p>'+text+'</p></div>');
if(typeof ttl === 'boolean' && ttl === true) {
ttl = 9000;
}
if(typeof ttl !== 'undefined' && typeof ttl === 'number') {
...