WordPress.org

Make WordPress Core

Ticket #28328: 28328.22.patch

File 28328.22.patch, 5.2 KB (added by stephdau, 4 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