Stackable (toaster) alerts (now they overwrite)
dandv opened this issue · 13 comments
Displaying more than one alert before the previous one times out results in the the new alert completely overwriting the old one.
sAlert.error('Will be overwritten', {effect: 'slide', position: 'right-top', timeout: 5000});
sAlert.error('Overwrites previous alert', {effect: 'slide', position: 'right-top', timeout: 5000});
A better UX would be to stack them. Here's how Webix does it.
I think it is a matter of css positions only. It is not overwritten but obscured by another one.
But You are right. We need to stack it. It could be complicated because of different alert types, sizes etc., but I will try to figure it out.
Agree - I meant the new alert overlaps the old one. Thanks for taking this feature request into consideration!
@chrismbeckett's toaster package might provide inspiration.
@juliancwirko is it likely that this will get fixed soon?
I want to integrate it into meteor-starter but this is a blocker. We'd be very grateful.
Hi, nice to know! I will try to work on it asap. Maybe on this weekend. But I can't promise ;)
Ok, I think it should work now. You can test it and please send some feedback. Thanks.
new version: 2.3.0
new demo: http://s-alert-demo.meteor.com/
It seems to work when calling it from the console, or when calling it in succession. However, in my use case:
Meteor.startup(function () {
sAlert.config({
effect: 'scale',
position: 'top-right',
timeout: 5000,
html: true
});
ServerMessage.find().observe({
added: function(item) {
sAlert.error(item.message);
}
});
});
The alert objects are being replaced. Looking at the collection, the id of the one alert object just changes, and it is not making additional alerts when adding new ServerMessages. Could also be that I am missing something obvious.
Hmmm, I have very simple demo with your code and it works (of course there will be multiple alerts on startup if you already have something in your 'ServerMessage' collection - this is how observe works).
My demo code:
ServerMessage = new Mongo.Collection('ServerMessage');
if (Meteor.isClient) {
Meteor.startup(function () {
sAlert.config({
effect: 'scale',
position: 'top-right',
timeout: 5000,
html: true
});
ServerMessage.find().observe({
added: function(item) {
sAlert.error(item.message);
}
});
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
and in console when I run ServerMessage.insert({message: 'ssssss5'}) my alert pops out.
Do you have {{> sAlert}} template included in your main template or body tag (see docs)?
(also bear in mind that my demo works with insecure and autopublish)
It is hard to tell what could be wrong. I think I need more info.
Ok, so I found the problem. Since Iron Router's "Router.onBeforeAction" updates reactively, your hook runs when something (don't know what, could be a subscription) updates in my app, even when it is not a route change. Realize I should have mentioned I'm using Iron router (but who doesn't, right?)
So this: "If you go to another route, the alerts should automatically be cleaned up." also triggers whenever Iron router does anything that is not a route change.
Ok, this is important info.
I think we could replace onBeforeAction with onRun which is not reactive. I will fix this asap.
Fantastic! Seems to work very well otherwise.
@JorgeER try now with version 2.3.1
It seems that only with Router.onStop it work like it should.
Works like a charm ;)