WordPress.org

Make WordPress Core

Ticket #28328: 28328.20.patch

File 28328.20.patch, 3.9 KB (added by stephdau, 4 years ago)

Attempting to address comment:54: Implementing do-not-pin and defaulting to a minimum editor size based on the current viewport, makes some number less "magical" by making them variables devs can tweak. See

  • src/wp-admin/js/editor-expand.js

     
    2222                mceUnbind = function(){},
    2323                fixedTop = false,
    2424                fixedBottom = false,
    25                 scrollTimer;
     25                scrollTimer,
     26                pageYOffsetAtTop = 130,
     27                textEditorClonePaddingTop = 37,
     28                autoresizeMinHeight = $window.height() - 310;
    2629
    2730        $textEditorClone.insertAfter( $textEditor );
    2831
     
    3134                'font-size': $textEditor.css( 'font-size' ),
    3235                'line-height': $textEditor.css( 'line-height' ),
    3336                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     37                'padding-top': textEditorClonePaddingTop,
    3538                'white-space': 'pre-wrap',
    3639                'word-wrap': 'break-word'
    3740        } );
     
    8891
    8992                hiddenHeight = $textEditorClone.height();
    9093
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     94                if ( hiddenHeight < autoresizeMinHeight ) {
     95                        hiddenHeight = autoresizeMinHeight;
    9396                }
    9497
    9598                if ( hiddenHeight === textEditorHeight ) {
     
    112115                mceEditor = editor;
    113116
    114117                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     118                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116119
    117120                // Get the necessary UI elements.
    118121                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
     
    218221                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219222                        resize = type !== 'scroll',
    220223                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
     224                        buffer = autoresizeMinHeight + adminBarHeight,
    222225                        $top, $editor,
    223226                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    224227
     
    236239                editorPos = $editor.offset().top;
    237240                editorHeight = $editor.outerHeight();
    238241                editorWidth = $editor.outerWidth();
     242                borderWidth = 1;
    239243                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    240244
    241245                // Maybe pin the top.
     
    256260                        $tools.css( {
    257261                                position: 'fixed',
    258262                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     263                                width: editorWidth + ( borderWidth * 2 )
    260264                        } );
    261265                // Maybe unpin the top.
    262266                } else if ( fixedTop || resize ) {
     
    287291
    288292                                $tools.css( {
    289293                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
     294                                        top: editorHeight - buffer + borderWidth, // border
    291295                                        width: $contentWrap.width()
    292296                                } );
    293297                        }
     
    295299
    296300                // Maybe adjust the bottom bar.
    297301                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     302                                // +[n] for the border around the .wp-editor-container.
     303                                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
    300304                        fixedBottom = true;
    301305
    302306                        $bottom.css( {
    303307                                position: 'fixed',
    304308                                bottom: 0,
    305                                 width: editorWidth + 2,
     309                                width: editorWidth + ( borderWidth * 2 ),
    306310                                borderTop: '1px solid #dedede'
    307311                        } );
    308312                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     313                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310314                        fixedBottom = false;
    311315
    312316                        $bottom.css( {
     
    354358        function on() {
    355359                // Scroll to the top when triggering this from JS.
    356360                // Ensures toolbars are pinned properly.
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     361                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    358362                        window.scrollTo( window.pageXOffset, 0 );
    359363                }
    360364
     
    397401
    398402                // Scroll to the top when triggering this from JS.
    399403                // Ensures toolbars are reset properly.
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     404                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    401405                        window.scrollTo( window.pageXOffset, 0 );
    402406                }
    403407