WordPress.org

Make WordPress Core

Ticket #28328: 28328.27.patch

File 28328.27.patch, 7.1 KB (added by stephdau, 4 years ago)

same as Andrew's attachment:28328.26.patch, but with fixed sidebar positioning when reaching the end of the document.

  • 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'),
    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                fixedSide = false,
     29                scrolledSide = false,
     30                scrollTimer,
     31                lastScrollPosition = 0,
     32                pageYOffsetAtTop = 130,
     33                textEditorClonePaddingTop = 37,
     34                autoresizeMinHeight = 300; // $window.height() - 310;
    2635
    2736        $textEditorClone.insertAfter( $textEditor );
    2837
     
    3140                'font-size': $textEditor.css( 'font-size' ),
    3241                'line-height': $textEditor.css( 'line-height' ),
    3342                'padding': $textEditor.css( 'padding' ),
    34                 'padding-top': 37,
     43                'padding-top': textEditorClonePaddingTop,
    3544                'white-space': 'pre-wrap',
    3645                'word-wrap': 'break-word'
    3746        } );
     
    8897
    8998                hiddenHeight = $textEditorClone.height();
    9099
    91                 if ( hiddenHeight < 300 ) {
    92                         hiddenHeight = 300;
     100                if ( hiddenHeight < autoresizeMinHeight ) {
     101                        hiddenHeight = autoresizeMinHeight;
    93102                }
    94103
    95104                if ( hiddenHeight === textEditorHeight ) {
     
    112121                mceEditor = editor;
    113122
    114123                // Set the minimum height to the initial viewport height.
    115                 editor.settings.autoresize_min_height = 300;
     124                editor.settings.autoresize_min_height = autoresizeMinHeight;
    116125
    117126                // Get the necessary UI elements.
    118127                $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
     
    218227                        adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    219228                        resize = type !== 'scroll',
    220229                        visual = ( mceEditor && ! mceEditor.isHidden() ),
    221                         buffer = 200,
     230                        buffer = autoresizeMinHeight + adminBarHeight,
     231                        postBodyTop = $postBody.offset().top,
     232                        borderWidth = 1,
    222233                        $top, $editor,
    223                         toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
     234                        toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight, sideScrollTrigger;
    224235
    225236                if ( visual ) {
    226237                        $top = $visualTop;
     
    256267                        $tools.css( {
    257268                                position: 'fixed',
    258269                                top: adminBarHeight,
    259                                 width: editorWidth + 2
     270                                width: editorWidth + ( borderWidth * 2 )
    260271                        } );
    261272                // Maybe unpin the top.
    262273                } else if ( fixedTop || resize ) {
     
    287298
    288299                                $tools.css( {
    289300                                        position: 'absolute',
    290                                         top: editorHeight - buffer + 1, // border
     301                                        top: editorHeight - buffer + borderWidth, // border
    291302                                        width: $contentWrap.width()
    292303                                } );
    293304                        }
     
    295306
    296307                // Maybe adjust the bottom bar.
    297308                if ( ( ! fixedBottom || resize ) &&
    298                                 // + 1 for the border around the .wp-editor-container.
    299                                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     309                                // +[n] for the border around the .wp-editor-container.
     310                                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
    300311                        fixedBottom = true;
    301312
    302313                        $bottom.css( {
    303314                                position: 'fixed',
    304315                                bottom: 0,
    305                                 width: editorWidth + 2,
     316                                width: editorWidth + ( borderWidth * 2 ),
    306317                                borderTop: '1px solid #dedede'
    307318                        } );
    308319                } else if ( ( fixedBottom || resize ) &&
    309                                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
     320                                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
    310321                        fixedBottom = false;
    311322
    312323                        $bottom.css( {
     
    317328                        } );
    318329                }
    319330
     331                // The sidebar is on the left and the scrolling height is large enough, pin it.
     332                if ( $postboxContainer.width() < 300 && windowWidth > 600 &&
     333                        $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) ) {
     334
     335                        if ( ! fixedSide && ( postBodyTop - 56 ) < windowPos ) {
     336                                fixedSide = true;
     337                                $postboxContainer.addClass( 'pinned' );
     338                        } else if ( fixedSide ) {
     339                                if ( ( postBodyTop - 56 ) >= windowPos ) {
     340                                        fixedSide = false;
     341                                        $postboxContainer.removeClass( 'pinned' );
     342                                }
     343                        }
     344
     345                        if ( fixedSide && windowPos > lastScrollPosition ) {
     346                                // Scrolling down
     347                                sideScrollTrigger = ( $sideSortables.height() - ( windowHeight - 56 ) );
     348
     349                                if ( ! scrolledSide && sideScrollTrigger > 1 && windowPos > sideScrollTrigger && windowPos > $wrap.offset().top ) {
     350                                        scrolledSide = true;
     351                                        $postboxContainer.css( 'top', -( sideScrollTrigger - 36 ) );
     352                                }
     353                        } else if ( scrolledSide && windowPos < lastScrollPosition && windowPos < $sideSortables.outerHeight() / 2 ) {
     354                                scrolledSide = false;
     355                                $postboxContainer.css( 'top', '' );
     356                        }
     357
     358                        lastScrollPosition = windowPos;
     359                } else {
     360                        // Unpin
     361                        $postboxContainer.removeClass( 'pinned' );
     362                        $postboxContainer.css( 'top', '' );
     363                        scrolledSide = fixedSide = false;
     364                }
     365
    320366                if ( resize ) {
    321367                        $contentWrap.css( {
    322368                                paddingTop: $tools.outerHeight()
     
    354400        function on() {
    355401                // Scroll to the top when triggering this from JS.
    356402                // Ensures toolbars are pinned properly.
    357                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     403                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    358404                        window.scrollTo( window.pageXOffset, 0 );
    359405                }
    360406
     
    397443
    398444                // Scroll to the top when triggering this from JS.
    399445                // Ensures toolbars are reset properly.
    400                 if ( window.pageYOffset && window.pageYOffset > 130 ) {
     446                if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
    401447                        window.scrollTo( window.pageXOffset, 0 );
    402448                }
    403449
  • 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;