filter-box.coffee 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. Spine = require('spine/core')
  2. $ = Spine.$
  3. templates = require('duality/templates')
  4. Site = require('models/site')
  5. KEYCODE_ENTER = 13
  6. KEYCODE_ESC = 27
  7. class FilterBox extends Spine.Controller
  8. className: 'filter-box'
  9. constructor: ->
  10. super
  11. @siteId = ''
  12. @query = ''
  13. @sortBy = ''
  14. Site.bind 'change refresh', @render
  15. render: =>
  16. context =
  17. sites: Site.all().sort(Site.alphaSort)
  18. @html templates.render('filter-box.html', {}, context)
  19. @siteId = ''
  20. @query = ''
  21. @setup()
  22. @filter()
  23. @
  24. setup: ->
  25. @filterInput = $(@el).find('input.filter-input')
  26. @filterClear = $(@el).find('.clear-filter')
  27. @selectedSite = $(@el).find('.selected-site')
  28. @siteSelector = $(@el).find('ul.site-selector')
  29. @sortBySelector = $(@el).find('input[name=sort-by]')
  30. @sortBySelector.on 'change', (e) =>
  31. @filter()
  32. @filterInput.on 'keyup', (e) =>
  33. if e.keyCode is KEYCODE_ESC
  34. @clear()
  35. else if e.keyCode is KEYCODE_ENTER
  36. @filter()
  37. else
  38. @filter()
  39. @filterClear.on 'click', (e) =>
  40. @clear()
  41. @selectedSite.on 'click', (e) =>
  42. e.stopPropagation()
  43. @siteSelector.toggle()
  44. $('html').on 'click', (e) =>
  45. @siteSelector.hide()
  46. @siteSelector.find('li').on 'click', (e) =>
  47. $item = $(e.currentTarget)
  48. @changeSite($item)
  49. @filter()
  50. changeSite: ($item) ->
  51. @selectedSite.find('> span').html($item.html()).attr('class', $item.attr('class'))
  52. @siteId = $item.attr('data-id')
  53. @siteSelector
  54. .hide()
  55. .scrollTop(0)
  56. .children()
  57. .removeClass('selected')
  58. $item.addClass('selected')
  59. clear: ->
  60. @filterInput.val('')
  61. @filter()
  62. reset: =>
  63. $item = @siteSelector.children().first()
  64. @changeSite($item)
  65. @clear()
  66. filter: =>
  67. @query = $.trim(@filterInput.val())
  68. if @query
  69. @filterClear.addClass('active')
  70. else
  71. @filterClear.removeClass('active')
  72. @sortBy = @sortBySelector.filter(':checked').val()
  73. Spine.trigger 'filterbox:change',
  74. query: @query
  75. siteId: @siteId
  76. sortBy: @sortBy
  77. module.exports = FilterBox