marcorinck / angular-growl Goto Github PK

Sometimes single message not shown (angular 1.2.6). Сorrected by adding $scope.$apply() to addMessage in directive:

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
}

please support HTML5 Notifications similar to

http://derekries.github.io/angular-notifications/

Hello,

Since the last update to this awesome project is 4 months ago I decided to create a fork and manually do some pull requests. Right now I've added the usage of $sce, updating bower.json file and changed the functions of adding a notifications:

• error (instead of addMessageError)
• success (instead of addMessageSuccess)
• info (instead of addMessageInfo)
• warning (instead of addMessageWarning)

The branch can be found here: https://github.com/JanStevens/angular-growl-2

I'm planning on cleaning up the code and adding HTML5 browser notification support. Any other enhancements can be added with fork-pull requests :D

Hello, nice plugins you've made, but I come up with a problem, I tried to find the reason, but I failed, please help.

Here is the link to the question:
http://stackoverflow.com/questions/20737308/invoked-from-a-directive-angular-growl-not-show

In Grails applications we get error messages as fallows:

wonder if you can make messageSeverityKey optional so that we can globally set Severity if there is no Severity field in server send message.

app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvider) {
    growlProvider.messagesKey("errors");
    growlProvider.messageTextKey("message");
    $httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
}]);

Grails error message

{"errors":
[{"object":"com.cb.cmp.console.Address","field":"state","rejected-value":"2","message":"Property[state]ofclass[classcom.cb.cmp.console.Address]withvalue[2]doesnotfallwithinthevalidsizerangefrom[2]to[2]"},
{"object":"com.cb.cmp.console.Address","field":"zip","rejected-value":"q","message":"Property[zip]ofclass[classcom.cb.cmp.console.Address]withvalue[q]doesnotfallwithinthevalidsizerangefrom[5]to[5]"},
{"object":"com.cb.cmp.console.Address","field":"zip","rejected-value":"q","message":"Property[zip]ofclass[classcom.cb.cmp.console.Address]withvalue[q]doesnotpasscustomvalidation"}]
}

I would like to override the colors and transparency of growl messages how can I do it?, what classes I need to override?.

The notification should be automatically announced to AT, using aria live regions

making a pull request

In some scenarios it might be valuable to NOT add a growl message if there already exists a message with the exact same text.

For example, I have generic http error handler in a service and if something fails, I get one message for each failed http request. But I would only like to display a single growl message to the user.

This is of course specific to my application, but I think it could be valuable to others as well. Would you be interested in a pull request for this functionality?

Hi,

I can use HTML content and in the other hand I know how to use localed messages with translate. But can I use both functionalities together? It´s not working for me.

Thanks,
Roberto.

In controller
growl.addErrorMessage('ERROR.TRANSLATE', {vars: { username: 'PascalPrecht' }});

in Translate.json
ERROR {
TRANSLATE: "{{username}} is forced to logoff."
},

in growlFactory.js

function broadcastMessage(message) {
if (translate) {
message.text = translate(message.text,message.vars);
}
$rootScope.$broadcast("growlMessage", message);
}

    function sendMessage(text, config, severity) {
        var _config = config || {}, message;

        message = {
            text: text,
            severity: severity,
            ttl: _config.ttl || _ttl,
            vars: _config.vars, 
            enableHtml: _config.enableHtml || _enableHtml
        };

        broadcastMessage(message);
    }

http://angular-translate.github.io/docs/#/guide/06_variable-replacement

more info on this issue: angular/protractor#169

With replacing $timeout by $interval, we should be able to create tests for the growl

I am using latest growl and translations modules along with angular 1.2.6
Growl is not able to translate notification messages as expected.
Should I load modules/JavaScript files in proper order ? Please advice.

This is just a short CSS modification to close the message with a click anywhere within the bubble.

.growl .growl-item {
  position: relative;
}

.growl .growl-item button {
  line-height: 0;
  font-size: 0;
  color: transparent;
  right: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

With these styles added to your stylesheet the usage is more similar to the original growl behavior.

As next feature an interruption of the timeout delay would be very nice to keep the message on the screen (again more similar to the default growl settings at mac os).
This should be very easy to do by editing the source, but I will search for a shorter way from now on ;-).

It seems to display a message immediately.
Should be a mode to show messages in order but give
time for the user to read them.

I just started playing with this a bit and I think the directive could benefit from the following functionality:

1. If there's already a duplicate message up, set that message's timeout to be the timeout of the new message (or just remove the old and add the new). Otherwise a new message could be added (which is a duplicated) and then quickly closed because the original's timer was nearing expiration

2. It would be helpful if you could clear out all messages. If I added an error message with a list of form input issues (without a timer), I would want that message to be removed if the user hasn't already the next time they try to submit the form. Or at least have the 'add' method return a reference to the popup that can be closed

The $scope.computeClasses function returns alert-error or message.isError, however this class has now been renamed alert-danger

There should be a general config option for TTL of messages as its likely that the TTL is the same for every message and will not change during lifetime of app.

However, TTL should be overridable per message.

Implementation hints:

• config option should bet set via a provider in config function of angular-growl module
• addXXXMessage functions should generally only get 2 params: text and config object where the only config attribute currently is ttl. Like so: addErrorMessage("error!", {ttl: 1000})

the message layer cant be displayed

With timeout the close control isn't needed on messages.

if there is a timeout chosen, out would be a nice visual effect to fade out the message. This could be an option such as globalTimeToLive: -1 for no fade, a time parameter for how fast the fadeout should happen.

✖ Install fail! Error: [angular-growl@^0.4.0] Can't find package angular-growl@^0.4.0
Error: [angular-growl@^0.4.0] Can't find package angular-growl@^0.4.0
at resolve (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/download/npm.js:92:11)
at resolve.next ()
at onFulfilled (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:65:19)
at process._tickCallback (internal/process/next_tick.js:68:7)

I hope you can submit the code to NPM management, so that we can use it more conveniently, thank you.

Hi,

I'd like to know if theres a way to disabled the growl closing unless I click on the X button. I'd like to display some links and once the user clicks on the links it closes straight away. I'd like it to stay open so users can switch back and forth between links.

Any idea how to do this? or is this possible?

Thanks in advance,
Evan

Because nobody likes to have to clone a repo just to see the demo. If you're not familiar with how easy it is to setup a free github hosted demo page for your project, I gave a talk about this at a local meetup recently: http://slides.com/kentcdodds/gh-pages

Hi,

growl looks very good, but I've seen that there's basically no way of changing the message template without altering the core module. Maybe a next step could be to define templates for messages, or to define your own message types (with different args etc. that can be registered in the core plugin?)

For some reason, growl.addSuccessMessage() doesn't seem to be working on mobile safari on the iPad (iOS 7.x). Every other method (addErrorMessage(), etc) works. It also works on desktop and iPhone Safari. Currently it's failing for me on both a physical iPad and in the iOS simulator.

...to make sure that the growl message stays always on top

growl.addErrorMessage('<strong>html</strong>', {enableHtml: true})

How to enable HTML content?

Please update bower.json to include the CSS file in main sothat yeoman-ized projects can automatically add this CSS to index.html

  "main": [
      "build/angular-growl.js",
      "build/angular-growl.css"
    ],