WordPress.org
Get WordPress

Make WordPress Core

Changeset 29579


Ignore:
Timestamp:
08/24/2014 05:10:52 AM (10 years ago)
Author:
azaozz
Message:

Editor scrolling:

  • Pin the TinyMCE statusbar (elements path) to the bottom.
  • Add support for pinning the menu when present.
  • Add borders from CSS.
  • Optimize getting most elements outerHeight.

Part props avryl, fixes #29293, see #28328.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r29524 r29579  
    406406}
    407407/* end editor-expand.js override */
     408
     409.wp-editor-expand #wp-content-editor-tools {
     410    z-index: 1000;
     411    border-bottom: 1px solid #e5e5e5;
     412}
     413
     414.wp-editor-expand #wp-content-editor-container {
     415    -webkit-box-shadow: none;
     416    box-shadow: none;
     417    margin-top: -1px;
     418}
     419
     420.wp-editor-expand #wp-content-editor-container {
     421    border-bottom: 0 none;
     422}
     423
     424.wp-editor-expand div.mce-statusbar {
     425    z-index: 1;
     426}
     427
     428.wp-editor-expand #post-status-info {
     429    border-top: 1px solid #e5e5e5;
     430}
     431
     432.wp-editor-expand div.mce-toolbar-grp {
     433    z-index: 999;
     434}
     435
     436#wp-content-editor-tools {
     437    background-color: #f1f1f1;
     438    padding-top: 20px;
     439}
    408440
    409441#poststuff #post-body.columns-2 #side-sortables {

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

    r29524 r29579  
    1111        $contentWrap = $( '#wp-content-wrap' ),
    1212        $tools = $( '#wp-content-editor-tools' ),
    13         $visualTop,
    14         $visualEditor,
     13        $visualTop = $(),
     14        $visualEditor = $(),
    1515        $textTop = $( '#ed_toolbar' ),
    1616        $textEditor = $( '#content' ),
    1717        $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
    1818        $bottom = $( '#post-status-info' ),
    19         $statusBar,
     19        $menuBar = $(),
     20        $statusBar = $(),
    2021        $sideSortables = $( '#side-sortables' ),
    2122        $postboxContainer = $( '#postbox-container-1' ),
    … …  
    3334        pageYOffsetAtTop = 130,
    3435        pinnedToolsTop = 56,
    35         autoresizeMinHeight = 300;
     36        autoresizeMinHeight = 300,
     37        // These are corrected when adjust() runs, except on scrolling if already set.
     38        heights = {
     39            windowHeight: 0,
     40            windowWidth: 0,
     41            adminBarHeight: 0,
     42            toolsHeight: 0,
     43            menuBarHeight: 0,
     44            visualTopHeight: 0,
     45            textTopHeight: 0,
     46            bottomHeight: 0,
     47            statusBarHeight: 0,
     48            sideSortablesHeight: 0
     49        };
    3650
    3751    $textEditorClone.insertAfter( $textEditor );
    … …  
    4559    } );
    4660
     61    function getHeights() {
     62        var windowWidth = $window.width();
     63
     64        heights = {
     65            windowHeight: $window.height(),
     66            windowWidth: windowWidth,
     67            adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
     68            toolsHeight: $tools.outerHeight() || 0,
     69            menuBarHeight: $menuBar.outerHeight() || 0,
     70            visualTopHeight: $visualTop.outerHeight() || 0,
     71            textTopHeight: $textTop.outerHeight() || 0,
     72            bottomHeight: $bottom.outerHeight() || 0,
     73            statusBarHeight: $statusBar.outerHeight() || 0,
     74            sideSortablesHeight: $sideSortables.height() || 0
     75        };
     76    }
     77
    4778    function textEditorKeyup( event ) {
    4879        var VK = jQuery.ui.keyCode,
    … …  
    5283            selEnd = $textEditor[0].selectionEnd,
    5384            textNode = $textEditorClone[0].firstChild,
    54             windowHeight = $window.height(),
    5585            buffer = 10,
    5686            offset, cursorTop, cursorBottom, editorTop, editorBottom;
    … …  
    74104        cursorTop = offset.top - buffer;
    75105        cursorBottom = cursorTop + offset.height + buffer;
    76         editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight();
    77         editorBottom = windowHeight - $bottom.outerHeight();
     106        editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
     107        editorBottom = heights.windowHeight - heights.bottomHeight;
    78108
    79109        if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
    … …  
    126156        $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
    127157        $visualEditor = $contentWrap.find( '.mce-edit-area' );
    128         $statusBar = $contentWrap.find( '.mce-statusbar' ).filter( ':visible' );
     158        $statusBar = $contentWrap.find( '.mce-statusbar' );
     159        $menuBar = $contentWrap.find( '.mce-menubar' );
    129160
    130161        function mceGetCursorOffset() {
    … …  
    151182                key = event.keyCode,
    152183                offset = mceGetCursorOffset(),
    153                 windowHeight = $window.height(),
    154184                buffer = 10,
    155185                cursorTop, cursorBottom, editorTop, editorBottom;
    … …  
    159189            }
    160190
    161             cursorTop = offset.top + editor.getContentAreaContainer().firstChild.getBoundingClientRect().top;
     191            cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
    162192            cursorBottom = cursorTop + offset.height;
    163193            cursorTop = cursorTop - buffer;
    164194            cursorBottom = cursorBottom + buffer;
    165             editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight();
    166             editorBottom = windowHeight - $bottom.outerHeight();
     195            editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
     196            editorBottom = heights.windowHeight - heights.bottomHeight - heights.statusBarHeight;
    167197
    168198            // Don't scroll if the node is taller than the visible part of the editor
    … …  
    220250        }
    221251
    222         var bottomHeight = $bottom.outerHeight(),
    223             windowPos = $window.scrollTop(),
    224             windowHeight = $window.height(),
    225             windowWidth = $window.width(),
    226             adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
     252        var windowPos = $window.scrollTop(),
    227253            resize = type !== 'scroll',
    228254            visual = ( mceEditor && ! mceEditor.isHidden() ),
    … …  
    231257            borderWidth = 1,
    232258            contentWrapWidth = $contentWrap.width(),
    233             sideSortablesHeight = $sideSortables.height(),
    234259            $top, $editor, sidebarTop, footerTop, canPin,
    235             toolsHeight, topPos, topHeight, editorPos, editorHeight, statusBarHeight;
     260            topPos, topHeight, editorPos, editorHeight;
     261
     262        // Refresh the heights
     263        if ( resize || ! heights.windowHeight ) {
     264            getHeights();
     265        }
    236266
    237267        if ( visual ) {
    238268            $top = $visualTop;
    239269            $editor = $visualEditor;
     270            topHeight = heights.visualTopHeight;
    240271        } else {
    241272            $top = $textTop;
    242273            $editor = $textEditor;
    243         }
    244 
    245         toolsHeight = $tools.outerHeight();
     274            topHeight = heights.textTopHeight;
     275        }
     276
    246277        topPos = $top.parent().offset().top;
    247         topHeight = $top.outerHeight();
    248278        editorPos = $editor.offset().top;
    249279        editorHeight = $editor.outerHeight();
    250         statusBarHeight = visual ? $statusBar.outerHeight() : 0;
    251280
    252281        // Should we pin?
    … …  
    256285        if ( ! canPin ) {
    257286            if ( resize ) {
    258                 $top.css( {
    259                     position: 'absolute',
    260                     top: 0,
    261                     borderTop: 'none',
    262                     width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    263                 } );
    264 
    265287                $tools.css( {
    266288                    position: 'absolute',
    … …  
    269291                } );
    270292
    271                 $bottom.css( {
    272                     position: 'relative',
    273                     bottom: 'auto',
    274                     width: '100%',
    275                     borderTop: 'none'
    276                 } );
     293                if ( visual && $menuBar.length ) {
     294                    $menuBar.css( {
     295                        position: 'absolute',
     296                        top: 0,
     297                        width: contentWrapWidth - ( borderWidth * 2 )
     298                    } );
     299                }
     300
     301                $top.css( {
     302                    position: 'absolute',
     303                    top: heights.menuBarHeight,
     304                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
     305                } );
     306
     307                $statusBar.add( $bottom ).attr( 'style', '' );
    277308            }
    278309        } else {
    … …  
    280311            if ( ( ! fixedTop || resize ) &&
    281312                // Handle scrolling down.
    282                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
     313                ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
    283314                // Handle scrolling up.
    284                 windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
    285 
     315                windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
    286316                fixedTop = true;
     317
     318                $tools.css( {
     319                    position: 'fixed',
     320                    top: heights.adminBarHeight,
     321                    width: contentWrapWidth
     322                } );
     323
     324                if ( visual && $menuBar.length ) {
     325                    $menuBar.css( {
     326                        position: 'fixed',
     327                        top: heights.adminBarHeight + heights.toolsHeight,
     328                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
     329                    } );
     330                }
    287331
    288332                $top.css( {
    289333                    position: 'fixed',
    290                     top: adminBarHeight + toolsHeight,
    291                     width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
    292                     borderTop: '1px solid #e5e5e5'
    293                 } );
    294 
    295                 $tools.css( {
    296                     position: 'fixed',
    297                     top: adminBarHeight,
    298                     width: contentWrapWidth
     334                    top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
     335                    width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    299336                } );
    300337            // Maybe unpin the top.
    301338            } else if ( fixedTop || resize ) {
    302339                // Handle scrolling up.
    303                 if ( windowPos <= ( topPos - toolsHeight - adminBarHeight ) ) {
     340                if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
    304341                    fixedTop = false;
    305 
    306                     $top.css( {
    307                         position: 'absolute',
    308                         top: 0,
    309                         borderTop: 'none',
    310                         width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    311                     } );
    312342
    313343                    $tools.css( {
    … …  
    316346                        width: contentWrapWidth
    317347                    } );
    318                 // Handle scrolling down.
    319                 } else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
    320                     fixedTop = false;
     348
     349                    if ( visual && $menuBar.length ) {
     350                        $menuBar.css( {
     351                            position: 'absolute',
     352                            top: 0,
     353                            width: contentWrapWidth - ( borderWidth * 2 )
     354                        } );
     355                    }
    321356
    322357                    $top.css( {
    323358                        position: 'absolute',
    324                         top: editorHeight - buffer,
     359                        top: heights.menuBarHeight,
    325360                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    326361                    } );
     362                // Handle scrolling down.
     363                } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
     364                    fixedTop = false;
    327365
    328366                    $tools.css( {
    329367                        position: 'absolute',
    330                         top: editorHeight - buffer + borderWidth, // border
     368                        top: editorHeight - buffer,
    331369                        width: contentWrapWidth
     370                    } );
     371
     372                    if ( visual && $menuBar.length ) {
     373                        $menuBar.css( {
     374                            position: 'absolute',
     375                            top: editorHeight - buffer,
     376                            width: contentWrapWidth - ( borderWidth * 2 )
     377                        } );
     378                    }
     379
     380                    $top.css( {
     381                        position: 'absolute',
     382                        top: editorHeight - buffer + heights.menuBarHeight,
     383                        width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
    332384                    } );
    333385                }
    … …  
    337389            if ( ( ! fixedBottom || resize ) &&
    338390                // +[n] for the border around the .wp-editor-container.
    339                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
    340 
     391                ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
    341392                fixedBottom = true;
     393
     394                $statusBar.css( {
     395                    position: 'fixed',
     396                    bottom: heights.bottomHeight,
     397                    width: contentWrapWidth - ( borderWidth * 2 )
     398                } );
    342399
    343400                $bottom.css( {
    344401                    position: 'fixed',
    345402                    bottom: 0,
    346                     width: contentWrapWidth,
    347                     borderTop: '1px solid #dedede'
     403                    width: contentWrapWidth
    348404                } );
    349405            } else if ( ( fixedBottom || resize ) &&
    350                     ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
     406                    ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) {
    351407                fixedBottom = false;
    352408
    353                 $bottom.css( {
    354                     position: 'relative',
    355                     bottom: 'auto',
    356                     width: '100%',
    357                     borderTop: 'none'
    358                 } );
     409                $statusBar.add( $bottom ).attr( 'style', '' );
    359410            }
    360411        }
    361412
    362413        // Sidebar pinning
    363         if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
     414        if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
    364415            $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
    365             windowHeight < editorHeight ) { // the editor is taller than the viewport
    366 
    367             if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) {
     416            heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
     417
     418            if ( heights.sideSortablesHeight > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
    368419                // Reset when scrolling to the top
    369420                if ( windowPos + pinnedToolsTop <= postBodyTop ) {
    … …  
    376427                            // let it scroll
    377428                            fixedSideTop = false;
    378                             sidebarTop = $sideSortables.offset().top - adminBarHeight;
     429                            sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
    379430                            footerTop = $footer.offset().top;
    380431
    381432                            // don't get over the footer
    382                             if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
    383                                 sidebarTop = footerTop - sideSortablesHeight - 20;
     433                            if ( footerTop < sidebarTop + heights.sideSortablesHeight + 20 ) {
     434                                sidebarTop = footerTop - heights.sideSortablesHeight - 20;
    384435                            }
    385436
    … …  
    389440                                bottom: ''
    390441                            });
    391                         } else if ( ! fixedSideBottom && sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + windowHeight ) {
     442                        } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + 20 < windowPos + heights.windowHeight ) {
    392443                            // pin the bottom
    393444                            fixedSideBottom = true;
    … …  
    408459
    409460                            // don't get over the footer
    410                             if ( footerTop < sidebarTop + sideSortablesHeight + 20 ) {
    411                                 sidebarTop = footerTop - sideSortablesHeight - 20;
     461                            if ( footerTop < sidebarTop + heights.sideSortablesHeight + 20 ) {
     462                                sidebarTop = footerTop - heights.sideSortablesHeight - 20;
    412463                            }
    413464
    … …  
    451502        if ( resize ) {
    452503            $contentWrap.css( {
    453                 paddingTop: $tools.outerHeight()
     504                paddingTop: heights.toolsHeight
    454505            } );
    455506
    456507            if ( visual ) {
    457508                $visualEditor.css( {
    458                     paddingTop: $visualTop.outerHeight()
     509                    paddingTop: heights.visualTopHeight + heights.menuBarHeight
    459510                } );
    460511            } else {
    461512                $textEditor.css( {
    462                     marginTop: $textTop.outerHeight()
     513                    marginTop: heights.textTopHeight
    463514                } );
    464515
    … …  
    555606
    556607        // Reset all css
    557         $.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
     608        $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
    558609            element && element.attr( 'style', '' );
    559610        });

  • trunk/src/wp-includes/css/editor.css

    r29533 r29579  
    153153    padding: 0;
    154154    position: relative;
    155     z-index: 999;
    156155}
    157156
    … …  
    369368.mce-menubar {
    370369    border-color: #e5e5e5;
     370    background: #fff;
     371    border-width: 0px 0px 1px;
    371372}
    372373
    … …  
    760761}
    761762
    762 #wp-content-editor-tools {
    763     background-color: #f1f1f1;
    764     padding-top: 20px;
     763.wp-editor-tools {
    765764    position: relative;
    766     z-index: 1000;
     765    z-index: 1;
    767766}
    768767

  • trunk/src/wp-includes/css/media-views.css

    r29567 r29579  
    151151
    152152.media-modal-close:active {
     153    -webkit-box-shadow: none;
    153154    box-shadow: none;
    154155}

  • trunk/src/wp-includes/js/mce-view.js

    r29577 r29579  
    593593                if ( ! this.error ) {
    594594                    if ( error ) {
    595                         this.error = error
     595                        this.error = error;
    596596                    } else {
    597597                        return;
Note: See TracChangeset for help on using the changeset viewer.