Changeset 29186

Timestamp:

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