WordPress.org

Make WordPress Core

Changeset 29186


Ignore:
Timestamp:
07/16/14 04:05:13 (3 years ago)
Author:
azaozz
Message:

Editor scrolling: better "scroll into view" in the visual editor. Don't override MCE path focus style. Props avryl, see #28328.

Location:
trunk/src
Files:
2 edited

Legend:

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

    r29075 r29186  
    118118        editor.on( 'show', function() { 
    119119            setTimeout( function() { 
    120                 editor.execCommand( 'mceAutoResize' ); 
     120                editor.execCommand( 'wpAutoResize' ); 
    121121                adjust( 'resize' ); 
    122122            }, 200 ); 
    123123        } ); 
    124124 
    125         editor.on( 'keyup', function() { 
    126             var offset = getCursorOffset(), 
     125        // Make sure the cursor is always visible. 
     126        // This is not only necessary to keep the cursor between the toolbars, 
     127        // but also to scroll the window when the cursor moves out of the viewport to a wpview. 
     128        // Setting a buffer > 0 will prevent the browser default. 
     129        // Some browsers will scroll to the middle, 
     130        // others to the top/bottom of the *window* when moving the cursor out of the viewport. 
     131        editor.on( 'keyup', function( event ) { 
     132            var VK = tinymce.util.VK, 
     133                key = event.keyCode, 
     134                offset = getCursorOffset(), 
    127135                windowHeight = $window.height(), 
     136                buffer = 10, 
    128137                cursorTop, cursorBottom, editorTop, editorBottom; 
    129138 
     
    134143            cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top; 
    135144            cursorBottom = cursorTop + offset.height; 
     145            cursorTop = cursorTop - buffer; 
     146            cursorBottom = cursorBottom + buffer; 
    136147            editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight(); 
    137             editorBottom = $window.height() - $bottom.outerHeight(); 
    138  
    139             if ( cursorTop < editorTop || cursorBottom > editorBottom ) { 
    140                 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 ); 
     148            editorBottom = windowHeight - $bottom.outerHeight(); 
     149 
     150            if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) { 
     151                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop ); 
     152            } else if ( cursorBottom > editorBottom ) { 
     153                window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom ); 
    141154            } 
    142155        } ); 
     
    146159                node = selection.getNode(), 
    147160                range = selection.getRng(), 
    148                 view, clone, right, offset; 
     161                view, clone, offset; 
    149162 
    150163            if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) { 
     
    160173                    if ( clone.startContainer.length > clone.endOffset ) { 
    161174                        clone.setEnd( clone.startContainer, clone.endOffset + 1 ); 
    162                         right = true; 
    163175                    } else { 
    164176                        clone.setStart( clone.startContainer, clone.endOffset - 1 ); 
     
    176188 
    177189            if ( ! offset.height ) { 
    178                 return false; 
     190                return; 
    179191            } 
    180192 
  • trunk/src/wp-includes/css/editor.css

    r29075 r29186  
    181181    line-height: 18px;  
    182182}  
    183  
    184 .mce-path-item:focus { 
    185     background: none; 
    186     color: inherit; 
    187 } 
    188183 
    189184.mce-toolbar .mce-btn, 
Note: See TracChangeset for help on using the changeset viewer.