Changeset 26564

Timestamp:

12/03/2013 05:34:46 PM (13 years ago)

Author:

helen

Message:

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

Location:

trunk/src/wp-admin

Files:

• css/wp-admin.css (modified) (1 diff)
• js/dashboard.js (modified) (3 diffs)

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

@@ -3102 +3102 @@
 }
 
+#quick-press textarea#content {
+        min-height: 90px;
+        max-height: 1300px;
+        resize: none;
+}
+
 /* Dashboard Quick Draft - Drafts list */
 

trunk/src/wp-admin/js/dashboard.js

@@ -3 +3 @@
 
 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 ) {
@@ -121 +119 @@
                         wpActiveEditor = 'content';
                 });
+
+                autoResizeTextarea();
         };
         quickPressLoad();
@@ -132 +132 @@
         });
 
+        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');
+                });
+        }
+
 } );