WordPress.org

Make WordPress Core

Ticket #28328: 28328.28.patch

File 28328.28.patch, 9.9 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 #postbox-container-1.pinned {
     409        position: fixed;
     410        margin: 0;
     411        top: 56px;
     412        bottom: 0;
     413        right: 20px;
     414        -webkit-transition: top 200ms;
     415        transition: top 200ms;
     416}
     417
     418#postbox-container-1 #side-sortables {
     419        padding-bottom: 1px;
     420}
     421
    408422#timestampdiv select {
    409423        height: 21px;
    410424        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'),
     22                $wpfooter = $( '#wpfooter' ),
    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                fixedSide = false,
     30                scrolledSide = false,
     31                scrollTimer,
     32                justFixedSide = false,
     33                justFixedSideTimer,
     34                lastScrollPosition = 0,
     35                pageYOffsetAtTop = 130,
     36                pinnedToolsTop = 56, // also used in CSS for the "#poststuff #post-body #postbox-container-1.pinned" selector
     37                textEditorClonePaddingTop = 37,
     38                autoresizeMinHeight = 300; // $window.height() - 310;
    2639
    2740        $textEditorClone.insertAfter( $textEditor );
    2841
     
    3144                'font-size': $textEditor.css( 'font-size' ),
    3245                'line-height': $textEditor.css( 'line-height' ),
    3346                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     47                'padding-top': textEditorClonePaddingTop,
    3548                'white-space': 'pre-wrap',
    3649                'word-wrap': 'break-word'
    3750        } );
     
    88101
    89102                hiddenHeight = $textEditorClone.height();
    90103
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     104                if ( hiddenHeight < autoresizeMinHeight ) {
     105                        hiddenHeight = autoresizeMinHeight;
    93106                }
    94107
    95108                if ( hiddenHeight === textEditorHeight ) {
     
    112125                mceEditor = editor;
    113126
    114127                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     128                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116129
    117130                // Get the necessary UI elements.
    118131                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
     
    218231                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219232                        resize = type !== 'scroll',
    220233                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
     234                        buffer = autoresizeMinHeight + adminBarHeight,
     235                        postBodyTop = $postBody.offset().top,
     236                        borderWidth = 1,
     237                        contentWrapWidth = $contentWrap.width(),
    222238                        $top, $editor,
    223                         toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
     239                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight, sideScrollTrigger;
    224240
    225241                if ( visual ) {
    226242                        $top = $visualTop;
     
    238254                editorWidth = $editor.outerWidth();
    239255                statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    240256
     257
    241258                // Maybe pin the top.
    242259                if ( ( ! fixedTop || resize ) &&
    243                                 // Handle scrolling down.
    244                                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
    245                                 // Handle scrolling up.
    246                                 windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     260                        // Handle scrolling down.
     261                        ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
     262                        // Handle scrolling up.
     263                        windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
     264
    247265                        fixedTop = true;
    248266
    249267                        $top.css( {
    250268                                position: 'fixed',
    251269                                top: adminBarHeight + toolsHeight,
    252                                 width: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
     270                                width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
    253271                                borderTop: '1px solid #e5e5e5'
    254272                        } );
    255273
     
    256274                        $tools.css( {
    257275                                position: 'fixed',
    258276                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     277                                width: contentWrapWidth
    260278                        } );
    261279                // Maybe unpin the top.
    262280                } else if ( fixedTop || resize ) {
     
    268286                                        position: 'absolute',
    269287                                        top: 0,
    270288                                        borderTop: 'none',
    271                                         width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
     289                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    272290                                } );
    273291
    274292                                $tools.css( {
    275293                                        position: 'absolute',
    276294                                        top: 0,
    277                                         width: $contentWrap.width()
     295                                        width: contentWrapWidth
    278296                                } );
    279297                        // Handle scrolling down.
    280298                        } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
     
    282300
    283301                                $top.css( {
    284302                                        position: 'absolute',
    285                                         top: editorHeight - buffer
     303                                        top: editorHeight - buffer,
     304                                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    286305                                } );
    287306
    288307                                $tools.css( {
    289308                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
    291                                         width: $contentWrap.width()
     309                                        top: editorHeight - buffer + borderWidth, // border
     310                                        width: contentWrapWidth
    292311                                } );
    293312                        }
    294313                }
     
    295314
    296315                // Maybe adjust the bottom bar.
    297316                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     317                        // +[n] for the border around the .wp-editor-container.
     318                        ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
     319
    300320                        fixedBottom = true;
    301321
    302322                        $bottom.css( {
    303323                                position: 'fixed',
    304324                                bottom: 0,
    305                                 width: editorWidth + 2,
     325                                width: editorWidth + ( borderWidth * 2 ),
    306326                                borderTop: '1px solid #dedede'
    307327                        } );
    308328                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     329                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310330                        fixedBottom = false;
    311331
    312332                        $bottom.css( {
     
    317337                        } );
    318338                }
    319339
     340                // The sidebar is on the left and the scrolling height is large enough, pin it.
     341                if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS
     342                        $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
     343                        windowHeight < editorHeight / 2 ) { // the editor is twice as tall as the viewport
     344
     345                        if ( ! fixedSide && ( postBodyTop - pinnedToolsTop ) < windowPos ) {
     346                                fixedSide = justFixedSide = true;
     347                                $postboxContainer.addClass( 'pinned' );
     348                        } else if ( fixedSide ) {
     349                                if ( ( postBodyTop - pinnedToolsTop ) >= windowPos ) {
     350                                        fixedSide = false;
     351                                        $postboxContainer.removeClass( 'pinned' );
     352                                }
     353                        }
     354
     355                        if ( windowPos > lastScrollPosition ) {
     356                                // Scrolling down
     357                                if ( fixedSide ) {
     358                                        if ( justFixedSide && windowPos + windowHeight + 20 > $wpfooter.offset().top ) {
     359                                                justFixedSide = false;
     360                                        }
     361
     362                                        if ( justFixedSide ) {
     363                                                clearTimeout( justFixedSideTimer );
     364                                                justFixedSideTimer = setTimeout( function() {
     365                                                        justFixedSide = false;
     366                                                }, 400 );
     367                                        } else {
     368                                                sideScrollTrigger = ( $sideSortables.height() - ( windowHeight - pinnedToolsTop ) );
     369
     370                                                if ( ! scrolledSide && sideScrollTrigger > 1 && windowPos > sideScrollTrigger && windowPos > $wrap.offset().top ) {
     371                                                        scrolledSide = true;
     372                                                        $postboxContainer.css( 'top', -( sideScrollTrigger - ( pinnedToolsTop - 20 ) ) );
     373                                                        // 20 is additional distance from the bottom of the sidebar to the bottom of the window
     374                                                }
     375                                        }
     376                                }
     377                        } else if ( windowPos < lastScrollPosition ) {
     378                                // Scrolling up
     379                                if ( scrolledSide && ( fixedBottom || ( windowPos + windowHeight + 40 ) < $wpfooter.offset().top ) ) {
     380                                        scrolledSide = false;
     381                                        $postboxContainer.css( 'top', '' );
     382                                }
     383
     384                                justFixedSide = false;
     385                        }
     386
     387                        lastScrollPosition = windowPos;
     388                } else {
     389                        // Unpin
     390                        $postboxContainer.removeClass( 'pinned' );
     391                        $postboxContainer.css( 'top', '' );
     392                        scrolledSide = fixedSide = false;
     393                }
     394
    320395                if ( resize ) {
    321396                        $contentWrap.css( {
    322397                                paddingTop: $tools.outerHeight()
     
    354429        function on() {
    355430                // Scroll to the top when triggering this from JS.
    356431                // Ensures toolbars are pinned properly.
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     432                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    358433                        window.scrollTo( window.pageXOffset, 0 );
    359434                }
    360435
     
    397472
    398473                // Scroll to the top when triggering this from JS.
    399474                // Ensures toolbars are reset properly.
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     475                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    401476                        window.scrollTo( window.pageXOffset, 0 );
    402477                }
    403478
  • 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;