Changeset 27798

Timestamp:

03/27/2014 11:12:25 PM (11 years ago)

Author:

ocean90

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/customize-widgets.css (modified) (1 diff)
• js/customize-widgets.js (modified) (8 diffs)

trunk/src/wp-admin/css/customize-widgets.css

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

trunk/src/wp-admin/js/customize-widgets.js

@@ -704 +704 @@
             var control = this,
                 widget_inside,
+                widget_form,
                 customize_sidebar,
                 position_widget,
@@ -713 +714 @@
 
             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
             } );
@@ -726 +728 @@
              * 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 );
             };
@@ -742 +750 @@
             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 );
+                $( window ).off( 'resize', position_widget );
                 theme_controls_container.off( 'expanded collapsed', position_widget );
-                $( window ).off( 'resize', position_widget );
             } );
 
@@ -1376 +1384 @@
             }
 
-            complete;
             if ( do_expand ) {
                 // Close all other widget controls before expanding this one
@@ -1385 +1392 @@
                 } );
 
-                control.container.trigger( 'expand' );
-                control.container.addClass( 'expanding' );
                 complete = function () {
                     control.container.removeClass( 'expanding' );
@@ -1393 +1398 @@
                 };
                 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' );
@@ -1406 +1413 @@
                 };
                 if ( control.params.is_wide ) {
-                    inside.animate( { width: 'hide' }, 'fast', complete );
+                    inside.fadeOut( 'fast', complete );
                 } else {
                     inside.slideUp( 'fast', function() {