Changeset 29279

Timestamp:

07/24/2014 01:32:29 AM (11 years ago)

Author:

azaozz

Message:

Editor scrolling:

• Improve TinyMCE resizing when a floated block is at the end of the content.
• Improve setting the padding/margin under the toolbar on loading.
• Add custom event on TinyMCE resizing and use it to adjust the pinning (if needed).

Part props avryl, see #28328.

Location:

trunk/src

Files:

• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/js/editor-expand.js (modified) (13 diffs)
• wp-includes/js/tinymce/plugins/wpautoresize/plugin.js (modified) (6 diffs)

trunk/src/wp-admin/css/edit.css

@@ -378 +378 @@
     overflow: hidden;
 }
+
+.wp-fullscreen-wrap #content-textarea-clone {
+    display: none;
+}
+
+/* editor-expand.js override */
+.wp-fullscreen-wrap {
+    padding-top: 0 !important;
+}
+
+.wp-fullscreen-wrap .wp-editor-area {
+    margin-top: 0 !important;
+}
+
+.wp-fullscreen-wrap .mce-edit-area {
+    padding-top: 0 !important;
+}
+/* end editor-expand.js override */
 
 #timestampdiv select {

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

@@ -42 +42 @@
     } );
 
-    $textEditor.on( 'keyup', function() {
-        var range = document.createRange(),
-            start = $textEditor[0].selectionStart,
-            end = $textEditor[0].selectionEnd,
+    $textEditor.on( 'keyup', function( event ) {
+        var VK = jQuery.ui.keyCode,
+            key = event.keyCode,
+            range = document.createRange(),
+            selStart = $textEditor[0].selectionStart,
+            selEnd = $textEditor[0].selectionEnd,
             textNode = $textEditorClone[0].firstChild,
             windowHeight = $window.height(),
+            buffer = 10,
             offset, cursorTop, cursorBottom, editorTop, editorBottom;
 
-        if ( start && end && start !== end ) {
-            return;
-        }
-
-        range.setStart( textNode, start );
-        range.setEnd( textNode, end + 1 );
+        if ( selStart && selEnd && selStart !== selEnd ) {
+            return;
+        }
+
+        // These are not TinyMCE ranges.
+        try {
+            range.setStart( textNode, selStart );
+            range.setEnd( textNode, selEnd + 1 );
+        } catch ( ex ) {}
 
         offset = range.getBoundingClientRect();
@@ -63 +69 @@
         }
 
-        cursorTop = offset.top;
-        cursorBottom = cursorTop + offset.height;
-        editorTop = $adminBar.outerHeight() + $textTop.outerHeight();
+        cursorTop = offset.top - buffer;
+        cursorBottom = cursorTop + offset.height + buffer;
+        editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $textTop.outerHeight();
         editorBottom = windowHeight - $bottom.outerHeight();
 
-        if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
-            window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
+        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 );
         }
     } );
@@ -78 +86 @@
         }
 
-        var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(),
-            textEditorHeight = $textEditor.height();
+        var textEditorHeight = $textEditor.height(),
+            hiddenHeight;
+
+        $textEditorClone.width( $textEditor.width() );
+        $textEditorClone.text( $textEditor.val() + '&nbsp;' );
+
+        hiddenHeight = $textEditorClone.height();
 
         if ( hiddenHeight < 300 ) {
@@ -91 +104 @@
         $textEditor.height( hiddenHeight );
 
-        adjust( 'resize' );
+        adjust();
     }
 
@@ -104 +117 @@
         editorInstance = editor;
 
-        // Resizing will be handled by the autoresize plugin.
-        editor.theme.resizeTo = function() {};
-
         // Set the minimum height to the initial viewport height.
         editor.settings.autoresize_min_height = 300;
@@ -119 +129 @@
             setTimeout( function() {
                 editor.execCommand( 'wpAutoResize' );
-                adjust( 'resize' );
-            }, 200 );
+                adjust();
+            }, 300 );
         } );
 
@@ -196 +206 @@
         editor.on( 'hide', function() {
             textEditorResize();
-            adjust( 'resize' );
+            adjust();
         } );
 
         // Adjust when the editor resizes.
-        editor.on( 'nodechange setcontent keyup FullscreenStateChanged', function() {
-            adjust( 'resize' );
-        } );
-
-        editor.on( 'wp-toolbar-toggle', function() {
-            $visualEditor.css( {
-                paddingTop: $visualTop.outerHeight()
-            } );
+        editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() {
+            adjust();
         } );
 
         // And adjust "immediately".
         // Allow some time to load CSS etc.
-        setTimeout( function() {
-            $visualEditor.css( {
-                paddingTop: $visualTop.outerHeight()
-            } );
-
-            adjust( 'resize' );
-        }, 500 );
-    } );
-
-    // Adjust when the window is scrolled or resized.
-    $window.on( 'scroll resize', function( event ) {
-        adjust( event.type );
-    } );
-
-    // Adjust when exiting fullscreen mode.
-    fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
-        adjust( 'resize' );
-    } );
-
-    // Adjust when collapsing the menu.
-    $document.on( 'wp-collapse-menu.editor-expand', function() {
-        adjust( 'resize' );
-    } )
-
-    // Adjust when changing the columns.
-    .on( 'postboxes-columnchange.editor-expand', function() {
-        adjust( 'resize' );
-    } )
-
-    // Adjust when changing the body class.
-    .on( 'editor-classchange.editor-expand', function() {
-        adjust( 'resize' );
+        initialResize( adjust );
     } );
 
     // Adjust the toolbars based on the active editor mode.
-    function adjust( eventType ) {
+    function adjust( type ) {
         // Make sure we're not in fullscreen mode.
         if ( fullscreen && fullscreen.settings.visible ) {
@@ -258 +231 @@
             windowWidth = $window.width(),
             adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
-            $top, $editor, visual,
+            resize = type !== 'scroll',
+            visual = ( editorInstance && ! editorInstance.isHidden() ),
+            $top, $editor,
             toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
 
-        // Visual editor.
-        if ( editorInstance && ! editorInstance.isHidden() ) {
+        if ( visual ) {
             $top = $visualTop;
             $editor = $visualEditor;
-            visual = true;
-
-            // Doesn't hide the panel of 'styleselect'. :(
-            tinymce.each( editorInstance.controlManager.buttons, function( button ) {
-                if ( button._active && ( button.type === 'colorbutton' || button.type === 'panelbutton' || button.type === 'menubutton' ) ) {
-                    button.hidePanel();
-                }
-            } );
-        // Text editor.
         } else {
             $top = $textTop;
@@ -288 +253 @@
 
         // Maybe pin the top.
-        if ( ( ! fixedTop || eventType === 'resize' ) &&
+        if ( ( ! fixedTop || resize ) &&
                 // Handle scrolling down.
                 ( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
@@ -308 +273 @@
             } );
         // Maybe unpin the top.
-        } else if ( fixedTop || eventType === 'resize' ) {
+        } else if ( fixedTop || resize ) {
             // Handle scrolling up.
             if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
@@ -343 +308 @@
 
         // Maybe adjust the bottom bar.
-        if ( ( ! fixedBottom || eventType === 'resize' ) &&
+        if ( ( ! fixedBottom || resize ) &&
                 // + 1 for the border around the .wp-editor-container.
                 ( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
@@ -354 +319 @@
                 borderTop: '1px solid #dedede'
             } );
-        } else if ( fixedBottom &&
+        } else if ( ( fixedBottom || resize ) &&
                 ( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
             fixedBottom = false;
@@ -365 +330 @@
             } );
         }
+
+        if ( resize ) {
+            $contentWrap.css( {
+                paddingTop: $tools.outerHeight()
+            } );
+
+            if ( visual ) {
+                $visualEditor.css( {
+                    paddingTop: $visualTop.outerHeight()
+                } );
+            } else {
+                $textEditor.css( {
+                    marginTop: $textTop.outerHeight()
+                } );
+                $textEditorClone.width( $textEditor.width() );
+            }
+        }
     }
 
-    textEditorResize();
-
-    $tools.css( {
-        position: 'absolute',
-        top: 0,
-        width: $contentWrap.width()
-    } );
-
-    $contentWrap.css( {
-        paddingTop: $tools.outerHeight()
-    } );
-
-    // This needs to execute after quicktags is ready or a button is added...
-    setTimeout( function() {
-        $textEditor.css( {
-            paddingTop: $textTop.outerHeight() + parseInt( $textEditor.css( 'padding-top' ), 10 )
-        } );
-    }, 500 );
+    function initialResize( callback ) {
+        for ( var i = 1; i < 6; i++ ) {
+            setTimeout( callback, 500 * i );
+        }
+    }
+
+    // Adjust when the window is scrolled or resized.
+    $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
+        adjust( event.type );
+    } );
+
+    // Adjust when entering/exiting fullscreen mode.
+    fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
+        textEditorResize();
+        adjust();
+    } );
+
+    // Adjust when collapsing the menu, changing the columns, changing the body class.
+    $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
+
+    // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
+    if ( $contentWrap.hasClass( 'html-active' ) ) {
+        initialResize( function() {
+            adjust();
+            textEditorResize();
+        } );
+    }
 });

trunk/src/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js

@@ -43 +43 @@
         }
 
+        e = e || {};
         body = doc.body;
         docElm = doc.documentElement;
@@ -60 +61 @@
         marginBottom = editor.dom.getStyle( body, 'margin-bottom', true );
         myHeight = body.offsetHeight + parseInt( marginTop, 10 ) + parseInt( marginBottom, 10 );
+
+        // IE < 11, other?
+        if ( myHeight && myHeight < docElm.offsetHeight ) {
+            myHeight = docElm.offsetHeight;
+        }
 
         // Make sure we have a valid height
@@ -94 +100 @@
                 resize( e );
             }
+
+            editor.fire( 'wp-autoresize', { height: resizeHeight } );
         }
     }
@@ -103 +111 @@
     function wait( times, interval, callback ) {
         setTimeout( function() {
-            resize({});
+            resize();
 
             if ( times-- ) {
@@ -124 +132 @@
             // Add appropriate listeners for resizing the content area
             editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
+            resize();
         }
     }
 
     function off() {
+        var doc;
+
         // Don't turn off if the setting is 'on'
         if ( ! settings.wp_autoresize_on ) {
+            doc = editor.getDoc();
             editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
             editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
+            doc.body.style.overflowY = 'auto';
+            doc.documentElement.style.overflowY = 'auto'; // Old IE
             oldSize = 0;
         }
@@ -159 +173 @@
     }
 
+    // Reset the stored size
+    editor.on( 'show', function() {
+        oldSize = 0;
+    });
+
     // Register the command
     editor.addCommand( 'wpAutoResize', resize );