foxandxss / angular-toastr Goto Github PK

I want to use this toast to show loading indicator (especially in http request). However, I would never know how long a http request would take so I cannot use timeout parameter to control the toast. I want to fire a loading toast before http request and close it in response callback without a user interaction.

Any way to do that?

Upon logging in, I'm polling an API call and checking if the user has any new message. If the user does have new messages, I'm displaying a toastr to say "You have received a new message".

I figured it would be cool if I could define what happens upon tapping the toastr message. So tapping this one in particular would take the user to his inbox to read the new message.

At the moment tapping a toastr can only dismiss it but we could do so much more. What do you think?

In _createOrGetContainer() the target container for toastr is found using document.querySelector() and is passed into $animate.enter(). This throws an exception as $animate.enter() is expecting a jqLite object.

Can you please add a tag for 0.4.8 so we can install it using bower?

Thanks for sharing!

Compliments for the nice and simple plugin!
The only thing missing is the Progress Bar ... wil this be included in a future version?

Hi

I'm using You script -it's great.
I've got one problem.
If I add that code to my app config I always get error on first toaster

TypeError: undefined is not a function
    at http://root.system.local/bower_components/angular-toastr/dist/angular-toastr.tpls.js:142:30
    at processQueue (http://root.system.local/bower_components/angular/angular.js:13170:27)

Here is code - it is responsible for queueing requests to server.

.config(['$httpProvider', function ($httpProvider) {
            /**
             * Interceptor to queue HTTP requests.
             */
            $httpProvider.interceptors.push(['$q', function ($q) {
                var _queue = [];

                /**
                 * Executes the top function on the queue (if any).
                 */
                function _executeTop() {
                    if (_queue.length === 0) {
                        return;
                    }
                    _queue[0]();
                }

                return {
                    /**
                     * Blocks each request on the queue. If the first request, processes immediately.
                     */
                    request: function (config) {
                        var deferred = $q.defer();
                        _queue.push(function () {
                            deferred.resolve(config);
                        });
                        if (_queue.length === 1) {
                            _executeTop();
                        }
                        return deferred.promise;
                    },
                    /**
                     * After each response completes, unblocks the next request.
                     */
                    response: function (response) {
                        _queue.shift();
                        _executeTop();
                        return response;
                    },
                    /**
                     * After each response errors, unblocks the next request.
                     */
                    responseError: function (responseError) {
                        _queue.shift();
                        _executeTop();
                        return $q.reject(responseError);
                    },
                };
            }]);
        }])

Error occurs only in first toaster - then everything is ok.

Can you please add this to any CDN such as http://cdnjs.com

I want to discuss here of what should we do about trusting html.

I saw various ways, and I am not sure of any of them:

As today, you can add html onto it, $sce will trust your html but I am unsure how it works vs XSS. Using ngSanitize is also an option, but it doesn't allow to use form items on the toast.

The problem with $sce is that you can't put directives into the trusted HTML (that is intended). That doesn't mean I can create a directive where you can put any kind of html on your toast (even forms that will work with your scope), but that is highly insecure.

I want to discuss what are your thoughts about this.

Hi,

I noticed the the positionClass cannot be overriden per toast
when i use:

$http(...).error(function(e){
    toastr.error(e.exceptionMessage, e.message, { "positionClass": "toast-top-full-width"});
});

The positionclass will be removed from the options, which is done by:

function cleanOptionsOverride(options) 
{
    var badOptions = ['containerId', 'iconClasses', 'maxOpened', 'newestOnTop',
                    'positionClass', 'preventDuplicates', 'templates'];
    for (var i = 0, l = badOptions.length; i < l; i++) {
        delete options[badOptions[i]];
    }

    return options;
}

I wonder why this is. I could set this as a config obviously, but i would like to override.

Kind regards

I bower updated my project today and toastr has stopped working. When ever I try to pop a message I get this error from angular.

Error: [$compile:tpload] Failed to load template: templates/toastr/toastr.html

I can't see this change documented anywhere, what has caused this and what needs to be changed in my project to get toastr to work again.

Can You add less files to bower? I could use it to change colors

Hi,
I'm having these lines of code:

$document.find('body').on('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', dismissToast);
function dismissToast() {
                    toastr.clear();
                  }
                $document.find('body').off('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart', dismissToast);
              };

In short: It should close all toasts if the user came back from being idle.
clear gets called and $animate.leave() too, but the toasts stay until a digest loop gets called.
Am I missing something or is the only solution to call $digest() on $rootScope inside my dismissToast function?
Regards

It would be great if toasts could have an option for close and sticky buttons similar to PNotify

If the toasts are opened THAT fast, the restriction is no longer respected and toasts gets sticked.

Need to research about that.

There are the things I want to accomplish for the first release:

• Animations
• More types of animations
• Callback/promise when finish
• Be able to change the stacking order (Issue #6275)
• Override options per toastr
• Proper tests :)
• Remove last / all toastr
• Custom templates (Something to investigate)
• Awesome demo
• Sticky toasts

Hi,
tried to work with this module, but it does not work with angular 1.2.* as $animate.enter() returns no promise before 1.3. angular-toastr is using that promise which causes issues in my application.
So is there a version of angular-toastr which i can use with angular version < 1.3 ?

According to documention, the "main" field should not be an array, or it'll break browserify.

toastr.warning('something', null, {onShown: function(){
console.log('something');
})

Console.log will never be displayed. I'm using latest version via bower. Do anybody have this issue?

Hello,

When I click the toast, I am seeing a delay, .5s to 1s, before the toast actually disappears. Is this intended behaviour, or am I doing something totally wrong... my config is...

// toastr config
  _.extend(toastrConfig, {
    toastClass: 'toast animated fadeInDown',
    tapToDismiss: true
  });

and I have a service making use of it...

self.toastr.info('blah blah blah', {
      onHidden: function() {
        console.log(arguments);
      }
    });

Thank you,

--d

Hi guys,

I followed all instructions mentioned in the documentation of using angular-toastr and I did everything step by step, but always I get the same error:

TypeError: Cannot read property 'then' of undefined
at _createOrGetContainer (angular-toastr.tpls.js:120)
at angular-toastr.tpls.js:139

Hi,
Version declared in bower.json for 0.4.0 release (here) is 0.3.0. It can be fixed with a new release.

Thanks.

You call toasts from within controllers, but this has a major downside: you have to hardcode the text for the toasts. If you provide a template that uses http://angular-translate.github.io/ a toast call would look like this:

toastr.info('SAVED_KEY');

in template:

{{ MSG | translate }}

and the angular translate module would determine the message for SAVED_KEY which is "Saved!".

My Angular Version 1.2.27
don't have import ng-animate out from angular.js

I think it's a syntax problem. I solved change in this way (about row 153)

$animate.enter(container, body, null, function() {
containerDefer.resolve();
});

instead

$animate.enter(container, body).then(function() {
containerDefer.resolve();
});

$animate.enter(container, body) returned undefined (every call $animate.enter return that so i changed all of them)

Thank you

I have a custom directive which gets printed twice when calling toastr inside my AppCtrl. Comment out this line to confirm (script.js):

toastr.info("Test!")

http://plnkr.co/edit/0A3U2ptzlFJ712EXNHYU?p=preview

Toastr seems to mess up the compiler.

What about add max number of visible notifications?

I see an option to change the background color. If I set it to a lighter one, the default text color of White is not visible enough. Do we have an option to change the color of the icon, text displayed and the Close button, which is White by default?

Hi,

Just to let you know. I published library for with flashing support on top of you angular-toastr implementation. Good Work !

https://github.com/CodeScaleInc/angular-toastr-flash

$timeout prevents protractor testing. Protractor waits for $timeout to complete before it allows you to continue. Instead it is recommended to use $interval(callback,time,1).

When playing with the demo, if I get focus on another window in the other monitor, the timeout are never triggered.

Need to research that but if someone have an idea, PR it please.

EDIT: Only happens something. There are toasts that never leaves and toasts that are stuck on the view.

It would be really nice if the template path were configurable rather than hard coded. I use an html2js build process that puts templates in the $templateCache based on directory structure. While using .run to add my custom template to the hard coded location works; I'd like my "alerts" module directory to have an alerts.tpl.html file that gets swallowed up by my build process and then is recognizable by angular-toastr through something like this

angular.extend(toastrConfig, { templatePath:'alerts/alerts.tpl.html'})

It'd be great if you were published on NPM so I could just user Browserify; I'm trying to get rid of my Bower.json :)

The Icon Class option sets the class of the toast element somewehere in the root element and is also used for the background-color of the toast.
The way the icon is set (as background image / base64 encoded) makes it hard to use another icon provider (e.g. from FontAwesome, Glyphiccons, etc).

Hi,
is there any way to disable a toaster option extendedTimeOut how the notifications would not disappear when is mouse hovered over it.
It's not the solution assign some value to this option like 50000. I would appreciate more smoother way to set this.
Thanks!

Dummy issue so I don't forget about it.

When updating Angular to the latest version, I needed to put an extra $timeout.flush() for no apparent reason.

I need to play more with the issue to see why I need that.

For your .config() section you have improper code. I'm not sure the best way you want to go about it, but this is what I did:

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    timeOut: 100
  });
});

preventDuplicates = true|false

I'm using toastr in conjunction with a hotkey tool, so messages quickly stack up if you lay on your 'ctrl+s' for longer than you should :D

You should add you project to ngmodules.org to get it easier found, I was searching for some port and found your project by accident.
I like your documentation 👍, that's what the other libraries miss which I have looked at on ngmodules.
Is it possible to get a bit more comments inside your Code ❓

Does Angular-Toastr 5.0 work with angular 1.2.x? As far as I saw, there is no compatibility cuz $animate.enter() returns a promise in Angular 1.3.x and not in Angular 1.2.x. Then the code following code fails to execute in Angular 1.2.x

      $animate.enter(container, body).then(function() {
        containerDefer.resolve();
      });

If a sticky toast is created like this:

toastr.success('I am sticky', 'Title', { timeOut: 0, extendedTimeOut: 0 });

How do I then dismiss it? Is there a command for closing a toast?

Thank you

Stuff like maxOpened shouldn't be overriden in a toast.

If I create multiple toasts(really fast) and then try to dismiss them fast(by clicking on them) at some point one of the toasts is not removed and it is not dismissed after the timeout. I know that this is sort of spamy but it is annoying(I have to refresh the page to remove the toast)

Note that this happens with dismiss on click and a dedicated close button(not sure if this is relevant)

I noticed after switching from pure JS Toastr implementation over to Angular-Toastr that my new toasts were being added to the bottom of the list. This has an unfortunate side effect of making the fade-out look a little jumpy. I thought at first that changing this behavior would just be a matter of changing toastrConfig like...

toastrConfig.newestOnTop = true;

But this didn't seem to have any impact. Next I dug into the source code. Here's the relevant bit of the Toastr source:

function addToast(toast) {
  // Hidden for brevity
if (mergedConfig['newest-on-top'] === true) {
  scope.toasters.unshift(toast);
  // Hidden for brevity
} else {
  scope.toasters.push(toast);
  // Hidden for brevity
}

I'm not sure this is quite so straight forward to implement in your version of Toastr because of how you're using $animate.enter but I think a similar thing could be accomplished by making the following two changes:

Assign a placeholder first child in setContainer

container = angular.element('<div><i></i></div>'); // <i> could be any other inline element

Check toastrConfig and parent the new toast appropriately in _notify

_setContainer(options).then(function() {
  var after = toastrConfig.newestOnTop ? container.find('i') : null; // You could change the default

  $animate.enter(newToast.el, container, after, function() {

Any chance you could make this change?

PS. For what it's worth, I tested this change locally and it seems to work. I'll submit a PR shortly.

bower.json don't have a reference to dist/angular-toastr.js, so automated tools like the wiredep module won't add the main file to app's dependency list.

The toastr message appears but without an animation. This properties can be handle from .config?

My version of angular is 1.3.2 with it's respective ngAnimate.

As Angular below version 1.3 doesn't support Promise

When I use Toastr in my Angular project whose angular version is 1.2.28 , I have to change some codes. I display some of them, it may help.

at line 59

   $animate.leave(toast.el, function() {
          if (toast.scope.options.onHidden) {
            toast.scope.options.onHidden(wasClicked);
          }
         ....

at line 124

$animate.enter(container, body, '', function() {
        containerDefer.resolve();
      });

at line 145

if (options.newestOnTop) {
            $animate.enter(newToast.el, container, '', function() {
              newToast.scope.init();
            });
          } else {
            $animate.enter(newToast.el, container, container[0].lastChild,function() {
              newToast.scope.init();
            });
          }

Really great work. but one issue as mentioned above. If you could resolve this it would be great.
Thanks