Enhance the editor on the Add/Edit Post screens, first run. Props avril, see #28328.

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

src/wp-admin/css/edit.css

@@ -37,7 +37,6 @@
 
 #titlediv {
 	position: relative;
-	margin-bottom: 10px;
 }
 
 #titlediv label {
@@ -337,7 +336,7 @@ td.plugin-title p {
 	background-color: #f7f7f7;
 	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-	cursor: row-resize;
+	z-index: 999;
 }
 
 #post-status-info td {
@@ -345,7 +344,7 @@ td.plugin-title p {
 }
 
 .autosave-info {
-	padding: 2px;
+	padding: 2px 10px;
 	text-align: right;
 }
 
@@ -367,6 +366,18 @@ td.plugin-title p {
 	padding: 2px 10px;
 }
 
+#wp-content-editor-container {
+	position: relative;
+}
+
+#content-textarea-clone {
+	z-index: -1;
+	position: absolute;
+	top: 0;
+	visibility: hidden;
+	overflow: hidden;
+}
+
 #timestampdiv select {
 	height: 21px;
 	line-height: 14px;
@@ -1348,12 +1359,6 @@ table.links-table {
 		padding: 10px 20px;
 	}
 
-	#wp-content-editor-tools {
-		overflow: hidden;
-		padding: 20px 15px 1px 0;
-		top: 1px;
-	}
-
 	a.wp-switch-editor {
 		font-size: 16px;
 		line-height: 1em;

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

@@ -11,6 +11,7 @@ if ( !defined('ABSPATH') )
 	die('-1');
 
 wp_enqueue_script('post');
+wp_enqueue_script('editor-expand');
 
 if ( wp_is_mobile() )
 	wp_enqueue_script( 'jquery-touch-punch' );
@@ -492,6 +493,7 @@ if ( post_type_supports($post_type, 'editor') ) {
 	'editor_height' => 360,
 	'tinymce' => array(
 		'resize' => false,
+		'wp_autoresize_on' => true,
 		'add_unload_trigger' => false,
 	),
 ) ); ?>

src/wp-admin/js/common.js

@@ -179,7 +179,7 @@ $(document).ready( function() {
 	});
 
 	$('#collapse-menu').on('click.collapse-menu', function() {
-		var body = $( document.body ), respWidth;
+		var body = $( document.body ), respWidth, state;
 
 		// reset any compensation for submenus near the bottom of the screen
 		$('#adminmenu div.wp-submenu').css('margin-top', '');
@@ -197,19 +197,25 @@ $(document).ready( function() {
 				body.removeClass('auto-fold').removeClass('folded');
 				setUserSetting('unfold', 1);
 				setUserSetting('mfold', 'o');
+				state = 'open';
 			} else {
 				body.addClass('auto-fold');
 				setUserSetting('unfold', 0);
+				state = 'folded';
 			}
 		} else {
 			if ( body.hasClass('folded') ) {
 				body.removeClass('folded');
 				setUserSetting('mfold', 'o');
+				state = 'open';
 			} else {
 				body.addClass('folded');
 				setUserSetting('mfold', 'f');
+				state = 'folded';
 			}
 		}
+
+		$( document ).trigger( 'wp-collapse-menu', { state: state } );
 	});
 
 	if ( 'ontouchstart' in window || /IEMobile\/[1-9]/.test(navigator.userAgent) ) { // touch screen device
@@ -721,7 +727,7 @@ $(document).ready( function() {
 	window.wpResponsive.init();
 });
 
-// make Windows 8 devices playing along nicely
+// Make Windows 8 devices play along nicely.
 (function(){
 	if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {
 		var msViewportStyle = document.createElement( 'style' );

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

@@ -0,0 +1,378 @@
+
+window.wp = window.wp || {};
+
+jQuery( document ).ready( function($) {
+	var $window = $( window ),
+		$document = $( document ),
+		$adminBar = $( '#wpadminbar' ),
+		$contentWrap = $( '#wp-content-wrap' ),
+		$tools = $( '#wp-content-editor-tools' ),
+		$visualTop,
+		$visualEditor,
+		$textTop = $( '#ed_toolbar' ),
+		$textEditor = $( '#content' ),
+		$textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
+		$bottom = $( '#post-status-info' ),
+		$statusBar,
+		buffer = 200,
+		adjust,
+		fullscreen = window.wp.editor && window.wp.editor.fullscreen,
+		editorInstance,
+		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' ),
+		'line-height': $textEditor.css( 'line-height' ),
+		'padding': $textEditor.css( 'padding' ),
+		'padding-top': 37,
+		'white-space': 'pre-wrap',
+		'word-wrap': 'break-word'
+	} );
+
+	$textEditor.on( 'focus input propertychange', function() {
+		textEditorResize();
+	} );
+
+	$textEditor.on( 'keyup', function() {
+		var range = document.createRange(),
+			start = $textEditor[0].selectionStart,
+			end = $textEditor[0].selectionEnd,
+			textNode = $textEditorClone[0].firstChild,
+			windowHeight = $window.height(),
+			offset, cursorTop, cursorBottom, editorTop, editorBottom;
+
+		if ( start && end && start !== end ) {
+			return;
+		}
+
+		range.setStart( textNode, start );
+		range.setEnd( textNode, end + 1 );
+
+		offset = range.getBoundingClientRect();
+
+		if ( ! offset.height ) {
+			return;
+		}
+
+		cursorTop = offset.top;
+		cursorBottom = cursorTop + offset.height;
+		editorTop = $adminBar.outerHeight() + $textTop.outerHeight();
+		editorBottom = windowHeight - $bottom.outerHeight();
+
+		if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
+			window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
+		}
+	} );
+
+	function textEditorResize() {
+		if ( editorInstance && ! editorInstance.isHidden() ) {
+			return;
+		}
+
+		var hiddenHeight = $textEditorClone.width( $textEditor.width() ).text( $textEditor.val() + '&nbsp;' ).height(),
+			textEditorHeight = $textEditor.height();
+
+		if ( hiddenHeight < 300 ) {
+			hiddenHeight = 300;
+		}
+
+		if ( hiddenHeight === textEditorHeight ) {
+			return;
+		}
+
+		$textEditor.height( hiddenHeight );
+
+		adjust( 'resize' );
+	}
+
+	// We need to wait for TinyMCE to initialize.
+	$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
+		// Make sure it's the main editor.
+		if ( editor.id !== 'content' ) {
+			return;
+		}
+
+		// Copy the editor instance.
+		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;
+
+		// Get the necessary UI elements.
+		$visualTop = $contentWrap.find( '.mce-toolbar-grp' );
+		$visualEditor = $contentWrap.find( '.mce-edit-area' );
+		$statusBar = $contentWrap.find( '.mce-statusbar' ).filter( ':visible' );
+
+		// Adjust when switching editor modes.
+		editor.on( 'show', function() {
+			setTimeout( function() {
+				editor.execCommand( 'mceAutoResize' );
+				adjust( 'resize' );
+			}, 200 );
+		} );
+
+		editor.on( 'keyup', function() {
+			var offset = getCursorOffset(),
+				windowHeight = $window.height(),
+				cursorTop, cursorBottom, editorTop, editorBottom;
+
+			if ( ! offset ) {
+				return;
+			}
+
+			cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top;
+			cursorBottom = cursorTop + offset.height;
+			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 );
+			}
+		} );
+
+		function getCursorOffset() {
+			var selection = editor.selection,
+				node = selection.getNode(),
+				range = selection.getRng(),
+				view, clone, right, offset;
+
+			if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) {
+				return;
+			}
+
+			if ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
+				offset = view.getBoundingClientRect();
+			} else if ( selection.isCollapsed() ) {
+				clone = range.cloneRange();
+
+				if ( clone.startContainer.length > 1 ) {
+					if ( clone.startContainer.length > clone.endOffset ) {
+						clone.setEnd( clone.startContainer, clone.endOffset + 1 );
+						right = true;
+					} else {
+						clone.setStart( clone.startContainer, clone.endOffset - 1 );
+					}
+
+					selection.setRng( clone );
+					offset = selection.getRng().getBoundingClientRect();
+					selection.setRng( range );
+				} else {
+					offset = node.getBoundingClientRect();
+				}
+			} else {
+				offset = range.getBoundingClientRect();
+			}
+
+			if ( ! offset.height ) {
+				return false;
+			}
+
+			return offset;
+		}
+
+		editor.on( 'hide', function() {
+			textEditorResize();
+			adjust( 'resize' );
+		} );
+
+		// 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()
+			} );
+		} );
+
+		// 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' );
+	} );
+
+	// Adjust the toolbars based on the active editor mode.
+	function adjust( eventType ) {
+		// Make sure we're not in fullscreen mode.
+		if ( fullscreen && fullscreen.settings.visible ) {
+			return;
+		}
+
+		var bottomHeight = $bottom.outerHeight(),
+			windowPos = $window.scrollTop(),
+			windowHeight = $window.height(),
+			windowWidth = $window.width(),
+			adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
+			$top, $editor, visual,
+			toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
+
+		// Visual editor.
+		if ( editorInstance && ! editorInstance.isHidden() ) {
+			$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;
+			$editor = $textEditor;
+		}
+
+		toolsHeight = $tools.outerHeight();
+		topPos = $top.parent().offset().top;
+		topHeight = $top.outerHeight();
+		editorPos = $editor.offset().top;
+		editorHeight = $editor.outerHeight();
+		editorWidth = $editor.outerWidth();
+		statusBarHeight = visual ? $statusBar.outerHeight() : 0;
+
+		// Maybe pin the top.
+		if ( ( ! fixedTop || eventType === 'resize' ) &&
+				// Handle scrolling down.
+				( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
+				// Handle scrolling up.
+				windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
+			fixedTop = true;
+
+			$top.css( {
+				position: 'fixed',
+				top: adminBarHeight + toolsHeight,
+				width: editorWidth - ( visual ? 0 : 38 ),
+				borderTop: '1px solid #e5e5e5'
+			} );
+
+			$tools.css( {
+				position: 'fixed',
+				top: adminBarHeight,
+				width: editorWidth + 2
+			} );
+		// Maybe unpin the top.
+		} else if ( fixedTop || eventType === 'resize' ) {
+			// Handle scrolling up.
+			if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
+				fixedTop = false;
+
+				$top.css( {
+					position: 'absolute',
+					top: 0,
+					borderTop: 'none',
+					width: $editor.parent().width() - ( $top.outerWidth() - $top.width() )
+				} );
+				
+				$tools.css( {
+					position: 'absolute',
+					top: 0,
+					borderTop: 'none',
+					width: $contentWrap.width()
+				} );
+			// Handle scrolling down.
+			} else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
+				fixedTop = false;
+
+				$top.css( {
+					position: 'absolute',
+					top: window.pageYOffset - $editor.offset().top + adminBarHeight + $tools.outerHeight(),
+					borderTop: 'none'
+				} );
+				
+				$tools.css( {
+					position: 'absolute',
+					top: window.pageYOffset - $contentWrap.offset().top + adminBarHeight,
+					borderTop: 'none',
+					width: $contentWrap.width()
+				} );
+			}				
+		}
+
+		// Maybe adjust the bottom bar.
+		if ( ( ! fixedBottom || eventType === 'resize' ) &&
+				// + 1 for the border around the .wp-editor-container.
+				( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + 1 ) ) {
+			fixedBottom = true;
+
+			$bottom.css( {
+				position: 'fixed',
+				bottom: 0,
+				width: editorWidth + 2,
+				borderTop: '1px solid #dedede'
+			} );
+		} else if ( fixedBottom &&
+				( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - 1 ) ) {
+			fixedBottom = false;
+
+			$bottom.css( {
+				position: 'relative',
+				bottom: 'auto',
+				width: '100%',
+				borderTop: 'none'
+			} );
+		}
+	}
+
+	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 );
+});

src/wp-admin/js/post.js

@@ -1004,7 +1004,8 @@ jQuery(document).ready( function($) {
 	( function() {
 		var editor, offset, mce,
 			$textarea = $('textarea#content'),
-			$handle = $('#post-status-info');
+			$handle = $('#post-status-info'),
+			$contentWrap = $('#wp-content-wrap');
 
 		// No point for touch devices
 		if ( ! $textarea.length || 'ontouchstart' in window ) {
@@ -1012,6 +1013,10 @@ jQuery(document).ready( function($) {
 		}
 
 		function dragging( event ) {
+			if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
+				return;
+			}
+
 			if ( mce ) {
 				editor.theme.resizeTo( null, offset + event.pageY );
 			} else {
@@ -1024,6 +1029,10 @@ jQuery(document).ready( function($) {
 		function endDrag() {
 			var height, toolbarHeight;
 
+			if ( $contentWrap.hasClass( 'wp-editor-expand' ) ) {
+				return;
+			}
+
 			if ( mce ) {
 				editor.focus();
 				toolbarHeight = parseInt( $( '#wp-content-editor-container .mce-toolbar-grp' ).height(), 10 );
@@ -1074,14 +1083,11 @@ jQuery(document).ready( function($) {
 		$( '#post-formats-select input.post-format' ).on( 'change.set-editor-class', function() {
 			var editor, body, format = this.id;
 
-			if ( format && $( this ).prop('checked') ) {
-				editor = tinymce.get( 'content' );
-
-				if ( editor ) {
-					body = editor.getBody();
-					body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
-					editor.dom.addClass( body, format == 'post-format-0' ? 'post-format-standard' : format );
-				}
+			if ( format && $( this ).prop( 'checked' ) && ( editor = tinymce.get( 'content' ) ) ) {
+				body = editor.getBody();
+				body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
+				editor.dom.addClass( body, format == 'post-format-0' ? 'post-format-standard' : format );
+				$( document ).trigger( 'editor-classchange' );
 			}
 		});
 	}

src/wp-admin/js/postbox.js

@@ -159,6 +159,8 @@ var postboxes;
 			if ( el ) {
 				el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
 			}
+
+			$( document ).trigger( 'postboxes-columnchange' );
 		},
 
 		_pb_change : function() {