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.

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

app/assets/javascripts/darkswarm/directives/page.js.coffee

@@ -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)

app/assets/javascripts/darkswarm/directives/page_view.js.coffee

@@ -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"

app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee

@@ -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?

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;

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

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