Auto-resize the Quick Draft textarea. props lessbloat, markjaquith, helen. fixes #26053.

git-svn-id: https://develop.svn.wordpress.org/trunk@26564 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/wp-admin.css

@@ -3101,6 +3101,12 @@ form.initial-form.quickpress-open input#title {
 	padding: 6px 7px;
 }
 
+#quick-press textarea#content {
+	min-height: 90px;
+	max-height: 1300px;
+	resize: none;
+}
+
 /* Dashboard Quick Draft - Drafts list */
 
 .js #dashboard_quick_press .drafts {

src/wp-admin/js/dashboard.js

@@ -2,11 +2,9 @@
 var ajaxWidgets, ajaxPopulateWidgets, quickPressLoad;
 
 jQuery(document).ready( function($) {
-	var $window = $( window ),
+	var welcomePanel = $( '#welcome-panel' ),
-		welcomePanel = $( '#welcome-panel' ),
 		welcomePanelHide = $('#wp_welcome_panel-hide'),
-		updateWelcomePanel,
+		updateWelcomePanel;
-		metaboxHolder = $( '.metabox-holder' );
 
 	updateWelcomePanel = function( visible ) {
 		$.post( ajaxurl, {
@@ -120,6 +118,8 @@ jQuery(document).ready( function($) {
 			$('#description-wrap, p.submit').slideDown(200);
 			wpActiveEditor = 'content';
 		});
+
+		autoResizeTextarea();
 	};
 	quickPressLoad();
 
@@ -131,4 +131,61 @@ jQuery(document).ready( function($) {
 		e.preventDefault();
 	});
 
+	function autoResizeTextarea() {
+		// Add a hidden div. We'll copy over the text from the textarea to measure its height.
+		$('body').append( '<div class="quick-draft-textarea-clone" style="display: none;"></div>' );
+
+		var clone = $('.quick-draft-textarea-clone'),
+			editor = $('#content'),
+			editorHeight = editor.height(),
+			// 100px roughly accounts for browser chrome and allows the
+			// save draft button to show on-screen at the same time.
+			editorMaxHeight = $(window).height() - 100;
+
+		// Match up textarea and clone div as much as possible.
+		// Padding cannot be reliably retrieved using shorthand in all browsers.
+		clone.css({
+			'font-family': editor.css('font-family'),
+			'font-size':   editor.css('font-size'),
+			'line-height': editor.css('line-height'),
+			'padding-bottom': editor.css('paddingBottom'),
+			'padding-left': editor.css('paddingLeft'),
+			'padding-right': editor.css('paddingRight'),
+			'padding-top': editor.css('paddingTop'),
+			'white-space': 'pre-wrap',
+			'word-wrap': 'break-word',
+			'display': 'none'
+		});
+
+		// propertychange is for IE < 9
+		editor.on('focus input propertychange', function() {
+			var $this = $(this),
+				// &nbsp; is to ensure that the height of a final trailing newline is included.
+				textareaContent = $this.val().replace(/\n/g, '<br>') + '&nbsp;',
+				// 2px is for border-top & border-bottom
+				cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2;
+
+			// Default to having scrollbars
+			editor.css('overflow-y', 'auto');
+
+			// Only change the height if it has indeed changed and both heights are below the max.
+			if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) {
+				return;
+			}
+
+			// Don't allow editor to exceed height of window.
+			// This is also bound in CSS to a max-height of 1300px to be extra safe.
+			if ( cloneHeight > editorMaxHeight ) {
+				editorHeight = editorMaxHeight;
+			} else {
+				editorHeight = cloneHeight;
+			}
+
+			// No scrollbars as we change height
+			editor.css('overflow-y', 'hidden');
+
+			$this.css('height', editorHeight + 'px');
+		});
+	}
+
 } );