Changeset 29929

Timestamp:

10/16/2014 09:31:00 PM (10 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:

• trunk/src/wp-admin/js/editor-expand.js (modified) (6 diffs)

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

@@ -173 +173 @@
         function mceGetCursorOffset() {
             var node = editor.selection.getNode(),
-                view, offset;
+                range, view, offset;
 
             if ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
                 offset = view.getBoundingClientRect();
             } else {
-                offset = node.getBoundingClientRect();
+                range = editor.selection.getRng();
+
+                try {
+                    offset = range.getClientRects()[0];
+                } catch( er ) {}
+
+                if ( ! offset ) {
+                    offset = node.getBoundingClientRect();
+                }
             }
 
@@ -192 +200 @@
         function mceKeyup( event ) {
             var VK = tinymce.util.VK,
-                key = event.keyCode,
-                offset = mceGetCursorOffset(),
-                buffer = 10,
-                cursorTop, cursorBottom, editorTop, editorBottom;
-
-            if ( ! offset ) {
-                return;
-            }
+                key = event.keyCode;
 
             // Bail on special keys.
-            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 ) ) {
+            if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE ||
+                key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT ) ) {
+
                 return;
             // OS keys, function keys, num lock, scroll lock
@@ -209 +212 @@
             }
 
+            mceScroll( key );
+        }
+
+        function mceScroll( key ) {
+            var VK = tinymce.util.VK,
+                offset = mceGetCursorOffset(),
+                buffer = 10,
+                cursorTop, cursorBottom, editorTop, editorBottom;
+
+            if ( ! offset ) {
+                return;
+            }
+
             cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
-            cursorBottom = cursorTop + offset.height;
-            cursorTop = cursorTop - buffer;
-            cursorBottom = cursorBottom + buffer;
+            cursorBottom = cursorTop + offset.height + buffer;
+            cursorTop -= buffer;
             editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
             editorBottom = heights.windowHeight - heights.bottomHeight - heights.statusBarHeight;
@@ -221 +236 @@
             }
 
-            if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+            // WebKit browsers scroll-into-view to the middle of the window but not for arrow keys/backspace.
+            // The others scroll to the top of the window, we need to account for the adminbar and editor toolbar(s).
+            if ( cursorTop < editorTop && ( ! tinymce.Env.webkit ||
+                ( key === VK.UP || key === VK.RIGHT || key === VK.DOWN || key === VK.LEFT || key === VK.BACKSPACE ) ) ) {
+
                 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
             } else if ( cursorBottom > editorBottom ) {
@@ -261 +280 @@
             // Adjust when the editor resizes.
             editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+            // Scroll to the caret or selection after undo/redo
+            editor.on( 'undo redo', mceScroll );
 
             $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
@@ -270 +291 @@
             editor.off( 'hide', mceHide );
             editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+            editor.off( 'undo redo', mceScroll );
 
             $window.off( 'scroll.mce-float-panels' );