GetUIkIt 3 Notification Close event?

Question

I need to know when a UIKit notification has been closed.

The UIkit notification plugin (https://getuikit.com/docs/notification) mentions that it has a close event. Is it possible to use this for instances triggered programatically?

e.g.

UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    timeout: null
});
UIKit.o

I've tried putting the nofication on a variable, (as suggested https://getuikit.com/docs/javascript#programmatic-use, where it even states You'll receive the initialized component as return value - but you don't)

let foo = UIkit.notification('message'); // foo is undefined

I've tried chaining the on method

UIkit.notification.on('close', function() { ... }); // on is undefined

but the .on method is part of UIkit.util.on($el, event, fn) and there is no $el when calling notification programatically.

The only other way I can think of doing it is putting a mutation observer onto the body and watching to the notification element to change state, but this seems like overkill.

similar event issue https://stackoverflow.com/questions/47093268/uikit-3-catch-events — moped, Mar 29 '18 at 10:27

score 3 · Accepted Answer · answered Feb 06 '19 at 16:32

You can store a handle to the notification...

warning_notification = UIkit.notification({message: 'Warning message...',
                                           status: 'warning', timeout: 1000});

... and check if this is the origin of the close event:

UIkit.util.on(document, 'close', function(evt) {
  if (evt.detail[0] === warning_notification) {
    alert('Warning notification closed');
  }
});

Now, you will only see the alert when exactly this notification was closed.

Check out this demo.

forrestkirby · Answer 2 · 2018-05-10T11:12:07.740

2

You could try this instead

UIkit.util.on(document, 'close', function() { alert('Notification closed'); });

See this Pen

edited May 10 '18 at 11:12

answered May 10 '18 at 07:54

forrestkirby

56
6

but how to get it trigger only for a specific notification (supposing several notifications triggered at same time) ? – hl037_ Jul 25 '18 at 13:48
I don’t know whether/how this is possible. There is no option or attribute to identify notifications in UIkit 3. – forrestkirby Dec 27 '18 at 13:23
Thanks for your answer. It gave me the idea for my solution. – Tom Pohl Feb 06 '19 at 16:34

hl037_ · Answer 3 · 2018-07-25T14:42:49.583

1

A bit Hacky, but the following seems to "work" :

function notify(){
  var params = Array.prototype.slice.call(arguments);
  new_f = params.shift()
  foo = UIkit.notification.apply(this, params);
  return function(foo, new_f, old_f){
    foo.close = function(){new_f(); foo.close = old_f; old_f.apply(this, arguments); }
    return foo
  }(foo, new_f, foo.close);
}

notify(function(){alert('ok');}, 'message');

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.9/js/uikit.js"></script>

edited Jul 25 '18 at 14:42

answered Jul 25 '18 at 14:23

hl037_

3,520
1
27
58

This looks better than what I ended up with. Hacky is sometimes necessary when working with libraries; chaining the function reminds me of the old days of body onload chains! – frumbert Jul 26 '18 at 02:10
It's "Hacky" because it is undocumented ;) ...And so, it might break on libray updates :/ I have the same need for a close trigger, and I saw this "close" attribute. Btw, if you don't do the `foo.close = old_f` part, then the event is triggered several times – hl037_ Jul 26 '18 at 09:21

GetUIkIt 3 Notification Close event?

3 Answers3