WordPress.org

Make WordPress Core

Ticket #28328: 28328.22.patch

File 28328.22.patch, 5.2 KB (added by stephdau, 3 years ago)

This improves the sidebar pinning 1st implemented in attachment:28328.21.patch, for the new post screen. See next comment for gotchas.

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

     
    1616                $textEditorClone = $( '<div id="content-textarea-clone"></div>' ), 
    1717                $bottom = $( '#post-status-info' ), 
    1818                $statusBar, 
     19                $sideSortables = $( '#side-sortables' ), 
    1920                fullscreen = window.wp.editor && window.wp.editor.fullscreen, 
    2021                mceEditor, 
    2122                mceBind = function(){}, 
     
    2223                mceUnbind = function(){}, 
    2324                fixedTop = false, 
    2425                fixedBottom = false, 
    25                 scrollTimer; 
     26                scrollTimer, 
     27                pageYOffsetAtTop = 130, 
     28                textEditorClonePaddingTop = 37, 
     29                autoresizeMinHeight = $window.height() - 310; 
    2630 
    2731        $textEditorClone.insertAfter( $textEditor ); 
    2832 
     
    3135                'font-size': $textEditor.css( 'font-size' ), 
    3236                'line-height': $textEditor.css( 'line-height' ), 
    3337                'padding': $textEditor.css( 'padding' ), 
    34                 'padding-top': 37, 
     38                'padding-top': textEditorClonePaddingTop, 
    3539                'white-space': 'pre-wrap', 
    3640                'word-wrap': 'break-word' 
    3741        } ); 
     
    8892 
    8993                hiddenHeight = $textEditorClone.height(); 
    9094 
    91                 if ( hiddenHeight < 300 ) { 
    92                         hiddenHeight = 300; 
     95                if ( hiddenHeight < autoresizeMinHeight ) { 
     96                        hiddenHeight = autoresizeMinHeight; 
    9397                } 
    9498 
    9599                if ( hiddenHeight === textEditorHeight ) { 
     
    112116                mceEditor = editor; 
    113117 
    114118                // Set the minimum height to the initial viewport height. 
    115                 editor.settings.autoresize_min_height = 300; 
     119                editor.settings.autoresize_min_height = autoresizeMinHeight; 
    116120 
    117121                // Get the necessary UI elements. 
    118122                $visualTop = $contentWrap.find( '.mce-toolbar-grp' ); 
     
    218222                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0, 
    219223                        resize = type !== 'scroll', 
    220224                        visual = ( mceEditor && ! mceEditor.isHidden() ), 
    221                         buffer = 200, 
     225                        buffer = autoresizeMinHeight + adminBarHeight, 
    222226                        $top, $editor, 
    223227                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight; 
    224228 
     
    236240                editorPos = $editor.offset().top; 
    237241                editorHeight = $editor.outerHeight(); 
    238242                editorWidth = $editor.outerWidth(); 
     243                borderWidth = 1; 
    239244                statusBarHeight = visual ? $statusBar.outerHeight() : 0; 
    240245 
    241246                // Maybe pin the top. 
     
    256261                        $tools.css( { 
    257262                                position: 'fixed', 
    258263                                top: adminBarHeight, 
    259                                 width: editorWidth + 2 
     264                                width: editorWidth + ( borderWidth * 2 ) 
    260265                        } ); 
    261266                // Maybe unpin the top. 
    262267                } else if ( fixedTop || resize ) { 
     
    287292 
    288293                                $tools.css( { 
    289294                                        position: 'absolute', 
    290                                         top: editorHeight - buffer + 1, // border 
     295                                        top: editorHeight - buffer + borderWidth, // border 
    291296                                        width: $contentWrap.width() 
    292297                                } ); 
    293298                        } 
     
    295300 
    296301                // Maybe adjust the bottom bar. 
    297302                if ( ( ! fixedBottom || resize ) && 
    298                                 // + 1 for the border around the .wp-editor-container. 
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) { 
     303                                // +[n] for the border around the .wp-editor-container. 
     304                                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) { 
    300305                        fixedBottom = true; 
    301306 
    302307                        $bottom.css( { 
    303308                                position: 'fixed', 
    304309                                bottom: 0, 
    305                                 width: editorWidth + 2, 
     310                                width: editorWidth + ( borderWidth * 2 ), 
    306311                                borderTop: '1px solid #dedede' 
    307312                        } ); 
    308313                } else if ( ( fixedBottom || resize ) && 
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) { 
     314                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) { 
    310315                        fixedBottom = false; 
    311316 
    312317                        $bottom.css( { 
     
    317322                        } ); 
    318323                } 
    319324 
     325                // Handle sidebar pinning 
     326                if ( $sideSortables.outerHeight() > windowHeight ) { 
     327                        // If the sidebar is taller than the viewport, pin/unpin the bottom when scrolling 
     328                        if ( ( windowPos + windowHeight ) >= $sideSortables.outerHeight() ) { 
     329                                $sideSortables.css( { 
     330                                        position: 'fixed', 
     331                                        bottom: 0, 
     332                                        marginBottom: '20px' 
     333                                } ); 
     334                        } else if ( windowPos <= ( toolsHeight + adminBarHeight ) )  { 
     335                                $sideSortables.css( { 
     336                                        position: 'relative', 
     337                                        bottom: 'auto', 
     338                                        marginBottom: 0 
     339                                } ); 
     340                        } 
     341                } else { 
     342                        // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling 
     343                        if ( windowPos >= ( toolsHeight + adminBarHeight ) ) { 
     344                                $sideSortables.css( { 
     345                                        position: 'fixed', 
     346                                        top: toolsHeight 
     347                                } ); 
     348                        } else { 
     349                                $sideSortables.css( { 
     350                                        position: 'relative', 
     351                                        top: 'auto' 
     352                                } ); 
     353                        } 
     354                } 
     355 
    320356                if ( resize ) { 
    321357                        $contentWrap.css( { 
    322358                                paddingTop: $tools.outerHeight() 
     
    354390        function on() { 
    355391                // Scroll to the top when triggering this from JS. 
    356392                // Ensures toolbars are pinned properly. 
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) { 
     393                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { 
    358394                        window.scrollTo( window.pageXOffset, 0 ); 
    359395                } 
    360396 
     
    397433 
    398434                // Scroll to the top when triggering this from JS. 
    399435                // Ensures toolbars are reset properly. 
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) { 
     436                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { 
    401437                        window.scrollTo( window.pageXOffset, 0 ); 
    402438                } 
    403439