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

Built from https://develop.svn.wordpress.org/trunk@26564


git-svn-id: http://core.svn.wordpress.org/trunk@26455 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin-rtl.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 {

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 {

wp-admin/js/dashboard.js

@@ -2,11 +2,9 @@
 var ajaxWidgets, ajaxPopulateWidgets, quickPressLoad;
 
 jQuery(document).ready( function($) {
-	var $window = $( window ),
-		welcomePanel = $( '#welcome-panel' ),
+	var welcomePanel = $( '#welcome-panel' ),
 		welcomePanelHide = $('#wp_welcome_panel-hide'),
-		updateWelcomePanel,
-		metaboxHolder = $( '.metabox-holder' );
+		updateWelcomePanel;
 
 	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');
+		});
+	}
+
 } );

wp-admin/js/dashboard.min.js

@@ -1 +1 @@
-var ajaxWidgets,ajaxPopulateWidgets,quickPressLoad;jQuery(document).ready(function(a){var b,c=(a(window),a("#welcome-panel")),d=a("#wp_welcome_panel-hide");a(".metabox-holder"),b=function(b){a.post(ajaxurl,{action:"update-welcome-panel",visible:b,welcomepanelnonce:a("#welcomepanelnonce").val()})},c.hasClass("hidden")&&d.prop("checked")&&c.removeClass("hidden"),a(".welcome-panel-close, .welcome-panel-dismiss a",c).click(function(d){d.preventDefault(),c.addClass("hidden"),b(0),a("#wp_welcome_panel-hide").prop("checked",!1)}),d.click(function(){c.toggleClass("hidden",!this.checked),b(this.checked?1:0)}),ajaxWidgets=["dashboard_primary"],ajaxPopulateWidgets=function(b){function c(b,c){var d,e=a("#"+c+" div.inside:visible").find(".widget-loading");e.length&&(d=e.parent(),setTimeout(function(){d.load(ajaxurl+"?action=dashboard-widgets&widget="+c+"&pagenow="+pagenow,"",function(){d.hide().slideDown("normal",function(){a(this).css("display","")})})},500*b))}b?(b=b.toString(),-1!==a.inArray(b,ajaxWidgets)&&c(0,b)):a.each(ajaxWidgets,c)},ajaxPopulateWidgets(),postboxes.add_postbox_toggles(pagenow,{pbshow:ajaxPopulateWidgets}),quickPressLoad=function(){var b,c=a("#quickpost-action");b=a("#quick-press").submit(function(){function c(){var b=a(".drafts ul li").first();b.css("background","#fffbe5"),setTimeout(function(){b.css("background","none")},1e3)}return a("#dashboard_quick_press #publishing-action .spinner").show(),a('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').prop("disabled",!0),a.post(b.attr("action"),b.serializeArray(),function(b){a("#dashboard_quick_press .inside").html(b),a("#quick-press").removeClass("initial-form"),quickPressLoad(),c(),a("#title").focus()}),!1}),a("#publish").click(function(){c.val("post-quickpress-publish")}),a("#title, #tags-input, #content").each(function(){var b=a(this),c=a("#"+this.id+"-prompt-text");""===this.value&&c.removeClass("screen-reader-text"),c.click(function(){a(this).addClass("screen-reader-text"),b.focus()}),b.blur(function(){""===this.value&&c.removeClass("screen-reader-text")}),b.focus(function(){c.addClass("screen-reader-text")})}),a("#quick-press").on("click focusin",function(){a(this).addClass("quickpress-open"),a("#description-wrap, p.submit").slideDown(200),wpActiveEditor="content"})},quickPressLoad(),a(".meta-box-sortables").sortable("option","containment","document"),a(".show-more a").on("click",function(b){a(this).fadeOut().closest(".activity-block").find("li.hidden").fadeIn().removeClass("hidden"),b.preventDefault()})});
+var ajaxWidgets,ajaxPopulateWidgets,quickPressLoad;jQuery(document).ready(function(a){function b(){a("body").append('<div class="quick-draft-textarea-clone" style="display: none;"></div>');var b=a(".quick-draft-textarea-clone"),c=a("#content"),d=c.height(),e=a(window).height()-100;b.css({"font-family":c.css("font-family"),"font-size":c.css("font-size"),"line-height":c.css("line-height"),"padding-bottom":c.css("paddingBottom"),"padding-left":c.css("paddingLeft"),"padding-right":c.css("paddingRight"),"padding-top":c.css("paddingTop"),"white-space":"pre-wrap","word-wrap":"break-word",display:"none"}),c.on("focus input propertychange",function(){var f=a(this),g=f.val().replace(/\n/g,"<br>")+"&nbsp;",h=b.css("width",f.css("width")).html(g).outerHeight()+2;c.css("overflow-y","auto"),h===d||h>=e&&d>=e||(d=h>e?e:h,c.css("overflow-y","hidden"),f.css("height",d+"px"))})}var c,d=a("#welcome-panel"),e=a("#wp_welcome_panel-hide");c=function(b){a.post(ajaxurl,{action:"update-welcome-panel",visible:b,welcomepanelnonce:a("#welcomepanelnonce").val()})},d.hasClass("hidden")&&e.prop("checked")&&d.removeClass("hidden"),a(".welcome-panel-close, .welcome-panel-dismiss a",d).click(function(b){b.preventDefault(),d.addClass("hidden"),c(0),a("#wp_welcome_panel-hide").prop("checked",!1)}),e.click(function(){d.toggleClass("hidden",!this.checked),c(this.checked?1:0)}),ajaxWidgets=["dashboard_primary"],ajaxPopulateWidgets=function(b){function c(b,c){var d,e=a("#"+c+" div.inside:visible").find(".widget-loading");e.length&&(d=e.parent(),setTimeout(function(){d.load(ajaxurl+"?action=dashboard-widgets&widget="+c+"&pagenow="+pagenow,"",function(){d.hide().slideDown("normal",function(){a(this).css("display","")})})},500*b))}b?(b=b.toString(),-1!==a.inArray(b,ajaxWidgets)&&c(0,b)):a.each(ajaxWidgets,c)},ajaxPopulateWidgets(),postboxes.add_postbox_toggles(pagenow,{pbshow:ajaxPopulateWidgets}),quickPressLoad=function(){var c,d=a("#quickpost-action");c=a("#quick-press").submit(function(){function b(){var b=a(".drafts ul li").first();b.css("background","#fffbe5"),setTimeout(function(){b.css("background","none")},1e3)}return a("#dashboard_quick_press #publishing-action .spinner").show(),a('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').prop("disabled",!0),a.post(c.attr("action"),c.serializeArray(),function(c){a("#dashboard_quick_press .inside").html(c),a("#quick-press").removeClass("initial-form"),quickPressLoad(),b(),a("#title").focus()}),!1}),a("#publish").click(function(){d.val("post-quickpress-publish")}),a("#title, #tags-input, #content").each(function(){var b=a(this),c=a("#"+this.id+"-prompt-text");""===this.value&&c.removeClass("screen-reader-text"),c.click(function(){a(this).addClass("screen-reader-text"),b.focus()}),b.blur(function(){""===this.value&&c.removeClass("screen-reader-text")}),b.focus(function(){c.addClass("screen-reader-text")})}),a("#quick-press").on("click focusin",function(){a(this).addClass("quickpress-open"),a("#description-wrap, p.submit").slideDown(200),wpActiveEditor="content"}),b()},quickPressLoad(),a(".meta-box-sortables").sortable("option","containment","document"),a(".show-more a").on("click",function(b){a(this).fadeOut().closest(".activity-block").find("li.hidden").fadeIn().removeClass("hidden"),b.preventDefault()})});