Editor scrolling:

* Make sure the background color for tools is only applied to the main editor.
* Fix toolbar width for smaller screens.
* Ensure toolbar doesn't end up in a weird place when scrolling down too fast.
* Avoid JS errors for post types that don't support the editor.

props avryl. see #28328.

Built from https://develop.svn.wordpress.org/trunk@29075


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

wp-admin/css/common-rtl.css

@@ -2642,10 +2642,6 @@ img {
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 	}
 
-	#wpwrap {
-		background: #f0f0f0;
-	}
-
 	#wpcontent {
 		position: relative;
 		margin-right: 0;

wp-admin/css/common.css

@@ -2642,10 +2642,6 @@ img {
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 	}
 
-	#wpwrap {
-		background: #f0f0f0;
-	}
-
 	#wpcontent {
 		position: relative;
 		margin-left: 0;

wp-admin/edit-form-advanced.php

@@ -11,7 +11,10 @@ if ( !defined('ABSPATH') )
 	die('-1');
 
 wp_enqueue_script('post');
-wp_enqueue_script('editor-expand');
+
+if ( post_type_supports( $post_type, 'editor' ) ) {
+	wp_enqueue_script('editor-expand');
+}
 
 if ( wp_is_mobile() )
 	wp_enqueue_script( 'jquery-touch-punch' );

wp-admin/js/editor-expand.js

@@ -285,7 +285,7 @@ jQuery( document ).ready( function($) {
 			$top.css( {
 				position: 'fixed',
 				top: adminBarHeight + toolsHeight,
-				width: editorWidth - ( visual ? 0 : 38 ),
+				width: $editor.parent().width() - ( $top.outerWidth() - $top.width() ),
 				borderTop: '1px solid #e5e5e5'
 			} );
 
@@ -310,7 +310,6 @@ jQuery( document ).ready( function($) {
 				$tools.css( {
 					position: 'absolute',
 					top: 0,
-					borderTop: 'none',
 					width: $contentWrap.width()
 				} );
 			// Handle scrolling down.
@@ -319,14 +318,12 @@ jQuery( document ).ready( function($) {
 
 				$top.css( {
 					position: 'absolute',
-					top: window.pageYOffset - $editor.offset().top + adminBarHeight + $tools.outerHeight(),
-					borderTop: 'none'
+					top: editorHeight - buffer
 				} );
 
 				$tools.css( {
 					position: 'absolute',
-					top: window.pageYOffset - $contentWrap.offset().top + adminBarHeight,
-					borderTop: 'none',
+					top: editorHeight - buffer + 1, // border
 					width: $contentWrap.width()
 				} );
 			}

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

@@ -1 +1 @@
-window.wp=window.wp||{},jQuery(document).ready(function(a){function b(){if(!g||g.isHidden()){var a=o.width(n.width()).text(n.val()+"&nbsp;").height(),b=n.height();300>a&&(a=300),a!==b&&(n.height(a),c("resize"))}}function c(a){if(!r||!r.settings.visible){var b,c,i,o,u,v,w,x,y,z,A=p.outerHeight(),B=h.scrollTop(),C=h.height(),D=h.width(),E=D>600?j.height():0;g&&!g.isHidden()?(b=d,c=e,i=!0,tinymce.each(g.controlManager.buttons,function(a){!a._active||"colorbutton"!==a.type&&"panelbutton"!==a.type&&"menubutton"!==a.type||a.hidePanel()})):(b=m,c=n),o=l.outerHeight(),u=b.parent().offset().top,v=b.outerHeight(),w=c.offset().top,x=c.outerHeight(),y=c.outerWidth(),z=i?f.outerHeight():0,(!s||"resize"===a)&&B>=u-o-E&&u-o-E+x-q>=B?(s=!0,b.css({position:"fixed",top:E+o,width:y-(i?0:38),borderTop:"1px solid #e5e5e5"}),l.css({position:"fixed",top:E,width:y+2})):(s||"resize"===a)&&(u-o-E>=B?(s=!1,b.css({position:"absolute",top:0,borderTop:"none",width:c.parent().width()-(b.outerWidth()-b.width())}),l.css({position:"absolute",top:0,borderTop:"none",width:k.width()})):B>=u-o-E+x-q&&(s=!1,b.css({position:"absolute",top:window.pageYOffset-c.offset().top+E+l.outerHeight(),borderTop:"none"}),l.css({position:"absolute",top:window.pageYOffset-k.offset().top+E,borderTop:"none",width:k.width()}))),(!t||"resize"===a)&&w+x+A+z+1>=B+C?(t=!0,p.css({position:"fixed",bottom:0,width:y+2,borderTop:"1px solid #dedede"})):t&&B+C>w+x+A+z-1&&(t=!1,p.css({position:"relative",bottom:"auto",width:"100%",borderTop:"none"}))}}var d,e,f,g,h=a(window),i=a(document),j=a("#wpadminbar"),k=a("#wp-content-wrap"),l=a("#wp-content-editor-tools"),m=a("#ed_toolbar"),n=a("#content"),o=a('<div id="content-textarea-clone"></div>'),p=a("#post-status-info"),q=200,r=window.wp.editor&&window.wp.editor.fullscreen,s=!1,t=!1;o.insertAfter(n),k.addClass("wp-editor-expand"),a("#content-resize-handle").hide(),o.css({"font-family":n.css("font-family"),"font-size":n.css("font-size"),"line-height":n.css("line-height"),padding:n.css("padding"),"padding-top":37,"white-space":"pre-wrap","word-wrap":"break-word"}),n.on("focus input propertychange",function(){b()}),n.on("keyup",function(){var a,b,c,d,e,f=document.createRange(),g=n[0].selectionStart,i=n[0].selectionEnd,k=o[0].firstChild,l=h.height();g&&i&&g!==i||(f.setStart(k,g),f.setEnd(k,i+1),a=f.getBoundingClientRect(),a.height&&(b=a.top,c=b+a.height,d=j.outerHeight()+m.outerHeight(),e=l-p.outerHeight(),(d>b||c>e)&&window.scrollTo(window.pageXOffset,b+window.pageYOffset-l/2)))}),i.on("tinymce-editor-init.editor-expand",function(a,i){function m(){var a,b,c,d,e=i.selection,f=e.getNode(),g=e.getRng();if(!(tinymce.Env.ie&&tinymce.Env.ie<9))return i.plugins.wpview&&(a=i.plugins.wpview.getView(f))?d=a.getBoundingClientRect():e.isCollapsed()?(b=g.cloneRange(),b.startContainer.length>1?(b.startContainer.length>b.endOffset?(b.setEnd(b.startContainer,b.endOffset+1),c=!0):b.setStart(b.startContainer,b.endOffset-1),e.setRng(b),d=e.getRng().getBoundingClientRect(),e.setRng(g)):d=f.getBoundingClientRect()):d=g.getBoundingClientRect(),d.height?d:!1}"content"===i.id&&(g=i,i.theme.resizeTo=function(){},i.settings.autoresize_min_height=300,d=k.find(".mce-toolbar-grp"),e=k.find(".mce-edit-area"),f=k.find(".mce-statusbar").filter(":visible"),i.on("show",function(){setTimeout(function(){i.execCommand("mceAutoResize"),c("resize")},200)}),i.on("keyup",function(){var a,b,c,e,f=m(),g=h.height();f&&(a=f.top+i.getContentAreaContainer().getElementsByTagName("iframe")[0].getBoundingClientRect().top,b=a+f.height,c=j.outerHeight()+l.outerHeight()+d.outerHeight(),e=h.height()-p.outerHeight(),(c>a||b>e)&&window.scrollTo(window.pageXOffset,a+window.pageYOffset-g/2))}),i.on("hide",function(){b(),c("resize")}),i.on("nodechange setcontent keyup FullscreenStateChanged",function(){c("resize")}),i.on("wp-toolbar-toggle",function(){e.css({paddingTop:d.outerHeight()})}),setTimeout(function(){e.css({paddingTop:d.outerHeight()}),c("resize")},500))}),h.on("scroll resize",function(a){c(a.type)}),r&&r.pubsub.subscribe("hidden",function(){c("resize")}),i.on("wp-collapse-menu.editor-expand",function(){c("resize")}).on("postboxes-columnchange.editor-expand",function(){c("resize")}).on("editor-classchange.editor-expand",function(){c("resize")}),b(),l.css({position:"absolute",top:0,width:k.width()}),k.css({paddingTop:l.outerHeight()}),setTimeout(function(){n.css({paddingTop:m.outerHeight()+parseInt(n.css("padding-top"),10)})},500)});
+window.wp=window.wp||{},jQuery(document).ready(function(a){function b(){if(!g||g.isHidden()){var a=o.width(n.width()).text(n.val()+"&nbsp;").height(),b=n.height();300>a&&(a=300),a!==b&&(n.height(a),c("resize"))}}function c(a){if(!r||!r.settings.visible){var b,c,i,o,u,v,w,x,y,z,A=p.outerHeight(),B=h.scrollTop(),C=h.height(),D=h.width(),E=D>600?j.height():0;g&&!g.isHidden()?(b=d,c=e,i=!0,tinymce.each(g.controlManager.buttons,function(a){!a._active||"colorbutton"!==a.type&&"panelbutton"!==a.type&&"menubutton"!==a.type||a.hidePanel()})):(b=m,c=n),o=l.outerHeight(),u=b.parent().offset().top,v=b.outerHeight(),w=c.offset().top,x=c.outerHeight(),y=c.outerWidth(),z=i?f.outerHeight():0,(!s||"resize"===a)&&B>=u-o-E&&u-o-E+x-q>=B?(s=!0,b.css({position:"fixed",top:E+o,width:c.parent().width()-(b.outerWidth()-b.width()),borderTop:"1px solid #e5e5e5"}),l.css({position:"fixed",top:E,width:y+2})):(s||"resize"===a)&&(u-o-E>=B?(s=!1,b.css({position:"absolute",top:0,borderTop:"none",width:c.parent().width()-(b.outerWidth()-b.width())}),l.css({position:"absolute",top:0,width:k.width()})):B>=u-o-E+x-q&&(s=!1,b.css({position:"absolute",top:x-q}),l.css({position:"absolute",top:x-q+1,width:k.width()}))),(!t||"resize"===a)&&w+x+A+z+1>=B+C?(t=!0,p.css({position:"fixed",bottom:0,width:y+2,borderTop:"1px solid #dedede"})):t&&B+C>w+x+A+z-1&&(t=!1,p.css({position:"relative",bottom:"auto",width:"100%",borderTop:"none"}))}}var d,e,f,g,h=a(window),i=a(document),j=a("#wpadminbar"),k=a("#wp-content-wrap"),l=a("#wp-content-editor-tools"),m=a("#ed_toolbar"),n=a("#content"),o=a('<div id="content-textarea-clone"></div>'),p=a("#post-status-info"),q=200,r=window.wp.editor&&window.wp.editor.fullscreen,s=!1,t=!1;o.insertAfter(n),k.addClass("wp-editor-expand"),a("#content-resize-handle").hide(),o.css({"font-family":n.css("font-family"),"font-size":n.css("font-size"),"line-height":n.css("line-height"),padding:n.css("padding"),"padding-top":37,"white-space":"pre-wrap","word-wrap":"break-word"}),n.on("focus input propertychange",function(){b()}),n.on("keyup",function(){var a,b,c,d,e,f=document.createRange(),g=n[0].selectionStart,i=n[0].selectionEnd,k=o[0].firstChild,l=h.height();g&&i&&g!==i||(f.setStart(k,g),f.setEnd(k,i+1),a=f.getBoundingClientRect(),a.height&&(b=a.top,c=b+a.height,d=j.outerHeight()+m.outerHeight(),e=l-p.outerHeight(),(d>b||c>e)&&window.scrollTo(window.pageXOffset,b+window.pageYOffset-l/2)))}),i.on("tinymce-editor-init.editor-expand",function(a,i){function m(){var a,b,c,d,e=i.selection,f=e.getNode(),g=e.getRng();if(!(tinymce.Env.ie&&tinymce.Env.ie<9))return i.plugins.wpview&&(a=i.plugins.wpview.getView(f))?d=a.getBoundingClientRect():e.isCollapsed()?(b=g.cloneRange(),b.startContainer.length>1?(b.startContainer.length>b.endOffset?(b.setEnd(b.startContainer,b.endOffset+1),c=!0):b.setStart(b.startContainer,b.endOffset-1),e.setRng(b),d=e.getRng().getBoundingClientRect(),e.setRng(g)):d=f.getBoundingClientRect()):d=g.getBoundingClientRect(),d.height?d:!1}"content"===i.id&&(g=i,i.theme.resizeTo=function(){},i.settings.autoresize_min_height=300,d=k.find(".mce-toolbar-grp"),e=k.find(".mce-edit-area"),f=k.find(".mce-statusbar").filter(":visible"),i.on("show",function(){setTimeout(function(){i.execCommand("mceAutoResize"),c("resize")},200)}),i.on("keyup",function(){var a,b,c,e,f=m(),g=h.height();f&&(a=f.top+i.getContentAreaContainer().getElementsByTagName("iframe")[0].getBoundingClientRect().top,b=a+f.height,c=j.outerHeight()+l.outerHeight()+d.outerHeight(),e=h.height()-p.outerHeight(),(c>a||b>e)&&window.scrollTo(window.pageXOffset,a+window.pageYOffset-g/2))}),i.on("hide",function(){b(),c("resize")}),i.on("nodechange setcontent keyup FullscreenStateChanged",function(){c("resize")}),i.on("wp-toolbar-toggle",function(){e.css({paddingTop:d.outerHeight()})}),setTimeout(function(){e.css({paddingTop:d.outerHeight()}),c("resize")},500))}),h.on("scroll resize",function(a){c(a.type)}),r&&r.pubsub.subscribe("hidden",function(){c("resize")}),i.on("wp-collapse-menu.editor-expand",function(){c("resize")}).on("postboxes-columnchange.editor-expand",function(){c("resize")}).on("editor-classchange.editor-expand",function(){c("resize")}),b(),l.css({position:"absolute",top:0,width:k.width()}),k.css({paddingTop:l.outerHeight()}),setTimeout(function(){n.css({paddingTop:m.outerHeight()+parseInt(n.css("padding-top"),10)})},500)});

wp-includes/css/editor-rtl.css

@@ -756,7 +756,7 @@ i.mce-i-hr:before {
 	position: relative;
 }
 
-.wp-editor-tools {
+#wp-content-editor-tools {
 	background-color: #f1f1f1;
 	padding-top: 20px;
 	position: relative;

wp-includes/css/editor.css

@@ -756,7 +756,7 @@ i.mce-i-hr:before {
 	position: relative;
 }
 
-.wp-editor-tools {
+#wp-content-editor-tools {
 	background-color: #f1f1f1;
 	padding-top: 20px;
 	position: relative;