Ember Delete Button Component

Ember-Delete-Button-Component.markdown

Ember Delete Button Component

Using Zurb Foundation and Font Awesome, I came up with a delete button that changes to a confirmation button. If you confirm, the delete goes through, otherwise if you move your mouse off the button, it resets back to just a normal delete button.

A Pen by Damien White on CodePen.

License.

index.html

<script type="text/x-handlebars">
  {{{outlet}}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <div class="container">
  <p>Example Delete Button</p>
  
  {{ delete-button }}
  </div>
</script>

script.coffee

window.App = Ember.Application.create()

App.DeleteButtonComponent = Ember.Component.extend
  tagName: 'button'
  classNames: ['button', 'radius']
  classNameBindings: ['alert']
  attributeBindings: ['title']
  layout: Ember.Handlebars.compile('<i {{bind-attr class=":fa icon"}}></i>')
  alert: false
  icon: 'fa-trash-o'
  click: ->
    if @get('alert')
      alert 'delete'
      return

    @set 'alert', true
    @set 'icon', 'fa-question-circle'

  mouseLeave: ->
    @set 'alert', false
    @set 'icon', 'fa-trash-o'

  title: (->
    return "Delete this item." unless @get('alert')
    "Are you sure you want to delete this item?"
  ).property('alert')

style.scss

@import "compass/css3";
.container {
  padding: 30px
}