Skip to content
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.

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

How can i Limit a alert. #136

Open
dineshpandianr opened this issue Feb 9, 2016 · 19 comments
Open

How can i Limit a alert. #136

dineshpandianr opened this issue Feb 9, 2016 · 19 comments

Comments

@dineshpandianr
Copy link

I need only one alert

@mouse0270
Copy link
Owner

Like you only want to show one alert of different content at a time?

@ahumellihuk
Copy link

I think both me and @dineshpandianr want the same thing - option to set the maximum number of alerts displayed simultaneously, in other words - ability to limit the number of notifications on the screen at any given time. The oldest visible notification would be removed in favour of the new one.

@mouse0270
Copy link
Owner

I am working on adding this because I need it for a project I am working on.
On Tue, Mar 22, 2016 at 9:00 AM Dmitri Samoilov notifications@github.com
wrote:

I think both me and @dineshpandianr https://github.com/dineshpandianr
want the same thing - option to set the maximum number of alerts displayed
simultaneously, in other words - ability to limit the number of
notifications on the screen at any given time. The oldest visible
notification would be removed in favour of the new one.


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#136 (comment)

@empz
Copy link

empz commented Mar 31, 2016

+1
Came to ask exactly this. I only want one active notification at a time.
I tried doing

$.notifyClose();
$.notify({...});

But since the new notification appears before the old one is done animating out it ends up being below.

On the other hand, doing that with newest_on_top: true kinda works (although you see how a new one appears and the previous dissapears). But it does the trick until the library provides a limit.

@mouse0270
Copy link
Owner

Just to be clear, in the new version it doesn't really limit 1 notification but queues them on one of two options, queue and restrict. Where queue will only show a specific number, once one of them closes it will show the next notification in the queue. Restrict will force close the oldest notification to show the newest one called.

This still plays the animations associated with the queue.

I could say if on restrict the exit animation doesn't play? That may work... not sure.

@empz
Copy link

empz commented Mar 31, 2016

I guess that's ok.

In my specific case I only want one notification at a time because it's the
same notification that could be shown several times if people keep typing
stuff in a textbox. So yeah, I only want one in this case because the
others that might appear would be exactly the same.

I think your queue and restrict approach is perfectly fine. I don't think
you need to make it to not play the exit animation on restrict.

On 31 March 2016 at 15:02, Robert McIntosh notifications@github.com wrote:

Just to be clear, in the new version it doesn't really limit 1
notification but queues them on one of two options, queue and restrict.
Where queue will only show a specific number, once one of them closes it
will show the next notification in the queue. Restrict will force close the
oldest notification to show the newest one called.

This still plays the animations associated with the queue.

I could say if on restrict the exit animation doesn't play? That may
work... not sure.


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#136 (comment)

@mouse0270
Copy link
Owner

Why don't you use the update feature instead of creating new notifications?

@empz
Copy link

empz commented Mar 31, 2016

@mouse0270 I've missed that completely.

Anyway I don't save the $.notify reference and even if I did I'd have to check whether it's active to update it or if it's not show a new one. Too much logic. I'm fine with how it's now.

@ahumellihuk
Copy link

In my specific case I only want one notification at a time because it's the
same notification that could be shown several times if people keep typing
stuff in a textbox. So yeah, I only want one in this case because the
others that might appear would be exactly the same.

@emzero I think there's an 'allow_duplicates' option , which when set to false, result in Notify checking whether the new notification is a duplicate and not showing it if it is.

@chneau
Copy link

chneau commented May 12, 2016

@mouse0270 Thanks for the updates but can you tell us where is documentation of "queue and restrict" ? Same need, I would like to restrict to few notification at a time.

@ghost
Copy link

ghost commented Oct 15, 2016

Has this been fixed already?
Or is there a workaround, I need this to work for a project.

@mouse0270
Copy link
Owner

The queue and restrict is part of the new version. I finally finished my other work, that I started working on this again last weekend. I am hoping to release it tomorrow.

@netbka
Copy link

netbka commented Dec 6, 2016

Hello,
Do you have any progress on that?

@fmoutawe
Copy link

Any news about this feature ?

Thanks.

@jtal
Copy link

jtal commented Apr 12, 2017

I dont want to assault my users with all old notifications every time a new notification is displayed. It looks like I can use update to change the message, type, etc. But since I am recycling the same notification, how do I make it visible again? Thanks for any help.

@rgriffith
Copy link

@mouse0270 I have a project where we'd like to queue and show one notification at a time; trying to mimic Material UI's snackbar. Is there any update on the queue/restrict functionality?

@thesved
Copy link

thesved commented Nov 24, 2017

I have created a pull request for this feature: #186

If you place notifications to the top, I suggest to you to use it the following way.
Otherwise if newest isn't showing up at top, then notifications can stuck lower than the top of the browser.

restrict: 1,
newest_on_top: true
placement: {
  from: 'top',
  align: 'right'
}

@artificialidentity
Copy link

artificialidentity commented Mar 2, 2018

The above pull request has not been merged yet, however, I did find a work around for anyone else who stumbles upon this.

This solution does not modify the existing code base, which means you are safe if a new version is created or you are using composer as a dependency manager (which is what I am doing).

The solution is to store the notification in a variable

var notification = null;

Then before you create it, check if it exists. I am using JQueries length() function.

if($("[class*=\"alert-\"]").length) {
  notification.update({
    title: "I'm a notification",
    message: "Hello World, I was updated"
  });
}
else {
  notification = $.notify({
    title: "I am notification", 
    message: "Hello World!"
  });
}

There is a downfall to this. I am using Fortawesome 5 icons (svg based) and when you do an update, the icon disappears. I had to remove it.

^ Edit: This only occurs when the icon is within the same element marked as data-notifiy="title"
Example..

<h5 data-notifiy="title"><i data-notify="icon"</i>{1}</h5>

Work around..

<h5><i data-notify="icon"</i><span  data-notifiy="title">{1}</span></h5>

I have also tried destroying the notification, which doesn't work because the new notification gets created before the old one is destroyed causing it be created below the currently existing one.

@mehmetakify
Copy link

For one alert: Give a class to notify div element in template setting and remove it before notify. Like this:

$('div.notification').remove();
$.notify({
    message: "I hope I can help you"
}, {
    type: 'danger',
    template: '<div data-notify="container" class="notification alert alert-{0}" role="alert">' +
        '<img data-notify="icon" class="img-circle pull-left">' +
        '<span data-notify="title">{1}</span>' +
        '<span data-notify="message" style="display: inline-block;">{2}</span>' +
    '</div>'
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests