WordPress.org

Make WordPress Core

Ticket #25952: 25952.4.diff

File 25952.4.diff, 4.3 KB (added by shaunandrews, 6 years ago)

Changing the hover class to make a little more sense, and refreshing the css patch.

  • src/wp-admin/css/wp-admin.css

     
    1027910279        margin: 10px 0 0 0;
    1028010280}
    1028110281
     10282/* Dropping a widget over a closed sidebar */
     10283div#widgets-right .widgets-holder-wrap.was-closed {
     10284        box-shadow: 0 0 3px 2px rgba(16, 117, 160, 0.9);
     10285}
     10286div#widgets-right .widgets-holder-wrap.ui-sidebar-droppable .sidebar-description,
     10287div#widgets-right .widgets-holder-wrap.ui-sidebar-droppable .widgets-sortables {
     10288        opacity: 0.3;
     10289}
     10290
    1028210291div#widgets-right .widget {
    1028310292        margin: 0 auto;
    1028410293        border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
     
    1034910358        color: #aaa;
    1035010359}
    1035110360
     10361/* Dropping a widget over a closed sidebar */
     10362div#widgets-right .widgets-holder-wrap.widget-hovered {
     10363        box-shadow: 0 0 3px 2px rgba(16, 117, 160, 0.9);
     10364}
     10365
    1035210366/* Accessibility Mode */
    1035310367#available-widgets .widget-control-edit .edit {
    1035410368        display :none;
  • src/wp-admin/js/widgets.js

     
    8585                        zIndex: 100,
    8686                        containment: 'document',
    8787                        start: function(e,ui) {
     88                                // Mark the widget that is dragged. Needed as a workaround for dropping on a closed sidebar.
     89                                $(this).addClass('widget-in-question');
     90
    8891                                ui.helper.find('div.widget-description').hide();
    8992                                the_id = this.id;
    9093                        },
    9194                        stop: function() {
     95                                $(this).removeClass('widget-in-question');
     96
    9297                                if ( rem )
    9398                                        $(rem).hide();
    9499
     
    178183                        }
    179184                });
    180185
     186                // Open the sidebar (the sortable container) when dragging a widget over its title
     187                $('#widgets-right .widgets-holder-wrap').droppable({
     188                        accept: '.widget',
     189                        tolerance: 'pointer',
     190                        over: function( event, ui ) {
     191                                var sidebarWrap = $(this);
     192
     193                                if ( sidebarWrap.hasClass( 'closed' ) ) {
     194                                        sidebarWrap.addClass( 'widget-hovered' );
     195                                }
     196                        },
     197                        out: function() {
     198                                var sidebarWrap = $(this);
     199                                if ( sidebarWrap.hasClass( 'widget-hovered' ) ) {
     200                                        sidebarWrap.addClass( 'closed' ).removeClass( 'widget-hovered' );
     201                                }
     202                        },
     203                        drop: function( event, ui ) {
     204                                var sidebarWrap = $(this);
     205
     206                                if ( sidebarWrap.hasClass( 'widget-hovered' ) ) {
     207                                        sidebarWrap.removeClass( 'widget-hovered' );
     208
     209                                        // Prepend the widget and save position
     210                                        self.addWidget( sidebarWrap.children('.widgets-sortables').attr('id') );
     211                                        self.clearWidgetSelection();
     212                                }
     213                        }
     214                });
     215
    181216                // Area Chooser
    182217                $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
    183218                        var $element = $( element ),
     
    216251                        var $target = $( event.target );
    217252
    218253                        if ( $target.hasClass('button-primary') ) {
    219                                 self.addWidget( chooser );
     254                                self.addWidget( chooser.find( '.widgets-chooser-selected' ).data('sidebarId') );
    220255                                self.closeChooser();
    221256                        } else if ( $target.hasClass('button-secondary') ) {
    222257                                self.closeChooser();
     
    336371                });
    337372        },
    338373
    339         addWidget: function( chooser ) {
    340                 var widget = $('#available-widgets').find('.widget-in-question').clone(),
     374        addWidget: function( sidebarId ) {
     375                var top,
     376                        widget = $('#available-widgets').find('.widget-in-question').clone(),
    341377                        widgetId = widget.attr('id'),
    342378                        add = widget.find( 'input.add_new' ).val(),
    343379                        n = widget.find( 'input.multi_number' ).val(),
    344                         sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
    345380                        sidebar = $( '#' + sidebarId );
    346381
    347382                if ( 'multi' === add ) {
     
    369404                // No longer "new" widget
    370405                widget.find( 'input.add_new' ).val('');
    371406
    372                 $( 'html, body' ).animate({
    373                         scrollTop: sidebar.offset().top - 130
    374                 }, 200 );
     407                top = sidebar.offset().top;
    375408
     409                if ( top && top - 130 > 0 ) {
     410                        $( 'html, body' ).animate({
     411                                scrollTop: ( top - 130 )
     412                        }, 200 );
     413                }
     414
    376415                window.setTimeout( function() {
    377                         // Cannot use a callback in the animation above as it fires twice,
    378                         // have to queue this "by hand".
    379416                        widget.find( '.widget-title' ).trigger('click');
    380417                }, 250 );
    381418        },
     
    391428
    392429        clearWidgetSelection: function() {
    393430                $( '#widgets-left' ).removeClass( 'chooser' );
    394                 $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
     431                $( '.widget-in-question' ).removeClass( 'widget-in-question' );
    395432        }
    396433};
    397434