WordPress.org

Make WordPress Core

Ticket #28328: 28328.20.patch

File 28328.20.patch, 3.9 KB (added by stephdau, 3 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