Skip to content

Add feature to allow limiting of total notifications shown and queue the rest. #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jpuffer wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add feature to allow limiting of total notifications shown and queue the rest. #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
153a367
fix code mistake
jpuffer Jul 29, 2014
d701e69
add feature to limit number of notifications
jpuffer Jul 30, 2014
2c082a1
fix broken example images.
jpuffer Aug 8, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 20 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,18 @@ <h1>Gritter Demo</h1>
<li>
<a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
</li>
<li>
<a href="#" id="add-max">Add notification with max of 3</a>: If there are 3 messages already on screen, it won't show another one.
</li>
<li>
<a href="#" id="remove-all">Remove all notifications</a>
</li>
<li>
<a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
</li>
<li>
<a href="#" id="set-max-to-display">Set Maximum number of notifications to 3.</a> Any additional notifications will queue up in the background then show when there is room.
</li>
<li>
<a href="#" id="unset-max-to-display">Reset Maximum number of notifications.</a> All notifications will show right away.
</li>
</ul>
</div>

Expand All @@ -77,6 +80,18 @@ <h1>Gritter Demo</h1>
});
*/

$('#set-max-to-display').click(function(){
$.extend($.gritter.options, {
max_to_display: 3
});
});

$('#unset-max-to-display').click(function(){
$.extend($.gritter.options, {
max_to_display: 0
});
});

$('#add-sticky').click(function(){

var unique_id = $.gritter.add({
Expand All @@ -85,7 +100,7 @@ <h1>Gritter Demo</h1>
// (string | mandatory) the text inside the notification
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
image: 'https://pbs.twimg.com/profile_images/463461342012112897/xbiWMOyh.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: true,
// (int | optional) the time you want it to be alive for before fading out
Expand Down Expand Up @@ -118,7 +133,7 @@ <h1>Gritter Demo</h1>
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
image: 'http://pbs.twimg.com/profile_images/59268975/jquery_avatar.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (int | optional) the time you want it to be alive for before fading out
Expand All @@ -129,31 +144,6 @@ <h1>Gritter Demo</h1>

});

$('#add-max').click(function(){

$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a notice with a max of 3 on screen at one time!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (function) before the gritter notice is opened
before_open: function(){
if($('.gritter-item-wrapper').length == 3)
{
// Returning false prevents a new gritter from opening
return false;
}
}
});

return false;

});

$('#add-without-image').click(function(){

$.gritter.add({
Expand Down
61 changes: 45 additions & 16 deletions js/jquery.gritter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
class_name: '', // could be set to 'gritter-light' to use white notifications
fade_in_speed: 'medium', // how fast notifications fade in
fade_out_speed: 1000, // how fast the notices fade out
time: 6000 // hang on the screen for...
time: 6000, // hang on the screen for...
max_to_display: 0 //if not 0, only show this many notifications at once and queue others.
}

/**
Expand All @@ -34,7 +35,7 @@
$.gritter.add = function(params){

try {
return Gritter.add(params || {});
return Gritter.addToQueue(params || {});
} catch(e) {

var err = 'Gritter Error: ' + e;
Expand Down Expand Up @@ -82,17 +83,47 @@
_tpl_title: '<span class="gritter-title">[[title]]</span>',
_tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none" role="alert"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]">[[title]]<p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',
_tpl_wrap: '<div id="gritter-notice-wrapper"></div>',
_notificaiton_queue: [],


/**
* Add a gritter notification to the screen
* Add a notification to the queue.
* @param {Object} params The object that contains all the options for drawing the notification
* @return {Integer} The specific numeric id to that gritter notification
*/
add: function(params){
// Handle straight text
if(typeof(params) == 'string'){
addToQueue: function(params){
// Handle straight text
if(typeof(params) === 'string'){
params = {text:params};
}

this._item_count++;
this._notificaiton_queue.push($.extend(params, {item_number: this._item_count})); //add this notification to the end of the queue. include its unique id which is the item_count.
this._updateDomFromQueue();
return this._item_count;
},


/**
* Check whether we can move a notification from the queue onto the DOM.
*/
_updateDomFromQueue: function(){
var maxNotifications = $.gritter.options.max_to_display;
var isLimited = maxNotifications > 0; // if maxNotifications is greater than 0, then there is a set limit.
if(!isLimited || $('.gritter-item-wrapper').length < maxNotifications){ //no limit or have not reached the max yet
if(this._notificaiton_queue.length > 0){ //there's something in the queue to add
this._addToDom(this._notificaiton_queue.shift()); //put the first item in the queue onto the dom
}
}
},

/**
* Add a gritter notification to the screen
* @param {Object} params The object that contains all the options for drawing the notification
*/
_addToDom: function(params){



// We might have some issues if we don't have a title or text!
if(params.text === null){
Expand All @@ -115,8 +146,8 @@

this._verifyWrapper();

this._item_count++;
var number = this._item_count,

var number = params.item_number,
tmp = this._tpl_item;

// Assign callbacks
Expand Down Expand Up @@ -144,7 +175,7 @@

tmp = this._str_replace(
['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'],
[title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp
[title, text, this._tpl_close, image_str, number, class_name, item_class], tmp
);

// If it's false, don't show another gritter message
Expand All @@ -154,7 +185,7 @@

$('#gritter-notice-wrapper').addClass(position).append(tmp);

var item = $('#gritter-item-' + this._item_count);
var item = $('#gritter-item-' + number);

item.fadeIn(this.fade_in_speed, function(){
Gritter['_after_open_' + number]($(this));
Expand Down Expand Up @@ -184,9 +215,6 @@
Gritter.removeSpecific(number, {}, null, true);
return false;
});

return number;

},

/**
Expand Down Expand Up @@ -222,7 +250,8 @@
var params = params || {},
fade = (typeof(params.fade) != 'undefined') ? params.fade : true,
fade_out_speed = params.speed || this.fade_out_speed,
manual_close = unbind_events;
manual_close = unbind_events,
self = this;

this['_before_close_' + unique_id](e, manual_close);

Expand All @@ -239,6 +268,7 @@
}, fade_out_speed, function(){
e.animate({ height: 0 }, 300, function(){
Gritter._countRemoveWrapper(unique_id, e, manual_close);
self._updateDomFromQueue();
})
})

Expand Down Expand Up @@ -290,13 +320,12 @@
removeSpecific: function(unique_id, params, e, unbind_events){

if(!e){
var e = $('#gritter-item-' + unique_id);
e = $('#gritter-item-' + unique_id);
}

// We set the fourth param to let the _fade function know to
// unbind the "mouseleave" event. Once you click (X) there's no going back!
this._fade(e, unique_id, params || {}, unbind_events);

},

/**
Expand Down