Taxon selectors and show/hide behaviour

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

@@ -1,2 +1,4 @@
-Darkswarm.controller "ProducersCtrl", ($scope, Producers) ->
+Darkswarm.controller "ProducersCtrl", ($scope, Producers, TaxonSelector) ->
   $scope.Producers = Producers
+  $scope.TaxonSelector = TaxonSelector
+  $scope.filtersActive = false

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

@@ -0,0 +1,10 @@
+Darkswarm.directive "activeSelector",  ->
+  restrict: 'E'
+  transclude: true
+  replace: true
+  templateUrl: 'active_selector.html'
+  link: (scope, elem, attr)->
+    elem.bind "click", ->
+      scope.$apply ->
+        elem.toggleClass "active"
+        scope.selector.active = !scope.selector.active 

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

@@ -0,0 +1,6 @@
+Darkswarm.directive "taxonSelector", (TaxonSelector) ->
+  restrict: 'E'
+  scope: {}
+  templateUrl: "taxon_selector.html"
+  link: (scope, elem, attr)->
+    scope.TaxonSelector = TaxonSelector

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

@@ -1,8 +1,12 @@
 Darkswarm.filter 'taxons', (Matcher)-> 
   # Filter anything that responds to object.taxons, and/or object.primary_taxon
-  (objects, id) ->
+  (objects, ids) ->
     objects ||= []
-    id ?= 0
-    objects.filter (obj)->
-      obj.primary_taxon?.id == id || obj.taxons.some (taxon)->
-        taxon.id == id
+    ids ?= []
+    console.log ids
+    if ids.length == 0
+      objects
+    else
+      objects.filter (obj)->
+        obj.primary_taxon?.id in ids || obj.taxons.some (taxon)->
+          taxon.id in ids

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

@@ -0,0 +1,14 @@
+Darkswarm.factory 'TaxonSelector', (Taxons)->
+  new class TaxonSelector
+    selectors: []
+    constructor: ->
+      for taxon in Taxons.taxons
+        @selectors.push
+          active: false
+          taxon: taxon
+
+    active: ->
+      @selectors.filter (selector)->
+        selector.active
+      .map (selector)->
+        selector.taxon.id

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

@@ -0,0 +1,2 @@
+%li
+  %a{"ng-transclude" => true}

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

@@ -0,0 +1,4 @@
+%ul.small-block-grid-4
+  %active-selector{"ng-repeat" => "selector in TaxonSelector.selectors"}
+    %render-svg{path: "{{selector.taxon.icon}}"} 
+    %span {{ selector.taxon.name }}

app/assets/stylesheets/darkswarm/animations.sass

@@ -51,3 +51,21 @@
   opacity: 1
   max-height: 40px
 
+
+.animate-show
+  -webkit-transition: all linear 0.5s
+  transition: all linear 0.5s
+  line-height: 20px
+  opacity: 1
+  padding: 10px
+  border: 1px solid black
+  background: white
+
+.animate-show.ng-hide-add,
+.animate-show.ng-hide-remove
+  display: block !important
+
+.animate-show.ng-hide
+  line-height: 0
+  opacity: 0
+  padding: 0 10px

app/serializers/api/enterprise_serializer.rb

@@ -1,6 +1,4 @@
 class Api::EnterpriseSerializer < ActiveModel::Serializer
-  # To improve this: http://hawkins.io/2013/06/caching_object_graphs_with_active_model_serializers/
-  
   def serializable_hash
     cached_serializer_hash.merge uncached_serializer_hash
   end
@@ -43,7 +41,7 @@ class Api::CachedEnterpriseSerializer < ActiveModel::Serializer
   has_many :distributors, key: :hubs, serializer: Api::IdSerializer
   has_many :suppliers, key: :producers, serializer: Api::IdSerializer
 
-  #has_one :address, serializer: Api::AddressSerializer
+  has_one :address, serializer: Api::AddressSerializer
 
   def pickup
     object.shipping_methods.where(:require_ship_address => false).present?

app/views/producers/_filters.html.haml

@@ -1,4 +1,5 @@
-.row
+%a{"ng-click" => "filtersActive = !filtersActive"} Toggle
+.row.animate-show{"ng-show" => "filtersActive"}
   .small-12.columns.filter-box
     .row
       .small-12.large-6.columns
@@ -15,56 +16,4 @@
           Something  
     .row
       .small-12.large-6.columns
-        %ul.small-block-grid-4
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/62/original/taxons_bakery.svg?1403150973"}
-              %span Bakery
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/55/original/taxons_food-boxes.svg?1402988796"}
-              %span Boxes
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/24/original/taxons_oils_spreads.svg?1403248784"}
-              %span Oils & Spreads
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/19/original/taxons_pulses_grains.svg?1402988994"}
-              %span Pulses & Grains
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-
-          %li
-            %a
-              %render-svg{path: "/spree/taxons/58/original/taxons_fruit.svg?1402988839"}
-              %span Bakery
-
+        %taxon-selector

app/views/producers/index.html.haml

@@ -25,7 +25,7 @@
       .active_table
         %producer.active_table_node.row.animate-repeat{id: "{{producer.path}}",
         "scroll-after-load" => true,
-        "ng-repeat" => "producer in filteredProducers = (Producers.visible | filterProducers:query)",
+        "ng-repeat" => "producer in filteredProducers = (Producers.visible | filterProducers:query | taxons:TaxonSelector.active())",
         "ng-controller" => "ProducerNodeCtrl",
         "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !producer.active}",
         id: "{{producer.hash}}"}

spec/javascripts/application_spec.js

@@ -4,6 +4,7 @@
 //= require angular-sanitize
 //= require angular-mocks
 //= require angular-cookies
+//= require angular-timer.min.js
 //= require angular-backstretch.js
 //= require lodash.underscore.js
 //= require angular-flash.min.js

spec/javascripts/unit/darkswarm/filters/taxons_spec.js.coffee

@@ -15,16 +15,22 @@ describe 'filtering by taxons', ->
     }
   ]
 
-
   beforeEach ->
     module 'Darkswarm'
     inject ($filter) ->
       filterByTaxons = $filter('taxons')
 
+  it "filters by nothing", ->
+    expect(filterByTaxons(objects, [])).toBe objects
+
   it "filters by primary taxon", ->
-    expect(filterByTaxons(objects, 1)[0]).toBe objects[0]
+    expect(filterByTaxons(objects, [1])[0]).toBe objects[0]
 
   it "filters by taxons", ->
-    expect(filterByTaxons(objects, 2)[0]).toBe objects[1]
+    expect(filterByTaxons(objects, [2])[0]).toBe objects[1]
+
+  it "filters by multiple", ->
+    expect(filterByTaxons(objects, [1, 2])[0]).toBe objects[0]
+    expect(filterByTaxons(objects, [1, 2])[1]).toBe objects[1]