cgross / angular-notify Goto Github PK

Within angular-notify.css I see the error: Uncaught SyntaxError: Unexpected token .

i am working on a project, i want to use some other class for notification, right now i have to pass it every where, i think we should have it in config.

This occurs only after first page loads.
And another thing is, first time only two messages are showing.

After that working properly.

What will be the root cause of this issue?

after grunt minification angular-notify returned exeption "undefined is not a function"

You should really consider to bump your angular dependency version or at least not to lock the minor using within your bower.json

Some time the notify is not working. I don't know what will be the reason. There is no error message or anything. The notify doesn't show anything.

When I bower install angular-notify --save I got the following message:

Unable to find a suitable version for angular, please choose one:
    1) angular#~1.2 which resolved to 1.2.28 and is required by angular-notify#2.0.2
    2) angular#1.3.10 which resolved to 1.3.10 and is required by angular-resource#1.3.10
    3) angular#>= 1.0.8 which resolved to 1.3.10 and is required by angular-ui-router#0.2.13
    4) angular#~1.3.9 which resolved to 1.3.10 and is required by console
    5) angular#* which resolved to 1.3.10 and is required by angular-smart-table#1.4.8Prefix the choice with ! to persist it to boer.json

? Answer:: 2
bower angular-notify#~2.0.2    install angular-notify#2.0.2

I picked 1.3.10 and my notification does not seem to appear.

Hi,

A "stop delay before hide" function on mouse over will be great!

$ bower install angular-notify --save
bower angular#1.5.3 cached git://github.com/angular/bower-angular.git#1.5.3
bower angular#1.5.3 validate 1.5.3 against git://github.com/angular/bower-angular.git#1.5.3
bower ECONFLICT Unable to find suitable version for angular

Hey there!
Thx for very nice plugin.

I was wondering - is there any way of changing animation speed or easing?
Default speed is very slow.

Whats missing for IE9 support Anything we can do?

This is pretty much needed for checking if notification exists and most importantly all the programmatic access - like close() method.

Not usable without this in production.

This line makes a 0 fall back to the global config.

args.duration = args.duration ? args.duration : defaultDuration;

Hey! Thanks for the very nice Angular module. We are using it for a big project and ran into a bug this morning while testing on ios. On Chrome stable and Chrome dev on android the notifications work perfectly and scale to the sceen size nicely as seen in this screenshot.

But on ios 8.3 with safari mobile 8 the notifications are halfway off screen as seen in this screenshot:

I know its just a css issue most likely and am willing to help fix it. Just wanted to see what you had to say on it and if you can point me in the right direction.

Is there any reason why Angular ~1.4 wouldn't work? Right now, this is the only dependency on my current project that forces me to use "resolutions" on bower.json.

I was running into problems because message templates did not have one root element only. Only today I found a sentence in the documentation mentioning this requirement. However, it could still be formulated more precisely. Maybe you could change it to something like:

messageTemplate - Optional. A string containing any valid Angular HTML which will be shown instead of the regular message text. The string must contain one root element only like all valid Angular HTML templates. For instance, wrap everything in a <span>.

How to make close on click?

I have the css and js files included, I added the cgNotify to my app dependecies, As well as injected it into the controller Im using. ??

I have installed V2.0.2 and default notifications are working good with center alignment but in latest release it's breaking i.e. V2.5.0.
margin-left style is missing in latest version custom templates.

How could i close notify popup with backdrop choice...

Hi

It would be cool if the module would support configuring the duration for a message individually. At the moment one can only set the duration globally for any message. Adding duration as an optional property to the objects argument of notify(), that, if set, overwrites the global duration, seems to be what is needed to enable this.

Thanks

I'm doing a big app for the company I work for and I'm using this module. The module works fine, the template part is good too and it's very customizable.

But when we come to the $close() function we have a problem. When you do this:

templateElement.css({'opacity' : 0}).attr('data-closing','true');

You are basicaly keeping the element in the page instead of really hidding or removing him. This may cause some problems with other elements in the same page (it was in my case).

My solution? Change the line above, to this:

templateElement.css({'display' : 'none'}).attr('data-closing','true');

By using display: none the element will disappear from the sight and don't will interfere the other elements around him.

Just FYI the problem I was having was with the close button in the top right position inside the message. When I had more than 10 messages displayed I was clicking in the button and the click area was changing, so if the user clicked in the close icon, the message didnt closed, only if he moved the mouse a little higher.

Is there anyway you could publish this module on npm?

I tend to use only npm these days and not bother with bower. This is one of the few client side packages I can't install via npm. Publishing is a piece of cake, just run npm publish.

Type long text that spans to multiple lines and you would see the notification is not centered anymore.

I use notify as factory.

.factory('Notify', function ($rootScope, notify) {

    function openNotify(notifyMessage, notifyClass) {
      var positions = ['center', 'left', 'right'],
          position = positions[2],
          duration = 10000;
      notifyClass = notifyClass || 'alert-info'; 

      return notify({
            message: notifyMessage,
            classes: notifyClass,
            templateUrl: 'components/notify/notify.html',
            position: position,//not respect right, show left every time
            duration: duration
          });
    }

    // Public API here
    return {

      notifycation: {


       show: function(callback) {
          callback = callback || angular.noop;

          return function() {
            var args = Array.prototype.slice.call(arguments),
                text = args.shift(),
                customClass = args.shift(),
                showNotify;

            showNotify = openNotify(text, customClass);      

            //callback.apply(event, args);//for future
          };
        }
      }
    };
  });

And i call from controller

$scope.showNotify =  Notify.notifycation.show(function(args) {
      console.log(args);//future callback
    });

var _message = 'Hello World',
      _class = 'alert-info';

$scope.showNotify(_message, _class);

I wanted to place an $httpProvider.interceptors to globally prompt about erroneous requests, but it seems cgNotify does not contain a provider for this.

I get an error (Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: notify when I do something like this:

app.config( function(notify) {

})

How can I inject the notify service in the config?

Hey, cool package.

Using $provider will allow you to configure the service with default config instead of manually invoking it.

Hi there,

Thanks for this very useful Angular module.

Because I needed to modify notifications to be able to display them at the bottom of the page, I've forked and modified its code - maybe someone also will look for the same issue, so I've prepared working version available here:

https://github.com/bl4de/angular-notify/tree/master/at-the-bottom

Maybe I should create 'mixed' version with both options and send you some PR for reviewing? What do you think? Let me know in comment ;)

Regards,

R.

Thanks for your nifty module here! - Say, is it possible to implement some additional callback on the close-button? I would like to set a variable to true/false, when the window is closed (e.g. to disable buttons as long as a notification is open...)

Thanks!

http://stackoverflow.com/questions/36295476/ionicmodal-disabling-click-events

Here is the text of the question repeated here:

Ionic/cordova/angular/ios application:

I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.

I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?

-- UPDATE (Testing in Chrome w/inspector)

It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.

Click events are cut off for my notification overlay until the modal and/or popup are dismissed.

When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:

looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.

No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.

Any thoughts?

Hi, I really like the simplicity of this module and I tried implementing it today.

I thought the perfect case for these notifications would be global Ajax message handling, but the interceptors are dependencies of the $http module. Apparently the cgNotify module also uses $http as a dependency. As a consequence there is an angular cdep (circular dependency) error.

Any suggestions on how to use your module for global message handling?

Check console for cdep error:
http://plnkr.co/edit/Wlnl6wdOsC5pDVZRgZgs?p=preview
Same code working with notify dependency in comment for the interceptor:
http://plnkr.co/edit/S7v9Lcon7SGkGVjDZD8d?p=preview

Hi,

if the class cg-notify-message-template is not a direct child of cg-notify-message element, notify can't find it.
it can be a problem when you use a custom template.
Moreover, use 2 differents elements (message and messageTemplate) is not very obvious and once again custom template are not clean.

I send my code as a suggestion for clean support for html (it's a coffescript with class style code)

Filter for trust HTML in $message

class TrustHTML

  constructor: ($sce) ->
    return (message) ->
      return $sce.trustAsHtml(message)

@app.filter 'trustHTML', ['$sce', TrustHTML]

Config notify with custom template (use of ng-bind-html with trustHTML filter)

class ConfigNotify

  constructor: (notify, $templateCache) ->

    # Global config
    notify.config
      duration: 4000
      startTop: 10
      verticalSpacing: 10
      maximumOpen: 3


    # Custom templates
    notifyDangerTpl = [
      '<div class="cg-notify-message cg-notify-message-center alert-danger" ng-style="{\'margin-left\': $centerMargin}">'
        '<table>'
          '<tr>'
            '<td class="cg-notify-icon"><i class="fa fa-warning"></i></td>'
            '<td class="cg-notify-content" ng-bind-html="$message | trustHTML"></td>'
            '<td class="cg-notify-button"><button type="button" class="cg-notify-custom-close" ng-click="$close()"><i class="fa fa-close"></i></button></td>'
          '</td>'
        '</table>'
      '</div>'
    ].join('')

   $templateCache.put('notify-danger.html', notifyDangerTpl)

@app.run ['notify', '$templateCache', ConfigNotify]

How to use ?

notify
   templateUrl: 'notify-danger.html'
   message: "A custom template with <b>trusted HTML</b>"

Result

I'm mostly interested in using this as a barebones driver for my own message template, and I realized the positioning was getting really out of sync as multiple messages were shown.

It appears that there is a hardcoded spacing of 10px that is causing me problems:

var shadowHeight = 10;

It would be convenient to have this assumption removed so that custom templates aren't confused by the subsequent bad math (increasingly 10px off the target positioning with each new message).

notify({
classes: 'alert-danger',
message: $scope.validator[x][0]
});

but thats notify still show blue color, how to make it works?

If I am calling notify on click, for each click a notify is triggered. There should be an option to set closeAll as part of config, so that currently open notify get close before triggering a new one.

When notify is used in multiple controllers, its redundant to call notify.closeAll() many times.

Is possible configure position to bottom?

notify should dispatch event on returned object on closed, opened and clicked

If ngDialog pop up is open then Notify alert always pops up behind ngDialog. Is there any way to fix it? Or it is a bug? Plz help. If Notify can't show messages on ngDialog then I need to look for some other plugin. Thank you!!!

If ngDialog pop up is open then Notify alert always pops up behind ngDialog. Is there any way to fix it? Or it is a bug? Plz help. If Notify can't show messages on ngDialog then I need to look for some other plugin. Thank you!!!

It would be very helpful for some case add a title for message. And I think for this is a very quick implementation of code.

Can I do pull request?

I ran into this recently. Currently, if the element containing .cg-notify-message-template is not a child of the root element in the template, cgNotify throws an error: "cgNotify could not find the .cg-notify-message-template element in..."

To work around it is pretty simple, and I wrote a code to do so.
Just replace lines 43-49 in angular-notify.js:

                    var messageTemplateElement;
                    for (var i = 0; i < templateElement.children().length; i ++){
                        if (angular.element(templateElement.children()[i]).hasClass('cg-notify-message-template')){
                            messageTemplateElement = angular.element(templateElement.children()[i]);
                            break;
                        }
                    }

with this:

                    var fnRecursiveLook = function (myElement) {
                        var children = myElement.children();
                        for (var i = 0; i < children.length; i++) {
                            var child = angular.element(children[i]);
                            if (child.hasClass('cg-notify-message-template')) {
                                return child;
                            }
                            if (child.children().length > 0) {
                                return fnRecursiveLook(child);
                            }
                        }
                        return undefined;
                    };
                    var messageTemplateElement = fnRecursiveLook(templateElement);

Hi,

I use this module in my application, and I started to write e2e tests with protractor.
There is no problem when writing tests for function using notification which stay on screen, but notification with duration attribute are not testable. This issue comes from the $timeout service to manage notification duration : protractor waits for $timeouts (and $http) before to run actions and expectation. So notification with duration can't be tested as they disappears before protractor tests them.
In documentation (https://github.com/angular/protractor/blob/master/docs/timeouts.md), protractor team precognise to replace $timeout services by $interval services to this kind of issue.

Can you try that to allow protractor testing of notifications with duration ?

I've noticed an intermittent issue where

                var templateElement = $compile(template)(scope);
                templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function(e){
                    if (e.propertyName === 'opacity' || e.currentTarget.style.opacity === 0 || 
                        (e.originalEvent && e.originalEvent.propertyName === 'opacity')){

                        templateElement.remove();

weirdly, the first time I use notify() to display a notification after the app loads, i'm seeing the {{$message}} instead of the rendered message, like if angular wasn't parsing the template html.

i'm not sure if it's a bug on cgNotify itself or a bad implementation on my code.
my code is as simple as this:

template html:

<article class="notification" ng-class="{'is-notice': notify.type == 'notice', 'is-success': notify.type == 'success', 'is-error': notify.type == 'error'}">
  <h2 class="h-article" ng-if="notify.title">{{notify.title}}</h2>
  {{$message}}
</article>

notify() call:

$scope.notify = {type: 'alert'};
notify({
    message: 'acesso não permitido.',
    template: 'views/common/notification.html',
    position: 'center',
    scope: $scope
});

do you guys have any clue on it?
thanks!

In line 21
args.duration = args.duration ? args.duration : defaultDuration;
If duration is set to 0, args.duration equals defaultDuration and it violates the doc

duration - Optional. The duration (in milliseconds) of message. A duration of 0 will prevent messages from closing automatically.

Currently it sets the opacity to 0 for a hidden div which can still grab mouse events.

Should hide the div instead of just set opacity to 0.

Refer to: http://stackoverflow.com/questions/4675916/css3-element-with-opacity0-invisible-responds-to-mouse-events

This is very very good plugin! Congratulations!

Maybe you can deliver this plugin in some js cdn site, like cdnjs.com or jsdelivr.com, for people make a fast test