WordPress.org

Make WordPress Core

Changeset 40656


Ignore:
Timestamp:
05/12/17 19:55:53 (6 months ago)
Author:
westonruter
Message:

Widgets: Defer rendering controls for media widgets until container element fully expands.

Fixes issue with MediaElement.js failing to build the player in an animating container that doesn't have established dimensions.
Also utilizes MediaElement.js for the video widget instead of using a native player.

See #32417.
Fixes #40750.

Location:
trunk/src/wp-admin/js/widgets
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/widgets/media-video-widget.js

    r40641 r40656  
    181181                error: error 
    182182            } ) ); 
     183            wp.mediaelement.initialize(); 
    183184        }, 
    184185 
  • trunk/src/wp-admin/js/widgets/media-widgets.js

    r40641 r40656  
    10011001     */ 
    10021002    component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { 
    1003         var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId; 
     1003        var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, widgetInside, animatedCheckDelay = 50, renderWhenAnimationDone; 
    10041004        widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. 
    10051005        widgetContent = widgetForm.find( '> .widget-content' ); 
     
    10511051            model: widgetModel 
    10521052        }); 
    1053         widgetControl.render(); 
     1053 
     1054        /* 
     1055         * Render the widget once the widget parent's container finishes animating, 
     1056         * as the widget-added event fires with a slideDown of the container. 
     1057         * This ensures that the container's dimensions are fixed so that ME.js 
     1058         * can initialize with the proper dimensions. 
     1059         */ 
     1060        widgetInside = widgetContainer.parent(); 
     1061        renderWhenAnimationDone = function() { 
     1062            if ( widgetInside.is( ':animated' ) ) { 
     1063                setTimeout( renderWhenAnimationDone, animatedCheckDelay ); 
     1064            } else { 
     1065                widgetControl.render(); 
     1066            } 
     1067        }; 
    10541068 
    10551069        /* 
Note: See TracChangeset for help on using the changeset viewer.