WordPress.org

Make WordPress Core

Ticket #28328: 28328.23.patch

File 28328.23.patch, 5.4 KB (added by stephdau, 4 years ago)

Improves on attachment:28328.22.patch by not proceeding with bottom pinning when the side bar is taller than the left side column.

  • 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' ),
     20                $footer = $( '#wpfooter' ),
    1921                fullscreen = window.wp.editor && window.wp.editor.fullscreen,
    2022                mceEditor,
    2123                mceBind = function(){},
     
    2224                mceUnbind = function(){},
    2325                fixedTop = false,
    2426                fixedBottom = false,
    25                 scrollTimer;
     27                scrollTimer,
     28                pageYOffsetAtTop = 130,
     29                textEditorClonePaddingTop = 37,
     30                autoresizeMinHeight = $window.height() - 310;
    2631
    2732        $textEditorClone.insertAfter( $textEditor );
    2833
     
    3136                'font-size': $textEditor.css( 'font-size' ),
    3237                'line-height': $textEditor.css( 'line-height' ),
    3338                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     39                'padding-top': textEditorClonePaddingTop,
    3540                'white-space': 'pre-wrap',
    3641                'word-wrap': 'break-word'
    3742        } );
     
    8893
    8994                hiddenHeight = $textEditorClone.height();
    9095
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     96                if ( hiddenHeight < autoresizeMinHeight ) {
     97                        hiddenHeight = autoresizeMinHeight;
    9398                }
    9499
    95100                if ( hiddenHeight === textEditorHeight ) {
     
    112117                mceEditor = editor;
    113118
    114119                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     120                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116121
    117122                // Get the necessary UI elements.
    118123                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
     
    218223                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219224                        resize = type !== 'scroll',
    220225                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
     226                        buffer = autoresizeMinHeight + adminBarHeight,
    222227                        $top, $editor,
    223228                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    224229
     
    236241                editorPos = $editor.offset().top;
    237242                editorHeight = $editor.outerHeight();
    238243                editorWidth = $editor.outerWidth();
     244                borderWidth = 1;
    239245                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
     246                sideSortablesHeight = $sideSortables.outerHeight();
    240247
    241248                // Maybe pin the top.
    242249                if ( ( ! fixedTop || resize ) &&
     
    256263                        $tools.css( {
    257264                                position: 'fixed',
    258265                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     266                                width: editorWidth + ( borderWidth * 2 )
    260267                        } );
    261268                // Maybe unpin the top.
    262269                } else if ( fixedTop || resize ) {
     
    287294
    288295                                $tools.css( {
    289296                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
     297                                        top: editorHeight - buffer + borderWidth, // border
    291298                                        width: $contentWrap.width()
    292299                                } );
    293300                        }
     
    295302
    296303                // Maybe adjust the bottom bar.
    297304                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     305                                // +[n] for the border around the .wp-editor-container.
     306                                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
    300307                        fixedBottom = true;
    301308
    302309                        $bottom.css( {
    303310                                position: 'fixed',
    304311                                bottom: 0,
    305                                 width: editorWidth + 2,
     312                                width: editorWidth + ( borderWidth * 2 ),
    306313                                borderTop: '1px solid #dedede'
    307314                        } );
    308315                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     316                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310317                        fixedBottom = false;
    311318
    312319                        $bottom.css( {
     
    317324                        } );
    318325                }
    319326
     327                // Handle sidebar pinning
     328                if ( sideSortablesHeight > windowHeight ) {
     329                        // If the sidebar is taller than the viewport, pin/unpin the bottom when scrolling
     330                        if ( sideSortablesHeight < ( editorHeight + pageYOffsetAtTop ) && ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth )) {
     331                                $sideSortables.css({
     332                                        position: 'fixed',
     333                                        bottom: '20px'
     334                                });
     335                        } else if (( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth )) {
     336                                $sideSortables.css({
     337                                        position: 'relative',
     338                                        bottom: 'auto'
     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