Merge pull request #2472 from halfdan/ember-notifications-2417

[Ember.js] Implement Notifications for Ember

ghost/admin/app.js

@@ -1,6 +1,7 @@
 import Resolver from 'ember/resolver';
 import initFixtures from 'ghost/fixtures/init';
 import {currentUser, injectCurrentUser} from 'ghost/initializers/current-user';
+import {registerNotifications, injectNotifications} from 'ghost/initializers/notifications';
 import 'ghost/utils/link-view';
 import 'ghost/utils/text-field';
 
@@ -21,5 +22,7 @@ initFixtures();
 
 App.initializer(currentUser);
 App.initializer(injectCurrentUser);
+App.initializer(registerNotifications);
+App.initializer(injectNotifications);
 
 export default App;

ghost/admin/components/ghost-notification.js

@@ -0,0 +1,21 @@
+var NotificationComponent = Ember.Component.extend({
+    classNames: ['js-bb-notification'],
+
+    didInsertElement: function () {
+        var self = this;
+
+        self.$().on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
+            /* jshint unused: false */
+            self.notifications.removeObject(self.get('message'));
+        });
+    },
+
+    actions: {
+        closeNotification: function () {
+            var self = this;
+            self.notifications.removeObject(self.get('message'));
+        }
+    }
+});
+
+export default NotificationComponent;

ghost/admin/components/ghost-notifications.js

@@ -0,0 +1,7 @@
+var NotificationsComponent = Ember.Component.extend({
+    tagName: 'aside',
+    classNames: 'notifications',
+    messages: Ember.computed.alias('notifications')
+});
+
+export default NotificationsComponent;

ghost/admin/initializers/notifications.js

@@ -0,0 +1,21 @@
+import Notifications from 'ghost/utils/notifications';
+
+var registerNotifications = {
+    name: 'registerNotifications',
+
+    initialize: function (container, application) {
+        application.register('notifications:main', Notifications);
+    }
+};
+
+var injectNotifications = {
+    name: 'injectNotifications',
+
+    initialize: function (container, application) {
+        application.inject('controller', 'notifications', 'notifications:main');
+        application.inject('component', 'notifications', 'notifications:main');
+        application.inject('route', 'notifications', 'notifications:main');
+    }
+};
+
+export {registerNotifications, injectNotifications};

ghost/admin/routes/application.js

@@ -18,6 +18,17 @@ var ApplicationRoute = Ember.Route.extend({
                 outlet: 'modal',
                 parentView: 'application'
             });
+        },
+
+        handleErrors: function (errors) {
+            this.notifications.clear();
+            errors.forEach(function (errorObj) {
+                this.notifications.showError(errorObj.message || errorObj);
+
+                if (errorObj.hasOwnProperty('el')) {
+                    errorObj.el.addClass('input-error');
+                }
+            });
         }
     }
 });

ghost/admin/routes/signin.js

@@ -23,7 +23,9 @@ var SigninRoute = Ember.Route.extend(styleBody, {
                     }
                 );
             } else {
-                window.alert('Must enter email + passwort. Todo: Must show as notification'); // Todo Show notification
+                this.notifications.clear();
+
+                this.notifications.showError('Must enter email + password');
             }
         }
     }

ghost/admin/templates/application.hbs

@@ -3,7 +3,8 @@
 {{/unless}}
 
 <main role="main" id="main">
+    {{ghost-notifications}}
+    
     {{outlet}}
 </main>
-
 {{outlet modal}}

ghost/admin/templates/components/ghost-notification.hbs

@@ -0,0 +1,4 @@
+<section {{bind-attr class=":js-notification message.typeClass"}}>
+    {{message.message}}
+    <a class="close" {{action "closeNotification"}}><span class="hidden">Close</span></a>
+</section>

ghost/admin/templates/components/ghost-notifications.hbs

@@ -0,0 +1,3 @@
+{{#each messages}}
+    {{ghost-notification message=this}}
+{{/each}}

ghost/admin/utils/notifications.js

@@ -0,0 +1,38 @@
+var Notifications = Ember.ArrayProxy.extend({
+    content: Ember.A(),
+    timeout: 3000,
+    pushObject: function (object) {
+        object.typeClass = 'notification-' + object.type;
+        // This should be somewhere else.
+        if (object.type === 'success') {
+            object.typeClass = object.typeClass + " notification-passive";
+        }
+        this._super(object);
+    },
+    showError: function (message) {
+        this.pushObject({
+            type: 'error',
+            message: message
+        });
+    },
+    showInfo: function (message) {
+        this.pushObject({
+            type: 'info',
+            message: message
+        });
+    },
+    showSuccess: function (message) {
+        this.pushObject({
+            type: 'success',
+            message: message
+        });
+    },
+    showWarn: function (message) {
+        this.pushObject({
+            type: 'warn',
+            message: message
+        });
+    }
+});
+
+export default Notifications;