janstevens / angular-growl-2 Goto Github PK

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:

marcorinck#19

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? :)

When I disable icons using growlProvider.globalDisableIcons(true); I get a growl looking like this:

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:

• Stop the notification from hiding using a first click in the notification
• Have the ability to Copy the notification's text (I found this to be handy in case of error popping up)
• Click the close icon to dismiss the notification

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:

1. HTML5 Notification (only for Chrome ATM)
2. Optional setting a title attribute along with the message
3. Allow for template editing (non-bootstrap)
4. Define some other templates (non-bootstrap)

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.interceptorsshould 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

marcorinck#18

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"

• attribute "enableTitle" is never set/used/documented so that is undefined - the expression is of course will always be evaluated to be true
• the expression is semantically bad, correct way would be: 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>

1. A user of the application goes to the first page.
2. The user goes to the second page.
3. A controller of the second page calls growl.success('Message', { referenceId: 'page1' });
4. The user navigates to the first page.
5. The user sees nothing.

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.

Proposal

• Show count down timer: True/False
• Configurable pauze option: This would be a string indicating how the user can pauze the growl notification, possibilities are: onhover, onclick, or disabled (suggestions?). Also an onpauze trigger will be called.
• Configurable close option: This would be a string that defines how we can close the growl notification, possibilities are: onclick, onclosebutton (using this will show the close button else it will be hidden),

Possible issues

• The disable close button would be dynamically determined instead of configurable.

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?