GetUIkIt 3 Notification Close event?

uikit notification
uikit notification stack
uikit popup
notifications ui kit
uikit timeline
uikit alert box
notification component
uikit success alert

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.

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.

UIkit.notification - Notification, You can also close the notification by clicking it. To show notifications, the component provides a simple JavaScript API. The following code snippet gets you  Close button To create a close button, enable its functionality and add proper styling and positioning, add the.uk-modal-close-default class to an <a> or <button> element. To place the close button outside the modal, add the.uk-modal-close-outside class. Add the uk-close attribute from the Close component, to apply a close icon.

You could try this instead

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

See this Pen

Notify component, The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it. A dropdown can be enabled by hovering and clicking the toggle. Just add the mode: click option to the attribute to force click mode only. If you want to group the toggle and the dropdown, you can just add the .uk-inline class from the Utility component to a container element around both.

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>

Close component - Close, Close. Create a close icon that can be combined with different components. Usage. To apply this component, add the uk-close attribute to an <a> or <button>​  Check Display event on visibility change. Sometimes components, like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to be recalculated to adjust or fix the height and other dimensions.

Alert, uk-alert-close class to a <button> or <a> element inside the alert box. To apply a close icon, add the uk-close attribute from the Close component. <div uk-  UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Add triggered event for Notify component closed by user · Issue , A triggered event (like close.uk.alert for alerts) should be added when the element robertotremonti opened this issue on Feb 9, 2015 · 3 comments var notify = UIkit.notify(item.text, {pos: 'top-center', timeout: 0, onClose: function() { // its work  UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Uk alert close button with Cookie, Also is this targeting UIkit version 3 or version 2? The notification component has changed within version 3 so that you now call UIkit.notification()  The above options only work for apps that use the traditional Windows notification method. Apps with custom notification bubbles continue to show their own notifications unless you close them or disable the notifications within those specific apps. Most apps that show notifications offer an option to disable them.

Comments
  • similar event issue stackoverflow.com/questions/47093268/uikit-3-catch-events
  • but how to get it trigger only for a specific notification (supposing several notifications triggered at same time) ?
  • I don’t know whether/how this is possible. There is no option or attribute to identify notifications in UIkit 3.
  • Thanks for your answer. It gave me the idea for my solution.
  • 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!
  • 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