Editor scrolling:

- Properly handle change of sidebar height when opening, closing or hiding postboxes.
- Add a flag when to start pinning. Set it to few pixels more than the initial editor height.
See #28328
Built from https://develop.svn.wordpress.org/trunk@29523


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

wp-admin/js/editor-expand.js

@@ -226,13 +226,13 @@ jQuery( document ).ready( function($) {
 			adminBarHeight = windowWidth > 600 ? $adminBar.height() : 0,
 			resize = type !== 'scroll',
 			visual = ( mceEditor && ! mceEditor.isHidden() ),
-			buffer = autoresizeMinHeight + adminBarHeight,
+			buffer = autoresizeMinHeight,
 			postBodyTop = $postBody.offset().top,
 			borderWidth = 1,
 			contentWrapWidth = $contentWrap.width(),
 			sideSortablesHeight = $sideSortables.height(),
-			$top, $editor, sidebarTop, footerTop,
+			$top, $editor, sidebarTop, footerTop, canPin,
-			toolsHeight, topPos, topHeight, editorPos, editorHeight, editorWidth, statusBarHeight;
+			toolsHeight, topPos, topHeight, editorPos, editorHeight, statusBarHeight;
 
 		if ( visual ) {
 			$top = $visualTop;
@@ -247,37 +247,14 @@ jQuery( document ).ready( function($) {
 		topHeight = $top.outerHeight();
 		editorPos = $editor.offset().top;
 		editorHeight = $editor.outerHeight();
-		editorWidth = $editor.outerWidth();
 		statusBarHeight = visual ? $statusBar.outerHeight() : 0;
 
+		// Should we pin?
+		canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
+		canPin = editorHeight > ( canPin + 5 );
 
-		// Maybe pin the top.
+		if ( ! canPin ) {
-		if ( ( ! fixedTop || resize ) &&
+			if ( 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: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
-				borderTop: '1px solid #e5e5e5'
-			} );
-
-			$tools.css( {
-				position: 'fixed',
-				top: adminBarHeight,
-				width: contentWrapWidth
-			} );
-		// Maybe unpin the top.
-		} else if ( fixedTop || resize ) {
-			// Handle scrolling up.
-			if ( windowPos <= ( topPos - toolsHeight -  adminBarHeight ) ) {
-				fixedTop = false;
-
 				$top.css( {
 					position: 'absolute',
 					top: 0,
@@ -290,53 +267,102 @@ jQuery( document ).ready( function($) {
 					top: 0,
 					width: contentWrapWidth
 				} );
-			// Handle scrolling down.
+
-			} else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
+				$bottom.css( {
-				fixedTop = false;
+					position: 'relative',
+					bottom: 'auto',
+					width: '100%',
+					borderTop: 'none'
+				} );
+			}
+		} else {
+			// Maybe pin the top.
+			if ( ( ! fixedTop || resize ) &&
+				// Handle scrolling down.
+				( windowPos >= ( topPos - toolsHeight - adminBarHeight ) &&
+				// Handle scrolling up.
+				windowPos <= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) ) {
+
+				fixedTop = true;
 
 				$top.css( {
-					position: 'absolute',
+					position: 'fixed',
-					top: editorHeight - buffer,
+					top: adminBarHeight + toolsHeight,
-					width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+					width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ),
+					borderTop: '1px solid #e5e5e5'
 				} );
 
 				$tools.css( {
-					position: 'absolute',
+					position: 'fixed',
-					top: editorHeight - buffer + borderWidth, // border
+					top: adminBarHeight,
 					width: contentWrapWidth
 				} );
+			// Maybe unpin the top.
+			} else if ( fixedTop || resize ) {
+				// Handle scrolling up.
+				if ( windowPos <= ( topPos - toolsHeight - adminBarHeight ) ) {
+					fixedTop = false;
+
+					$top.css( {
+						position: 'absolute',
+						top: 0,
+						borderTop: 'none',
+						width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+					} );
+
+					$tools.css( {
+						position: 'absolute',
+						top: 0,
+						width: contentWrapWidth
+					} );
+				// Handle scrolling down.
+				} else if ( windowPos >= ( topPos - toolsHeight - adminBarHeight + editorHeight - buffer ) ) {
+					fixedTop = false;
+
+					$top.css( {
+						position: 'absolute',
+						top: editorHeight - buffer,
+						width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
+					} );
+
+					$tools.css( {
+						position: 'absolute',
+						top: editorHeight - buffer + borderWidth, // border
+						width: contentWrapWidth
+					} );
+				}
 			}
-		}
 
-		// Maybe adjust the bottom bar.
+			// Maybe adjust the bottom bar.
-		if ( ( ! fixedBottom || resize ) &&
+			if ( ( ! fixedBottom || resize ) &&
-			// +[n] for the border around the .wp-editor-container.
+				// +[n] for the border around the .wp-editor-container.
-			( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
+				( windowPos + windowHeight ) <= ( editorPos + editorHeight + bottomHeight + statusBarHeight + borderWidth ) ) {
 
-			fixedBottom = true;
+				fixedBottom = true;
 
-			$bottom.css( {
+				$bottom.css( {
-				position: 'fixed',
+					position: 'fixed',
-				bottom: 0,
+					bottom: 0,
-				width: editorWidth + ( borderWidth * 2 ),
+					width: contentWrapWidth,
-				borderTop: '1px solid #dedede'
+					borderTop: '1px solid #dedede'
-			} );
+				} );
-		} else if ( ( fixedBottom || resize ) &&
+			} else if ( ( fixedBottom || resize ) &&
-				( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
+					( windowPos + windowHeight ) > ( editorPos + editorHeight + bottomHeight + statusBarHeight - borderWidth ) ) {
-			fixedBottom = false;
+				fixedBottom = false;
 
-			$bottom.css( {
+				$bottom.css( {
-				position: 'relative',
+					position: 'relative',
-				bottom: 'auto',
+					bottom: 'auto',
-				width: '100%',
+					width: '100%',
-				borderTop: 'none'
+					borderTop: 'none'
-			} );
+				} );
+			}
 		}
 
 		// Sidebar pinning
 		if ( $postboxContainer.width() < 300 && windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
 			$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
-			windowHeight < editorHeight * 0.7 ) { // the editor is taller than the viewport
+			windowHeight < editorHeight ) { // the editor is taller than the viewport
 
 			if ( sideSortablesHeight > windowHeight || fixedSideTop || fixedSideBottom ) {
 				// Reset when scrolling to the top
@@ -454,7 +480,7 @@ jQuery( document ).ready( function($) {
 
 	function afterScroll() {
 		clearTimeout( scrollTimer );
-		scrollTimer = setTimeout( adjust, 200 );
+		scrollTimer = setTimeout( adjust, 100 );
 	}
 
 	function on() {
@@ -473,7 +499,17 @@ jQuery( document ).ready( function($) {
 		} );
 
 		// 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 );
+		$document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
+			.on( 'postbox-toggled.editor-expand', function() {
+				if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > 20 ) {
+					fixedSideBottom = true;
+					window.scrollBy( 0, -1 );
+					adjust();
+					window.scrollBy( 0, 1 );
+				}
+
+				adjust();
+			});
 
 		$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
 		$textEditor.on( 'keyup.editor-expand', textEditorKeyup );
@@ -509,14 +545,9 @@ jQuery( document ).ready( function($) {
 
 		$wrap.removeClass( 'wp-editor-expand' );
 
-		// Adjust when the window is scrolled or resized.
+		$window.off( '.editor-expand' );
-		$window.off( 'scroll.editor-expand resize.editor-expand' );
+		$document.off( '.editor-expand' );
-
+		$textEditor.off( '.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.

wp-admin/js/postbox.js

@@ -3,6 +3,8 @@
 var postboxes;
 
 (function($) {
+	var $document = $( document );
+
 	postboxes = {
 		add_postbox_toggles : function(page, args) {
 			var self = this;
@@ -26,6 +28,8 @@ var postboxes;
 					else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) )
 						self.pbhide(id);
 				}
+
+				$document.trigger( 'postbox-toggled', p );
 			});
 
 			$('.postbox .hndle a').click( function(e) {
@@ -39,19 +43,21 @@ var postboxes;
 			});
 
 			$('.hide-postbox-tog').bind('click.postboxes', function() {
-				var box = $(this).val();
+				var boxId = $(this).val(),
+					$postbox = $( '#' + boxId );
 
 				if ( $(this).prop('checked') ) {
-					$('#' + box).show();
+					$postbox.show();
 					if ( $.isFunction( postboxes.pbshow ) )
 						self.pbshow( box );
 				} else {
-					$('#' + box).hide();
+					$postbox.hide();
 					if ( $.isFunction( postboxes.pbhide ) )
 						self.pbhide( box );
 				}
 				self.save_state(page);
 				self._mark_area();
+				$document.trigger( 'postbox-toggled', $postbox );
 			});
 
 			$('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){

wp-admin/js/postbox.min.js

@@ -1 +1 @@
-var postboxes;!function(a){postboxes={add_postbox_toggles:function(b,c){var d=this;d.init(b,c),a(".postbox .hndle, .postbox .handlediv").bind("click.postboxes",function(){var c=a(this).parent(".postbox"),e=c.attr("id");"dashboard_browser_nag"!=e&&(c.toggleClass("closed"),"press-this"!=b&&d.save_state(b),e&&(!c.hasClass("closed")&&a.isFunction(postboxes.pbshow)?d.pbshow(e):c.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&d.pbhide(e)))}),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").bind("click.postboxes",function(){var b=a(this).parents(".postbox").attr("id")+"-hide";return a("#"+b).prop("checked",!1).triggerHandler("click"),!1}),a(".hide-postbox-tog").bind("click.postboxes",function(){var c=a(this).val();a(this).prop("checked")?(a("#"+c).show(),a.isFunction(postboxes.pbshow)&&d.pbshow(c)):(a("#"+c).hide(),a.isFunction(postboxes.pbhide)&&d.pbhide(c)),d.save_state(b),d._mark_area()}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var c=parseInt(a(this).val(),10);c&&(d._pb_edit(c),d.save_order(b))})},init:function(b,c){var d=a(document.body).hasClass("mobile");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:"clone",opacity:.65,stop:function(){return a(this).find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void a(this).sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area()},save_state:function(b){var c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b})},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):c.addClass("empty-container")}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);
+var postboxes;!function(a){var b=a(document);postboxes={add_postbox_toggles:function(c,d){var e=this;e.init(c,d),a(".postbox .hndle, .postbox .handlediv").bind("click.postboxes",function(){var d=a(this).parent(".postbox"),f=d.attr("id");"dashboard_browser_nag"!=f&&(d.toggleClass("closed"),"press-this"!=c&&e.save_state(c),f&&(!d.hasClass("closed")&&a.isFunction(postboxes.pbshow)?e.pbshow(f):d.hasClass("closed")&&a.isFunction(postboxes.pbhide)&&e.pbhide(f)),b.trigger("postbox-toggled",d))}),a(".postbox .hndle a").click(function(a){a.stopPropagation()}),a(".postbox a.dismiss").bind("click.postboxes",function(){var b=a(this).parents(".postbox").attr("id")+"-hide";return a("#"+b).prop("checked",!1).triggerHandler("click"),!1}),a(".hide-postbox-tog").bind("click.postboxes",function(){var d=a(this).val(),f=a("#"+d);a(this).prop("checked")?(f.show(),a.isFunction(postboxes.pbshow)&&e.pbshow(box)):(f.hide(),a.isFunction(postboxes.pbhide)&&e.pbhide(box)),e.save_state(c),e._mark_area(),b.trigger("postbox-toggled",f)}),a('.columns-prefs input[type="radio"]').bind("click.postboxes",function(){var b=parseInt(a(this).val(),10);b&&(e._pb_edit(b),e.save_order(c))})},init:function(b,c){var d=a(document.body).hasClass("mobile");a.extend(this,c||{}),a("#wpbody-content").css("overflow","hidden"),a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",delay:d?200:0,distance:2,tolerance:"pointer",forcePlaceholderSize:!0,helper:"clone",opacity:.65,stop:function(){return a(this).find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id?void a(this).sortable("cancel"):void postboxes.save_order(b)},receive:function(b,c){"dashboard_browser_nag"==c.item[0].id&&a(c.sender).sortable("cancel"),postboxes._mark_area()}}),d&&(a(document.body).bind("orientationchange.postboxes",function(){postboxes._pb_change()}),this._pb_change()),this._mark_area()},save_state:function(b){var c=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),d=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:c,hidden:d,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:b})},save_order:function(b){var c,d=a(".columns-prefs input:checked").val()||0;c={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:b},a(".meta-box-sortables").each(function(){c["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")}),a.post(ajaxurl,c)},_mark_area:function(){var b=a("div.postbox:visible").length,c=a("#post-body #side-sortables");a("#dashboard-widgets .meta-box-sortables:visible").each(function(){var c=a(this);1==b||c.children(".postbox:visible").length?c.removeClass("empty-container"):c.addClass("empty-container")}),c.length&&(c.children(".postbox:visible").length?c.removeClass("empty-container"):"280px"==a("#postbox-container-1").css("width")&&c.addClass("empty-container"))},_pb_edit:function(b){var c=a(".metabox-holder").get(0);c&&(c.className=c.className.replace(/columns-\d+/,"columns-"+b)),a(document).trigger("postboxes-columnchange")},_pb_change:function(){var b=a('label.columns-prefs-1 input[type="radio"]');switch(window.orientation){case 90:case-90:b.length&&b.is(":checked")||this._pb_edit(2);break;case 0:case 180:a("#poststuff").length?this._pb_edit(1):b.length&&b.is(":checked")||this._pb_edit(2)}},pbshow:!1,pbhide:!1}}(jQuery);