WordPress.org

Make WordPress Core

Changeset 29929


Ignore:
Timestamp:
10/16/2014 09:31:00 PM (6 years ago)
Author:
azaozz
Message:

Editor-expand:

  • Better calculation for the caret position when auto-scrolling while typing.
  • Fix auto-scrolling for non-WebKit browsers when the caret is above the top of the editor.

Fixes #29954

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/editor-expand.js

    r29886 r29929  
    173173        function mceGetCursorOffset() {
    174174            var node = editor.selection.getNode(),
    175                 view, offset;
     175                range, view, offset;
    176176
    177177            if ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
    178178                offset = view.getBoundingClientRect();
    179179            } else {
    180                 offset = node.getBoundingClientRect();
     180                range = editor.selection.getRng();
     181
     182                try {
     183                    offset = range.getClientRects()[0];
     184                } catch( er ) {}
     185
     186                if ( ! offset ) {
     187                    offset = node.getBoundingClientRect();
     188                }
    181189            }
    182190
     
    192200        function mceKeyup( event ) {
    193201            var VK = tinymce.util.VK,
    194                 key = event.keyCode,
    195                 offset = mceGetCursorOffset(),
    196                 buffer = 10,
    197                 cursorTop, cursorBottom, editorTop, editorBottom;
    198 
    199             if ( ! offset ) {
    200                 return;
    201             }
     202                key = event.keyCode;
    202203
    203204            // Bail on special keys.
    204             if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) {
     205            if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE ||
     206                key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT ) ) {
     207
    205208                return;
    206209            // OS keys, function keys, num lock, scroll lock
     
    209212            }
    210213
     214            mceScroll( key );
     215        }
     216
     217        function mceScroll( key ) {
     218            var VK = tinymce.util.VK,
     219                offset = mceGetCursorOffset(),
     220                buffer = 10,
     221                cursorTop, cursorBottom, editorTop, editorBottom;
     222
     223            if ( ! offset ) {
     224                return;
     225            }
     226
    211227            cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
    212             cursorBottom = cursorTop + offset.height;
    213             cursorTop = cursorTop - buffer;
    214             cursorBottom = cursorBottom + buffer;
     228            cursorBottom = cursorTop + offset.height + buffer;
     229            cursorTop -= buffer;
    215230            editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
    216231            editorBottom = heights.windowHeight - heights.bottomHeight - heights.statusBarHeight;
     
    221236            }
    222237
    223             if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
     238            // WebKit browsers scroll-into-view to the middle of the window but not for arrow keys/backspace.
     239            // The others scroll to the top of the window, we need to account for the adminbar and editor toolbar(s).
     240            if ( cursorTop < editorTop && ( ! tinymce.Env.webkit ||
     241                ( key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT || key === VK.BACKSPACE ) ) ) {
     242
    224243                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
    225244            } else if ( cursorBottom > editorBottom ) {
     
    261280            // Adjust when the editor resizes.
    262281            editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
     282            // Scroll to the caret or selection after undo/redo
     283            editor.on( 'undo redo', mceScroll );
    263284
    264285            $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
     
    270291            editor.off( 'hide', mceHide );
    271292            editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
     293            editor.off( 'undo redo', mceScroll );
    272294
    273295            $window.off( 'scroll.mce-float-panels' );
Note: See TracChangeset for help on using the changeset viewer.