WordPress.org

Make WordPress Core

Ticket #40862: scrollToOpenedWidgets-2.diff

File scrollToOpenedWidgets-2.diff, 1.5 KB (added by jpurdy647, 4 years ago)

Patch to scroll clipped widgets into view - revised

Line 
1                $(document.body).bind('click.widgets-toggle', function(e) {
2                        var target = $(e.target),
3                                css = { 'z-index': 100 },
4-                               widget, inside, targetWidth, widgetWidth, margin;
5+                               widget, inside, targetWidth, widgetWidth, margin, viewportBounds, widgetBounds;
6 
7                        if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {
8                                widget = target.closest('div.widget');
9                                inside = widget.children('.widget-inside');
10                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
11                                widgetWidth = widget.parent().width();
12+                               viewportBounds = {
13+                                       top: $(window).scrollTop(),
14+                                       bottom:  $(window).scrollTop() + $(window).height()
15+                               };
16+                               /* This is the assumed bounds of the widget once it is fully opened */
17+                               widgetBounds = {
18+                                       top: widget.offset().top,
19+                                       bottom: widget.offset().top + widget.height() + inside.height()
20+                               }
21 
22                                if ( inside.is(':hidden') ) {
23                                        if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
24                                                css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';
25                                                widget.css( css );
26                                        }
27+                                               
28+                                       /*
29+                                        * Check if newly opened widget is fully in viewport
30+                                        * If it is not, then scroll it into view
31+                                        *
32+                                        */
33+                                       if (widgetBounds.bottom + 130 > viewportBounds.bottom) {
34+                                               $( 'html, body' ).animate({
35+                                                       scrollTop: widgetBounds.bottom + 130 - $(window).height()
36+                                               }, 200 );
37+                                       }
38+
39                                        widget.addClass( 'open' );
40                                        inside.slideDown('fast');
41                                } else {