WordPress.org

Make WordPress Core

Ticket #26053: 26053.6.diff

File 26053.6.diff, 3.5 KB (added by markjaquith, 6 years ago)
  • src/wp-admin/css/wp-admin.css

     
    31013101        padding: 6px 7px;
    31023102}
    31033103
     3104#quick-press textarea#content {
     3105        min-height: 90px;
     3106        max-height: 1300px;
     3107}
     3108
    31043109/* Dashboard Quick Draft - Drafts list */
    31053110
    31063111#dashboard_quick_press .drafts {
  • src/wp-admin/js/dashboard.js

     
    22var ajaxWidgets, ajaxPopulateWidgets, quickPressLoad;
    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 ) {
    1210                $.post( ajaxurl, {
     
    120118                        $('#description-wrap, p.submit').slideDown(200);
    121119                        wpActiveEditor = 'content';
    122120                });
     121
     122                autoResizeTextarea();
    123123        };
    124124        quickPressLoad();
    125125
     
    131131                e.preventDefault();
    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                // No resize handle
     146                editor.css('resize', 'none');
     147
     148                // Match up textarea and clone div as much as possible.
     149                // Padding cannot be reliably retrieved using shorthand in all browsers.
     150                clone.css({
     151                        'font-family': editor.css('font-family'),
     152                        'font-size':   editor.css('font-size'),
     153                        'line-height': editor.css('line-height'),
     154                        'padding-bottom': editor.css('paddingBottom'),
     155                        'padding-left': editor.css('paddingLeft'),
     156                        'padding-right': editor.css('paddingRight'),
     157                        'padding-top': editor.css('paddingTop'),
     158                        'white-space': 'pre-wrap',
     159                        'word-wrap': 'break-word',
     160                        'display': 'none'
     161                });
     162
     163                // propertychange is for IE < 9
     164                editor.on('focus input propertychange', function() {
     165                        var $this = $(this),
     166                                // &nbsp; is to ensure that the height of a final trailing newline is included.
     167                                textareaContent = $this.val().replace(/\n/g, '<br>') + '&nbsp;',
     168                                // 2px is for border-top & border-bottom
     169                                cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2;
     170
     171                        // Default to having scrollbars
     172                        editor.css('overflow-y', 'scroll');
     173
     174                        // Only change the height if it has indeed changed and both heights are below the max.
     175                        if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) {
     176                                return;
     177                        }
     178
     179                        // Don't allow editor to exceed height of window.
     180                        // This is also bound in CSS to a max-height of 1300px to be extra safe.
     181                        if ( cloneHeight > editorMaxHeight ) {
     182                                editorHeight = editorMaxHeight;
     183                        } else {
     184                                editorHeight = cloneHeight;
     185                        }
     186
     187                        // No scrollbars as we change height
     188                        editor.css('overflow-y', 'hidden');
     189
     190                        $this.css('height', editorHeight + 'px');
     191                });
     192        }
     193
    134194} );