diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index ce6f4bff77..55815272f2 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/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 { diff --git a/src/wp-admin/js/dashboard.js b/src/wp-admin/js/dashboard.js index 46f4bf4f6a..48e863ff18 100644 --- a/src/wp-admin/js/dashboard.js +++ b/src/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( '' ); + + 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), + //   is to ensure that the height of a final trailing newline is included. + textareaContent = $this.val().replace(/\n/g, '
') + ' ', + // 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'); + }); + } + } );