Filtering Isotope with Multiple selects and a Tag input.

app.coffee

'use strict'

# Document Ready
$ ->


  # Initialise Isotope
  # http://isotope.metafizzy.co
  $('.isotope').isotope
    itemSelector: '.isotope-item'

    getSortData:
      recentFirst: (elem) ->
        $(elem).find('time').attr('datetime')
      recentLast: (elem) ->
        $(elem).find('time').attr('datetime')
      popularity: '.js-sort-popularity'
      AZ: '.js-sort-name'
      ZA: '.js-sort-name'

    sortAscending:
      recentFirst: false
      recentLast: true
      popularity: false
      AZ: true
      ZA: false


  # Initialise input tags
  # https://github.com/aehlke/tag-it
  $('.js-tag-target').tagit

    # These should be replaced with the AJAX method
    availableTags: [
      'c++',
      'java',
      'php',
      'javascript',
      'jacob',
      'julie',
      'james',
      'ruby',
      'python',
      'c'
    ]

    allowSpaces: true
    placeholderText: 'Enter a tag word...'

    afterTagAdded: ->
      #Trigger a custom event as the plugin doens't actually trigger any
      $(this).trigger('afterTagAdded')

    afterTagRemoved: ->
      $(this).trigger('afterTagRemoved')

  # Intialise the filtering
  window.Filter.init
    debug: true

filterSelect.coffee

'use strict'

# Filter, Isotope and TagIt are initialised in app.coffee
Filter =

  tagTarget: '.js-tag-target'
  selectTarget: '.js-select-target'
  filters: {}



  init: (options) ->

    # Set some default options
    defaults =
      debug: false

    # Merge all the options
    Filter.options = $.extend defaults, options

    # Bind Event Handlers
    Filter.bind()

    # Call the filter / sort on initial options
    Filter.updateIsotope( '#filters select' )



  bind: ->

    # When a select box is changed
    $('#filters select').change (e) ->
      Filter.log 'Select Changed'
      # e.preventDefault()
      Filter.updateIsotope( this )
      $('.isotope').isotope('updateSortData').isotope()

    # Custom event set in tagit callback (app.coffee)
    $(document).on 'afterTagAdded', ->
      Filter.log 'Tag added'
      Filter.updateIsotope( '#filters select' )

    # Custom event set in tagit callback (app.coffee)
    $(document).on 'afterTagRemoved', ->
      Filter.log 'Tag removed'
      Filter.updateIsotope( '#filters select' )



  getTagSelectors: ->

    tags = $('.js-tag-target').tagit('assignedTags')

    if tags.length
      tagString = tags.join(',')
      selectors = tagString.replace(/,/g, '.')
      selectors = '.' + selectors.replace(/\s/g , '-')

    else
      selectors = ''

    Filter.log selectors
    return selectors



  getSortOrder: ->

    sortOrder = $('.js-sort-trigger')
      .find('option:selected')
      .attr('data-sort-value')

    Filter.log 'Sort order: ', sortOrder
    return sortOrder



  getSelectSelectors: (elem) ->

    Filter.log 'Current <select>:', elem

    $this = $(elem)
    $optionSet = $this
    group = $optionSet.attr('data-filter-group')

    Filter.filters[group] = $this
      .find('option:selected')
      .attr('data-filter-value')

    isoFilters = []
    for prop of Filter.filters
      isoFilters.push Filter.filters[prop]

    selector = isoFilters.join('')

    Filter.log 'Selected:', selector
    return selector



  combineSelectors: (elem) ->

    Filter.getTagSelectors() + Filter.getSelectSelectors( elem )



  updateIsotope: (elem) ->

    $('.isotope').isotope
      filter: Filter.combineSelectors( elem )
      sortBy: Filter.getSortOrder()



  log: ( msg, object ) ->

    if Filter.options.debug
      if !object
        object = ''
      console.log( 'Filter: ' + msg, object )