From 52da495399db07b6ba6725a5a8e5db916e1679c6 Mon Sep 17 00:00:00 2001 From: Michael Krotscheck Date: Thu, 8 May 2014 16:49:10 -0700 Subject: [PATCH] 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 | 35 ++++++++++--------- .../controllers/project_detail_controller.js | 11 ++++-- .../controllers/story_detail_controller.js | 9 ++++- src/app/storyboard/module.js | 8 +++-- src/app/templates/project/detail.html | 1 + src/app/templates/project/new.html | 1 + src/app/templates/story/detail.html | 2 ++ src/app/templates/story/new.html | 1 + src/index.html | 1 + 9 files changed, 47 insertions(+), 22 deletions(-) diff --git a/bower.json b/bower.json index 32f0575c..826faae3 100644 --- a/bower.json +++ b/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" + } } diff --git a/src/app/projects/controllers/project_detail_controller.js b/src/app/projects/controllers/project_detail_controller.js index 3c7e0ef3..f776e86c 100644 --- a/src/app/projects/controllers/project_detail_controller.js +++ b/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; } diff --git a/src/app/stories/controllers/story_detail_controller.js b/src/app/stories/controllers/story_detail_controller.js index c0cfbd1a..33b18e54 100644 --- a/src/app/stories/controllers/story_detail_controller.js +++ b/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; } diff --git a/src/app/storyboard/module.js b/src/app/storyboard/module.js index 8821fd10..e9cb3ee8 100644 --- a/src/app/storyboard/module.js +++ b/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'; diff --git a/src/app/templates/project/detail.html b/src/app/templates/project/detail.html index a52c97ec..9cf0dfc1 100644 --- a/src/app/templates/project/detail.html +++ b/src/app/templates/project/detail.html @@ -73,6 +73,7 @@ diff --git a/src/app/templates/story/detail.html b/src/app/templates/story/detail.html index bf97c9a6..6eb7447e 100644 --- a/src/app/templates/story/detail.html +++ b/src/app/templates/story/detail.html @@ -97,6 +97,7 @@
diff --git a/src/index.html b/src/index.html index 85c9dc0d..199e456d 100644 --- a/src/index.html +++ b/src/index.html @@ -30,6 +30,7 @@ +