gistfile1.coffee

###
# Namespace
###
Semantic = window.Semantic = Ember.Namespace.create
  UI_DEBUG: false
  UI_PERFORMANCE: false
  UI_VERBOSE: false

###
# Mixin
###
Semantic.DataAttributes = Ember.Mixin.create
  attributeBindings: ['data-test']

Semantic.Base = Ember.Mixin.create Semantic.DataAttributes,

  init: ->
    @_super()
    unless @get('module')
      console.error('Module was not declared on semantic extended type')

  settings: (module) ->
    component = $.fn[module]
    unless component
      throw new Error("Unable to find semantic module: #{module}")

    custom = {
      debug: Semantic.UI_DEBUG
      performance: Semantic.UI_PERFORMANCE
      verbose: Semantic.UI_VERBOSE
    }
    for key, prop of component.settings
      # Only getting settings
      continue if key in Semantic.Base.DEBUG
      continue if key in Semantic.Base.STANDARD
      continue if typeof prop == 'function' and typeof @get(key) != 'function'

      if key in Semantic.Base.EMBER
        # Have to prefix with ui_ instead of just _, because ember has private variables name with and without _
        value = @get("ui_#{key}")
      else
        value = @get(key)
      if value?
        if typeof value == 'function'
          custom[key] = Em.run.bind(@, value)
        else
          custom[key] = value

    custom

  didInsertElement: ->
    @$()[@get("module")](
      @settings(@get("module"))
    )

  willDestroyElement: ->
    @$()?[@get("module")]?('destroy')

  execute: ->
    @$()?[@get('module')]?.apply(@$(), arguments)


# Static properties to ignore
Semantic.Base.DEBUG = ['debug', 'performance', 'verbose']
Semantic.Base.STANDARD = ['name', 'namespace', 'className', 'error', 'metadata', 'selector']
Semantic.Base.EMBER = ['context', 'on', 'template', 'execute']

###
# Accordion Components
###
Semantic.UiAccordionComponent = Ember.Component.extend Semantic.Base,
  module: 'accordion'
  classNames: ['ui', 'accordion']

  onChange: ->
    @sendAction('changed')

Ember.Handlebars.helper 'ui-accordion', Semantic.UiAccordionComponent

###
# Transition Components
###
Semantic.UiTransitionComponent = Ember.Component.extend Semantic.Base,
  module: 'transition'

Ember.Handlebars.helper 'ui-transition', Semantic.UiTransitionComponent

###
# Popup Components
###
Semantic.UiPopupComponent = Ember.Component.extend Semantic.Base,
  module: 'popup'
  contentChanges: (->
    @didInsertElement()
  ).observes('content')

Ember.Handlebars.helper 'ui-popup', Semantic.UiPopupComponent


Semantic.UiPopupIconComponent = Semantic.UiPopupComponent.extend
  tagName: 'i'
  classNames: ['icon', 'link']

Ember.Handlebars.helper 'ui-popup-icon', Semantic.UiPopupIconComponent

###
# Checkbox Components
###
# Need to convert to a ember checkbox select
Semantic.UiCheckboxMixin = Ember.Mixin.create Semantic.Base,
  module: 'checkbox'
  classNames: ['ui', 'checkbox']

  layout: Ember.Handlebars.compile("""
    <input {{bind-attr type=type name=name checked=checked disabled=readonly data-id=data-id}} />
    <label>{{text}}</label>
  """)

  didInsertElement: ->
    return if @get("disabled")
    @_super()

  willDestroyElement: ->
    return if @get("disabled")
    @_super()

Semantic.UiCheckboxComponent = Ember.Component.extend Semantic.UiCheckboxMixin,
  type: 'checkbox'
  checked: false

  onChange: ->
    @set('checked', @$('input').prop('checked'))
    @sendAction("action",
      checked: @get('checked')
      value: @get('value')
    )

Ember.Handlebars.helper 'ui-checkbox', Semantic.UiCheckboxComponent


Semantic.UiRadioComponent = Ember.Component.extend Semantic.UiCheckboxMixin,
  classNames: ['radio']
  type: 'radio'
  name: 'default'

  init: ->
    @_super()
    unless @get('name') and @get("name") != "default"
      console.warn('Name was not passed into semantic radio component')

  checked: (->
    @get('current') == @get('value')
  ).property('current', 'value')

  onChange: ->
    @set('current', @get('value'))
    @sendAction("action",
      checked: @get('checked')
      value: @get('value')
    )

Ember.Handlebars.helper 'ui-radio', Semantic.UiRadioComponent


Semantic.UiFieldComponent = Ember.Component.extend Semantic.DataAttributes,
  classNames: ['field']
  classNameBindings: ['isError:error']
  showError: true
  error: null
  customError: false

  isError: (->
    @get("showError") and !Ember.isEmpty(@get("error"))
  ).property("error", "showError")

  genericError: (->
    @get("isError") and not @get("customError")
  ).property("isError", "customError")

  layout: Ember.Handlebars.compile("""
    {{yield}}
    {{#if genericError}}
      <div class="ui red pointing label">
        {{error}}
      </div>
    {{/if}}
  """)

Ember.Handlebars.helper 'ui-field', Semantic.UiFieldComponent


Semantic.UiErrorComponent = Ember.Component.extend
  showError: true
  error: null
  labeled: true

  isError: (->
    @get("showError") and !Ember.isEmpty(@get("error"))
  ).property("error", "showError")

  layout: Ember.Handlebars.compile("""
    {{#if isError}}
      <div {{bind-attr class=":ui :red :message labeled:pointing labeled:label"}}>
        {{error}}
      </div>
    {{/if}}
  """)

Ember.Handlebars.helper 'ui-error', Semantic.UiErrorComponent


Semantic.UiSelectOption = Ember.SelectOption.extend
  tagName: 'div'
  classNames: 'item'

  initialized: false
  initialize: (->
    Ember.run.scheduleOnce('afterRender', @, @set_value)
  ).on('init')

  set_value: ->
    valuePath = @get('parentView.optionValuePath')
    return unless valuePath
    return unless @$()?

    @$().data('value', @get(valuePath))
    @set('initialized',true)


Semantic.UiSelect = Ember.Select.extend Semantic.Base, Semantic.DataAttributes,
  classNames: ['ui', 'selection', 'dropdown']
  module: 'dropdown'
  tagName: 'div'
  defaultTemplate: null

  layout: Ember.Handlebars.compile("""
    <div class="text">{{view.prompt}}</div>
    {{#if view.icon}}
      <i {{bind-attr class="view.icon :icon"}}></i>
    {{else}}
      <i class="dropdown icon"></i>
    {{/if}}
    <div class="menu">
      {{#if view.optionGroupPath}}
        {{#each group in view.groupedContent}}
          {{view view.groupView content=group.content label=group.label}}
        {{/each}}
      {{else}}
        {{#each item in view.content}}
          {{view view.optionView content=item}}
        {{/each}}
      {{/if}}
    </div>
    {{#if view.template}}
      {{yield}}
    {{/if}}
  """)

  optionView: Semantic.UiSelectOption

  groupedView: null
  groupedContent: null

  onChildViewsChanged: (->
    length = @get('childViews.length')
    if length > 0
      Ember.run.scheduleOnce('afterRender', @, @initialize)
  ).observes('childViews.@each.initialized')

  initialize: (->
    value = @get('value')
    if value?
      @execute('set selected', value)

    # Reinitialize the dropdown when the childviews change
    @$()[@get("module")](
      @settings(@get("module"))
    )
  )

  onChange: (value) ->
    @set('value', value)

  onUpdate: (->
    Ember.run.scheduleOnce('afterRender', @, @set_value)
  ).observes('value')

  set_value: ->
    inputValue = @get('value')?.toString()
    dropdownValue = @execute("get value")
    unless inputValue?
      @execute("restore defaults")
    else if inputValue != dropdownValue
      @execute("set selected",@get('value'))

Ember.Handlebars.helper 'ui-select', Semantic.UiSelect


Semantic.UiMenuDropdown = Ember.Component.extend Semantic.Base,
  module: 'dropdown'
  classNames: ['ui', 'dropdown', 'item']
  ui_on: 'hover'

Ember.Handlebars.helper 'ui-menu-dropdown', Semantic.UiMenuDropdown


Semantic.UiModal = Ember.View.extend Semantic.Base,
  module: 'modal'
  classNames: [ 'ui', 'modal' ]

  init: ->
    # We need to set the context specifically for testing where
    # it shows up under a namespaced element. In other cases
    # the rootElement is body and should behave the same as without
    # this set.
    @set('ui_context', $(App.rootElement))
    @_super()
    @set('hidding', false)

  onHide: ->
    @set('hidding', true)
    @get('controller').send('closeModal')

  onDeny: ->
    if (@get('controller')._actions||{})['cancel']?
      @get('controller').send('cancel')
    return true

  onApprove: ->
    if (@get('controller')._actions||{})['approve']?
      @get('controller').send('approve')
      return true
    return false

  closable: false

  didInsertElement: ->
    @_super()
    @execute('show')

  willDestroyElement: ->
    @execute('hide') unless @get('hidding')
    @_super()

Semantic.SidebarComponent = Ember.Component.extend Semantic.Base,
  module: 'sidebar'
  classNames: [ 'ui', 'sidebar' ]
  # overlay: true
  didInsertElement: ->
    @_super()
    @execute('toggle')

Ember.Application.initializer
  name: 'semantic-ui'

  initialize: (container, application) ->
    container.register('view:ui-modal', Semantic.UiModal, { singleton: false })
    container.register('component:ui-sidebar', Semantic.SidebarComponent)