Notyf events

README.md

@@ -82,6 +82,7 @@ notyf.error('Please fill out the form');
 ```
 
 ## API
+
 You can set some options when creating a Notyf instance.
 
 ### `new Notyf(options: INotyfOptions)`
@@ -115,6 +116,38 @@ notyf.error('Please fill out the form');
 notyf.dismissAll();
 ```
 
+## Events
+
+Every individual notification emits events. You can register listeners using the `on` method.
+
+### `'click'`
+
+Triggers when the notification is clicked
+
+```javascript
+const notyf = new Notyf();
+const notification = notyf.success('Address updated. Click here to continue');
+notification.on('click', ({target, event}) => {
+  // target: the notification being clicked
+  // event: the mouseevent
+  window.location.href = '/';
+});
+```
+
+### `'dismiss'`
+
+Triggers when the notification is **manually** (not programatically) dismissed. 
+
+```javascript
+const notyf = new Notyf();
+notyf
+  .error({
+    message: 'There has been an error. Dismiss to retry.',
+    dismissible: true
+  })
+  .on('dismiss', ({target, event}) => foobar.retry());
+```
+
 ## Interfaces
 
 ### INotyfPosition

cypress/integration/notyf_spec.js

@@ -9,7 +9,11 @@ context('Notyf', () => {
   }
 
   function typeCode(obj) {
-    cy.get('#code').type(JSON.stringify(obj).replace(new RegExp('{', 'g'), '{{}'), { delay: 0 });
+    return cy.get('#code').type(JSON.stringify(obj).replace(new RegExp('{', 'g'), '{{}'), { delay: 0 });
+  }
+
+  function checkPrintOutput(message) {
+    return cy.get('#print-output').should('have.text', message);
   }
 
   const VIEWPORT_WIDTH = 800;
@@ -387,5 +391,22 @@ context('Notyf', () => {
       cy.get('#dismiss-all-btn').click();
       cy.get('.notyf__toast').should('have.length', 0);
     });
+
+    describe('Notification events', () => {
+      it('should emit the event: click', () => {
+        init();
+        cy.get('#click-listener-btn').click();
+        cy.get('.notyf__toast').click();
+        checkPrintOutput('clicked');
+      });
+
+      it('should emit the event: dismiss', () => {
+        const config = { dismissible: true };
+        init(config);
+        cy.get('#dismiss-listener-btn').click();
+        cy.get('.notyf__dismiss-btn').click();
+        checkPrintOutput('dismissed');
+      });
+    });
   });
 });

demo/index.html

@@ -20,6 +20,13 @@
         <button id="dismiss-btn" type="button">Dismiss</button>
       </div>
 
+      <div style="border: 1px solid black;">
+        <p>Events</p>
+        <button id="click-listener-btn" type="button">Click</button>
+        <button id="dismiss-listener-btn" type="button">Dismiss</button>
+        <p id="print-output"></p>
+      </div>
+
       <br>
       <label>Message</label>
       <input type="text" id="message">

demo/scripts/script-demo.js

@@ -1,16 +1,14 @@
-if (false) { // activate only when testing the demo
+if (false) {
+  // activate only when testing the demo
   var notyfDemo = new Notyf();
 
-  document.getElementById('success-btn-demo')
-          .addEventListener('click', function(){
-            show('success');
-          });
-
-  document.getElementById('error-btn-demo')
-          .addEventListener('click', function(){
-            show('error');
-          });
+  document.getElementById('success-btn-demo').addEventListener('click', function () {
+    show('success');
+  });
 
+  document.getElementById('error-btn-demo').addEventListener('click', function () {
+    show('error');
+  });
 
   function show(type) {
     const message = document.getElementById('message').value;
@@ -19,8 +17,7 @@ if (false) { // activate only when testing the demo
     } else if (type === 'error') {
       notyfDemo.error(message || 'You have been disconnected!');
     } else {
-      notyfDemo.open({type, message: message || 'This is a custom notification'})
+      notyfDemo.open({ type, message: message || 'This is a custom notification' });
     }
   }
-
-}
+}

demo/scripts/script-test.js

@@ -27,6 +27,18 @@ document.getElementById('dismiss-btn').addEventListener('click', function () {
   dismiss(idx);
 });
 
+// events
+
+document.getElementById('click-listener-btn').addEventListener('click', function () {
+  const notif = notyf.success('Click me');
+  notif.on('click', () => print('clicked'));
+});
+
+document.getElementById('dismiss-listener-btn').addEventListener('click', function () {
+  const notif = notyf.success({ message: 'Dismiss me', dismissible: true });
+  notif.on('dismiss', () => print('dismissed'));
+});
+
 function init() {
   if (notyf) {
     try {
@@ -48,6 +60,10 @@ function dismissAll() {
   notyfNotifications.length = 0;
 }
 
+function print(msg) {
+  document.getElementById('print-output').textContent = msg;
+}
+
 function show(type) {
   const message = document.getElementById('message').value;
   const options = JSON.parse(document.getElementById('code').value || '{}');