janstevens / angular-growl-2 Goto Github PK
View Code? Open in Web Editor NEWThis project forked from marcorinck/angular-growl
growl-like notifications for angularJS projects
License: MIT License
This project forked from marcorinck/angular-growl
growl-like notifications for angularJS projects
License: MIT License
I found out that addServerMessages
function (the one used by serverMessagesInterceptor
) overrides global config parameters check this lines.
It might be possible to use angular.extend
in order to retain the current global setup? Or maybe just take server parameters over default ones.
I prefer extend angular-growl-2
features over making my own logic.
What do you think?
Hello,
would it be possible to queue one or multuple messages and then release them in another view ?
Take the typical login screen example :
The user enter the credentials.
It fails, direct growl message displayed : "Password doesn't match".
On success, within the current controller, we do something like :
growl.queue.success('Welcome !');
$state.go('home');
Why are we not setting the message.close if we create a growl that has a TTL of -1?
If we close a growl with that setting, then message.close gets set to true.
Creating a growl with a TTL of -1 has no message.close set.
Creating a growl normally gets message.close set to false.
Can you merge this pull request from the original:
It adds support for substitution vars in messages.
Hi,
is it possible to have both the close button (X) and a TTL in milliseconds?
I would like to make a growl message that will be dismissed after 10 seconds but can be also dismissed by the close button.
Cheers,
Emanuele.
Hi, right now I need to use directives inside a notification and it doesn't work because $sce.trustAsHtml
is not supposed to work with directives (see here).
Current code:
growl.error('<h4>WebSocket</h4>' + gettext('Reconnecting...') + '<refresh-button></refresh-button>', {ttl: 10000})
Where <refresh-button>
is a custom directive.
One of the ways I can see solving this is by adding a declarative API like this one,
any other way?
How can I remove the growl message manually?
I use growl somewhere like this:
function showErrorMessage(message) {
growl.error('Error:' + message, {ttl: 5000});
}
I inject growl in the good place. But i get this:
TypeError: Cannot read property 'success' of undefined
Just a suggestion - it would be nice to have a boostrap-independent version of growl2.
Is there a way to close all growl notifications? like "growl.closeAll()"?
Thank you in advance
Right now I'm setting the global configuration as this:
growlProvider.globalTimeToLive(5000);
growlProvider.globalDisableIcons(true);
which reads awfully.
When doing:
growlProvider
.globalTimeToLive(5000)
.globalDisableIcons(true);
It is triggering the following error:
growlProvider.globalTimeToLive(...) is undefined
so it appears it is not retuning the growlProvider
instance.
Can this be added so we can chain config setters?
Please update bower.json
to include the non-minified CSS file[angular-growl.css
] in main
so that Grunt/Gulp's wiredep
package can automatically add this CSS to index.html and project specific build steps [uglify, minify, csso etc.,] can take care of minification.
Even better include angular-growl.scss
for those who are using SCSS :)
"main": [
"build/angular-growl.js",
"build/angular-growl.css"
],
growlFactory.js, ~line 163:
enableHtml: _config.enableHtml || _enableHtml
The intention is supposed to be, being able to override the global provider properties per messages - the way above it is not proper (if either is true, the result is true). The proper way is:
enableHtml: _config.enableHtml===undefined ? _enableHtml : _config.enableHtml,
Is there a way to have it close on a single click? It would be more intuitive than double-clicking, and I'm concerned about the hitbox of the "X" on touch devices.
I'd be happy to submit a PR if needed.
I'd love to get the new globalPosition() feature, but it isn't included in the current build available from NPM.
I actually tried to use the source directly from here, but in that case the "unique message" options seems to be buggy, which is pretty important for my usecase. Do you have an estimate for the next fix and NPM push? :)
I'd like to be able to display a permanent message which can then be closed programmatically depending on some condition. I have a constant web socket connection to the server and would like to remove the message when the warning no longer applies. For now I might be able to remove pointer-events to get it to work.
It seems that in the factory there is a property of position on the message which takes the global position || position as set in the instance.
However doing this
growl.success("", {title: 'Thanks', position: 'top-left'});
doesn't seem to override the globalPosition, am i configuring it wrong?
thanks
Greg
Pull request #27 was a nice improvement!
I wonder though, could you add a global option to no close the notification on a simple (2nd) click inside the notification? Particularly, when I already have the close icon, I think this is a desirable option. That way, I have the option to:
Also, can you make the counter configurable so I can disable it?
How is it possible to to that?
First of all, tnx for the hard work!
Your translate call however does not allow interpolation injection. So changing
translate(message.text, message.variables)
to
translate(message.text, message.variables, message.interpolation)
would make that possible I believe.
After some thoughts, here are the new proposed features:
First one is more of a proof of concept, I have the basics down and should be fun to use it. Planning on adding a native fall back method if the user does not grant access for the notifications or they are not supported.
Second feature allows for an optional title attribute along with the message. You could do the same using <h4></h4>
tags but this requires enabling HTML. Another point is that native notifications also have a title field (they even have an icon field).
Third feature, I think there are many cases where people would like to change the template of the notification (adding own classes or adding extra stuff), editing the template right now requires overwriting the source code.
Final feature, don't know if it is possible but different templates could be used as an example. Depends if I'm in the mood for CSS'ing
Any other requests are also welcome!
Because max-width=400px, margin-left should probably be -200px for centered positionings instead of -150px.
Greetings
.growl-container.growl-fixed.top-center {
top: 10px;
left: 50%;
margin-left: -200px;
}
.growl-container.growl-fixed.bottom-center {
bottom: 10px;
left: 50%;
margin-left: -200px;
}
https://github.com/JanStevens/angular-growl-2/blob/master/src/growlFactory.js#L4
warning:
should be warn:
. Otherwise warnings do not disappear if ttl is set.
Heading: Handeling Server Sent Notifications
Section: The default message, text, severity an...
It is written there
app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvider) {
growlProvider.messagesKey("my-messages");
growlProvider.messageTextKey("message-text");
growlProvider.messageTitleKey("message-title");
growlProvider.messageSeverityKey("severity-level");
$httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
}]);
But $httpProvider.responseInterceptors
is deprecated. $httpProvider.interceptors
should be used instead.
In version v0.7.3, the destroyAllMessages
function is defined like this :
this.destroyAllMessages = function (referenceId) {
var messages = this.getAllMessages(referenceId), i = messages.length;
for (i - 1; i >= 0; i--) {
messages[i].destroy();
}
if (this.directives[referenceId]) {
this.directives[referenceId].messages = [];
}
};
On the first loop, notice the i - 1
statement which does nothing. Calling this method on an empty messages array will iterate one time and will raise an exception because messages[0]
returns undefined
.
I propose the following version :
this.destroyAllMessages = function (referenceId) {
var messages = this.getAllMessages(referenceId);
for (var i = messages.length - 1; i >= 0; i--) {
messages[i].destroy();
}
if (this.directives[referenceId]) {
this.directives[referenceId].messages = [];
}
};
Please, need support to angular 1.3.x
All my services return a response object which has a view model and a message list called Messages
In angular-growl I could set it up using this code....
app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvider) {
growlProvider.globalTimeToLive(3000);
growlProvider.messagesKey("Messages");
growlProvider.messageTextKey("MessageText");
growlProvider.messageSeverityKey("SeverityLevel");
growlProvider.onlyUniqueMessages(true);
$httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
}]);
now I get this error
TypeError: object is not a function
at $get.reversedInterceptors.splice.response (http://localhost:61561/Scripts/angular.js:7546:18)
at deferred.promise.then.wrappedCallback (http://localhost:61561/Scripts/angular.js:11561:81)
at deferred.promise.then.wrappedCallback (http://localhost:61561/Scripts/angular.js:11561:81)
at http://localhost:61561/Scripts/angular.js:11647:26
at Scope.$get.Scope.$eval (http://localhost:61561/Scripts/angular.js:12673:28)
at Scope.$get.Scope.$digest (http://localhost:61561/Scripts/angular.js:12485:31)
at Scope.$get.Scope.$apply (http://localhost:61561/Scripts/angular.js:12777:24)
at http://localhost:61561/Scripts/angular.js:1447:15
at Object.invoke (http://localhost:61561/Scripts/angular.js:3966:17)
at doBootstrap (http://localhost:61561/Scripts/angular.js:1445:14)
I have tried with angular 1.2 and 1.3 and both give the same error
Is there a new way to set up this functionality?
According to the Bootstrap docs, dismissable alerts should have the class alert-dismissable
.
I'm using onopen and onclose hooks, but after looking at the code I realise that hte version 0.7.0 downloaded using bower is not the last version. Those hooks are missing.
Could you tag a new version with the current code to download using bower?
Thanks,
There are some errors in built files in growlMessages.destroyAllMessages
method.
From angular-growl.min.js:
var b = this.getAllMessages(a),
c = b.length;
for (c - 1; c >= 0; c--) b[c].destroy();
From angular-growl.js:
var messages = this.getAllMessages(referenceId), i = messages.length;
for (i - 1; i >= 0; i--) {
messages[i].destroy();
}
It does not match to its source:
var messages = this.getAllMessages(referenceId);
for (var i = messages.length - 1; i >= 0; i--) {
messages[i].destroy();
}
Same as
function addMessage(message) {
$scope.messages.push(message);
if (message.ttl && message.ttl !== -1) {
$timeout(function () {
$scope.deleteMessage(message);
}, message.ttl);
}
$scope.$apply(); // this line fix problem
}
Credits & thx to CalmNad
It would be nice to have an option to allow mouseenter and mouseleave to pause and restart the timer, instead of just click. This would work more like Growl does, where hovering allows you to pause the message from disappearing.
Any idea what's going on here? plunkr.
addMessage@https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.js:315:31
broadcastMessage@https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.js:193:52
sendMessage@https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.js:222:32
info@https://raw.githubusercontent.com/JanStevens/angular-growl-2/master/build/angular-growl.js:231:27
http://run.plnkr.co/wEbSdNT3pnBuUoIq/app.js:4:13
invoke@https://code.angularjs.org/1.3.5/angular.js:4138:22
It would be nice to set globalTimeToLive by severity.
Something like
growlProvider.globalTimeToLive(2000, 'success');
growlProvider.globalTimeToLive(0, 'error'); // 0 meaning the need to close using close button
~line 11: ng-show="!message.enableTitle"
Hello. I use the AngularUI Router in my application. I've found that it is almost impossible to send notifications to growl directives in other views. Here is a use case:
There is an application with 2 pages/routes/states.
The first page has the growl directive in a view: <div growl inline="true" reference="page1"></div>
growl.success('Message', { referenceId: 'page1' });
As I understand, the problem is in this line of code:
https://github.com/JanStevens/angular-growl-2/blob/master/src/growlDirective.js#L18
When the user navigates to the first page again, the directive tries to initialize itself once more time and clears all its messages here:
https://github.com/JanStevens/angular-growl-2/blob/master/src/growlMessageService.js#L39
I have not dug deeply into the code and don't know why directives
and preloadDirectives
are separated. But this problem probably could be solved at least by preventing the directive from reinitialization (https://github.com/JanStevens/angular-growl-2/blob/master/src/growlDirective.js#L18):
if (!growlMessages.directives[$scope.referenceId]) {
growlMessages.initDirective($scope.referenceId, $scope.limitMessages);
}
or by enhancing initialization logic (https://github.com/JanStevens/angular-growl-2/blob/master/src/growlMessageService.js#L32-L45):
this.initDirective = function (referenceId, limitMessages) {
if (preloadDirectives[referenceId]) {
this.directives[referenceId] = preloadDirectives[referenceId];
this.directives[referenceId].limitMessages = limitMessages;
} else if (!this.directives[referenceId]) {
this.directives[referenceId] = {
messages: [],
limitMessages: limitMessages
};
}
return this.directives[referenceId];
};
feat
if you mouseover/mouesenter an alert, it should halt the timer, or if not halt the timer, do not hide the message until the mouseout/mouseleave event is fired?
Since the check for unique messages is in the main event loop, but the actual addition of the message is in a $timeout(...), sometimes I have as many as three of the same message get added to the list, since the first two $timeouts(...) did not trigger in time.
I'm not sure why there is a $timeout(...) in addMessage to begin with, but if there's a reason for it, then should the check for uniqueMessages be moved to within addMessage itself?
hello,
After issues #53, #51 and #49 we need standardise the way we close a growl notification. A little explanation:
Right now the growl message is shown and the counter shows how long the growl message will be visible. Then a user can click on it to keep the growl notification displayed and click on it again to remove the growl. Clicking on the close button will remove the growl message immediately.
A couple of things happen and I would like to define some flows so everything is standardised and configurable and clear.
This of course limits the possibilities, but will allow for easily extending the possible pauze and close handling.
Any thoughts or comments? Input very much needed as I don't know which direction to go.
Hi !
I'm using your very nice plugin but today I'm facing an issue : I'm using angular-translate and obviously want to display some translated messages in growl notifications but not always !
Lets' take an example :
growl.error( $translate("ERROR") + ' : ' + JSON.stringify(data.message), {referenceId: 'admin-login', ttl: 5000});
this displays me :
[object Object] : "bad credentials" doesn't exist
Because I don't know what will be data.message, I only want to translate ERROR, but growl also tries to translate the whole message.
More problematic, if I set :
growl.error( $translate("ERROR"), {referenceId: 'admin-login', ttl: 5000});
I get an error :
TypeError: undefined is not a function
at Object.B (https://cdn.jsdelivr.net/angular.translate/2.4.2/angular-translate.min.js:6:773)
at Function.N.instant (https://cdn.jsdelivr.net/angular.translate/2.4.2/angular-translate.min.js:6:9275)
at c (https://cdn.jsdelivr.net/angular.translate/2.4.2/angular-translate.min.js:6:12965)
at u (http://mysite.com/js/angular/angular-growl-2/build/angular-growl.min.js:6:3470)
at v (http://mysite.com/js/angular/angular-growl-2/build/angular-growl.min.js:6:4168)
at Object.x as error
at http://mysite.com/js/app/Admin/AdminController.js:73:27
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:80:169
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:110:505
at k.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js:124:325)
But if I only set :
growl.error( "ERROR", {referenceId: 'admin-login', ttl: 5000});
everything is displaying perfectly !
It would be very nice if we could set an option to manually handle transaltion behavior like :
growl.error(MY_MESSAGE, {translate: no});
Please let me know what you think about it ! Thanks
Hugo
I have got an issue with angular-growl-2 master and my app which fatally breaks all http stuff in Angular 1.2.16 up to .21. Fortunately it also happens with demo/demo.html page. The growl doesn't work and after opening the page the browser console logs the following:
TypeError: object is not a function
at v.splice.response (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:73:225)
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:97:280)
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:97:280)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:98:417
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:108:482)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:62)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:287)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:18:23
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:34:265)
at $b.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:17:439) angular.js:9778
Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=templates%2Fgrowl%2Fgrowl.html
at Error (<anonymous>)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:6:450
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:59:506
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:71:79
at F (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:97:351)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:99:51
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:108:482)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:62)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:287)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:18:23 angular.js:9778
The problem is caused by c5b5a89 introduced by #20 fix. Angular 1.3 API requires objects in interceptor mechanics however 1.2.x still needs a function. The template loading error is caused by malfunctioning interceptor.
from terminal:
└─▪ bower install angular-growl-2 --save
bower angular-growl-2#* cached git://github.com/mattduffield/angular-growl.git#0.3.4
bower angular-growl-2#* validate 0.3.4 against git://github.com/mattduffield/angular-growl.git#*
bower angular-growl-2#~0.3.4 install angular-growl-2#0.3.4
After much confusion I finally realized that angular-growl-2 (the name of your repo) actually installs @mattduffield's angular-growl project.
@mattduffield any chance you can unregister, and allow this project to take that bower name to avoid confusion for most folks since this project has more activity and stars?
Hey,
With angular-translate we can use parameters in our messages like $translate('i18n.key', {parameter: value}), however this is not yet possible with growl.
Is this feature in any backlog ? I can make a PR...
Thx
Shoud allow setting of title and an icon in the growl notifications
Angular 1.3 is release, first of all we should check any compatibility issues with angular 1.3. Also they included a ngMessages directive for form validation, kinda of taking over this plugin for a small part.
Can be interesting to provide support for ngMessages (so we can build on it)
https://docs.angularjs.org/api/ngMessages
any suggestions or comments are welcome!
can we have a setting for multiple environments such as dev, production etc?
Hello,
as I know it's totally possible to do it, how would you replace the default base64 icons with font-awesome ones ? Could you provide a working example of how to do it properly ?
Thanks for the hard work ! :)
Greetings,
It would be nice if there would be a way to get a notification when someone explicitly removes an event (click the 'x' mark). If anyone is interested, all I would need is a quick primer on how to add code and build it :)
Hello everyone,
I don't know whether this is a bug or not, but currently the growl's functions do not work when they are invoked within angular.module.run.
Example:
angular
.module('justAModule', [
'angular-growl'
])
.run(function(growl) {
growl.info('Just an info');
});
In particular the functions seem to fail silently.
Any thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.