From ea80ae3832cb81c8fc92648fdcbcf31b39e3721f Mon Sep 17 00:00:00 2001 From: Maikel Linke Date: Thu, 5 Mar 2020 17:17:06 +1100 Subject: [PATCH] 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: "
" - 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