Changeset 26564

Timestamp:

12/03/2013 05:34:46 PM (10 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');
+        });
+    }
+
 } );