Make brand story animate slide down/up

app/assets/javascripts/darkswarm/all.js.coffee

@@ -15,6 +15,7 @@
 #= require ../shared/bindonce.min.js
 #= require ../shared/ng-infinite-scroll.min.js
 #= require ../shared/angular-local-storage.js
+#= require ../shared/angular-slideables.js
 #= require angularjs-file-upload
 
 

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

@@ -10,6 +10,7 @@ window.Darkswarm = angular.module("Darkswarm", ["ngResource",
   'google-maps',
   'duScroll',
   'angularFileUpload',
+  'angularSlideables'
   ]).config ($httpProvider, $tooltipProvider, $locationProvider, $anchorScrollProvider) ->
   $httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')
   $httpProvider.defaults.headers.put['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')

app/assets/javascripts/shared/angular-slideables.js

@@ -0,0 +1,55 @@
+/*
+ * Angular Slideables - A "pure" Angular implementation of jQuery-style slideToggle()
+ * Source: https://github.com/EricWVGG/AngularSlideables
+ * By Eric Jacobsen, used under MIT licence
+ */
+
+angular.module('angularSlideables', [])
+.directive('slideable', function () {
+    return {
+        restrict:'C',
+        compile: function (element, attr) {
+            // wrap tag
+            var contents = element.html();
+            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
+
+            return function postLink(scope, element, attrs) {
+                // default properties
+                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
+                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
+                element.css({
+                    'overflow': 'hidden',
+                    'height': '0px',
+                    'transitionProperty': 'height',
+                    'transitionDuration': attrs.duration,
+                    'transitionTimingFunction': attrs.easing
+                });
+            };
+        }
+    };
+})
+.directive('slideToggle', function() {
+    return {
+        restrict: 'A',
+        link: function(scope, element, attrs) {
+            var target, content;
+
+            attrs.expanded = false;
+
+            element.bind('click', function() {
+                if (!target) target = document.querySelector(attrs.slideToggle);
+                if (!content) content = target.querySelector('.slideable_content');
+
+                if(!attrs.expanded) {
+                    content.style.border = '1px solid rgba(0,0,0,0)';
+                    var y = content.clientHeight;
+                    content.style.border = 0;
+                    target.style.height = y + 'px';
+                } else {
+                    target.style.height = '0px';
+                }
+                attrs.expanded = !attrs.expanded;
+            });
+        }
+    }
+});

app/views/home/_brandstory.html.haml

@@ -4,8 +4,7 @@
       %h2 Food, unincorporated.
       %p Sometimes the best way to fix the system is to start a new one…
 
-      -# TODO: Make this slide down/up
-      .hide-show{"ng-show" => "brandStoryExpanded"}
+      #brand-story-text.hide-show.slideable
         %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.
@@ -14,6 +13,6 @@
           %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" => "toggleBrandStory()"}
+      %a.text-vbig{"slide-toggle" => "#brand-story-text", "ng-click" => "toggleBrandStory()"}
         %i.ofn-i_005-caret-down{"ng-hide" => "brandStoryExpanded"}
         %i.ofn-i_006-caret-up{  "ng-show" => "brandStoryExpanded"}