Adding the 'more' box for single-line-selectors

app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee

@@ -1,4 +1,4 @@
-Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, FilterSelectorsService, Cart) ->
+Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, FilterSelectorsService, Cart, Taxons) ->
   $scope.Products = Products
   $scope.Cart = Cart
   $scope.totalActive =  FilterSelectorsService.totalActive
@@ -20,3 +20,8 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle,
     code = e.keyCode || e.which
     if code == 13
       e.preventDefault()
+
+  $scope.appliedTaxonsList = () ->
+    $scope.activeTaxons.map( (taxon_id) ->
+      Taxons.taxons_by_id[taxon_id].name
+    ).join(" & ") if $scope.activeTaxons?

app/assets/javascripts/darkswarm/directives/single_line_selector.coffee

@@ -1,10 +1,26 @@
-Darkswarm.directive 'singleLineSelector', ($timeout) ->
+Darkswarm.directive 'singleLineSelector', ($timeout, $filter) ->
   restrict: 'E'
   link: (scope,element,attrs) ->
+    scope.fitting = false
+
+    scope.overFlowSelectors = ->
+      return [] unless scope.taxonSelectors?
+      $filter('filter')(scope.taxonSelectors, { fits: false })
+
+    scope.selectedOverFlowSelectors = ->
+      $filter('filter')(scope.overFlowSelectors(), { active: true })
+
+    # had to duplicate this to make overflow selectors work
+    scope.emit = ->
+      scope.activeTaxons = scope.taxonSelectors.filter (selector)->
+        selector.active
+      .map (selector)->
+        selector.taxon.id
+
     # From: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
     debouncer = (func, timeout) ->
       timeoutID = undefined
-      timeout = timeout or 200
+      timeout = timeout or 50
       ->
         subject = this
         args = arguments
@@ -20,11 +36,15 @@ Darkswarm.directive 'singleLineSelector', ($timeout) ->
         used += $(this).outerWidth(true)
         scope.taxonSelectors[i].fits = used <= available
         return null # So we don't exit the loop on false
+      scope.fitting = false
 
     scope.$watchCollection "taxonSelectors", ->
-      selector.fits = true for selector in scope.taxonSelectors
-      $timeout fit, 0, true
+      if scope.taxonSelectors?
+        scope.fitting = true
+        selector.fits = true for selector in scope.taxonSelectors
+        $timeout fit, 0, true
 
     $(window).resize debouncer (e) ->
+      scope.fitting = true
       scope.$apply -> selector.fits = true for selector in scope.taxonSelectors
       $timeout fit, 0, true