diff --git a/app/assets/javascripts/darkswarm/all.js.coffee b/app/assets/javascripts/darkswarm/all.js.coffee index 68bc01b6c1..f4303f8037 100644 --- a/app/assets/javascripts/darkswarm/all.js.coffee +++ b/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 diff --git a/app/assets/javascripts/darkswarm/darkswarm.js.coffee b/app/assets/javascripts/darkswarm/darkswarm.js.coffee index e8ea9dce3c..a062ead058 100644 --- a/app/assets/javascripts/darkswarm/darkswarm.js.coffee +++ b/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') diff --git a/app/assets/javascripts/shared/angular-slideables.js b/app/assets/javascripts/shared/angular-slideables.js new file mode 100644 index 0000000000..0279c0f4f2 --- /dev/null +++ b/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('
'); + + 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; + }); + } + } +}); diff --git a/app/views/home/_brandstory.html.haml b/app/views/home/_brandstory.html.haml index 0db6440db4..40e5b77bf4 100644 --- a/app/views/home/_brandstory.html.haml +++ b/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"}