Changeset 29186

Timestamp:

07/16/2014 04:05:13 AM (12 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:

• wp-admin/js/editor-expand.js (modified) (5 diffs)
• wp-includes/css/editor.css (modified) (1 diff)

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

@@ -118 +118 @@
                 editor.on( 'show', function() {
                         setTimeout( function() {
-                                editor.execCommand( 'mceAutoResize' );
+                                editor.execCommand( 'wpAutoResize' );
                                 adjust( 'resize' );
                         }, 200 );
                 } );
 
-                editor.on( 'keyup', function() {
-                        var offset = getCursorOffset(),
+                // Make sure the cursor is always visible.
+                // This is not only necessary to keep the cursor between the toolbars,
+                // but also to scroll the window when the cursor moves out of the viewport to a wpview.
+                // Setting a buffer > 0 will prevent the browser default.
+                // Some browsers will scroll to the middle,
+                // others to the top/bottom of the *window* when moving the cursor out of the viewport.
+                editor.on( 'keyup', function( event ) {
+                        var VK = tinymce.util.VK,
+                                key = event.keyCode,
+                                offset = getCursorOffset(),
                                 windowHeight = $window.height(),
+                                buffer = 10,
                                 cursorTop, cursorBottom, editorTop, editorBottom;
 
@@ -134 +143 @@
                         cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top;
                         cursorBottom = cursorTop + offset.height;
+                        cursorTop = cursorTop - buffer;
+                        cursorBottom = cursorBottom + buffer;
                         editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight();
-                        editorBottom = $window.height() - $bottom.outerHeight();
-
-                        if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
-                                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
+                        editorBottom = windowHeight - $bottom.outerHeight();
+
+                        if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+                                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
+                        } else if ( cursorBottom > editorBottom ) {
+                                window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
                         }
                 } );
@@ -146 +159 @@
                                 node = selection.getNode(),
                                 range = selection.getRng(),
-                                view, clone, right, offset;
+                                view, clone, offset;
 
                         if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) {
@@ -160 +173 @@
                                         if ( clone.startContainer.length > clone.endOffset ) {
                                                 clone.setEnd( clone.startContainer, clone.endOffset + 1 );
-                                                right = true;
                                         } else {
                                                 clone.setStart( clone.startContainer, clone.endOffset - 1 );
@@ -176 +188 @@
 
                         if ( ! offset.height ) {
-                                return false;
+                                return;
                         }
 

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

@@ -181 +181 @@
         line-height: 18px; 
 } 
-
-.mce-path-item:focus {
-        background: none;
-        color: inherit;
-}
 
 .mce-toolbar .mce-btn,