diff --git a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee new file mode 100644 index 0000000000..9f4cbe2c1b --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee @@ -0,0 +1,17 @@ +Darkswarm.controller "PageSelectionCtrl", ($scope, $location) -> + $scope.selectedPage = -> + # The path looks like `/contact` for the URL `https://ofn.org/shop#/contact`. + # We remove the slash at the beginning. + page = $location.path()[1..] + + return $scope.whitelist[0] unless page + + # If the path points to an unrelated path like `/login`, stay where we were. + return $scope.lastPage unless page in $scope.whitelist + + $scope.lastPage = page + page + + $scope.whitelistPages = (pages) -> + $scope.whitelist = pages + $scope.lastPage = pages[0] diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 40007e2b6a..a4c9c1f692 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -3,7 +3,7 @@ @import "branding"; // Tabs styling -.tabset-ctrl#shop-tabs { +#shop-tabs { .tab-buttons { color: $dark-grey; @@ -23,7 +23,7 @@ } } - .tab { + .page { text-align: center; border-top: 4px solid transparent; display: inline-block; @@ -46,7 +46,7 @@ padding: 1em 2em; border: none; - &:hover, &:focus, &:active { + &:hover, &:active { color: $teal-500; } @@ -75,7 +75,7 @@ // content revealed in accordion - .tab-view { + .page-view { margin-bottom: 5em; background: none; border: none; diff --git a/app/helpers/shop_helper.rb b/app/helpers/shop_helper.rb index 29cb11b9bf..5aae96e101 100644 --- a/app/helpers/shop_helper.rb +++ b/app/helpers/shop_helper.rb @@ -35,6 +35,10 @@ module ShopHelper ].select{ |tab| tab[:show] } end + def shop_tab_names + shop_tabs.map { |tab| tab[:name] } + end + def show_home_tab? require_customer? || current_distributor.preferred_shopfront_message.present? end diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml index 434c5070a2..a703851127 100644 --- a/app/views/shopping_shared/_tabs.html.haml +++ b/app/views/shopping_shared/_tabs.html.haml @@ -3,12 +3,12 @@ - shop_tabs.each do |tab| = render "shopping_shared/tabs/#{tab[:name]}" - .tabset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } } + #shop-tabs{ ng: { controller: "PageSelectionCtrl", init: "whitelistPages(#{shop_tab_names.to_json})", cloak: true } } .tab-buttons .row .columns.small-12.large-8 - shop_tabs.each do |tab| - .tab{ id: "tab_#{tab[:name]}", name: tab[:name] } - %a{ href: 'javascript:void(0)' }=tab[:title] + .page{ "ng-class" => "{ selected: selectedPage() == '#{tab[:name]}' }" } + %a{ href: "##{tab[:name]}" }=tab[:title] - .tab-view + .page-view{ ng: {include: "'shop/' + selectedPage() + '.html'" } } diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb index 989eea5e4e..b8a6727727 100644 --- a/spec/features/consumer/shopping/shopping_spec.rb +++ b/spec/features/consumer/shopping/shopping_spec.rb @@ -27,7 +27,9 @@ feature "As a consumer I want to shop with a distributor", js: true do # Then we should see the distributor and its logo visit shop_path expect(page).to have_text distributor.name - find("#tab_about a").click + within ".tab-buttons" do + click_link "About" + end expect(first("distributor img")['src']).to include distributor.logo.url(:thumb) end @@ -36,7 +38,9 @@ feature "As a consumer I want to shop with a distributor", js: true do add_variant_to_order_cycle(exchange, variant) visit shop_path - find("#tab_producers a").click + within ".tab-buttons" do + click_link "Producers" + end expect(page).to have_content supplier.name end