WordPress.org

Make WordPress Core

Changeset 29279


Ignore:
Timestamp:
07/24/2014 01:32:29 AM (4 years ago)
Author:
azaozz
Message:

Editor scrolling:

  • Improve TinyMCE resizing when a floated block is at the end of the content.
  • Improve setting the padding/margin under the toolbar on loading.
  • Add custom event on TinyMCE resizing and use it to adjust the pinning (if needed).

Part props avryl, see #28328.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r29049 r29279  
    378378    overflow: hidden;
    379379}
     380
     381.wp-fullscreen-wrap #content-textarea-clone {
     382    display: none;
     383}
     384
     385/* editor-expand.js override */
     386.wp-fullscreen-wrap {
     387    padding-top: 0 !important;
     388}
     389
     390.wp-fullscreen-wrap .wp-editor-area {
     391    margin-top: 0 !important;
     392}
     393
     394.wp-fullscreen-wrap .mce-edit-area {
     395    padding-top: 0 !important;
     396}
     397/* end editor-expand.js override */
    380398
    381399#timestampdiv select {
  • trunk/src/wp-admin/js/editor-expand.js

    r29186 r29279  
    4242    } );
    4343
    44     $textEditor.on( 'keyup', function() {
    45         var range = document.createRange(),
    46             start = $textEditor[0].selectionStart,
    47             end = $textEditor[0].selectionEnd,
     44    $textEditor.on( 'keyup', function( event ) {
     45        var VK = jQuery.ui.keyCode,
     46            key = event.keyCode,
     47            range = document.createRange(),
     48            selStart = $textEditor[0].selectionStart,
     49            selEnd = $textEditor[0].selectionEnd,
    4850            textNode = $textEditorClone[0].firstChild,
    4951            windowHeight = $window.height(),
     52            buffer = 10,
    5053            offset, cursorTop, cursorBottom, editorTop, editorBottom;
    5154
    52         if ( start && end && start !== end ) {
    53             return;
    54         }
    55 
    56         range.setStart( textNode, start );
    57         range.setEnd( textNode, end + 1 );
     55        if ( selStart && selEnd && selStart !== selEnd ) {
     56            return;
     57        }
     58
     59        // These are not TinyMCE ranges.
     60        try {
     61            range.setStart( textNode, selStart );
     62            range.setEnd( textNode, selEnd + 1 );
     63        } catch ( ex ) {}
    5864
    5965        offset = range.getBoundingClientRect();
     
    6369        }
    6470
    65         cursorTop = offset.top;
    66         cursorBottom = cursorTop + offset.height;
    67         editorTop = $adminBar.outerHeight() + $textTop.outerHeight();
     71        cursorTop = offset.top - buffer;
     72        cursorBottom = cursorTop + offset.height + buffer;
     73        editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight();
    6874        editorBottom = windowHeight - $bottom.outerHeight();
    6975
    70         if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
    71             window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
     76        if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
     77            window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
     78        } else if ( cursorBottom > editorBottom ) {
     79            window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
    7280        }
    7381    } );
     
    7886        }
    7987
    80         var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(),
    81             textEditorHeight = $textEditor.height();
     88        var textEditorHeight = $textEditor.height(),
     89            hiddenHeight;
     90
     91        $textEditorClone.width( $textEditor.width() );
     92        $textEditorClone.text( $textEditor.val() + '&nbsp;' );
     93
     94        hiddenHeight = $textEditorClone.height();
    8295
    8396        if ( hiddenHeight < 300 ) {
     
    91104        $textEditor.height( hiddenHeight );
    92105
    93         adjust( 'resize' );
     106        adjust();
    94107    }
    95108
     
    104117        editorInstance = editor;
    105118
    106         // Resizing will be handled by the autoresize plugin.
    107         editor.theme.resizeTo = function() {};
    108 
    109119        // Set the minimum height to the initial viewport height.
    110120        editor.settings.autoresize_min_height = 300;
     
    119129            setTimeout( function() {
    120130                editor.execCommand( 'wpAutoResize' );
    121                 adjust( 'resize' );
    122             }, 200 );
     131                adjust();
     132            }, 300 );
    123133        } );
    124134
     
    196206        editor.on( 'hide', function() {
    197207            textEditorResize();
    198             adjust( 'resize' );
     208            adjust();
    199209        } );
    200210
    201211        // Adjust when the editor resizes.
    202         editor.on( 'nodechange setcontent keyup FullscreenStateChanged', function() {
    203             adjust( 'resize' );
    204         } );
    205 
    206         editor.on( 'wp-toolbar-toggle', function() {
    207             $visualEditor.css( {
    208                 paddingTop: $visualTop.outerHeight()
    209             } );
     212        editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() {
     213            adjust();
    210214        } );
    211215
    212216        // And adjust "immediately".
    213217        // Allow some time to load CSS etc.
    214         setTimeout( function() {
    215             $visualEditor.css( {
    216                 paddingTop: $visualTop.outerHeight()
    217             } );
    218 
    219             adjust( 'resize' );
    220         }, 500 );
    221     } );
    222 
    223     // Adjust when the window is scrolled or resized.
    224     $window.on( 'scroll resize', function( event ) {
    225         adjust( event.type );
    226     } );
    227 
    228     // Adjust when exiting fullscreen mode.
    229     fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
    230         adjust( 'resize' );
    231     } );
    232 
    233     // Adjust when collapsing the menu.
    234     $document.on( 'wp-collapse-menu.editor-expand', function() {
    235         adjust( 'resize' );
    236     } )
    237 
    238     // Adjust when changing the columns.
    239     .on( 'postboxes-columnchange.editor-expand', function() {
    240         adjust( 'resize' );
    241     } )
    242 
    243     // Adjust when changing the body class.
    244     .on( 'editor-classchange.editor-expand', function() {
    245         adjust( 'resize' );
     218        initialResize( adjust );
    246219    } );
    247220
    248221    // Adjust the toolbars based on the active editor mode.
    249     function adjust( eventType ) {
     222    function adjust( type ) {
    250223        // Make sure we're not in fullscreen mode.
    251224        if ( fullscreen && fullscreen.settings.visible ) {
     
    258231            windowWidth = $window.width(),
    259232            adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
    260             $top, $editor, visual,
     233            resize = type !== 'scroll',
     234            visual = ( editorInstance && ! editorInstance.isHidden() ),
     235            $top, $editor,
    261236            toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
    262237
    263         // Visual editor.
    264         if ( editorInstance && ! editorInstance.isHidden() ) {
     238        if ( visual ) {
    265239            $top = $visualTop;
    266240            $editor = $visualEditor;
    267             visual = true;
    268 
    269             // Doesn't hide the panel of 'styleselect'. :(
    270             tinymce.each( editorInstance.controlManager.buttons, function( button ) {
    271                 if ( button._active && ( button.type === 'colorbutton' || button.type === 'panelbutton' || button.type === 'menubutton' ) ) {
    272                     button.hidePanel();
    273                 }
    274             } );
    275         // Text editor.
    276241        } else {
    277242            $top = $textTop;
     
    288253
    289254        // Maybe pin the top.
    290         if ( ( ! fixedTop || eventType === 'resize' ) &&
     255        if ( ( ! fixedTop || resize ) &&
    291256                // Handle scrolling down.
    292257                ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
     
    308273            } );
    309274        // Maybe unpin the top.
    310         } else if ( fixedTop || eventType === 'resize' ) {
     275        } else if ( fixedTop || resize ) {
    311276            // Handle scrolling up.
    312277            if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
     
    343308
    344309        // Maybe adjust the bottom bar.
    345         if ( ( ! fixedBottom || eventType === 'resize' ) &&
     310        if ( ( ! fixedBottom || resize ) &&
    346311                // + 1 for the border around the .wp-editor-container.
    347312                ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
     
    354319                borderTop: '1px solid #dedede'
    355320            } );
    356         } else if ( fixedBottom &&
     321        } else if ( ( fixedBottom || resize ) &&
    357322                ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
    358323            fixedBottom = false;
     
    365330            } );
    366331        }
     332
     333        if ( resize ) {
     334            $contentWrap.css( {
     335                paddingTop: $tools.outerHeight()
     336            } );
     337
     338            if ( visual ) {
     339                $visualEditor.css( {
     340                    paddingTop: $visualTop.outerHeight()
     341                } );
     342            } else {
     343                $textEditor.css( {
     344                    marginTop: $textTop.outerHeight()
     345                } );
     346                $textEditorClone.width( $textEditor.width() );
     347            }
     348        }
    367349    }
    368350
    369     textEditorResize();
    370 
    371     $tools.css( {
    372         position: 'absolute',
    373         top: 0,
    374         width: $contentWrap.width()
    375     } );
    376 
    377     $contentWrap.css( {
    378         paddingTop: $tools.outerHeight()
    379     } );
    380 
    381     // This needs to execute after quicktags is ready or a button is added...
    382     setTimeout( function() {
    383         $textEditor.css( {
    384             paddingTop: $textTop.outerHeight() + parseInt( $textEditor.css( 'padding-top' ), 10 )
    385         } );
    386     }, 500 );
     351    function initialResize( callback ) {
     352        for ( var i = 1; i < 6; i++ ) {
     353            setTimeout( callback, 500 * i );
     354        }
     355    }
     356
     357    // Adjust when the window is scrolled or resized.
     358    $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
     359        adjust( event.type );
     360    } );
     361
     362    // Adjust when entering/exiting fullscreen mode.
     363    fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
     364        textEditorResize();
     365        adjust();
     366    } );
     367
     368    // Adjust when collapsing the menu, changing the columns, changing the body class.
     369    $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
     370
     371    // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
     372    if ( $contentWrap.hasClass( 'html-active' ) ) {
     373        initialResize( function() {
     374            adjust();
     375            textEditorResize();
     376        } );
     377    }
    387378});
  • trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js

    r29185 r29279  
    4343        }
    4444
     45        e = e || {};
    4546        body = doc.body;
    4647        docElm = doc.documentElement;
     
    6061        marginBottom = editor.dom.getStyle( body, 'margin-bottom', true );
    6162        myHeight = body.offsetHeight + parseInt( marginTop, 10 ) + parseInt( marginBottom, 10 );
     63
     64        // IE < 11, other?
     65        if ( myHeight && myHeight < docElm.offsetHeight ) {
     66            myHeight = docElm.offsetHeight;
     67        }
    6268
    6369        // Make sure we have a valid height
     
    94100                resize( e );
    95101            }
     102
     103            editor.fire( 'wp-autoresize', { height: resizeHeight } );
    96104        }
    97105    }
     
    103111    function wait( times, interval, callback ) {
    104112        setTimeout( function() {
    105             resize({});
     113            resize();
    106114
    107115            if ( times-- ) {
     
    124132            // Add appropriate listeners for resizing the content area
    125133            editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
     134            resize();
    126135        }
    127136    }
    128137
    129138    function off() {
     139        var doc;
     140
    130141        // Don't turn off if the setting is 'on'
    131142        if ( ! settings.wp_autoresize_on ) {
     143            doc = editor.getDoc();
    132144            editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
    133145            editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
     146            doc.body.style.overflowY = 'auto';
     147            doc.documentElement.style.overflowY = 'auto'; // Old IE
    134148            oldSize = 0;
    135149        }
     
    159173    }
    160174
     175    // Reset the stored size
     176    editor.on( 'show', function() {
     177        oldSize = 0;
     178    });
     179
    161180    // Register the command
    162181    editor.addCommand( 'wpAutoResize', resize );
Note: See TracChangeset for help on using the changeset viewer.