Ember Notifications component

application.hbs

{{! Rest of the file is omited }}

<div class="notifications">
    {{#each controllers.notifications.notifications}}
        {{system-notification content=this}}
    {{/each}}
</div>

{{! Rest of the file is omited }}

application_controller.coffee

App.ApplicationController = Ember.Controller.extend

    # We will need the notifications, so we can render them in the application.hbs file
    needs: [ 'notifications' ]

notifications_controller.coffee

App.NotificationsController = Ember.Controller.extend

    notifications: Ember.A()

    clearNotifications: (->
        notifications = @get('notifications')

        if notifications.length and notifications.isEvery('closed')
            @set 'notifications', Ember.A()
    ).observes('notifications.@each.closed')

    notify: (msg, type = 'info') ->
        notification = Ember.Object.create
            type: type
            msg: msg
            closed: false

        @notifications.pushObject notification

simple-notification.hbs

<a class="close" {{ action "close" }}>&times;</a>
<p>{{ content.msg }}</p>

simple_notification.coffee

App.SimpleNotificationComponent = Ember.Component.extend

    timeout: null
    timeVisible: 6000,
    visible: false

    classNameBindings: [ ':notification', 'content.type', 'content.closed', 'visible' ]

    didInsertElement: ->
        @startTimeout()

        Ember.run.later =>
            @set 'visible', true
        , 1

    startTimeout: ->
        @set 'timeout', setTimeout =>
            @send 'close'
        , @get('timeVisible')

    clearTimeout: ->
        clearTimeout @get('timeout') if @get('timeout')

    eventManager:
        mouseEnter: (e, view) ->
            view.clearTimeout()

        mouseLeave: (e, view) ->
            view.startTimeout()


    actions:
        close: ->
            @set 'visible', false
            setTimeout =>
                @set 'content.closed', true
                @clearTimeout()
            , 300

some_controller.coffee

App.SomeController = Ember.Controller.extend
    
    # We will need to have access to the notifications controller
    # to be able to add new notifications
    needs: [ 'notifications' ]
    
    actions:
        save: ->
            # When everything is done
            @get('controllers.notifications').notify 'The notification message'