WordPress.org

Make WordPress Core

Ticket #40862: widgets.js.patch

File widgets.js.patch, 1.8 KB (added by jpurdy647, 3 years ago)

Patch to scroll opened widget settings into view

  • widgets.js

     
    124124                $(document.body).bind('click.widgets-toggle', function(e) {
    125125                        var target = $(e.target),
    126126                                css = { 'z-index': 100 },
    127                                 widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,
     127                                widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId, viewportBounds, widgetBounds
    128128                                toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
    129129
    130130                        if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
     
    133133                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 );
    134134                                widgetWidth = widget.parent().width();
    135135                                widgetId = inside.find( '.widget-id' ).val();
     136                                viewportBounds = {
     137                                        top: $(window).scrollTop(),
     138                                        bottom:  $(window).scrollTop() + $(window).height()
     139                                };
     140                                /* This is the assumed bounds of the widget once it is fully opened */
     141                                widgetBounds = {
     142                                        top: widget.offset().top,
     143                                        bottom: widget.offset().top + widget.height() + inside.height()
     144                                }
    136145
    137146                                // Save button is initially disabled, but is enabled when a field is changed.
    138147                                if ( ! widget.data( 'dirty-state-initialized' ) ) {
     
    157166                                                css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
    158167                                                widget.css( css );
    159168                                        }
     169                                       
     170                                        if (widgetBounds.bottom + 130 > viewportBounds.bottom) {
     171                                                $( 'html, body' ).animate({
     172                                                        scrollTop: widgetBounds.bottom + 130 - $(window).height()
     173                                                }, 200 );
     174                                        }
    160175                                        /*
    161176                                         * Don't change the order of attributes changes and animation:
    162177                                         * it's important for screen readers, see ticket #31476.