Ember.js - Fading Notice Component (CoffeeScript)

A simple ember.js custom component that displays a notice via a "trigger", then slowly fades away. (CoffeeScript Version)

by Brandon

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.0/normalize.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.4.0/ember.min.js"></script>
<script type="text/x-handlebars" id="index">
  <h2>Ember.js - Fading Notice</h2>
  {{input type="checkbox" checked=showFadingNotice}} Show Notice
  <div></div>
  {{fading-notice class="fading-notice" noticeTrigger=showFadingNotice notice="Settings Saved Successfully!"}}
</script>

<script type="text/x-handlebars" id="components/fading-notice">
  {{notice}}
</script>

SCSS

.fading-notice {
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  padding: 6px 11px;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #2C6700;
  text-transform: uppercase;
}

body {
    margin: 20px;
}

CoffeeScript

App = Ember.Application.create()


App.IndexRoute = Ember.Route.extend
  model: ->
    { showFadingNotice: false }


App.FadingNoticeComponent = Ember.Component.extend

  tagName: 'div'

  attributeBindings: [ 'class', 'style' ]

  fadeOutDuration: 3000
  notice:          null
  noticeTrigger:   false

  class: null
  style: 'display: none;'


  showNotice: (->
    noticeTrigger = @get 'noticeTrigger'
    if noticeTrigger
      element = $("##{@elementId}")
      element.show()
      element.fadeOut(@fadeOutDuration, (=>
        newNoticeTriggerValue = null
        noticeTriggerType = typeof noticeTrigger

        if noticeTriggerType == 'boolean'
          newNoticeTriggerValue = false
        else if triggerType == 'number'
          newNoticeTriggerValue = 0

        @set 'noticeTrigger', newNoticeTriggerValue
      ))
  ).observes('noticeTrigger')