dropdown_behavior.js.coffee

@Onespend.module 'Behaviors', (Behaviors, App, Backbone, Marionette, $, _) ->

  Behaviors.Dropdown = Marionette.Behavior.extend
    initialize: ->
      @dropdownShowed = false

    ui:
      'dropdown': '.js-dropdown'
      'header': '.js-header'

    events:
      'click @ui.header': 'toggleDropdown'

    toggleDropdown: (e) ->
      if @dropdownShowed
        @hideDropdown()
      else
        @showDropdown(e)

    hideDropdown: ->
      @ui.dropdown.removeClass 'is-active'
      @dropdownShowed = false
      $('body').off 'click.hide-dropdown-' + @view.cid

    showDropdown: (e) ->
      @ui.dropdown.addClass 'is-active'
      @dropdownShowed = true

      $('body').on 'click.hide-dropdown-' + @view.cid, (e) =>
        targetHeader = $(e.target).closest('.js-header')
        if !targetHeader.length || !targetHeader.hasClass('sb-id-' + @view.cid) || $(e.target).hasClass('.js-dropdown')
          @toggleDropdown()

    onShow: ->
      @ui.header.addClass 'sb-id-' + @view.cid

    onDestroy: ->
      $('body').off 'click.hide-dropdown-' + @view.cid

selectbox_view.js.coffee

@Onespend.module "Components.SelectBox", (SelectBox, App, Backbone, Marionette, $, _) ->

  class SelectBox.Option extends App.Views.CompositeView
    template: 'components_selectbox_option'
    className: 'b-select-box-dropdown-options-option'
    childViewContainer: 'ul'
    tagName: 'li'

    triggers:
      'click': 'selectbox:option:clicked'

    childEvents:
      'selectbox:option:clicked': 'childClicked'

    childClicked: (option, args)->
      @triggerMethod 'selectbox:option:clicked', option, args


  class SelectBox.Options extends App.Views.CompositeView
    template: 'components_selectbox_options'
    className: 'b-select-box'
    childView: SelectBox.Option
    childViewContainer: 'ul'

    ui:
      'header': '.js-header'
      'input': '.js-input'

    childEvents:
      'selectbox:option:clicked': 'optionClicked'

    behaviors:
      Dropdown:
        behaviorClass: App.Behaviors.Dropdown

    initialize: (options) ->
      { name, parentAttribute } = options

      @name = name || 'selectbox-' + @cid
      @parentAttribute = parentAttribute

    filter: (child, index, collection) ->
        child unless @parentAttribute && child.get('parent_category_id')

    childViewOptions: (model) ->
      collection: new Backbone.Collection @collection.where "#{@parentAttribute}": model.get('id')

    serializeData: ->
      data = super
      data.selectboxName = @name
      data

    setTitle: (icon, title) ->
      @ui.header.html "<img class='b-select-box-title-icon' src='" + icon + "'>" + title

    setSelectboxInput: (value) ->
      @ui.input.val value

    optionClicked: (option, args) ->
      @setTitle args.model.get('iconPath'), args.model.get('name')
      @setSelectboxInput args.model.get('id')