onClick fix + new onClose callback

README.md

@@ -75,6 +75,23 @@ actions: {
   }
 }
 ```
+
+### Callback for closing a notification (by clicking on the cross icon on the right)
+```js
+actions: {
+  saveOptions() {
+    this.get('model').save()
+    .then(() => {
+      this.notifications.success('Successfully saved your settings', {
+        onClose: function(notification){
+          alert('Notification closed');
+        }
+      });
+    });
+  }
+}
+```
+
 ### Remove all active notifications using clearAll() before adding a new notification
 
 ```js
@@ -89,6 +106,26 @@ actions: {
 }
 ```
 
+### Add a notification with HTML content
+
+*Warning:* this introduces a potential security risk, since notification message will no longer be escaped by Ember (only when _htmlContent_ option is enabled).
+
+```js
+actions: {
+  saveOptions() {
+    this.get('model').save()
+    .then(() => {
+      this.notifications.success('<b>Successfully</b> <u>saved</u> your settings', {
+        htmlContent: true
+      });
+    }),
+    .catch((err) => {
+      this.notifications.error('Something went wrong');
+    });
+  }
+}
+```
+
 ### Set a global, default duration time
 
 This code only needs to be called in one place such as your application route.

addon/components/notification-message.js

@@ -45,8 +45,11 @@ export default Ember.Component.extend({
     }
   }),
 
-  mouseDown() {
-    if (this.get('notification.onClick')) {
+  mouseDown(element) {
+    //when close button (or any of its children) is clicked, do not call onClick callback
+    let removeNotificationClicked = Ember.$(element.target).closest('.c-notification__close').length !== 0;
+
+    if (this.get('notification.onClick') && !removeNotificationClicked) {
       this.get('notification.onClick')(this.get('notification'));
     }
   },
@@ -79,6 +82,10 @@ export default Ember.Component.extend({
 
   actions: {
     removeNotification() {
+      if ( this.get('notification.onClose')){
+        this.get('notification.onClose')(this.get('notification'));
+      }
+
       this.notifications.removeNotification(this.get('notification'));
     }
   }

addon/services/notification-messages-service.js

@@ -17,7 +17,9 @@ export default Ember.ArrayProxy.extend({
             type: options.type || 'info', // info, success, warning, error
             autoClear: (Ember.isEmpty(options.autoClear) ? this.get('defaultAutoClear') : options.autoClear),
             clearDuration: options.clearDuration || this.get('defaultClearDuration'),
-            onClick: options.onClick
+            onClick: options.onClick,
+            onClose: options.onClose,
+            htmlContent: options.htmlContent || false
         });
 
         this.pushObject(notification);

app/templates/components/notification-message.hbs

@@ -4,7 +4,11 @@
   </span>
 </div>
 <div class="c-notification__content">
-  {{notification.message}}
+  {{#if notification.htmlContent}}
+    {{{notification.message}}}
+  {{else}}
+    {{notification.message}}
+  {{/if}}
 </div>
 {{#if notification.autoClear}}
   <div class="c-notification__countdown" style={{notificationClearDuration}}></div>

tests/.jshintrc

@@ -28,7 +28,7 @@
   "boss": true,
   "curly": true,
   "debug": false,
-  "devel": false,
+  "devel": true,
   "eqeqeq": true,
   "evil": true,
   "forin": false,

tests/dummy/app/controllers/application.js

@@ -5,6 +5,7 @@ export default Ember.Controller.extend({
   type: 'success',
   autoClear: true,
   clearDuration: 2400,
+  htmlContent: false,
 
   actions: {
     showNotifcation() {
@@ -15,7 +16,14 @@ export default Ember.Controller.extend({
         message: this.get('message'),
         type: this.get('type'),
         autoClear: this.get('autoClear'),
-        clearDuration: this.get('clearDuration')
+        clearDuration: this.get('clearDuration'),
+        htmlContent: this.get('htmlContent'),
+        onClick: function(){
+          alert('Yes, you clicked on me! I hope, you are happy now :()');
+        },
+        onClose: function(){
+          alert('Noooooo, why did you close me?');
+        }
       });
     }
   }

tests/dummy/app/templates/application.hbs

@@ -41,5 +41,18 @@
     <label>Clear all</label>
   </div>
 </div>
+
+<div class="mb2">
+  <h3>HTML content</h3>
+  <div class="mb2">
+    {{input type="checkbox" checked=htmlContent}}
+    <label>Enable HMTL</label>
+  </div>
+</div>
+
+<div>
+  Note: try to click on the notification or the "close" button - custom event handlers were will be triggered, too.
+</div>
+
 <button class="button" {{action "showNotifcation"}}>Show</button>
 {{outlet}}