From cb623b75c1e069a3d17f06c737608a5faa4759dc Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Thu, 5 Mar 2015 18:15:14 +1100 Subject: [PATCH] Generalising taxons-selector -> filter-selector --- .../controllers/products_controller.js.coffee | 2 +- .../directives/single_line_selector.coffee | 21 ++++++----- .../directives/taxon_selector.js.coffee | 36 ++++++++----------- .../darkswarm/filters/taxons_of.js.coffee | 10 ++++++ ...or.html.haml => filter_selector.html.haml} | 4 +-- .../templates/single_line_selectors.html.haml | 12 +++---- app/views/shop/products/_filters.html.haml | 2 +- 7 files changed, 47 insertions(+), 40 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/filters/taxons_of.js.coffee rename app/assets/javascripts/templates/{taxon_selector.html.haml => filter_selector.html.haml} (55%) diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee index 2d96397cfb..458e500d99 100644 --- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee +++ b/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 diff --git a/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee b/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee index de5abd5ab8..53ef2f9e9e 100644 --- a/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee +++ b/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 diff --git a/app/assets/javascripts/darkswarm/directives/taxon_selector.js.coffee b/app/assets/javascripts/darkswarm/directives/taxon_selector.js.coffee index 069964092a..b6f7d53552 100644 --- a/app/assets/javascripts/darkswarm/directives/taxon_selector.js.coffee +++ b/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 diff --git a/app/assets/javascripts/darkswarm/filters/taxons_of.js.coffee b/app/assets/javascripts/darkswarm/filters/taxons_of.js.coffee new file mode 100644 index 0000000000..6726a5c22e --- /dev/null +++ b/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 diff --git a/app/assets/javascripts/templates/taxon_selector.html.haml b/app/assets/javascripts/templates/filter_selector.html.haml similarity index 55% rename from app/assets/javascripts/templates/taxon_selector.html.haml rename to app/assets/javascripts/templates/filter_selector.html.haml index 7bd178c2ab..576bfdf89c 100644 --- a/app/assets/javascripts/templates/taxon_selector.html.haml +++ b/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 }} diff --git a/app/assets/javascripts/templates/single_line_selectors.html.haml b/app/assets/javascripts/templates/single_line_selectors.html.haml index da48fd97e1..5be7e4f7bc 100644 --- a/app/assets/javascripts/templates/single_line_selectors.html.haml +++ b/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 }} diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml index 8581ea1607..3cb72a4853 100644 --- a/app/views/shop/products/_filters.html.haml +++ b/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