Generalising taxons-selector -> filter-selector

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

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

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

@@ -1,22 +1,25 @@
 Darkswarm.directive 'singleLineSelectors', ($timeout, $filter) ->
   restrict: 'E'
   templateUrl: "single_line_selectors.html"
+  scope:
+    objects: "&"
+    activeSelectors: "="
   link: (scope,element,attrs) ->
     scope.fitting = false
 
     scope.overFlowSelectors = ->
-      return [] unless scope.taxonSelectors?
-      $filter('filter')(scope.taxonSelectors, { fits: false })
+      return [] unless scope.allSelectors?
+      $filter('filter')(scope.allSelectors, { 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)->
+      scope.activeSelectors = scope.allSelectors.filter (selector)->
         selector.active
       .map (selector)->
-        selector.taxon.id
+        selector.object.id
 
     # From: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
     debouncer = (func, timeout) ->
@@ -35,17 +38,17 @@ Darkswarm.directive 'singleLineSelectors', ($timeout, $filter) ->
       available = $(element).parent(".filter-box").innerWidth()
       $(element).find("li").not(".more").each (i) ->
         used += $(this).outerWidth(true)
-        scope.taxonSelectors[i].fits = used <= available
+        scope.allSelectors[i].fits = used <= available
         return null # So we don't exit the loop on false
       scope.fitting = false
 
-    scope.$watchCollection "taxonSelectors", ->
-      if scope.taxonSelectors?
+    scope.$watchCollection "allSelectors", ->
+      if scope.allSelectors?
         scope.fitting = true
-        selector.fits = true for selector in scope.taxonSelectors
+        selector.fits = true for selector in scope.allSelectors
         $timeout fit, 0, true
 
     $(window).resize debouncer (e) ->
       scope.fitting = true
-      scope.$apply -> selector.fits = true for selector in scope.taxonSelectors
+      scope.$apply -> selector.fits = true for selector in scope.allSelectors
       $timeout fit, 0, true

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

@@ -1,48 +1,42 @@
-Darkswarm.directive "taxonSelector",  (FilterSelectorsService)->
+Darkswarm.directive "filterSelector",  (FilterSelectorsService)->
   # Automatically builds activeSelectors for taxons
   # Lots of magic here
   restrict: 'E'
   replace: true
   scope:
     objects: "&"
-    activeTaxons: "="
-    taxonSelectors: "="
-  templateUrl: "taxon_selector.html"
+    activeSelectors: "="
+    allSelectors: "="
+  templateUrl: "filter_selector.html"
 
   link: (scope, elem, attr)->
     selectors_by_id = {}
     selectors = null  # To get scoping/closure right
 
     scope.emit = ->
-      scope.activeTaxons = selectors.filter (selector)->
+      scope.activeSelectors = selectors.filter (selector)->
         selector.active
       .map (selector)->
-        selector.taxon.id
+        selector.object.id
 
-    scope.$on 'loadTaxonSelectors', ->
-      scope.taxonSelectors = scope.selectors()
+    # This can be called from a parent controller
+    # when data has been loaded
+    scope.$on 'loadFilterSelectors', ->
+      scope.allSelectors = scope.selectors()
 
-    # Build hash of unique taxons, each of which gets an ActiveSelector
+    # Build a list of selectors
     scope.selectors = ->
-      taxons = {}
-      selectors = []
-      for object in scope.objects()
-        for taxon in object.taxons
-          taxons[taxon.id] = taxon
-        if object.supplied_taxons
-          for taxon in object.supplied_taxons
-            taxons[taxon.id] = taxon
-
-      # Generate a selector for each taxon.
+      # Generate a selector for each object.
       # 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
       # See http://stackoverflow.com/questions/19306452/how-to-fix-10-digest-iterations-reached-aborting-error-in-angular-1-2-fil
-      for id, taxon of taxons
+      selectors = []
+      for id, object of scope.objects()
         if selector = selectors_by_id[id]
           selectors.push selector
         else
           selector = selectors_by_id[id] = FilterSelectorsService.new
-            taxon: taxon
+            object: object
           selectors.push selector
       selectors
 

app/assets/javascripts/darkswarm/filters/taxons_of.js.coffee

@@ -0,0 +1,10 @@
+Darkswarm.filter 'taxonsOf', ->
+  (objects)->
+    taxons = {}
+    for object in objects
+      for taxon in object.taxons
+        taxons[taxon.id] = taxon
+      if object.supplied_taxons
+        for taxon in object.supplied_taxons
+          taxons[taxon.id] = taxon
+    taxons

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

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

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

@@ -1,14 +1,14 @@
 %ul
-  %taxon-selector{objects: "Products.products | products:query | products:showProfiles",
-    "active-taxons" => "activeTaxons", "taxon-selectors" => "taxonSelectors" }
+  -# In order for the single-line-selector scope to have access to the available selectors,
+  %filter-selector{objects: "objects()", "active-selectors" => "activeSelectors", "all-selectors" => "allSelectors" }
 
   %li.more{ ng: { show: "overFlowSelectors().length > 0 || fitting", class: "{active: selectedOverFlowSelectors().length > 0}" } }
-    %a.dropdown{ dropdown: { toggle: "#more-taxons" } }
+    %a.dropdown{ dropdown: { toggle: "#show-more" } }
       %span
         + {{ overFlowSelectors().length }} more
       %i.ofn-i_052-point-down
-  .f-dropdown.content#more-taxons
+  .f-dropdown.content#show-more
     %ul
       %active-selector{ ng: { repeat: "selector in overFlowSelectors()", hide: "selector.fits" } }
-        %render-svg{path: "{{selector.taxon.icon}}"}
-        %span {{ selector.taxon.name }}
+        %render-svg{path: "{{selector.object.icon}}"}
+        %span {{ selector.object.name }}

app/views/shop/products/_filters.html.haml

@@ -1,5 +1,5 @@
 .filter-box.filter-box-shopfront.animate-hide.text-right
-  %single-line-selectors
+  %single-line-selectors{ objects: "Products.products | products:query | taxonsOf", "active-selectors" => "activeTaxons"}
 
 -# .filter-box.property-box-shopfront.animate-hide.text-right
 -#   %ul