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.
Built from https://develop.svn.wordpress.org/trunk@29336


git-svn-id: http://core.svn.wordpress.org/trunk@29116 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.css

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

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;

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,
 	),
 ) ); ?>

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
 	}
 

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
+	};
 });

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');

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

@@ -21,7 +21,9 @@
  * it's initialized.
  */
 tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
-	var settings = editor.settings, oldSize = 0;
+	var settings = editor.settings,
+		oldSize = 0,
+		isActive = false;
 
 	function isFullscreen() {
 		return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
@@ -37,8 +39,12 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
 	function resize( e ) {
 		var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight, marginTop, marginBottom;
 
+		if ( ! isActive ) {
+			return;
+		}
+
 		doc = editor.getDoc();
-		if (!doc) {
+		if ( ! doc ) {
 			return;
 		}
 
@@ -128,6 +134,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
 
 	function on() {
 		if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
+			isActive = true;
 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
 			// Add appropriate listeners for resizing the content area
 			editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
@@ -140,6 +147,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
 
 		// Don't turn off if the setting is 'on'
 		if ( ! settings.wp_autoresize_on ) {
+			isActive = false;
 			doc = editor.getDoc();
 			editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
 			editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
@@ -151,6 +159,8 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
 
 	if ( settings.wp_autoresize_on ) {
 		// Turn resizing on when the editor loads
+		isActive = true;
+
 		editor.on( 'init', function() {
 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
 		});
@@ -163,7 +173,7 @@ tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
 
 		if ( editor.getParam( 'autoresize_on_init', true ) ) {
 			editor.on( 'init', function() {
-				// Hit it 20 times in 100 ms intervals
+				// Hit it 10 times in 200 ms intervals
 				wait( 10, 200, function() {
 					// Hit it 5 times in 1 sec intervals
 					wait( 5, 1000 );

wp-includes/js/tinymce/plugins/wpautoresize/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.add("wpautoresize",function(a){function b(){return a.plugins.fullscreen&&a.plugins.fullscreen.isFullscreen()}function c(d){var e,f,i,j,k,l,m,n,o=tinymce.DOM;if(f=a.getDoc()){if(d=d||{},i=f.body,j=f.documentElement,k=g.autoresize_min_height,!i||d&&"setcontent"===d.type&&d.initial||b())return void(i&&j&&(i.style.overflowY="auto",j.style.overflowY="auto"));m=a.dom.getStyle(i,"margin-top",!0),n=a.dom.getStyle(i,"margin-bottom",!0),l=i.offsetHeight+parseInt(m,10)+parseInt(n,10),l&&l<j.offsetHeight&&(l=j.offsetHeight),(isNaN(l)||0>=l)&&(l=tinymce.Env.ie?i.scrollHeight:tinymce.Env.webkit&&0===i.clientHeight?0:i.offsetHeight),l>g.autoresize_min_height&&(k=l),g.autoresize_max_height&&l>g.autoresize_max_height?(k=g.autoresize_max_height,i.style.overflowY="auto",j.style.overflowY="auto"):(i.style.overflowY="hidden",j.style.overflowY="hidden",i.scrollTop=0),k!==h&&(e=k-h,o.setStyle(o.get(a.id+"_ifr"),"height",k+"px"),h=k,tinymce.isWebKit&&0>e&&c(d),a.fire("wp-autoresize",{height:k}))}}function d(a,b,e){setTimeout(function(){c(),a--?d(a,b,e):e&&e()},b)}function e(){a.dom.hasClass(a.getBody(),"wp-autoresize")||(a.dom.addClass(a.getBody(),"wp-autoresize"),a.on("nodechange setcontent keyup FullscreenStateChanged",c),c())}function f(){var b;g.wp_autoresize_on||(b=a.getDoc(),a.dom.removeClass(a.getBody(),"wp-autoresize"),a.off("nodechange setcontent keyup FullscreenStateChanged",c),b.body.style.overflowY="auto",b.documentElement.style.overflowY="auto",h=0)}var g=a.settings,h=0;a.settings.inline||(g.autoresize_min_height=parseInt(a.getParam("autoresize_min_height",a.getElement().offsetHeight),10),g.autoresize_max_height=parseInt(a.getParam("autoresize_max_height",0),10),g.wp_autoresize_on&&(a.on("init",function(){a.dom.addClass(a.getBody(),"wp-autoresize")}),a.on("nodechange keyup FullscreenStateChanged",c),a.on("setcontent",function(){d(3,100)}),a.getParam("autoresize_on_init",!0)&&a.on("init",function(){d(10,200,function(){d(5,1e3)})})),a.on("show",function(){h=0}),a.addCommand("wpAutoResize",c),a.addCommand("wpAutoResizeOn",e),a.addCommand("wpAutoResizeOff",f))});
+tinymce.PluginManager.add("wpautoresize",function(a){function b(){return a.plugins.fullscreen&&a.plugins.fullscreen.isFullscreen()}function c(d){var e,f,j,k,l,m,n,o,p=tinymce.DOM;if(i&&(f=a.getDoc())){if(d=d||{},j=f.body,k=f.documentElement,l=g.autoresize_min_height,!j||d&&"setcontent"===d.type&&d.initial||b())return void(j&&k&&(j.style.overflowY="auto",k.style.overflowY="auto"));n=a.dom.getStyle(j,"margin-top",!0),o=a.dom.getStyle(j,"margin-bottom",!0),m=j.offsetHeight+parseInt(n,10)+parseInt(o,10),m&&m<k.offsetHeight&&(m=k.offsetHeight),(isNaN(m)||0>=m)&&(m=tinymce.Env.ie?j.scrollHeight:tinymce.Env.webkit&&0===j.clientHeight?0:j.offsetHeight),m>g.autoresize_min_height&&(l=m),g.autoresize_max_height&&m>g.autoresize_max_height?(l=g.autoresize_max_height,j.style.overflowY="auto",k.style.overflowY="auto"):(j.style.overflowY="hidden",k.style.overflowY="hidden",j.scrollTop=0),l!==h&&(e=l-h,p.setStyle(p.get(a.id+"_ifr"),"height",l+"px"),h=l,tinymce.isWebKit&&0>e&&c(d),a.fire("wp-autoresize",{height:l}))}}function d(a,b,e){setTimeout(function(){c(),a--?d(a,b,e):e&&e()},b)}function e(){a.dom.hasClass(a.getBody(),"wp-autoresize")||(i=!0,a.dom.addClass(a.getBody(),"wp-autoresize"),a.on("nodechange setcontent keyup FullscreenStateChanged",c),c())}function f(){var b;g.wp_autoresize_on||(i=!1,b=a.getDoc(),a.dom.removeClass(a.getBody(),"wp-autoresize"),a.off("nodechange setcontent keyup FullscreenStateChanged",c),b.body.style.overflowY="auto",b.documentElement.style.overflowY="auto",h=0)}var g=a.settings,h=0,i=!1;a.settings.inline||(g.autoresize_min_height=parseInt(a.getParam("autoresize_min_height",a.getElement().offsetHeight),10),g.autoresize_max_height=parseInt(a.getParam("autoresize_max_height",0),10),g.wp_autoresize_on&&(i=!0,a.on("init",function(){a.dom.addClass(a.getBody(),"wp-autoresize")}),a.on("nodechange keyup FullscreenStateChanged",c),a.on("setcontent",function(){d(3,100)}),a.getParam("autoresize_on_init",!0)&&a.on("init",function(){d(10,200,function(){d(5,1e3)})})),a.on("show",function(){h=0}),a.addCommand("wpAutoResize",c),a.addCommand("wpAutoResizeOn",e),a.addCommand("wpAutoResizeOff",f))});