WordPress.org
Get WordPress

Make WordPress Core

Ticket #28328: 28328.30.patch

File 28328.30.patch, 10.5 KB (added by azaozz, 10 years ago)

  • src/wp-admin/css/edit.css

     
    405405}
    406406/* end editor-expand.js override */
    407407
     408#poststuff #post-body.columns-2 #side-sortables {
     409        width: 280px;
     410}
     411
    408412#timestampdiv select {
    409413        height: 21px;
    410414        line-height: 14px;
    … …  
    12291233
    12301234        #poststuff #post-body.columns-2 #side-sortables {
    12311235                min-height: 0;
     1236                width: auto;
    12321237        }
    12331238
    12341239        /* hide the radio buttons for column prefs */

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

     
    66        var $window = $( window ),
    77                $document = $( document ),
    88                $adminBar = $( '#wpadminbar' ),
     9                $footer = $( '#wpfooter' ),
    910                $wrap = $( '#postdivrich' ),
    1011                $contentWrap = $( '#wp-content-wrap' ),
    1112                $tools = $( '#wp-content-editor-tools' ),
    … …  
    1617                $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
    1718                $bottom = $( '#post-status-info' ),
    1819                $statusBar,
     20                $sideSortables = $( '#side-sortables' ),
     21                $postboxContainer = $( '#postbox-container-1' ),
     22                $postBody = $('#post-body'),
    1923                fullscreen = window.wp.editor && window.wp.editor.fullscreen,
    2024                mceEditor,
    2125                mceBind = function(){},
    … …  
    2226                mceUnbind = function(){},
    2327                fixedTop = false,
    2428                fixedBottom = false,
    25                 scrollTimer;
     29                fixedSideTop = false,
     30                fixedSideBottom = false,
     31                scrollTimer,
     32                lastScrollPosition = 0,
     33                pageYOffsetAtTop = 130,
     34                pinnedToolsTop = 56, // also used in CSS for the "#poststuff #post-body #postbox-container-1.pinned" selector
     35                textEditorClonePaddingTop = 37,
     36                autoresizeMinHeight = 300; // $window.height() - 310;
    2637
    2738        $textEditorClone.insertAfter( $textEditor );
    2839
    … …  
    3142                'font-size': $textEditor.css( 'font-size' ),
    3243                'line-height': $textEditor.css( 'line-height' ),
    3344                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     45                'padding-top': textEditorClonePaddingTop,
    3546                'white-space': 'pre-wrap',
    3647                'word-wrap': 'break-word'
    3748        } );
    … …  
    8899
    89100                hiddenHeight = $textEditorClone.height();
    90101
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     102                if ( hiddenHeight < autoresizeMinHeight ) {
     103                        hiddenHeight = autoresizeMinHeight;
    93104                }
    94105
    95106                if ( hiddenHeight === textEditorHeight ) {
    … …  
    112123                mceEditor = editor;
    113124
    114125                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     126                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116127
    117128                // Get the necessary UI elements.
    118129                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
    … …  
    218229                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219230                        resize = type !== 'scroll',
    220231                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
    222                         $top, $editor,
     232                        buffer = autoresizeMinHeight + adminBarHeight,
     233                        postBodyTop = $postBody.offset().top,
     234                        borderWidth = 1,
     235                        contentWrapWidth = $contentWrap.width(),
     236                        sideSortablesHeight = $sideSortables.height(),
     237                        $top, $editor, sidebarTop, footerTop,
    223238                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    224239
    225240                if ( visual ) {
    … …  
    238253                editorWidth = $editor.outerWidth();
    239254                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    240255
     256
    241257                // Maybe pin the top.
    242258                if ( ( ! fixedTop || resize ) &&
    243                                 // Handle scrolling down.
    244                                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
    245                                 // Handle scrolling up.
    246                                 windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     259                        // Handle scrolling down.
     260                        ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
     261                        // Handle scrolling up.
     262                        windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     263
    247264                        fixedTop = true;
    248265
    249266                        $top.css( {
    250267                                position: 'fixed',
    251268                                top: adminBarHeight + toolsHeight,
    252                                 width: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
     269                                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
    253270                                borderTop: '1px solid #e5e5e5'
    254271                        } );
    255272
    … …  
    256273                        $tools.css( {
    257274                                position: 'fixed',
    258275                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     276                                width: contentWrapWidth
    260277                        } );
    261278                // Maybe unpin the top.
    262279                } else if ( fixedTop || resize ) {
    … …  
    268285                                        position: 'absolute',
    269286                                        top: 0,
    270287                                        borderTop: 'none',
    271                                         width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
     288                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    272289                                } );
    273290
    274291                                $tools.css( {
    275292                                        position: 'absolute',
    276293                                        top: 0,
    277                                         width: $contentWrap.width()
     294                                        width: contentWrapWidth
    278295                                } );
    279296                        // Handle scrolling down.
    280297                        } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
    … …  
    282299
    283300                                $top.css( {
    284301                                        position: 'absolute',
    285                                         top: editorHeight - buffer
     302                                        top: editorHeight - buffer,
     303                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    286304                                } );
    287305
    288306                                $tools.css( {
    289307                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
    291                                         width: $contentWrap.width()
     308                                        top: editorHeight - buffer + borderWidth, // border
     309                                        width: contentWrapWidth
    292310                                } );
    293311                        }
    294312                }
    … …  
    295313
    296314                // Maybe adjust the bottom bar.
    297315                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     316                        // +[n] for the border around the .wp-editor-container.
     317                        ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
     318
    300319                        fixedBottom = true;
    301320
    302321                        $bottom.css( {
    303322                                position: 'fixed',
    304323                                bottom: 0,
    305                                 width: editorWidth + 2,
     324                                width: editorWidth + ( borderWidth * 2 ),
    306325                                borderTop: '1px solid #dedede'
    307326                        } );
    308327                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     328                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310329                        fixedBottom = false;
    311330
    312331                        $bottom.css( {
    … …  
    317336                        } );
    318337                }
    319338
     339                // Sidebar pinning
     340                if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
     341                        $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
     342                        windowHeight < editorHeight * 0.7 ) { // the editor is taller than the viewport
     343
     344                        if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) {
     345                                // Reset when scrolling to the top
     346                                if ( windowPos + pinnedToolsTop <= postBodyTop ) {
     347                                        $sideSortables.attr( 'style', '' );
     348                                        fixedSideTop = fixedSideBottom = false;
     349                                } else {
     350                                        if ( windowPos > lastScrollPosition ) {
     351                                                // Scrolling down
     352                                                if ( fixedSideTop ) {
     353                                                        // let it scroll
     354                                                        fixedSideTop = false;
     355                                                        sidebarTop = $sideSortables.offset().top - adminBarHeight;
     356                                                        footerTop = $footer.offset().top;
     357
     358                                                        // don't get over the footer
     359                                                        if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
     360                                                                sidebarTop = footerTop - sideSortablesHeight - 20;
     361                                                        }
     362
     363                                                        $sideSortables.css({
     364                                                                position: 'absolute',
     365                                                                top: sidebarTop,
     366                                                                bottom: ''
     367                                                        });
     368                                                } else if ( ! fixedSideBottom && sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + windowHeight ) {
     369                                                        // pin the bottom
     370                                                        fixedSideBottom = true;
     371
     372                                                        $sideSortables.css({
     373                                                                position: 'fixed',
     374                                                                top: 'auto',
     375                                                                bottom: '20px'
     376                                                        });
     377                                                }
     378                                        } else if ( windowPos < lastScrollPosition ) {
     379                                                // Scrolling up
     380                                                if ( fixedSideBottom ) {
     381                                                        // let it scroll
     382                                                        fixedSideBottom = false;
     383                                                        sidebarTop = $sideSortables.offset().top - 20;
     384                                                        footerTop = $footer.offset().top;
     385
     386                                                        // don't get over the footer
     387                                                        if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
     388                                                                sidebarTop = footerTop - sideSortablesHeight - 20;
     389                                                        }
     390
     391                                                        $sideSortables.css({
     392                                                                position: 'absolute',
     393                                                                top: sidebarTop,
     394                                                                bottom: ''
     395                                                        });
     396                                                } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
     397                                                        // pin the top
     398                                                        fixedSideTop = true;
     399
     400                                                        $sideSortables.css({
     401                                                                position: 'fixed',
     402                                                                top: pinnedToolsTop,
     403                                                                bottom: ''
     404                                                        });
     405                                                }
     406                                        }
     407                                }
     408                        } else {
     409                                // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
     410                                if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
     411                                        $sideSortables.css( {
     412                                                position: 'fixed',
     413                                                top: pinnedToolsTop
     414                                        } );
     415                                } else {
     416                                        $sideSortables.attr( 'style', '' );
     417                                }
     418
     419                                fixedSideTop = fixedSideBottom = false;
     420                        }
     421
     422                        lastScrollPosition = windowPos;
     423                } else {
     424                        $sideSortables.attr( 'style', '' );
     425                        fixedSideTop = fixedSideBottom = false;
     426                }
     427
    320428                if ( resize ) {
    321429                        $contentWrap.css( {
    322430                                paddingTop: $tools.outerHeight()
    … …  
    354462        function on() {
    355463                // Scroll to the top when triggering this from JS.
    356464                // Ensures toolbars are pinned properly.
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     465                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    358466                        window.scrollTo( window.pageXOffset, 0 );
    359467                }
    360468
    … …  
    397505
    398506                // Scroll to the top when triggering this from JS.
    399507                // Ensures toolbars are reset properly.
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     508                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    401509                        window.scrollTo( window.pageXOffset, 0 );
    402510                }
    403511
    … …  
    417525                fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
    418526
    419527                // Reset all css
    420                 $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor ], function( i, element ) {
     528                $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
    421529                        element && element.attr( 'style', '' );
    422530                });
    423531
     532                fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
     533
    424534                if ( mceEditor ) {
    425535                        mceEditor.settings.wp_autoresize_on = false;
    426536                        mceEditor.execCommand( 'wpAutoResizeOff' );