Merge pull request #4972 from mkllnk/4810-tab-navigation

4810 Shop tab / page navigation with browser buttons

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]

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;

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

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'" } }

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