From 8aa892136e07fc97d9505fe009ffce3b7ba4027d Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 4 Mar 2020 14:47:40 +1100
Subject: [PATCH 01/11] Duplicate shop tab code for rewrite

The old code is still used on the user page.
---
 .../darkswarm/directives/page.js.coffee       | 12 ++++++++
 .../darkswarm/directives/page_view.js.coffee  | 15 ++++++++++
 .../directives/pageset_ctrl.js.coffee         | 30 +++++++++++++++++++
 .../stylesheets/darkswarm/shop_tabs.css.scss  |  6 ++--
 app/views/shopping_shared/_tabs.html.haml     |  6 ++--
 5 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/page.js.coffee
 create mode 100644 app/assets/javascripts/darkswarm/directives/page_view.js.coffee
 create mode 100644 app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee

diff --git a/app/assets/javascripts/darkswarm/directives/page.js.coffee b/app/assets/javascripts/darkswarm/directives/page.js.coffee
new file mode 100644
index 0000000000..9ae6f8267c
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/page.js.coffee
@@ -0,0 +1,12 @@
+Darkswarm.directive "page", ->
+  restrict: "C"
+  require: "^^pagesetCtrl"
+  scope:
+    name: "@"
+  link: (scope, element, attrs, ctrl) ->
+    element.on "click", ->
+      scope.$apply ->
+        ctrl.toggle(scope.name)
+
+    ctrl.registerSelectionListener (prefix, selection) ->
+      element.toggleClass('selected', selection == scope.name)
diff --git a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
new file mode 100644
index 0000000000..76f9402300
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
@@ -0,0 +1,15 @@
+Darkswarm.directive "pageView", ->
+  restrict: "C"
+  require: "^^pagesetCtrl"
+  template: "<div ng-include='template'></div>"
+  scope:
+    templates: "="
+  link: (scope, element, attrs, ctrl) ->
+    scope.template = null
+
+    ctrl.registerSelectionListener (prefix, selection) ->
+      if selection?
+        selection = "#{prefix}/#{selection}" if prefix?
+        scope.template = "#{selection}.html"
+      else
+        scope.template = null
diff --git a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
new file mode 100644
index 0000000000..b880356245
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
@@ -0,0 +1,30 @@
+Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
+  restrict: "C"
+  scope:
+    id: "@"
+    selected: "@"
+    navigate: "="
+    prefix: "@?"
+    alwaysopen: "="
+  controller: ($scope, $element) ->
+    if $scope.navigate
+      path = $location.path()?.match(/^\/\w+$/)?[0]
+      $scope.selected = path[1..] if path
+
+    this.toggle = (name) ->
+      state = if $scope.alwaysopen then 'open' else null
+      Tabsets.toggle($scope.id, name, state)
+
+    this.select = (selection) ->
+      $scope.$broadcast("selection:changed", selection)
+      $element.toggleClass("expanded", selection?)
+      $location.path(selection) if $scope.navigate
+
+    this.registerSelectionListener = (callback) ->
+      $scope.$on "selection:changed", (event, selection) ->
+        callback($scope.prefix, selection)
+
+    this
+
+  link: (scope, element, attrs, ctrl) ->
+    Tabsets.register(ctrl, scope.id, scope.selected)
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index 40007e2b6a..a913096417 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 {
+.pageset-ctrl#shop-tabs {
 
   .tab-buttons {
     color: $dark-grey;
@@ -23,7 +23,7 @@
     }
   }
 
-  .tab {
+  .page {
     text-align: center;
     border-top: 4px solid transparent;
     display: inline-block;
@@ -75,7 +75,7 @@
 
   // content revealed in accordion
 
-  .tab-view {
+  .page-view {
     margin-bottom: 5em;
     background: none;
     border: none;
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 434c5070a2..8b80141f5a 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 } }
+  .pageset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
     .tab-buttons
       .row
         .columns.small-12.large-8
           - shop_tabs.each do |tab|
-            .tab{ id: "tab_#{tab[:name]}", name: tab[:name] }
+            .page{ id: "tab_#{tab[:name]}", name: tab[:name] }
               %a{ href: 'javascript:void(0)' }=tab[:title]
 
-    .tab-view
+    .page-view

From 42ca7888c07bac6663476099c6370640b949c625 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 4 Mar 2020 14:50:57 +1100
Subject: [PATCH 02/11] Simplify by reducing unused options

---
 .../darkswarm/directives/pageset_ctrl.js.coffee      | 12 ++++--------
 app/views/shopping_shared/_tabs.html.haml            |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
index b880356245..926b97ee28 100644
--- a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
@@ -3,22 +3,18 @@ Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
   scope:
     id: "@"
     selected: "@"
-    navigate: "="
     prefix: "@?"
-    alwaysopen: "="
   controller: ($scope, $element) ->
-    if $scope.navigate
-      path = $location.path()?.match(/^\/\w+$/)?[0]
-      $scope.selected = path[1..] if path
+    path = $location.path()?.match(/^\/\w+$/)?[0]
+    $scope.selected = path[1..] if path
 
     this.toggle = (name) ->
-      state = if $scope.alwaysopen then 'open' else null
-      Tabsets.toggle($scope.id, name, state)
+      Tabsets.toggle($scope.id, name, "open")
 
     this.select = (selection) ->
       $scope.$broadcast("selection:changed", selection)
       $element.toggleClass("expanded", selection?)
-      $location.path(selection) if $scope.navigate
+      $location.path(selection)
 
     this.registerSelectionListener = (callback) ->
       $scope.$on "selection:changed", (event, selection) ->
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 8b80141f5a..95b7e0dcee 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -3,7 +3,7 @@
   - shop_tabs.each do |tab|
     = render "shopping_shared/tabs/#{tab[:name]}"
 
-  .pageset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
+  .pageset-ctrl#shop-tabs{ selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
     .tab-buttons
       .row
         .columns.small-12.large-8

From e3f840f48cbd165048cc1e3d2c2d1039e4f91c51 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 4 Mar 2020 15:18:00 +1100
Subject: [PATCH 03/11] Remove dependency to Tabsets

---
 .../javascripts/darkswarm/directives/pageset_ctrl.js.coffee | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
index 926b97ee28..c0ed9cbcf8 100644
--- a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
@@ -1,4 +1,4 @@
-Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
+Darkswarm.directive "pagesetCtrl", ($location) ->
   restrict: "C"
   scope:
     id: "@"
@@ -9,7 +9,7 @@ Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
     $scope.selected = path[1..] if path
 
     this.toggle = (name) ->
-      Tabsets.toggle($scope.id, name, "open")
+      this.select(name)
 
     this.select = (selection) ->
       $scope.$broadcast("selection:changed", selection)
@@ -23,4 +23,4 @@ Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
     this
 
   link: (scope, element, attrs, ctrl) ->
-    Tabsets.register(ctrl, scope.id, scope.selected)
+    ctrl.select(scope.selected) if scope.selected?

From bf26a26743bebd47e4f44f5646589f2829226049 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 4 Mar 2020 15:39:30 +1100
Subject: [PATCH 04/11] Reduce complexity by removing unused code branch

---
 .../javascripts/darkswarm/directives/page_view.js.coffee    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
index 76f9402300..2153611d73 100644
--- a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
@@ -8,8 +8,4 @@ Darkswarm.directive "pageView", ->
     scope.template = null
 
     ctrl.registerSelectionListener (prefix, selection) ->
-      if selection?
-        selection = "#{prefix}/#{selection}" if prefix?
-        scope.template = "#{selection}.html"
-      else
-        scope.template = null
+      scope.template = "#{prefix}/#{selection}.html"

From ea80ae3832cb81c8fc92648fdcbcf31b39e3721f Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Thu, 5 Mar 2020 17:17:06 +1100
Subject: [PATCH 05/11] Enable page navigation via URL fragment

The broadcasting of notifications didn't update properly and I couldn't
find a way to listen to $location updates. I replaced the three
intertwined directives with one controller and a bit more HTML code. Now
we have only one scope that listens to $location and all browser actions
like the back button is reflected in the page.

As nice side-effect, the menu links have now the right destination so
that you can copy the link and paste it into another browser window.

40 lines less code.
---
 .../controllers/pageset_ctrl.js.coffee        | 10 +++++++
 .../darkswarm/directives/page.js.coffee       | 12 ---------
 .../darkswarm/directives/page_view.js.coffee  | 11 --------
 .../directives/pageset_ctrl.js.coffee         | 26 -------------------
 .../stylesheets/darkswarm/shop_tabs.css.scss  |  2 +-
 app/views/shopping_shared/_tabs.html.haml     |  8 +++---
 .../consumer/shopping/shopping_spec.rb        |  8 ++++--
 7 files changed, 21 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
 delete mode 100644 app/assets/javascripts/darkswarm/directives/page.js.coffee
 delete mode 100644 app/assets/javascripts/darkswarm/directives/page_view.js.coffee
 delete mode 100644 app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee

diff --git a/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
new file mode 100644
index 0000000000..2417469135
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
@@ -0,0 +1,10 @@
+Darkswarm.controller "PagesetCtrl", ($scope, $location) ->
+  $scope.selected = ->
+    path = $location.path()?.match(/^\/\w+$/)?[0]
+    if path
+      path[1..]
+    else
+      $scope.defaultPage
+
+  $scope.selectDefault = (selection) ->
+    $scope.defaultPage = selection
diff --git a/app/assets/javascripts/darkswarm/directives/page.js.coffee b/app/assets/javascripts/darkswarm/directives/page.js.coffee
deleted file mode 100644
index 9ae6f8267c..0000000000
--- a/app/assets/javascripts/darkswarm/directives/page.js.coffee
+++ /dev/null
@@ -1,12 +0,0 @@
-Darkswarm.directive "page", ->
-  restrict: "C"
-  require: "^^pagesetCtrl"
-  scope:
-    name: "@"
-  link: (scope, element, attrs, ctrl) ->
-    element.on "click", ->
-      scope.$apply ->
-        ctrl.toggle(scope.name)
-
-    ctrl.registerSelectionListener (prefix, selection) ->
-      element.toggleClass('selected', selection == scope.name)
diff --git a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
deleted file mode 100644
index 2153611d73..0000000000
--- a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
+++ /dev/null
@@ -1,11 +0,0 @@
-Darkswarm.directive "pageView", ->
-  restrict: "C"
-  require: "^^pagesetCtrl"
-  template: "<div ng-include='template'></div>"
-  scope:
-    templates: "="
-  link: (scope, element, attrs, ctrl) ->
-    scope.template = null
-
-    ctrl.registerSelectionListener (prefix, selection) ->
-      scope.template = "#{prefix}/#{selection}.html"
diff --git a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
deleted file mode 100644
index c0ed9cbcf8..0000000000
--- a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
+++ /dev/null
@@ -1,26 +0,0 @@
-Darkswarm.directive "pagesetCtrl", ($location) ->
-  restrict: "C"
-  scope:
-    id: "@"
-    selected: "@"
-    prefix: "@?"
-  controller: ($scope, $element) ->
-    path = $location.path()?.match(/^\/\w+$/)?[0]
-    $scope.selected = path[1..] if path
-
-    this.toggle = (name) ->
-      this.select(name)
-
-    this.select = (selection) ->
-      $scope.$broadcast("selection:changed", selection)
-      $element.toggleClass("expanded", selection?)
-      $location.path(selection)
-
-    this.registerSelectionListener = (callback) ->
-      $scope.$on "selection:changed", (event, selection) ->
-        callback($scope.prefix, selection)
-
-    this
-
-  link: (scope, element, attrs, ctrl) ->
-    ctrl.select(scope.selected) if scope.selected?
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index a913096417..4da15cbe1b 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
-.pageset-ctrl#shop-tabs {
+#shop-tabs {
 
   .tab-buttons {
     color: $dark-grey;
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 95b7e0dcee..eb663613a5 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]}"
 
-  .pageset-ctrl#shop-tabs{ selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
+  #shop-tabs{ ng: { controller: "PagesetCtrl", init: "selectDefault('#{shop_tabs.first[:name]}')", cloak: true } }
     .tab-buttons
       .row
         .columns.small-12.large-8
           - shop_tabs.each do |tab|
-            .page{ id: "tab_#{tab[:name]}", name: tab[:name] }
-              %a{ href: 'javascript:void(0)' }=tab[:title]
+            .page{ "ng-class" => "{ selected: selected() == '#{tab[:name]}' }" }
+              %a{ href: "##{tab[:name]}" }=tab[:title]
 
-    .page-view
+    .page-view{ "ng-include" => '"shop/" + selected() + ".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
 

From a21ef195296d685d2c02b787825a4e138ed1d505 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 11 Mar 2020 10:53:20 +1100
Subject: [PATCH 06/11] Render only shop tabs within shop

The include directive was listening to all $location paths including
`#login` which is unrelated to the shop tabs. Angular tried to load the
template `shop/login.html` which doesn't exist.

We now whitelist the templates that can be included by having an include
tag for each shop tab/page.
---
 app/views/shopping_shared/_tabs.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index eb663613a5..4f6a2192ea 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -11,4 +11,5 @@
             .page{ "ng-class" => "{ selected: selected() == '#{tab[:name]}' }" }
               %a{ href: "##{tab[:name]}" }=tab[:title]
 
-    .page-view{ "ng-include" => '"shop/" + selected() + ".html"' }
+    - shop_tabs.each do |tab|
+      .page-view{ ng: {include: "'shop/#{tab[:name]}.html'", if: "selected() == '#{tab[:name]}'" } }

From 4b8d9d18d7fdcfdd4e2110b90fe36c1e1705ffdd Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 11 Mar 2020 10:56:21 +1100
Subject: [PATCH 07/11] Simplify PagesetCtrl

---
 .../darkswarm/controllers/pageset_ctrl.js.coffee            | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
index 2417469135..9a7cd3af6b 100644
--- a/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
@@ -1,10 +1,6 @@
 Darkswarm.controller "PagesetCtrl", ($scope, $location) ->
   $scope.selected = ->
-    path = $location.path()?.match(/^\/\w+$/)?[0]
-    if path
-      path[1..]
-    else
-      $scope.defaultPage
+    $location.path()[1..] || $scope.defaultPage
 
   $scope.selectDefault = (selection) ->
     $scope.defaultPage = selection

From 17751c448f1e24a61790d08a5817739af33e9f0c Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Thu, 12 Mar 2020 09:36:46 +1100
Subject: [PATCH 08/11] Rename PageSelectionCtrl for clarity

---
 .../{pageset_ctrl.js.coffee => page_selection_ctrl.js.coffee}   | 2 +-
 app/views/shopping_shared/_tabs.html.haml                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename app/assets/javascripts/darkswarm/controllers/{pageset_ctrl.js.coffee => page_selection_ctrl.js.coffee} (69%)

diff --git a/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
similarity index 69%
rename from app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
rename to app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
index 9a7cd3af6b..9d2d097fee 100644
--- a/app/assets/javascripts/darkswarm/controllers/pageset_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
@@ -1,4 +1,4 @@
-Darkswarm.controller "PagesetCtrl", ($scope, $location) ->
+Darkswarm.controller "PageSelectionCtrl", ($scope, $location) ->
   $scope.selected = ->
     $location.path()[1..] || $scope.defaultPage
 
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 4f6a2192ea..6f2119b4c7 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -3,7 +3,7 @@
   - shop_tabs.each do |tab|
     = render "shopping_shared/tabs/#{tab[:name]}"
 
-  #shop-tabs{ ng: { controller: "PagesetCtrl", init: "selectDefault('#{shop_tabs.first[:name]}')", cloak: true } }
+  #shop-tabs{ ng: { controller: "PageSelectionCtrl", init: "selectDefault('#{shop_tabs.first[:name]}')", cloak: true } }
     .tab-buttons
       .row
         .columns.small-12.large-8

From 1d42ce885b2f6901495933f61faa1af2b187bd09 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Thu, 12 Mar 2020 11:15:56 +1100
Subject: [PATCH 09/11] Stay on shop page when opening login modal

The login modal changes the URL to `#/login` which interfers with our
shop pages. In order to show the right shop page, we need to know which
pages are valid and where we have been before we clicked on Login.
---
 .../controllers/page_selection_ctrl.js.coffee | 19 +++++++++++++++----
 app/helpers/shop_helper.rb                    |  4 ++++
 app/views/shopping_shared/_tabs.html.haml     |  7 +++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
index 9d2d097fee..cb2515ec7a 100644
--- a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
@@ -1,6 +1,17 @@
 Darkswarm.controller "PageSelectionCtrl", ($scope, $location) ->
-  $scope.selected = ->
-    $location.path()[1..] || $scope.defaultPage
+  $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..]
+    if page in $scope.whitelist
+      $scope.lastPage = page
+      page
+    else if page
+      # The path points to an unrelated path like `/login`. Stay where we were.
+      $scope.lastPage
+    else
+      $scope.whitelist[0]
 
-  $scope.selectDefault = (selection) ->
-    $scope.defaultPage = selection
+  $scope.whitelistPages = (pages) ->
+    $scope.whitelist = pages
+    $scope.lastPage = pages[0]
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 6f2119b4c7..a703851127 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -3,13 +3,12 @@
   - shop_tabs.each do |tab|
     = render "shopping_shared/tabs/#{tab[:name]}"
 
-  #shop-tabs{ ng: { controller: "PageSelectionCtrl", init: "selectDefault('#{shop_tabs.first[:name]}')", 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|
-            .page{ "ng-class" => "{ selected: selected() == '#{tab[:name]}' }" }
+            .page{ "ng-class" => "{ selected: selectedPage() == '#{tab[:name]}' }" }
               %a{ href: "##{tab[:name]}" }=tab[:title]
 
-    - shop_tabs.each do |tab|
-      .page-view{ ng: {include: "'shop/#{tab[:name]}.html'", if: "selected() == '#{tab[:name]}'" } }
+    .page-view{ ng: {include: "'shop/' + selectedPage() + '.html'" } }

From 5a9b5660f196ab86227f3d1dccdfeac8de58dd7a Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 18 Mar 2020 09:31:28 +1100
Subject: [PATCH 10/11] Simplify logic in PageSelectionCtrl

---
 .../controllers/page_selection_ctrl.js.coffee    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
index cb2515ec7a..9f4cbe2c1b 100644
--- a/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/page_selection_ctrl.js.coffee
@@ -3,14 +3,14 @@ Darkswarm.controller "PageSelectionCtrl", ($scope, $location) ->
     # The path looks like `/contact` for the URL `https://ofn.org/shop#/contact`.
     # We remove the slash at the beginning.
     page = $location.path()[1..]
-    if page in $scope.whitelist
-      $scope.lastPage = page
-      page
-    else if page
-      # The path points to an unrelated path like `/login`. Stay where we were.
-      $scope.lastPage
-    else
-      $scope.whitelist[0]
+
+    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

From 7e00f78a7743e3a800b4cb98494b25174e7a3216 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Thu, 19 Mar 2020 15:49:29 +1100
Subject: [PATCH 11/11] Highlight menu item only when active or hovered

The `:focus` selector meant that every link that was clicked on was
still highlighted after going back or forward in the browser history. We
don't need that selector because tabs you click on are then active and
are highlighted anyway.
---
 app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index 4da15cbe1b..a4c9c1f692 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -46,7 +46,7 @@
       padding: 1em 2em;
       border: none;
 
-      &:hover, &:focus, &:active {
+      &:hover, &:active {
         color: $teal-500;
       }