Widget Customizer: Improve behavior of bigger widgets.

* Support widgets which are higher than browsers viewport.
* Use widgets width as max-width.
* Don't animate the width of wide widgets to make them visible, instead fade them in/out.
* Fix Chrome flickerings while updating wide widgets.

props adamsilverstein, westonruter, ocean90.
see #27348.
Built from https://develop.svn.wordpress.org/trunk@27798


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

wp-admin/css/customize-widgets-rtl.css

@@ -50,16 +50,16 @@
 	right: auto !important;
 	max-width: 100%;
 }
+
 .customize-control-widget_form.wide-widget-control .widget-inside {
 	position: fixed;
 	right: 299px;
 	top: 25%;
-	padding: 20px;
 	border: 1px solid rgb(229, 229, 229);
-	z-index: -1;
+	overflow: auto;
 }
-.customize-control-widget_form.wide-widget-control.collapsing .widget-inside {
-	z-index: -2;
+.customize-control-widget_form.wide-widget-control .widget-inside > .form {
+	padding: 20px;
 }
 
 .customize-control-widget_form.wide-widget-control .widget-top {

wp-admin/css/customize-widgets.css

@@ -50,16 +50,16 @@
 	left: auto !important;
 	max-width: 100%;
 }
+
 .customize-control-widget_form.wide-widget-control .widget-inside {
 	position: fixed;
 	left: 299px;
 	top: 25%;
-	padding: 20px;
 	border: 1px solid rgb(229, 229, 229);
-	z-index: -1;
+	overflow: auto;
 }
-.customize-control-widget_form.wide-widget-control.collapsing .widget-inside {
-	z-index: -2;
+.customize-control-widget_form.wide-widget-control .widget-inside > .form {
+	padding: 20px;
 }
 
 .customize-control-widget_form.wide-widget-control .widget-top {

wp-admin/js/customize-widgets.js

@@ -703,6 +703,7 @@ var WidgetCustomizer = ( function ($) {
 		_setupWideWidget: function () {
 			var control = this,
 				widget_inside,
+				widget_form,
 				customize_sidebar,
 				position_widget,
 				theme_controls_container;
@@ -712,11 +713,12 @@ var WidgetCustomizer = ( function ($) {
 			}
 
 			widget_inside = control.container.find( '.widget-inside' );
+			widget_form = widget_inside.find( '> .form' );
 			customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
 			control.container.addClass( 'wide-widget-control' );
 
 			control.container.find( '.widget-content:first' ).css( {
-				'min-width': control.params.width,
+				'max-width': control.params.width,
 				'min-height': control.params.height
 			} );
 
@@ -725,31 +727,37 @@ var WidgetCustomizer = ( function ($) {
 			 * element is at the same top position as the widget-top. When the
 			 * widget-top is scrolled out of view, keep the widget-top in view;
 			 * likewise, don't allow the widget to drop off the bottom of the window.
+			 * If a widget is too tall to fit in the window, don't let the height
+			 * exceed the window height so that the contents of the widget control
+			 * will become scrollable (overflow:auto).
 			 */
 			position_widget = function () {
 				var offset_top = control.container.offset().top,
-					height,
-					top,
-					max_top;
-
-				height = widget_inside.outerHeight();
-				top = Math.max( offset_top, 0 );
-				max_top = $( window ).height() - height;
-				top = Math.min( top, max_top );
+					window_height = $( window ).height(),
+					form_height = widget_form.outerHeight(),
+					top;
+				widget_inside.css( 'max-height', window_height );
+				top = Math.max(
+					0, // prevent top from going off screen
+					Math.min(
+						Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
+						window_height - form_height // flush up against bottom of screen
+					)
+				);
 				widget_inside.css( 'top', top );
 			};
 
 			theme_controls_container = $( '#customize-theme-controls' );
 			control.container.on( 'expand', function () {
+				position_widget();
 				customize_sidebar.on( 'scroll', position_widget );
 				$( window ).on( 'resize', position_widget );
 				theme_controls_container.on( 'expanded collapsed', position_widget );
-				position_widget();
 			} );
 			control.container.on( 'collapsed', function () {
 				customize_sidebar.off( 'scroll', position_widget );
-				theme_controls_container.off( 'expanded collapsed', position_widget );
 				$( window ).off( 'resize', position_widget );
+				theme_controls_container.off( 'expanded collapsed', position_widget );
 			} );
 
 			// Reposition whenever a sidebar's widgets are changed
@@ -1375,7 +1383,6 @@ var WidgetCustomizer = ( function ($) {
 				return;
 			}
 
-			complete;
 			if ( do_expand ) {
 				// Close all other widget controls before expanding this one
 				wp.customize.control.each( function ( other_control ) {
@@ -1384,18 +1391,18 @@ var WidgetCustomizer = ( function ($) {
 					}
 				} );
 
-				control.container.trigger( 'expand' );
-				control.container.addClass( 'expanding' );
 				complete = function () {
 					control.container.removeClass( 'expanding' );
 					control.container.addClass( 'expanded' );
 					control.container.trigger( 'expanded' );
 				};
 				if ( control.params.is_wide ) {
-					inside.animate( { width: 'show' }, 'fast', complete );
+					inside.fadeIn( 'fast', complete );
 				} else {
 					inside.slideDown( 'fast', complete );
 				}
+				control.container.trigger( 'expand' );
+				control.container.addClass( 'expanding' );
 			} else {
 				control.container.trigger( 'collapse' );
 				control.container.addClass( 'collapsing' );
@@ -1405,7 +1412,7 @@ var WidgetCustomizer = ( function ($) {
 					control.container.trigger( 'collapsed' );
 				};
 				if ( control.params.is_wide ) {
-					inside.animate( { width: 'hide' }, 'fast', complete );
+					inside.fadeOut( 'fast', complete );
 				} else {
 					inside.slideUp( 'fast', function() {
 						widget.css( { width:'', margin:'' } );