WordPress.org

Make WordPress Core

Ticket #13220: sortable.groups.improvements.2.patch

File sortable.groups.improvements.2.patch, 4.1 KB (added by koopersmith, 8 years ago)
  • wp-admin/js/nav-menu.dev.js

     
    163163                },
    164164
    165165                initSortables : function() {
    166                         var currentDepth = 0, originalDepth, minDepth, maxDepth, prevBottom,
    167                                 menuLeft = api.menuList.offset().left,
    168                                 newItem, transport;
     166                        var currentDepth = 0, originalDepth, minDepth, maxDepth,
     167                                prev, next, prevBottom, nextThreshold, helperHeight, transport,
     168                                menuLeft = api.menuList.offset().left;
    169169
    170170                        api.menuList.sortable({
    171171                                handle: '.menu-item-handle',
    172172                                placeholder: 'sortable-placeholder',
    173173                                start: function(e, ui) {
    174                                         var height, width, parent, children, maxChildDepth;
     174                                        var height, width, parent, children, maxChildDepth, tempHolder;
    175175
    176176                                        transport = ui.item.children('.menu-item-transport');
    177177                               
    178178                                        // Set depths. currentDepth must be set before children are located.
    179                                         originalDepth = ( newItem ) ? 0 : ui.item.menuItemDepth();
     179                                        originalDepth = ui.item.menuItemDepth();
    180180                                        updateCurrentDepth(ui, originalDepth);
    181181                               
    182182                                        // Attach child elements to parent
     
    185185                                        children = parent.childMenuItems();
    186186                                        transport.append( children );
    187187
    188                                         // Now that the element is complete, we can update...
    189                                         updateDepthRange(ui);
    190 
    191188                                        // Update the height of the placeholder to match the moving item.
    192189                                        height = transport.outerHeight();
    193190                                        // If there are children, account for distance between top of children and parent
    194191                                        height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0;
    195192                                        height += ui.helper.outerHeight();
     193                                        helperHeight = height;
    196194                                        height -= 2; // Subtract 2 for borders
    197195                                        ui.placeholder.height(height);
    198196
     
    206204                                        width += api.depthToPx(maxChildDepth - originalDepth); // Account for children
    207205                                        width -= 2; // Subtract 2 for borders
    208206                                        ui.placeholder.width(width);
     207                                       
     208                                        // Update the list of menu items.
     209                                        tempHolder = ui.placeholder.next();
     210                                        tempHolder.css( 'margin-top', helperHeight + 'px' ); // Set the margin to absorb the placeholder
     211                                        ui.placeholder.detach(); // detach or jQuery UI will think the placeholder is a menu item
     212                                        $(this).sortable( "refresh" ); // The children aren't sortable. We should let jQ UI know.
     213                                        ui.item.after( ui.placeholder ); // reattach the placeholder.
     214                                        tempHolder.css('margin-top', 0); // reset the margin
     215                                       
     216                                        // Now that the element is complete, we can update...
     217                                        updateSharedVars(ui);
    209218                                },
    210219                                stop: function(e, ui) {
    211220                                        var children, depthChange = currentDepth - originalDepth;
     
    227236                                        // Make sure the placeholder is inside the menu.
    228237                                        // Otherwise fix it, or we're in trouble.
    229238                                        if( ! ui.placeholder.parent().hasClass('menu') )
    230                                                 ui.placeholder.appendTo(api.menuList);
     239                                                (prev.length) ? prev.after( ui.placeholder ) : api.menuList.prepend( ui.placeholder );
    231240
    232                                         updateDepthRange(ui);
     241                                        updateSharedVars(ui);
    233242                                },
    234243                                sort: function(e, ui) {
    235244                                        var offset = ui.helper.offset(),
     
    242251
    243252                                        if( depth != currentDepth )
    244253                                                updateCurrentDepth(ui, depth);
     254                                               
     255                                        // If we overlap the next element, manually shift downwards
     256                                        if( nextThreshold && offset.top + helperHeight > nextThreshold ) {
     257                                                next.after( ui.placeholder );
     258                                                updateSharedVars( ui );
     259                                                $(this).sortable( "refreshPositions" );
     260                                        }
    245261                                }
    246262                        });
    247263
    248                         function updateDepthRange(ui) {
    249                                 var prev = ui.placeholder.prev(),
    250                                         next = ui.placeholder.next(), depth;
     264                        function updateSharedVars(ui) {
     265                                var depth;
     266                               
     267                                prev = ui.placeholder.prev();
     268                                next = ui.placeholder.next();
    251269
    252270                                // Make sure we don't select the moving item.
    253271                                if( prev[0] == ui.item[0] ) prev = prev.prev();
    254272                                if( next[0] == ui.item[0] ) next = next.next();
    255273
    256274                                prevBottom = (prev.length) ? prev.offset().top + prev.height() : 0;
     275                                nextThreshold = (next.length) ? next.offset().top + next.height() / 3 : 0;
    257276                                minDepth = (next.length) ? next.menuItemDepth() : 0;
    258277
    259278                                if( prev.length )