diff --git a/app/assets/javascripts/darkswarm/controllers/home_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/home_controller.js.coffee new file mode 100644 index 0000000000..928f9a4fa1 --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/home_controller.js.coffee @@ -0,0 +1,5 @@ +Darkswarm.controller "HomeCtrl", ($scope) -> + $scope.brandStoryExpanded = false + + $scope.toggleBrandStory = -> + $scope.brandStoryExpanded = !$scope.brandStoryExpanded diff --git a/app/views/home/_brandstory.html.haml b/app/views/home/_brandstory.html.haml index 4c69330108..b9be7cf329 100644 --- a/app/views/home/_brandstory.html.haml +++ b/app/views/home/_brandstory.html.haml @@ -3,19 +3,16 @@ .small-12.medium-8.medium-offset-2.columns.text-center %h2 Food, unincorporated. %p Sometimes the best way to fix the system is to start a new one… - - .hide-show{"ng-show" => "brandstory_expanded"} + + .hide-show{"ng-show" => "brandStoryExpanded"} %p We begin from the ground up. With farmers and growers ready to tell their stories proudly and truly. With distributors ready to connect people with products fairly and honestly. With buyers who believe that better weekly shopping decisions can seriously change the world. %p Then we need a way to make it real. A way to empower everyone who grows, sells and buys food. A way to tell all the stories, to handle all the logistics. A way to turn transaction into transformation every day. %p So we build an online marketplace that levels the playing field. It’s transparent, so it creates real relationships. It’s open source, so it‘s owned by everyone. It scales to regions and nations, so people start versions across the world. %p It works everywhere. It changes everything. - %p + %p %strong We call it Open Food Network. %p We all love food. Now we can love our food system too. - %a.text-vbig{"ng-click" => "toggle_brandstory()"} - // TODO: needs to toogle to show/hide brandstory - / Read more - %i.ofn-i_005-caret-down - - \ No newline at end of file + %a.text-vbig{"ng-click" => "toggleBrandStory()"} + %i.ofn-i_005-caret-down{"ng-hide" => "brandStoryExpanded"} + %i.ofn-i_006-caret-up{ "ng-show" => "brandStoryExpanded"} diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index e1587d9769..1637559386 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -1,19 +1,20 @@ -= render partial: "shared/menu/alert" +%div{"ng-controller" => "HomeCtrl"} + = render partial: "shared/menu/alert" -#tagline - .row - .small-12.text-center.columns - %h1 - / TODO: Rohan - logo asset & width is content manageable: - %img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "350", height: "121", title: "Open Food Network Australia"} + #tagline + .row + .small-12.text-center.columns + %h1 + / TODO: Rohan - logo asset & width is content manageable: + %img{src: "/assets/logo-color.png", srcset: "/assets/logo-color.svg", width: "350", height: "121", title: "Open Food Network Australia"} -.ng-cloak + .ng-cloak -#panes - = render partial: "home/cta1" - = render partial: "home/brandstory" - = render partial: "home/system" - = render partial: "home/cta2" - = render partial: "home/stats" + #panes + = render partial: "home/cta1" + = render partial: "home/brandstory" + = render partial: "home/system" + = render partial: "home/cta2" + = render partial: "home/stats" -= render partial: "shared/footer" + = render partial: "shared/footer" diff --git a/spec/javascripts/unit/darkswarm/controllers/home_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/home_controller_spec.js.coffee new file mode 100644 index 0000000000..8ba07e2f77 --- /dev/null +++ b/spec/javascripts/unit/darkswarm/controllers/home_controller_spec.js.coffee @@ -0,0 +1,19 @@ +describe "HomeCtrl", -> + ctrl = null + scope = null + + beforeEach -> + module 'Darkswarm' + scope = {} + + inject ($controller) -> + ctrl = $controller 'HomeCtrl', {$scope: scope} + + it "starts with the brand story contracted", -> + expect(scope.brandStoryExpanded).toBe false + + it "toggles the brand story", -> + scope.toggleBrandStory() + expect(scope.brandStoryExpanded).toBe true + scope.toggleBrandStory() + expect(scope.brandStoryExpanded).toBe false