Refactoring filter selectors

The FilterSelectorsService is now able to create multiple independent lists of selectors. These lists are explicitly given to the filter-selector directive. For example a group's page has one set for the group's producers and one set for the group's shops.
2026-02-05 22:26:07 +00:00 · 2016-02-04 16:08:19 +11:00
parent d0cb9008a2
commit bd19bf5f3c
15 changed files with 42 additions and 40 deletions
--- a/app/assets/javascripts/darkswarm/controllers/enterprises_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/enterprises_controller.js.coffee
@@ -1,10 +1,7 @@
 Darkswarm.controller "EnterprisesCtrl", ($scope, $rootScope, $timeout, Enterprises, Search, $document, HashNavigation, FilterSelectorsService, EnterpriseModal, enterpriseMatchesNameQueryFilter, distanceWithinKmFilter) ->
  $scope.Enterprises = Enterprises
  $scope.producers_to_filter = Enterprises.producers
-  $scope.totalActive = FilterSelectorsService.totalActive
-  $scope.clearAll = FilterSelectorsService.clearAll
-  $scope.filterText = FilterSelectorsService.filterText
-  $scope.FilterSelectorsService = FilterSelectorsService
+  $scope.filterSelectors = FilterSelectorsService.createSelectors()
  $scope.query = Search.search()
  $scope.openModal = EnterpriseModal.open
  $scope.activeTaxons = []
--- a/app/assets/javascripts/darkswarm/controllers/group_enterprises_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/group_enterprises_controller.js.coffee
@@ -1,8 +1,5 @@
 Darkswarm.controller "GroupEnterprisesCtrl", ($scope, Search, FilterSelectorsService, EnterpriseModal) ->
-  $scope.totalActive =  FilterSelectorsService.totalActive
-  $scope.clearAll =  FilterSelectorsService.clearAll
-  $scope.filterText =  FilterSelectorsService.filterText
-  $scope.FilterSelectorsService =  FilterSelectorsService
+  $scope.filterSelectors = FilterSelectorsService.createSelectors()
  $scope.query = Search.search()
  $scope.openModal = EnterpriseModal.open
  $scope.activeTaxons = []
--- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
@@ -1,10 +1,8 @@
 Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle, FilterSelectorsService, Cart, Taxons, Properties) ->
  $scope.Products = Products
  $scope.Cart = Cart
-  $scope.totalActive =  FilterSelectorsService.totalActive
-  $scope.clearAll =  FilterSelectorsService.clearAll
-  $scope.filterText =  FilterSelectorsService.filterText
-  $scope.FilterSelectorsService =  FilterSelectorsService
+  $scope.taxonSelectors = FilterSelectorsService.createSelectors()
+  $scope.propertySelectors = FilterSelectorsService.createSelectors()
  $scope.filtersActive = true
  $scope.limit = 3
  $scope.order_cycle = OrderCycle.order_cycle
@@ -33,4 +31,5 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Products, OrderCycle,

  $scope.clearAll = ->
    $scope.query = ""
-    FilterSelectorsService.clearAll()
+    $scope.taxonSelectors.clearAll()
+    $scope.propertySelectors.clearAll()
--- a/app/assets/javascripts/darkswarm/directives/filter_selector.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/filter_selector.js.coffee
@@ -1,9 +1,10 @@
-Darkswarm.directive "filterSelector",  (FilterSelectorsService)->
+Darkswarm.directive "filterSelector", ->
  # Automatically builds activeSelectors for taxons
  # Lots of magic here
  restrict: 'E'
  replace: true
  scope:
+    selectorSet: '='
    objects: "&"
    activeSelectors: "=?"
    allSelectors: "=?" # Optional
@@ -36,7 +37,7 @@ Darkswarm.directive "filterSelector",  (FilterSelectorsService)->
        if selector = selectors_by_id[id]
          selectors.push selector
        else
-          selector = selectors_by_id[id] = FilterSelectorsService.new
+          selector = selectors_by_id[id] = scope.selectorSet.new
            object: object
          selectors.push selector
      selectors
--- a/app/assets/javascripts/darkswarm/directives/shipping_type_selector.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/shipping_type_selector.js.coffee
@@ -1,4 +1,4 @@
-Darkswarm.directive "shippingTypeSelector", (FilterSelectorsService)->
+Darkswarm.directive "shippingTypeSelector", ->
  # Builds selector for shipping types
  restrict: 'E'
  replace: true
@@ -8,10 +8,10 @@ Darkswarm.directive "shippingTypeSelector", (FilterSelectorsService)->
      pickup: false
      delivery: false

-    scope.selectors = 
-      delivery: FilterSelectorsService.new
+    scope.selectors =
+      delivery: scope.filterSelectors.new
        icon: "ofn-i_039-delivery"
-      pickup: FilterSelectorsService.new
+      pickup: scope.filterSelectors.new
        icon: "ofn-i_038-takeaway"
      
    scope.emit = ->
--- a/app/assets/javascripts/darkswarm/directives/single_line_selectors.coffee
+++ b/app/assets/javascripts/darkswarm/directives/single_line_selectors.coffee
@@ -2,6 +2,7 @@ Darkswarm.directive 'singleLineSelectors', ($timeout, $filter) ->
  restrict: 'E'
  templateUrl: "single_line_selectors.html"
  scope:
+    selectors: "="
    objects: "&"
    activeSelectors: "="
    selectorName: "@activeSelectors"
--- a/app/assets/javascripts/darkswarm/services/filter_selectors.js.coffee
+++ b/app/assets/javascripts/darkswarm/services/filter_selectors.js.coffee
@@ -1,8 +1,11 @@
+# Returns a factory with the only function `createSelectors()`.
+# That function creates objects managing a list of filter selectors.
 Darkswarm.factory "FilterSelectorsService", ->
  # This stores all filters so we can access in-use counts etc
-  # Accessed via activeSelector Directive
-  new class FilterSelectorsService
-    selectors: []
+  class FilterSelectors
+    constructor: ->
+      @selectors = []
+
    new: (obj = {})->
      obj.active = false
      @selectors.push obj
@@ -26,3 +29,8 @@ Darkswarm.factory "FilterSelectorsService", ->
      for selector in @selectors
        selector.active = false
        selector.emit()
+
+  # Creates instances of `FilterSelectors`
+  new class FilterSelectorsService
+    createSelectors: ->
+      new FilterSelectors
--- a/app/assets/javascripts/templates/shipping_type_selector.html.haml
+++ b/app/assets/javascripts/templates/shipping_type_selector.html.haml
@@ -1,3 +1,4 @@
-%active-selector{"ng-repeat" => "(name, selector) in selectors"}
-  %i{"ng-class" => "selector.icon"}
-  {{ name | capitalize }}
+%ul.small-block-grid-2.medium-block-grid-4.large-block-grid-2
+  %active-selector{"ng-repeat" => "(name, selector) in selectors"}
+    %i{"ng-class" => "selector.icon"}
+    {{ name | capitalize }}
--- a/app/assets/javascripts/templates/single_line_selectors.html.haml
+++ b/app/assets/javascripts/templates/single_line_selectors.html.haml
@@ -1,5 +1,5 @@
 -# 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" }
+%filter-selector{"selector-set" => "selectors", objects: "objects()", "active-selectors" => "activeSelectors", "all-selectors" => "allSelectors" }

 %ul{ ng: { if: "overFlowSelectors().length > 0 || fitting" } }
  %li.more
--- a/app/views/groups/_hub_filters.html.haml
+++ b/app/views/groups/_hub_filters.html.haml
@@ -10,13 +10,12 @@
          .light
            = t :hubs_filter_by
          = t :hubs_filter_type
-          %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-5{ objects: "group_hubs | searchEnterprises:query | shipping:shippingTypes | showHubProfiles:show_profiles | taxonsOf", "active-selectors" => "activeTaxons" }
+          %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-5{"selector-set" => "filterSelectors", objects: "group_hubs | searchEnterprises:query | shipping:shippingTypes | showHubProfiles:show_profiles | taxonsOf", "active-selectors" => "activeTaxons"}
      .small-12.large-3.columns
        %h5.tdhead
          .light
            = t :hubs_filter_by
          = t :hubs_filter_delivery
-        %ul.small-block-grid-2.medium-block-grid-4.large-block-grid-2
-          %shipping-type-selector{results: "shippingTypes"}
+        %shipping-type-selector

 = render partial: 'shared/components/filter_box'
--- a/app/views/home/_filters.html.haml
+++ b/app/views/home/_filters.html.haml
@@ -11,13 +11,12 @@
          .light
            = t :hubs_filter_by
          = t :hubs_filter_type
-          %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-5{ objects: "visibleMatches | visible | taxonsOf", "active-selectors" => "activeTaxons" }
+          %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-5{ "selector-set" => "filterSelectors", objects: "visibleMatches | visible | taxonsOf", "active-selectors" => "activeTaxons" }
      .small-12.large-3.columns
        %h5.tdhead
          .light
            = t :hubs_filter_by
          = t :hubs_filter_delivery
-        %ul.small-block-grid-2.medium-block-grid-4.large-block-grid-2
-          %shipping-type-selector{results: "shippingTypes"}
+        %shipping-type-selector

 = render partial: 'shared/components/filter_box'
--- a/app/views/producers/_filters.html.haml
+++ b/app/views/producers/_filters.html.haml
@@ -11,5 +11,5 @@
          .light
            = t :producers_filter
          = t :producers_filter_type
-        %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-6{objects: "producers_to_filter | searchEnterprises:query | taxonsOf", "active-selectors" => "activeTaxons"}
+        %filter-selector.small-block-grid-2.medium-block-grid-4.large-block-grid-6{"selector-set" => "filterSelectors", objects: "producers_to_filter | searchEnterprises:query | taxonsOf", "active-selectors" => "activeTaxons"}
    = render partial: 'shared/components/filter_box'
--- a/app/views/shared/components/_filter_box.html.haml
+++ b/app/views/shared/components/_filter_box.html.haml
@@ -1,5 +1,5 @@
-.row.filter-box.clear-filters.animate-show{"ng-show" => "filtersActive && totalActive() > 0"}
+.row.filter-box.clear-filters.animate-show{"ng-show" => "filtersActive && filterSelectors.totalActive() > 0"}
  .small-12.columns
-    %a.button.secondary.small.expand{"ng-click" => "clearAll()"} 
+    %a.button.secondary.small.expand{"ng-click" => "filterSelectors.clearAll()"}
      %i.ofn-i_009-close
      = t :components_filters_clearfilters
--- a/app/views/shared/components/_filter_controls.html.haml
+++ b/app/views/shared/components/_filter_controls.html.haml
@@ -1,9 +1,9 @@
 .small-12.medium-6.columns
  %a.button.success.tiny.filterbtn{"ng-click" => "filtersActive = !filtersActive",
-  "ng-show" => "FilterSelectorsService.selectors.length > 0"}
-    {{ filterText(filtersActive) }}
+  "ng-show" => "filterSelectors.selectors.length > 0"}
+    {{ filterSelectors.filterText(filtersActive) }}
    %i.ofn-i_005-caret-down{"ng-show" => "!filtersActive"}
    %i.ofn-i_006-caret-up{"ng-show" => "filtersActive"}

-  %a.button.secondary.tiny.filterbtn.disabled{"ng-show" => "FilterSelectorsService.selectors.length == 0"}
+  %a.button.secondary.tiny.filterbtn.disabled{"ng-show" => "filterSelectors.selectors.length == 0"}
    = t :components_filters_nofilters
--- a/app/views/shop/products/_filters.html.haml
+++ b/app/views/shop/products/_filters.html.haml
@@ -1,5 +1,5 @@
 .filter-shopfront.taxon-selectors.text-right
-  %single-line-selectors{ objects: "Products.products | products:query | properties: activeProperties | taxonsOf", "active-selectors" => "activeTaxons"}
+  %single-line-selectors{ selectors: "taxonSelectors", objects: "Products.products | products:query | properties: activeProperties | taxonsOf", "active-selectors" => "activeTaxons"}

 .filter-shopfront.property-selectors.text-right
-  %single-line-selectors{ objects: "Products.products | products:query | taxons:activeTaxons | propertiesOf", "active-selectors" => "activeProperties"}
+  %single-line-selectors{ selectors: "propertySelectors", objects: "Products.products | products:query | taxons:activeTaxons | propertiesOf", "active-selectors" => "activeProperties"}