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

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

@@ -4,11 +4,15 @@
       %taxon-selector{objects: "Products.products | products:query | products:showProfiles",
         "active-taxons" => "activeTaxons", "taxon-selectors" => "taxonSelectors" }
 
-      %li.more
-        %a
+      %li.more{ ng: { show: "overFlowSelectors().length > 0 || fitting", class: "{active: selectedOverFlowSelectors().length > 0}" } }
+        %a.dropdown{ dropdown: { toggle: "#more-taxons" } }
           %span
-            + {{ (taxonSelectors | filter:{ fits: false }).length }} more
+            + {{ overFlowSelectors().length }} more
           %i.ofn-i_052-point-down
+      %div.f-dropdown#more-taxons
+        %active-selector{ ng: { repeat: "selector in overFlowSelectors()", hide: "selector.fits" } }
+          %render-svg{path: "{{selector.taxon.icon}}"}
+          %span {{ selector.taxon.name }}
 
       / TODO: Needs controller for Angular Bootstrap directive for dropdown:
       / {"ng-controller" => "DropdownCtrl"}

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

@@ -5,18 +5,17 @@
   .row.animate-hide
     .small-12.columns
       .alert-box.search-alert.ng-scope{"ng-show" => "visible", "ofn-inline-alert" => ""}
-        %a.right{"ng-click" => "close()"} 
-          Clear all 
+        %a.right{"ng-click" => "close()"}
+          Clear all
           %i.ofn-i_009-close
         %span.filter-label
           Showing:
           %span.applied-properties
             Certified Organic
           %span.applied-taxons
-            Fruit & Vegetables & Dairy
-          with
-          %span.applied-search
-            "search query string"
+            {{ appliedTaxonsList() }}
+          %span.applied-search{ ng: { hide: "!query"} }
+            with {{ query }}
   .row
     .small-12.medium-6.large-5.columns
       %input#search.text{"ng-model" => "query",
@@ -30,7 +29,6 @@
   %div.pad-top{bindonce: true}
     %product.animate-repeat{"ng-controller" => "ProductNodeCtrl",
       "ng-repeat" => "product in filteredProducts = (Products.products | products:query | taxons:activeTaxons) track by product.id ", "id" => "product-{{ product.id }}"}
-
       = render partial: "shop/products/summary"
       %shop-variant{variant: 'product.master', "bo-if" => "!product.hasVariants", "id" => "variant-{{ product.master.id }}"}
       %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants track by variant.id", "id" => "variant-{{ variant.id }}"}
@@ -55,4 +53,3 @@
       %form{action: cart_path}
         %i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
         %input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? 'Updating cart...' : (Cart.empty() ? 'Cart empty' : 'Edit your cart' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
-