WordPress.org

Make WordPress Core

Changeset 26564


Ignore:
Timestamp:
12/03/2013 05:34:46 PM (6 years ago)
Author:
helen
Message:

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

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26563 r26564  
    31023102}
    31033103
     3104#quick-press textarea#content {
     3105    min-height: 90px;
     3106    max-height: 1300px;
     3107    resize: none;
     3108}
     3109
    31043110/* Dashboard Quick Draft - Drafts list */
    31053111
  • trunk/src/wp-admin/js/dashboard.js

    r26429 r26564  
    33
    44jQuery(document).ready( function($) {
    5     var $window = $( window ),
    6         welcomePanel = $( '#welcome-panel' ),
     5    var welcomePanel = $( '#welcome-panel' ),
    76        welcomePanelHide = $('#wp_welcome_panel-hide'),
    8         updateWelcomePanel,
    9         metaboxHolder = $( '.metabox-holder' );
     7        updateWelcomePanel;
    108
    119    updateWelcomePanel = function( visible ) {
     
    121119            wpActiveEditor = 'content';
    122120        });
     121
     122        autoResizeTextarea();
    123123    };
    124124    quickPressLoad();
     
    132132    });
    133133
     134    function autoResizeTextarea() {
     135        // Add a hidden div. We'll copy over the text from the textarea to measure its height.
     136        $('body').append( '<div class="quick-draft-textarea-clone" style="display: none;"></div>' );
     137
     138        var clone = $('.quick-draft-textarea-clone'),
     139            editor = $('#content'),
     140            editorHeight = editor.height(),
     141            // 100px roughly accounts for browser chrome and allows the
     142            // save draft button to show on-screen at the same time.
     143            editorMaxHeight = $(window).height() - 100;
     144
     145        // Match up textarea and clone div as much as possible.
     146        // Padding cannot be reliably retrieved using shorthand in all browsers.
     147        clone.css({
     148            'font-family': editor.css('font-family'),
     149            'font-size':   editor.css('font-size'),
     150            'line-height': editor.css('line-height'),
     151            'padding-bottom': editor.css('paddingBottom'),
     152            'padding-left': editor.css('paddingLeft'),
     153            'padding-right': editor.css('paddingRight'),
     154            'padding-top': editor.css('paddingTop'),
     155            'white-space': 'pre-wrap',
     156            'word-wrap': 'break-word',
     157            'display': 'none'
     158        });
     159
     160        // propertychange is for IE < 9
     161        editor.on('focus input propertychange', function() {
     162            var $this = $(this),
     163                // &nbsp; is to ensure that the height of a final trailing newline is included.
     164                textareaContent = $this.val().replace(/\n/g, '<br>') + '&nbsp;',
     165                // 2px is for border-top & border-bottom
     166                cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2;
     167
     168            // Default to having scrollbars
     169            editor.css('overflow-y', 'auto');
     170
     171            // Only change the height if it has indeed changed and both heights are below the max.
     172            if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) {
     173                return;
     174            }
     175
     176            // Don't allow editor to exceed height of window.
     177            // This is also bound in CSS to a max-height of 1300px to be extra safe.
     178            if ( cloneHeight > editorMaxHeight ) {
     179                editorHeight = editorMaxHeight;
     180            } else {
     181                editorHeight = cloneHeight;
     182            }
     183
     184            // No scrollbars as we change height
     185            editor.css('overflow-y', 'hidden');
     186
     187            $this.css('height', editorHeight + 'px');
     188        });
     189    }
     190
    134191} );
Note: See TracChangeset for help on using the changeset viewer.