sciactive / pnotify

Beautiful JavaScript notifications with Web Notifications support.
https://sciactive.com/pnotify/
Apache License 2.0
3.65k stars 513 forks source link

calling attention function with combination of using animate.css is not working #265

Closed aasiph closed 6 years ago

aasiph commented 8 years ago

Hi recently i started using pnotify library and i would say it is far advanced than any other notification library. Thanks for your good work.

I was having slight problem with the attention function where searching on google took me to the problem but no solution. You can visit the link to stackoverflow at http://stackoverflow.com/questions/35070725/jquery-pnotify-animate-attention-seekers-dont-work-together/39640414#39640414 to identify the problem.

I have given a solution may be i would say it temporary for working which you can further improve it. I just changed the attention function to solve the problem.

notice.attention = function(aniClass, callback){
                //just add the line below
                notice.elem.removeClass(this.options.animate.in_class + " " + this.options.animate.out_class);
                notice.elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    notice.elem.removeClass(aniClass);
                    if (callback) {
                        callback.call(notice);
                    }
                }).addClass("animated "+aniClass);
            };
aasiph commented 8 years ago

I did not notice there was already a pull request for this problem. https://github.com/sciactive/pnotify/pull/263

aasiph commented 8 years ago

Unfortunately i had to again reopen the issue as the patch by kenzierocks is not working with the code below.

                var opts= {
                    text: "some message",
                    type: 'error',
                    animate: {
                        animate: true,
                        in_class: 'slideInLeft',
                        out_class: 'slideOutRight'
                    },
                    after_open: function(notice) {
                        notice.attention('swing');//this is not working
                    }
                };
               new PNotify(opts);

notice.attention('swing'); is called before removing the class with kenzierocks solution as the animation may not be completed when the after_open event is run. The only way to workout with this code was the solution which i provided above. If there is way to run the after_open module after the animation is completed it would work out.

hperrin commented 8 years ago

Ah, I can see why. The callbacks module isn't using module events to call these callbacks. It's overwriting the actual PNotify methods, and calling these callbacks directly after the methods run. The only way to do this without monitoring events yourself right now would be with a PNotify module. I think the best solution here is to add new options to the callback module which are called during the PNotify module events.

hperrin commented 6 years ago

This is fixed in v4 (which is in alpha).