Ember.js - Fading Notice Component (JavaScript)

A simple ember.js custom component that displays a notice via a "trigger", then slowly fades away. (JavaScript 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;
}

JavaScript

var App = Ember.Application.create();


App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      showFadingNotice: false
    };
  }
});


App.FadingNoticeComponent = Ember.Component.extend({
  tagName: 'div',

  attributeBindings: [ 'class', 'style' ],

  fadeOutDuration: 3000,
  notice:          "Default Notice",
  noticeTrigger:   false,

  class: null,
  style: 'display: none;',


  showNotice: (function() {
    var noticeTrigger = this.get('noticeTrigger');
    if (noticeTrigger) {
      var self = this;
      var element = $("#" + this.elementId);

      element.show();
      element.fadeOut(this.fadeOutDuration, (function() {
        var newNoticeTriggerValue = null;
        var noticeTriggerType = typeof noticeTrigger;

        if (noticeTriggerType === 'boolean') {
          newNoticeTriggerValue = false;
        } else if (noticeTriggerType === 'number') {
          newNoticeTriggerValue = 0
        }

        this.set('noticeTrigger', newNoticeTriggerValue)
      }));
    }
  }).observes('noticeTrigger')
});