Editor scrolling:

- Add a Screen Option to turn it on/off, and on()/off() methods from JS. Store the user preference.
- Fix delayed calls to resize() in the TinyMCE autoresize plugin.
See #28328.

git-svn-id: https://develop.svn.wordpress.org/trunk@29336 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/edit.css

@@ -355,12 +355,21 @@ td.plugin-title p {
 #content-resize-handle {
 	background: transparent url(../images/resize.gif) no-repeat scroll right bottom;
 	width: 12px;
+	cursor: row-resize;
 }
 
 .rtl #content-resize-handle {
 	background: transparent url(../images/resize-rtl.gif) no-repeat scroll left bottom;
 }
 
+.wp-editor-expand #content-resize-handle {
+	display: none;
+}
+
+#postdivrich #content {
+	resize: none;
+}
+
 #wp-word-count {
 	display: block;
 	padding: 2px 10px;

src/wp-admin/edit-form-advanced.php

@@ -490,7 +490,7 @@ do_action( 'edit_form_after_title', $post );
 
 if ( post_type_supports($post_type, 'editor') ) {
 ?>
-<div id="postdivrich" class="postarea edit-form-section">
+<div id="postdivrich" class="postarea edit-form-section<?php if ( get_user_setting( 'editor_expand', 'on' ) === 'on' ) { echo ' wp-editor-expand'; } ?>">
 
 <?php wp_editor( $post->post_content, 'content', array(
 	'dfw' => true,
@@ -499,7 +499,7 @@ if ( post_type_supports($post_type, 'editor') ) {
 	'editor_height' => 360,
 	'tinymce' => array(
 		'resize' => false,
-		'wp_autoresize_on' => ! empty( $_wp_autoresize_on ),
+		'wp_autoresize_on' => ( ! empty( $_wp_autoresize_on ) && get_user_setting( 'editor_expand', 'on' ) === 'on' ),
 		'add_unload_trigger' => false,
 	),
 ) ); ?>

src/wp-admin/includes/screen.php

@@ -1110,6 +1110,11 @@ final class WP_Screen {
 				<?php
 			endfor; ?>
 		</div>
+		<div class="editor-expand hidden">
+			<label for="editor-expand-toggle">
+			<input type="checkbox" id="editor-expand-toggle" <?php checked( get_user_setting( 'editor_expand', 'on' ) === 'on' ); ?> />
+			<?php _e( 'Expand the editor to match the window height.' ); ?></label>
+		</div>
 		<?php
 	}
 

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

@@ -6,6 +6,7 @@ jQuery( document ).ready( function($) {
 	var $window = $( window ),
 		$document = $( document ),
 		$adminBar = $( '#wpadminbar' ),
+		$wrap = $( '#postdivrich' ),
 		$contentWrap = $( '#wp-content-wrap' ),
 		$tools = $( '#wp-content-editor-tools' ),
 		$visualTop,
@@ -15,18 +16,15 @@ jQuery( document ).ready( function($) {
 		$textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
 		$bottom = $( '#post-status-info' ),
 		$statusBar,
-		buffer = 200,
 		fullscreen = window.wp.editor && window.wp.editor.fullscreen,
-		editorInstance,
+		mceEditor,
+		mceBind = function(){},
+		mceUnbind = function(){},
 		fixedTop = false,
 		fixedBottom = false;
 
 	$textEditorClone.insertAfter( $textEditor );
 
-	// use to enable/disable
-	$contentWrap.addClass( 'wp-editor-expand' );
-	$( '#content-resize-handle' ).hide();
-
 	$textEditorClone.css( {
 		'font-family': $textEditor.css( 'font-family' ),
 		'font-size': $textEditor.css( 'font-size' ),
@@ -37,11 +35,7 @@ jQuery( document ).ready( function($) {
 		'word-wrap': 'break-word'
 	} );
 
-	$textEditor.on( 'focus input propertychange', function() {
-		textEditorResize();
-	} );
-
-	$textEditor.on( 'keyup', function( event ) {
+	function textEditorKeyup( event ) {
 		var VK = jQuery.ui.keyCode,
 			key = event.keyCode,
 			range = document.createRange(),
@@ -78,10 +72,10 @@ jQuery( document ).ready( function($) {
 		} else if ( cursorBottom > editorBottom ) {
 			window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
 		}
-	} );
+	}
 
 	function textEditorResize() {
-		if ( editorInstance && ! editorInstance.isHidden() ) {
+		if ( mceEditor && ! mceEditor.isHidden() ) {
 			return;
 		}
 
@@ -114,7 +108,7 @@ jQuery( document ).ready( function($) {
 		}
 
 		// Copy the editor instance.
-		editorInstance = editor;
+		mceEditor = editor;
 
 		// Set the minimum height to the initial viewport height.
 		editor.settings.autoresize_min_height = 300;
@@ -124,7 +118,7 @@ jQuery( document ).ready( function($) {
 		$visualEditor = $contentWrap.find( '.mce-edit-area' );
 		$statusBar = $contentWrap.find( '.mce-statusbar' ).filter( ':visible' );
 
-		function getCursorOffset() {
+		function mceGetCursorOffset() {
 			var node = editor.selection.getNode(),
 				view, offset;
 
@@ -143,10 +137,10 @@ jQuery( document ).ready( function($) {
 		// 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 ) {
+		function mceKeyup( event ) {
 			var VK = tinymce.util.VK,
 				key = event.keyCode,
-				offset = getCursorOffset(),
+				offset = mceGetCursorOffset(),
 				windowHeight = $window.height(),
 				buffer = 10,
 				cursorTop, cursorBottom, editorTop, editorBottom;
@@ -172,29 +166,41 @@ jQuery( document ).ready( function($) {
 			} else if ( cursorBottom > editorBottom ) {
 				window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
 			}
-		} );
+		}
 
 		// Adjust when switching editor modes.
-		editor.on( 'show', function() {
+		function mceShow() {
 			setTimeout( function() {
 				editor.execCommand( 'wpAutoResize' );
 				adjust();
 			}, 300 );
-		} );
+		}
 
-		editor.on( 'hide', function() {
+		function mceHide() {
 			textEditorResize();
 			adjust();
-		} );
+		}
 
-		// Adjust when the editor resizes.
-		editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', function() {
-			adjust();
-		} );
+		mceBind = function() {
+			editor.on( 'keyup', mceKeyup );
+			editor.on( 'show', mceShow );
+			editor.on( 'hide', mceHide );
+			// Adjust when the editor resizes.
+			editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+		};
 
-		// And adjust "immediately".
-		// Allow some time to load CSS etc.
-		initialResize( adjust );
+		mceUnbind = function() {
+			editor.off( 'keyup', mceKeyup );
+			editor.off( 'show', mceShow );
+			editor.off( 'hide', mceHide );
+			editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
+		};
+
+		if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
+			// Adjust "immediately"
+			mceBind();
+			initialResize( adjust );
+		}
 	} );
 
 	// Adjust the toolbars based on the active editor mode.
@@ -210,7 +216,8 @@ jQuery( document ).ready( function($) {
 			windowWidth = $window.width(),
 			adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
 			resize = type !== 'scroll',
-			visual = ( editorInstance && ! editorInstance.isHidden() ),
+			visual = ( mceEditor && ! mceEditor.isHidden() ),
+			buffer = 200,
 			$top, $editor,
 			toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
 
@@ -327,31 +334,132 @@ jQuery( document ).ready( function($) {
 		}
 	}
 
+	function fullscreenHide() {
+		textEditorResize();
+		adjust();
+	}
+
 	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 );
-	} );
+	function on() {
+		// Scroll to the top when triggering this from JS.
+		// Ensures toolbars are pinned properly.
+		if ( window.pageYOffset && window.pageYOffset > 130 ) {
+			window.scrollTo( window.pageXOffset, 0 );
+		}
 
-	// Adjust when entering/exiting fullscreen mode.
-	fullscreen && fullscreen.pubsub.subscribe( 'hidden', function() {
-		textEditorResize();
-		adjust();
-	} );
+		$wrap.addClass( 'wp-editor-expand' );
 
-	// 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();
+		// Adjust when the window is scrolled or resized.
+		$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
+			adjust( event.type );
 		} );
+
+		// 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 );
+
+		$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
+		$textEditor.on( 'keyup.editor-expand', textEditorKeyup );
+		mceBind();
+
+		// Adjust when entering/exiting fullscreen mode.
+		fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
+
+		if ( mceEditor ) {
+			mceEditor.settings.wp_autoresize_on = true;
+			mceEditor.execCommand( 'wpAutoResizeOn' );
+
+			if ( ! mceEditor.isHidden() ) {
+				mceEditor.execCommand( 'wpAutoResize' );
+			}
+		}
+
+		if ( ! mceEditor || mceEditor.isHidden() ) {
+			textEditorResize();
+		}
+
+		adjust();
 	}
+
+	function off() {
+		var height = window.getUserSetting('ed_size');
+
+		// Scroll to the top when triggering this from JS.
+		// Ensures toolbars are reset properly.
+		if ( window.pageYOffset && window.pageYOffset > 130 ) {
+			window.scrollTo( window.pageXOffset, 0 );
+		}
+
+		$wrap.removeClass( 'wp-editor-expand' );
+
+		// Adjust when the window is scrolled or resized.
+		$window.off( 'scroll.editor-expand resize.editor-expand' );
+
+		// Adjust when collapsing the menu, changing the columns, changing the body class.
+		$document.off( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust );
+
+		$textEditor.off( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
+		$textEditor.off( 'keyup.editor-expand', textEditorKeyup );
+		mceUnbind();
+
+		// Adjust when entering/exiting fullscreen mode.
+		fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
+
+		// Reset all css
+		$.each( [ $visualTop, $textTop, $tools, $bottom, $contentWrap, $visualEditor, $textEditor ], function( i, element ) {
+			element && element.attr( 'style', '' );
+		});
+
+		if ( mceEditor ) {
+			mceEditor.settings.wp_autoresize_on = false;
+			mceEditor.execCommand( 'wpAutoResizeOff' );
+
+			if ( ! mceEditor.isHidden() ) {
+				$textEditor.hide();
+
+				if ( height ) {
+					mceEditor.theme.resizeTo( null, height );
+				}
+			}
+		}
+
+		if ( height ) {
+			$textEditor.height( height );
+		}
+	}
+
+	// Start on load
+	if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
+		on();
+
+		// Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
+		if ( $contentWrap.hasClass( 'html-active' ) ) {
+			initialResize( function() {
+				adjust();
+				textEditorResize();
+			} );
+		}
+	}
+
+	// Show the on/off checkbox
+	$( '#adv-settings .editor-expand' ).show();
+	$( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
+		if ( $(this).prop( 'checked' ) ) {
+			on();
+			window.setUserSetting( 'editor_expand', 'on' );
+		} else {
+			off();
+			window.setUserSetting( 'editor_expand', 'off' );
+		}
+	});
+
+	// Expose on() and off()
+	window.editorExpand = {
+		on: on,
+		off: off
+	};
 });

src/wp-admin/js/post.js

@@ -1005,7 +1005,7 @@ jQuery(document).ready( function($) {
 		var editor, offset, mce,
 			$textarea = $('textarea#content'),
 			$handle = $('#post-status-info'),
-			$contentWrap = $('#wp-content-wrap');
+			$postdivrich = $('#postdivrich');
 
 		// No point for touch devices
 		if ( ! $textarea.length || 'ontouchstart' in window ) {
@@ -1015,7 +1015,7 @@ jQuery(document).ready( function($) {
 		}
 
 		function dragging( event ) {
-			if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
+			if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
 				return;
 			}
 
@@ -1031,7 +1031,7 @@ jQuery(document).ready( function($) {
 		function endDrag() {
 			var height, toolbarHeight;
 
-			if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
+			if ( $postdivrich.hasClass( 'wp-editor-expand' ) ) {
 				return;
 			}
 
@@ -1057,8 +1057,6 @@ jQuery(document).ready( function($) {
 			}
 		}
 
-		$textarea.css( 'resize', 'none' );
-
 		$handle.on( 'mousedown.wp-editor-resize', function( event ) {
 			if ( typeof tinymce !== 'undefined' ) {
 				editor = tinymce.get('content');