Coffee_Example.md

Пример js для работы пары из множестрва контроллов настройти таргетирования рекламной кампании.

Выбор устройств Targetings.MobilePlatforms.GoogleDevices и

выбор канала доступа в интернет Targetings.MobileOperators.Google для рекламной кампании гугла.

https://monosnap.com/file/uOSuIys6BkMmuzkbEOj20eVERb5kxF

Coffee_Example_1.coffee

using 'Targetings.MobilePlatforms'
class Targetings.MobilePlatforms.GoogleDevices extends View
  initialize: (model_name) ->
    @$device_checkbox = @$('input[type="checkbox"]')

    @$ios_devices = @$('.mobile-devices .ios')
    @$android_devices = @$('.mobile-devices .android')
    @ios_devices = new Targetings.TreeSearch(
      $('.ids', @$ios_devices), model_name
    )
    @android_devices = new Targetings.AndroidDevices(
      $('.ids', @$android_devices), model_name
    )

    @$device_checkbox.on 'change', (e) => @_toggle_input(e.target)

  hide: =>
    @$root.removeClass 'active'
    @clear_devices()

  clear_devices: =>
    @ios_devices.clear()
    @android_devices.clear()

  show: (@os) =>
    @$ios_devices.toggleClass 'active', @os == 'ios'
    @$android_devices.toggleClass 'active', @os == 'android'
    @$device_checkbox.prop 'checked', false
    @_toggle_input @$device_checkbox[0]
    @$root.addClass 'active'

  render: (@os) =>
    switch @os
      when 'all' then @hide()
      when 'ios' then @_render_ios()
      when 'android' then @_render_android()

  _toggle_input: (checkbox) =>
    switch @os
      when 'ios'
        @$ios_devices.toggleClass 'active', checkbox.checked
      when 'android'
        @$android_devices.toggleClass 'active', checkbox.checked

    unless checkbox.checked
      @android_devices.clear()
      @ios_devices.clear()

  _render_ios: =>
    @android_devices.clear()
    @$ios_devices.toggleClass 'active', !@ios_devices.is_empty()
    @$device_checkbox.prop 'checked', !@ios_devices.is_empty()
    @_toggle_input @$device_checkbox[0]
    @$root.addClass 'active'

  _render_android: =>
    @ios_devices.clear()
    @$android_devices.toggleClass 'active', !@android_devices.is_empty()
    @$device_checkbox.prop 'checked', !@android_devices.is_empty()
    @_toggle_input @$device_checkbox[0]
    @$root.addClass 'active'

Coffee_Example_2.coffee

#= require ../tree_search

using 'Targetings.MobileOperators'
class Targetings.MobileOperators.Google extends Targetings.TreeSearch
  initialize: (@model_name, @button_selector, @regions_selector) ->
    @checkbox = $("input[type='checkbox']", @button_selector)
    @buttons = $('.radio', @button_selector)
    @any = @buttons.first()
    @defined = @buttons.last()
    @$selector = $('.operators', @button_selector)

    @checkbox.on 'change', (e) =>
      if $(e.target).is ':checked'
        @_unstash_operators()
      else
        @_stash_operators()

    @any.on 'click', (e) =>
      unless $(e.target).is('.active')
        $(e.target).addClass 'active'
        @_stash_operators()

    @defined.on 'click', (e) =>
      unless $(e.target).is('.active')
        $(e.target).addClass 'active'
        @_unstash_operators()

    @$('ul').on 'click', @_filter_operators_by_regions
    super

    @$('.operators-country').on 'click', ->
      $(@).prev().click()

    @$('.operator').on 'click', (e) =>
      return if $(e.target).is '.toggle-subitems, .country'
      @_toggle_operator $(e.currentTarget)

    # по клику на пункт 'Определённый' в 'Канал доступа в интернет'
    # раскрываем dropdown
    $('.radio:last-child', @button_selector).on 'click', =>
      $('.token-input-list-umka', @button_selector).click()

  clear_operators: =>
    @_stash_operators()
    @checkbox.prop 'checked', false

  _stash_operators: (e) =>
    @defined.removeClass 'active'
    @$selector.removeClass 'active'
    @_stash_checked()

  _unstash_operators: (e) =>
    @any.removeClass 'active'
    @$selector.addClass 'active'

    if @$selector.data('operators_chosen')
      @$selector.data('operators_chosen').each (_, operator) =>
        @_add_token operator

  _stash_checked: =>
    @$selector.data operators_chosen: @_operators_chosen()

    @_operators_chosen().each (_, operator) =>
      @_remove operator

  _operators_chosen: =>
    @$('.operator.active').map -> $(@).data('object')

  _toggle_operator: (operator) =>
    if operator.is('.active')
      @_remove operator.data('object')
    else
      @_add_token operator.data('object')

  _remove: (operator) ->
    @$(".operator.#{operator.id}").removeClass 'active'
    @$("#hidden_item_#{operator.id}").remove()
    @$("#ul_item_#{operator.id}").remove()
    @_check_placeholder()
    @$root.trigger 'control:update'

  _add: (operator) -> return

  _regions: =>
    $(@regions_selector).map -> $(@).data('country')

  _filter_operators_by_regions: =>
    regions = @_regions()
    if regions.length > 0
      @$('.subitems .operator').each ->
        if $(@).data('country') in regions
          $(@).closest('.operator-item').removeClass 'blocked'
        else
          $(@).closest('.operator-item').addClass 'blocked'

  _add_token: (operator) =>
    @$(".operator.#{operator.id}").addClass 'active'
    @$('.hidden-inputs').append(
      "<input class='tracked-input' type='hidden'
        name='#{@model_name}[#{@field_name}][]'
        value='#{operator.id}' id='hidden_item_#{operator.id}'>"
    )
    @$('ul').append(
      "<li class='token-input-token-umka' id='ul_item_#{operator.id}'>
        <p>#{operator.name} #{operator.country || '' }</p>
        <span class='token-input-delete-token-umka remove'
          data-item-id='#{operator.id}'>×</span>
      </li>"
    )
    @_check_placeholder()
    @$root.trigger 'control:update'