From ed94cf57d3f02d423ccf01def05bef23ffe513bd Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Thu, 5 Mar 2015 15:10:42 +1100 Subject: [PATCH] Adding the 'more' box for single-line-selectors --- .../controllers/products_controller.js.coffee | 7 ++++- .../directives/single_line_selector.coffee | 28 ++++++++++++++++--- app/views/shop/products/_filters.html.haml | 10 +++++-- app/views/shop/products/_form.html.haml | 13 ++++----- 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee index e18aebb267..23c05a1de5 100644 --- a/app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee +++ b/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? diff --git a/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee b/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee index ab7d292c33..b4e94d8b9e 100644 --- a/app/assets/javascripts/darkswarm/directives/single_line_selector.coffee +++ b/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 diff --git a/app/views/shop/products/_filters.html.haml b/app/views/shop/products/_filters.html.haml index 6b8a9de1a7..3aca51e013 100644 --- a/app/views/shop/products/_filters.html.haml +++ b/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"} diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index a654c8db5e..45a8002270 100644 --- a/app/views/shop/products/_form.html.haml +++ b/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 }" } -