Textareas now autoresize their height.

I added the monospaced.elastic library from bower, as it already
implements everything we need for the textarea resize. Then I applied
it to several of the textareas throughout the application. In a
few cases I had to add a small timeout trigger to force a recalculation
of the text area, because the initial size check was performed while
the element in question was hidden which confuses browsers.

Change-Id: I368096c93f61142df472573e84bac2d13b4647f0

bower.json

@@ -1,19 +1,20 @@
 {
-    "name": "storyboard-webclient",
-    "version": "0.0.1",
-    "dependencies": {
-        "jquery": "2.0.3",
-        "font-awesome": "4.0",
-        "angular": "1.2.13",
-        "angular-resource": "1.2.13",
-        "angular-sanitize": "1.2.13",
-        "bootstrap": "3.1.1",
-        "angular-ui-router": "0.2.8-bowratic-tedium",
-        "angular-bootstrap": "0.10.0",
-        "angular-local-storage": "0.0.1"
-    },
-    "devDependencies": {
-        "angular-mocks": "1.2.13",
-        "angular-scenario": "1.2.13"
-    }
+  "name": "storyboard-webclient",
+  "version": "0.0.1",
+  "dependencies": {
+    "jquery": "2.0.3",
+    "font-awesome": "4.0",
+    "angular": "1.2.13",
+    "angular-resource": "1.2.13",
+    "angular-sanitize": "1.2.13",
+    "bootstrap": "3.1.1",
+    "angular-ui-router": "0.2.8-bowratic-tedium",
+    "angular-bootstrap": "0.10.0",
+    "angular-local-storage": "0.0.1",
+    "angular-elastic": "2.3.2"
+  },
+  "devDependencies": {
+    "angular-mocks": "1.2.13",
+    "angular-scenario": "1.2.13"
+  }
 }

src/app/projects/controllers/project_detail_controller.js

@@ -28,8 +28,8 @@
  * seconds. 3 is preferable.
  */
 angular.module('sb.projects').controller('ProjectDetailController',
-    function ($scope, $state, $stateParams, Project, Story, Session,
-              isSuperuser) {
+    function ($scope, $rootScope, $state, $stateParams, Project, Story,
+              Session, isSuperuser) {
         'use strict';
 
         // Parse the ID
@@ -115,6 +115,13 @@ angular.module('sb.projects').controller('ProjectDetailController',
         $scope.toggleEditMode = function () {
             if (isSuperuser) {
                 $scope.showEditForm = !$scope.showEditForm;
+
+                // Deferred timeout request for a re-rendering of elastic
+                // text fields, since the size calculation breaks when
+                // visible: false
+                setTimeout(function () {
+                    $rootScope.$broadcast('elastic:adjust');
+                }, 1);
             } else {
                 $scope.showEditForm = false;
             }

src/app/stories/controllers/story_detail_controller.js

@@ -18,7 +18,7 @@
  * Story detail &  manipulation controller.
  */
 angular.module('sb.story').controller('StoryDetailController',
-    function ($log, $scope, $state, $stateParams, $modal, Story,
+    function ($log, $rootScope, $scope, $state, $stateParams, $modal, Story,
               Session, User, Preference) {
         'use strict';
 
@@ -74,6 +74,13 @@ angular.module('sb.story').controller('StoryDetailController',
         $scope.toggleEditMode = function () {
             if (Session.isLoggedIn()) {
                 $scope.showEditForm = !$scope.showEditForm;
+
+                // Deferred timeout request for a re-rendering of elastic
+                // text fields, since the size calculation breaks when
+                // visible: false
+                setTimeout(function () {
+                    $rootScope.$broadcast('elastic:adjust');
+                }, 1);
             } else {
                 $scope.showEditForm = false;
             }

src/app/storyboard/module.js

@@ -24,9 +24,10 @@
  */
 angular.module('storyboard',
     [ 'sb.services', 'sb.templates', 'sb.dashboard', 'sb.pages', 'sb.projects',
-        'sb.auth', 'sb.story', 'sb.profile', 'ui.router', 'ui.bootstrap'])
+        'sb.auth', 'sb.story', 'sb.profile', 'ui.router', 'ui.bootstrap',
+        'monospaced.elastic'])
     .config(function ($provide, $urlRouterProvider, $locationProvider,
-                      $httpProvider) {
+                      $httpProvider, msdElasticConfig) {
         'use strict';
 
         // Default URL hashbang route
@@ -38,6 +39,9 @@ angular.module('storyboard',
         // Attach common request headers out of courtesy to the API
         $httpProvider.defaults.headers.common['X-Client'] = 'Storyboard';
 
+        // Globally set an additional amount of whitespace to the end of our
+        // textarea elastic resizing.
+        msdElasticConfig.append = '\n';
     })
     .run(function ($log, $rootScope, $state) {
         'use strict';

src/app/templates/project/detail.html

@@ -73,6 +73,7 @@
             <textarea placeholder="Enter a project description here"
                       class="form-control"
                       rows="3"
+                      msd-elastic
                       required
                       ng-disabled="isUpdating"
                       ng-model="project.description">

src/app/templates/project/new.html

@@ -47,6 +47,7 @@
                         <textarea id="description"
                                   class="form-control"
                                   ng-model="newProject.description"
+                                  msd-elastic
                                   required
                                   placeholder="A brief project description">
                         </textarea>

src/app/templates/story/detail.html

@@ -97,6 +97,7 @@
         <div class="form-group">
             <textarea placeholder="Enter a story description here"
                       class="form-control context-edit"
+                      msd-elastic
                       rows="3"
                       required
                       ng-disabled="isUpdating"
@@ -205,6 +206,7 @@
                     <textarea id="comment"
                               placeholder="Enter your comment here"
                               class="form-control"
+                              msd-elastic
                               rows="3"
                               required
                               ng-disabled="isSavingComment"

src/app/templates/story/new.html

@@ -32,6 +32,7 @@
                             <textarea id="description"
                                       class="form-control"
                                       ng-model="story.description"
+                                      msd-elastic
                                       required
                                       placeholder="A brief story description">
                             </textarea>

src/index.html

@@ -30,6 +30,7 @@
     <!-- build:js(bower_components) js/libs.js -->
     <script src="jquery/jquery.js"></script>
     <script src="angular/angular.js"></script>
+    <script src="angular-elastic/elastic.js"></script>
     <script src="angular-bootstrap/ui-bootstrap.js"></script>
     <script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="angular-ui-router/release/angular-ui-router.js"></script>