Meteor Alerts based on Discover Meteor Alerts // Bootstrap

alerts-1.js

/**
 * There are two options to use for this gist.
 * Here is option 1.
 * 
 * e.g.,
 * throwAlert('success','I am a title', 'I am a message');
 */
 
// Local (client-only) collection
Alerts = new Mongo.Collection(null);

throwAlert = function (type, title, message,) {
	
	// If throwAlert('error', 'title', 'message'),
	// return type class as 'alert-danger';
	if (type === 'error') {
	  type = 'alert-danger';
	}
	
	// If throwAlert('success', 'title', 'message'),
	// return type class as 'alert-success';
	if (type === 'success') {
	  type = 'alert-success';
	}
	
	Alerts.insert({
		type: type,
		title: title, 
		message: message
	});

	$('.alert').addClass('show');

};

// From here option 1 and 2 are same.

Template.alertsList.helpers({
	alerts: function() {
		return Alerts.find();
	}
});

Template.alert.onRendered( function() {
	var alert = this.data;
	Meteor.setTimeout(function () {
		Alerts.remove(alert._id);
	}, 5000); // Customize Alert showing time here
});

alerts-2.js

/**
 * There are two options to use for this gist.
 * Here is option 2.
 * 
 * e.g.,
 * throwError('I am a title', 'I am a message');
 * throwSuccess('I am a title', 'I am a message');
 */
 
// Local (client-only) collection
Alerts = new Mongo.Collection(null);

throwSuccess = function (title, message) {
	Alerts.insert({
	  title: title,
		message: message,
		type: 'alert-success'
	});
	$('.alert').addClass('show');
};

throwError = function (title, message) {
	Alerts.insert({
	  title: title,
		message: message,
		type: 'alert-danger'
	});
	$('.alert').addClass('show');
};

// From here option 1 and 2 are same.

Template.alertsList.helpers({
	alerts: function() {
		return Alerts.find();
	}
});

Template.alert.onRendered( function() {
	var alert = this.data;
	Meteor.setTimeout(function () {
		Alerts.remove(alert._id);
	}, 5000); // Customize Alert showing time here
});

alerts.import.less

/**
 * To customize each alert styling by type,
 * make your own class here for type and change name
 * respectively in the js file above.
 * This gist uses bootstrap alert classes
 * 'alert-success' , 'alert-danger'
 */

@alertHeight : auto;

.alertsList {
  // This is the container that holds the alerts.
  // Customize here to for placement/size of alert container
  position: fixed;
  top: 0;
  right: 0;
  
  width: 300px;
  height: @alertHeight;
  line-height: @alertHeight;
  
  padding: 10px;
  
  pointer-events: none;
  z-index: 100;
}

.alert.show {
  border-radius: 0px;
  margin-bottom: 5px; // Gap between each alert if not overlap.
  pointer-events: auto;

  // Apply animation when showing each alert
  -webkit-animation-name: someAnimation;
     -moz-animation-name: someAnimation;
          animation-name: someAnimation;

  // Animation time (different from alert showing time defined in javascript file)
  -webkit-animation-duration: 250ms;
     -moz-animation-duration: 250ms;
          animation-duration: 250ms;
}

alerts.jade

// This is the template you actually include in your layout template
template(name="alertsList")
  .alertsList
    each alerts
      +alert

// This template is for the styling of each alerts
template(name="alert")
  div(role="alert" class="alert {{type}}")
    button.close(type="button" data-dismiss="alert" aria-label="Close")
      span(aria-hidden="true") ×
    h3 {{title}}
    | {{message}}