clear-input.coffee

# puts an x icon on an input when focused to clear the text. meant to be wrapped
# around a single input
ClearInputComponent = Ember.Component.extend
  classNames: ['clear-input']

  didInsertElement: ->
    @$x = @$().find('.x-container')
    @$input = @$().find('input')
    if @$input.length > 1
      throw new Error('You can only include 1 input inside of the {{clear-input}} component') 
    @bindEvents()

  bindEvents: ->
    @$input.on 'keyup', @onKeyUp.bind(@)
    @$input.on 'focus', @onFocus.bind(@)
    @$input.on 'focusout', @onBlur.bind(@)

  onKeyUp: (e)-> if @$input.val() then @show(e) else @hide(e)

  onFocus: (e)-> @show(e) if @$input.val()

  onBlur: (e)-> @hide(e)

  show: (e)->
    @$x.show()
    @$input.css
      'padding-right': @$x.outerWidth()

  hide: (e)->
    Em.run.later @, -> # bug with it hiding before click is triggered
      @$x.hide()
    , 100
    @$input.css # it would be nice if we could determine this somehow
      'padding-right': '10px'

  actions:
    clearInput: ->
      @$input.val('').change().focus()

`export default ClearInputComponent;`