From e662aab004a68fe1488c0102eadada0cd803a3dd Mon Sep 17 00:00:00 2001
From: Rohan Mitchell <rohan@rohanmitchell.com>
Date: Wed, 6 May 2015 11:16:18 +1000
Subject: [PATCH] Brand story can be expanded and contracted

---
 .../controllers/home_controller.js.coffee     |  5 +++
 app/views/home/_brandstory.html.haml          | 15 ++++-----
 app/views/home/index.html.haml                | 31 ++++++++++---------
 .../home_controller_spec.js.coffee            | 19 ++++++++++++
 4 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/controllers/home_controller.js.coffee
 create mode 100644 spec/javascripts/unit/darkswarm/controllers/home_controller_spec.js.coffee

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&hellip;
-      
-      .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