Animation transition between draw and analyze.

* Use TransitionRegion to animate showing and hiding of
analyze window.
* Toggle map size when animations are complete.
* Add tests for TransitionRegion.
* Remove unused regions file.

Closes #84

src/mmw/js/src/analyze/controllers.js

@@ -15,8 +15,6 @@ var AnalyzeController = {
             return false;
         }
 
-        App.map.set('halfSize', true);
-
         var rootView = App.rootView,
             analyzeWindow = new views.AnalyzeWindow({
                 id: 'analyze-output-wrapper',

src/mmw/js/src/analyze/views.js

@@ -41,6 +41,28 @@ var AnalyzeWindow = Marionette.LayoutView.extend({
         this.detailsRegion.show(new DetailsView({
             collection: this.collection
         }));
+    },
+
+    transitionInCss: {
+        height: '0%',
+    },
+
+    animateIn: function() {
+        var self = this;
+
+        this.$el.animate({ height: '55%' }, 400, function() {
+            self.trigger('animateIn');
+            App.map.set('halfSize', true);
+        });
+    },
+
+    animateOut: function() {
+        var self = this;
+
+        this.$el.animate({ height: '0%' }, 100, function() {
+            self.trigger('animateOut');
+            App.map.set('halfSize', false);
+        });
     }
 });
 

src/mmw/js/src/core/tests.js

@@ -2,6 +2,11 @@
 
 var $ = require('jquery'),
     assert = require('chai').assert,
+    _ = require('lodash'),
+    $ = require('jquery'),
+    Marionette = require('../../shim/backbone.marionette'),
+    Backbone = require('../../shim/backbone'),
+    TransitionRegion = require('../../shim/marionette.transition-region'),
     App = require('../app');
 
 var TEST_SHAPE = {
@@ -12,14 +17,98 @@ var TEST_SHAPE = {
     }
 };
 
-suite('Core', function() {
-    test('Updating map model adds Leaflet layers', function() {
-        var mapView = App._mapView,
-            featureGroup = mapView._areaOfInterestLayer;
-        assert.equal(featureGroup.getLayers().length, 0);
-        App.map.set('areaOfInterest', TEST_SHAPE);
-        assert.equal(featureGroup.getLayers().length, 1);
-        App.map.set('areaOfInterest', null);
-        assert.equal(featureGroup.getLayers().length, 0);
+describe('Core', function() {
+    before(function() {
+        if ($('#sandbox').length === 0) {
+            $('<div>', {id: 'sandbox'}).appendTo('body');
+        }
+    });
+
+    beforeEach(function() {
+    });
+
+    afterEach(function() {
+        $('#sandbox').empty();
+    });
+
+    after(function() {
+        $('#sandbox').remove();
+    });
+
+    describe('MapView', function() {
+        it('adds layers to the map when the model attribute areaOfInterest is set', function() {
+            var mapView = App._mapView,
+                featureGroup = mapView._areaOfInterestLayer;
+            assert.equal(featureGroup.getLayers().length, 0);
+            App.map.set('areaOfInterest', TEST_SHAPE);
+            assert.equal(featureGroup.getLayers().length, 1);
+            App.map.set('areaOfInterest', null);
+            assert.equal(featureGroup.getLayers().length, 0);
+        });
+    });
+
+    describe('Regions', function() {
+        describe('TransitionRegion', function() {
+            it('calls view.animateIn and executes the correct animation when show is called', function(done) {
+                var views = createTransitionRegionWithAnimatedHeightView('50%', '0%');
+
+                views.testSubView.on('animateIn', function() {
+                    assert.equal($('.test-subview').height(), 50);
+                    done();
+                });
+
+                views.testParentView.testRegion.show(views.testSubView);
+            });
+
+            it('calls view.animateOut and executes the correct animation when empty is called', function(done) {
+                var views = createTransitionRegionWithAnimatedHeightView('50%', '0%');
+
+                views.testSubView.on('animateOut', function() {
+                    assert.equal($('.test-subview').height(), 0);
+                    done();
+                });
+
+                views.testParentView.testRegion.show(views.testSubView);
+                views.testParentView.testRegion.empty();
+            });
+        });
     });
 });
+
+function createTransitionRegionWithAnimatedHeightView(displayHeight, hiddenHeight) {
+    var TestParentView = Marionette.LayoutView.extend({
+            el: 'body',
+            regions: {
+                testRegion: {
+                    regionClass: TransitionRegion,
+                    selector: '#sandbox'
+                }
+            }
+        }),
+        TestSubView = Marionette.ItemView.extend({
+            template: false,
+            className: 'test-subview',
+            transitionInCss: {
+                height: hiddenHeight,
+            },
+
+            animateIn: function() {
+                this.$el.animate({ height: displayHeight }, 400,
+                    _.bind(this.trigger, this, 'animateIn')
+                );
+            },
+
+            animateOut: function() {
+                this.$el.animate({ height: hiddenHeight }, 100,
+                    _.bind(this.trigger, this, 'animateOut')
+                );
+            }
+        }),
+        testParentView = new TestParentView({}),
+        testSubView = new TestSubView({});
+
+    return {
+        testParentView: testParentView,
+        testSubView: testSubView
+    };
+}

src/mmw/js/src/core/views.js

@@ -3,7 +3,7 @@
 var $ = require('jquery'),
     L = require('leaflet'),
     Marionette = require('../../shim/backbone.marionette'),
-    regions = require('./regions');
+    TransitionRegion = require('../../shim/marionette.transition-region');
 
 /**
  * A basic view for showing a static message.
@@ -30,7 +30,7 @@ var RootView = Marionette.LayoutView.extend({
         geocodeSearchRegion: '#geocode-search-region',
         drawToolsRegion: '#draw-tools-region',
         footerRegion: {
-            regionClass: regions.SlidingRegion,
+            regionClass: TransitionRegion,
             selector: '#footer'
         }
     }
@@ -112,6 +112,10 @@ var MapView = Marionette.ItemView.extend({
         }
 
         this._leafletMap.invalidateSize();
+
+        if (this.model.get('areaOfInterest')) {
+            this._leafletMap.fitBounds(this._areaOfInterestLayer.getBounds());
+        }
     }
 });
 

src/mmw/js/src/draw/controllers.js

@@ -17,8 +17,6 @@ var DrawController = {
                 model: toolbarModel
             });
 
-        App.map.set('halfSize', false);
-
         App.restApi.getPredefinedShapes().then(function(data) {
             toolbarModel.set('predefinedShapes', data.shapes);
         });

src/mmw/sass/pages/_analyze.scss

@@ -1,6 +1,5 @@
 //Layout
 #analyze-output-wrapper{
-  display: none;
   position: absolute;
   left: 0;
   right: 0;