WordPress.org

Make WordPress Core

Ticket #28328: 28328.23.patch

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