Basic implementation of single line selectors

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

@@ -9,6 +9,9 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle,
   $scope.limit = 3
   $scope.order_cycle = OrderCycle.order_cycle
 
+  $scope.$watch "Products.loading", (newValue, oldValue) ->
+    $scope.$broadcast("loadTaxonSelectors") if !newValue
+
   $scope.incrementLimit = ->
     if $scope.limit < Products.products.length
       $scope.limit = $scope.limit + 1

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

@@ -0,0 +1,33 @@
+Darkswarm.directive 'singleLineSelector', ($timeout) ->
+  restrict: 'E'
+  link: (scope,element,attrs) ->
+    scope.activeTaxons = []
+    scope.taxonSelectors = []
+
+    # 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
+      ->
+        subject = this
+        args = arguments
+        clearTimeout timeoutID
+        timeoutID = setTimeout(->
+          func.apply subject, Array::slice.call(args)
+        , timeout)
+
+    fit = ->
+      used = $(element).find("li.more").outerWidth(true)
+      available = $(element).parent(".filter-box").innerWidth()
+      $(element).find("li").not(".more").each (i) ->
+        used += $(this).outerWidth(true)
+        scope.taxonSelectors[i].fits = used <= available
+        return null # So we don't exit the loop on false
+
+    scope.$watchCollection "taxonSelectors", ->
+      selector.fits = true for selector in scope.taxonSelectors
+      $timeout fit, 0, true
+
+    $(window).resize debouncer (e) ->
+      scope.$apply -> selector.fits = true for selector in scope.taxonSelectors
+      $timeout fit, 0, true

app/assets/javascripts/darkswarm/directives/taxon_selector.js.coffee

@@ -5,7 +5,8 @@ Darkswarm.directive "taxonSelector",  (FilterSelectorsService)->
   replace: true
   scope:
     objects: "&"
-    results: "="
+    activeTaxons: "="
+    taxonSelectors: "="
   templateUrl: "taxon_selector.html"
 
   link: (scope, elem, attr)->
@@ -13,14 +14,17 @@ Darkswarm.directive "taxonSelector",  (FilterSelectorsService)->
     selectors = null  # To get scoping/closure right
 
     scope.emit = ->
-      scope.results = selectors.filter (selector)->
+      scope.activeTaxons = selectors.filter (selector)->
         selector.active
       .map (selector)->
         selector.taxon.id
 
+    scope.$on 'loadTaxonSelectors', ->
+      scope.taxonSelectors = scope.selectors()
+
     # Build hash of unique taxons, each of which gets an ActiveSelector
     scope.selectors = ->
-      taxons = {} 
+      taxons = {}
       selectors = []
       for object in scope.objects()
         for taxon in object.taxons
@@ -28,7 +32,7 @@ Darkswarm.directive "taxonSelector",  (FilterSelectorsService)->
         if object.supplied_taxons
           for taxon in object.supplied_taxons
             taxons[taxon.id] = taxon
-      
+
       # Generate a selector for each taxon.
       # NOTE: THESE ARE MEMOIZED to stop new selectors from being created constantly, otherwise function always returns non-identical results
       # This means the $digest cycle can never close and times out

app/assets/javascripts/templates/taxon_selector.html.haml

@@ -1,3 +1,3 @@
-%active-selector{"ng-repeat" => "selector in selectors()"}
-  %render-svg{path: "{{selector.taxon.icon}}"} 
+%active-selector{"ng-repeat" => "selector in taxonSelectors", "ng-show" => "selector.fits"}
+  %render-svg{path: "{{selector.taxon.icon}}"}
   %span {{ selector.taxon.name }}