WordPress.org

Make WordPress Core

Ticket #28328: 28328.29.patch

File 28328.29.patch, 9.8 KB (added by azaozz, 4 years ago)
  • src/wp-admin/css/common.css

     
    22552255        right: 0;
    22562256        left: 0;
    22572257        min-height: 100%;
     2258        min-height: -webkit-calc( 100% - 346px );
    22582259        min-height: calc( 100% - 346px );
    22592260}
    22602261
  • src/wp-admin/css/edit.css

     
    405405}
    406406/* end editor-expand.js override */
    407407
     408#poststuff #post-body.columns-2 #side-sortables {
     409        min-width: 280px;
     410}
     411
    408412#timestampdiv select {
    409413        height: 21px;
    410414        line-height: 14px;
  • 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                $postboxContainer = $( '#postbox-container-1' ),
     21                $postBody = $('#post-body'),
    1922                fullscreen = window.wp.editor && window.wp.editor.fullscreen,
    2023                mceEditor,
    2124                mceBind = function(){},
     
    2225                mceUnbind = function(){},
    2326                fixedTop = false,
    2427                fixedBottom = false,
    25                 scrollTimer;
     28                fixedSideTop = false,
     29                fixedSideBottom = false,
     30                scrollTimer,
     31                lastScrollPosition = 0,
     32                pageYOffsetAtTop = 130,
     33                pinnedToolsTop = 56, // also used in CSS for the "#poststuff #post-body #postbox-container-1.pinned" selector
     34                textEditorClonePaddingTop = 37,
     35                autoresizeMinHeight = 300; // $window.height() - 310;
    2636
    2737        $textEditorClone.insertAfter( $textEditor );
    2838
     
    3141                'font-size': $textEditor.css( 'font-size' ),
    3242                'line-height': $textEditor.css( 'line-height' ),
    3343                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     44                'padding-top': textEditorClonePaddingTop,
    3545                'white-space': 'pre-wrap',
    3646                'word-wrap': 'break-word'
    3747        } );
     
    8898
    8999                hiddenHeight = $textEditorClone.height();
    90100
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     101                if ( hiddenHeight < autoresizeMinHeight ) {
     102                        hiddenHeight = autoresizeMinHeight;
    93103                }
    94104
    95105                if ( hiddenHeight === textEditorHeight ) {
     
    112122                mceEditor = editor;
    113123
    114124                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     125                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116126
    117127                // Get the necessary UI elements.
    118128                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
     
    218228                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219229                        resize = type !== 'scroll',
    220230                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
    222                         $top, $editor,
     231                        buffer = autoresizeMinHeight + adminBarHeight,
     232                        postBodyTop = $postBody.offset().top,
     233                        borderWidth = 1,
     234                        contentWrapWidth = $contentWrap.width(),
     235                        sideSortablesHeight = $sideSortables.height(),
     236                        $top, $editor, _top,
    223237                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    224238
    225239                if ( visual ) {
     
    238252                editorWidth = $editor.outerWidth();
    239253                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    240254
     255
    241256                // Maybe pin the top.
    242257                if ( ( ! fixedTop || resize ) &&
    243                                 // Handle scrolling down.
    244                                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
    245                                 // Handle scrolling up.
    246                                 windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     258                        // Handle scrolling down.
     259                        ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
     260                        // Handle scrolling up.
     261                        windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     262
    247263                        fixedTop = true;
    248264
    249265                        $top.css( {
    250266                                position: 'fixed',
    251267                                top: adminBarHeight + toolsHeight,
    252                                 width: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
     268                                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
    253269                                borderTop: '1px solid #e5e5e5'
    254270                        } );
    255271
     
    256272                        $tools.css( {
    257273                                position: 'fixed',
    258274                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     275                                width: contentWrapWidth
    260276                        } );
    261277                // Maybe unpin the top.
    262278                } else if ( fixedTop || resize ) {
     
    268284                                        position: 'absolute',
    269285                                        top: 0,
    270286                                        borderTop: 'none',
    271                                         width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
     287                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    272288                                } );
    273289
    274290                                $tools.css( {
    275291                                        position: 'absolute',
    276292                                        top: 0,
    277                                         width: $contentWrap.width()
     293                                        width: contentWrapWidth
    278294                                } );
    279295                        // Handle scrolling down.
    280296                        } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
     
    282298
    283299                                $top.css( {
    284300                                        position: 'absolute',
    285                                         top: editorHeight - buffer
     301                                        top: editorHeight - buffer,
     302                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    286303                                } );
    287304
    288305                                $tools.css( {
    289306                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
    291                                         width: $contentWrap.width()
     307                                        top: editorHeight - buffer + borderWidth, // border
     308                                        width: contentWrapWidth
    292309                                } );
    293310                        }
    294311                }
     
    295312
    296313                // Maybe adjust the bottom bar.
    297314                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     315                        // +[n] for the border around the .wp-editor-container.
     316                        ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
     317
    300318                        fixedBottom = true;
    301319
    302320                        $bottom.css( {
    303321                                position: 'fixed',
    304322                                bottom: 0,
    305                                 width: editorWidth + 2,
     323                                width: editorWidth + ( borderWidth * 2 ),
    306324                                borderTop: '1px solid #dedede'
    307325                        } );
    308326                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     327                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310328                        fixedBottom = false;
    311329
    312330                        $bottom.css( {
     
    317335                        } );
    318336                }
    319337
     338               
     339                if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS
     340                        $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
     341                        windowHeight < editorHeight * 0.7 ) { // the editor is taller than the viewport
     342               
     343                        // Handle sidebar pinning
     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                                                        _top = $sideSortables.offset().top - adminBarHeight;
     356
     357                                                        $sideSortables.css({
     358                                                                position: 'absolute',
     359                                                                top: _top,
     360                                                                bottom: ''
     361                                                        });
     362                                                } else if ( ! fixedSideBottom && sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + windowHeight ) {
     363                                                        // pin the bottom
     364                                                        fixedSideBottom = true;
     365
     366                                                        $sideSortables.css({
     367                                                                position: 'fixed',
     368                                                                top: 'auto',
     369                                                                bottom: '20px'
     370                                                        });
     371                                                }
     372                                        } else if ( windowPos < lastScrollPosition ) {
     373                                                // Scrolling up
     374                                                if ( fixedSideBottom ) {
     375                                                        // let it scroll
     376                                                        fixedSideBottom = false;
     377                                                        _top = $sideSortables.offset().top;
     378
     379                                                        $sideSortables.css({
     380                                                                position: 'absolute',
     381                                                                top: _top,
     382                                                                bottom: ''
     383                                                        });
     384                                                } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
     385                                                        // pin the top
     386                                                        fixedSideTop = true;
     387
     388                                                        $sideSortables.css({
     389                                                                position: 'fixed',
     390                                                                top: pinnedToolsTop,
     391                                                                bottom: ''
     392                                                        });
     393                                                }
     394                                        }
     395                                }
     396                        } else {
     397                                // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
     398                                if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
     399                                        $sideSortables.css( {
     400                                                position: 'fixed',
     401                                                top: pinnedToolsTop
     402                                        } );
     403                                } else {
     404                                        $sideSortables.css( {
     405                                                position: '',
     406                                                top: ''
     407                                        } );
     408                                }
     409
     410                                fixedSideTop = fixedSideBottom = false;
     411                        }
     412
     413                        lastScrollPosition = windowPos;
     414                }
     415
    320416                if ( resize ) {
    321417                        $contentWrap.css( {
    322418                                paddingTop: $tools.outerHeight()
     
    354450        function on() {
    355451                // Scroll to the top when triggering this from JS.
    356452                // Ensures toolbars are pinned properly.
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     453                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    358454                        window.scrollTo( window.pageXOffset, 0 );
    359455                }
    360456
     
    397493
    398494                // Scroll to the top when triggering this from JS.
    399495                // Ensures toolbars are reset properly.
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     496                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    401497                        window.scrollTo( window.pageXOffset, 0 );
    402498                }
    403499
  • src/wp-includes/js/media-grid.js

     
    1 /* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings, confirm */
     1/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings */
    22(function($, _, Backbone, wp) {
    33        // Local reference to the WordPress media namespace.
    44        var media = wp.media, l10n;