WordPress.org

Make WordPress Core

Ticket #13220: sorting.improvements.progress.1.patch

File sorting.improvements.progress.1.patch, 5.8 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,
    167                                 menuLeft = api.menuList.offset().left,
    168                                 newItem, transport;
     166                        var sort = {
     167                                currentDepth : 0,
     168                                originalDepth : 0,
     169                                minDepth : 0,
     170                                maxDepth : 0,
     171                                menuLeft : api.menuList.offset().left,
     172                                prevBottom : 0,
     173                                prev : $(),
     174                                next : $(),
     175                                transport : undefined
     176                        };
    169177
    170178                        api.menuList.sortable({
    171179                                handle: '.menu-item-handle',
     
    173181                                start: function(e, ui) {
    174182                                        var height, width, parent, children, maxChildDepth;
    175183
    176                                         transport = ui.item.children('.menu-item-transport');
     184                                        sort.transport = ui.item.children('.menu-item-transport');
    177185                               
    178186                                        // Set depths. currentDepth must be set before children are located.
    179                                         originalDepth = ( newItem ) ? 0 : ui.item.menuItemDepth();
    180                                         updateCurrentDepth(ui, originalDepth);
     187                                        sort.originalDepth = ui.item.menuItemDepth();
     188                                        updateCurrentDepth(ui, sort.originalDepth);
    181189                               
    182190                                        // Attach child elements to parent
    183191                                        // Skip the placeholder
    184192                                        parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item;
    185193                                        children = parent.childMenuItems();
    186                                         transport.append( children );
     194                                        sort.transport.append( children );
    187195
    188196                                        // Now that the element is complete, we can update...
    189197                                        updateDepthRange(ui);
    190198
    191199                                        // Update the height of the placeholder to match the moving item.
    192                                         height = transport.outerHeight();
     200                                        height = sort.transport.outerHeight();
    193201                                        // If there are children, account for distance between top of children and parent
    194202                                        height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0;
    195203                                        height += ui.helper.outerHeight();
     
    197205                                        ui.placeholder.height(height);
    198206
    199207                                        // Update the width of the placeholder to match the moving item.
    200                                         maxChildDepth = originalDepth;
     208                                        maxChildDepth = sort.originalDepth;
    201209                                        children.each(function(){
    202210                                                var depth = $(this).menuItemDepth();
    203211                                                maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth;
    204212                                        });
    205213                                        width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width
    206                                         width += api.depthToPx(maxChildDepth - originalDepth); // Account for children
     214                                        width += api.depthToPx(maxChildDepth - sort.originalDepth); // Account for children
    207215                                        width -= 2; // Subtract 2 for borders
    208216                                        ui.placeholder.width(width);
    209217                                },
    210218                                stop: function(e, ui) {
    211                                         var children, depthChange = currentDepth - originalDepth;
     219                                        var children, depthChange = sort.currentDepth - sort.originalDepth;
    212220
    213221                                        // Return child elements to the list
    214                                         children = transport.children().insertAfter(ui.item);
     222                                        children = sort.transport.children().insertAfter(ui.item);
    215223                               
    216224                                        // Update depth classes
    217225                                        if( depthChange != 0 ) {
    218                                                 ui.item.updateDepthClass( currentDepth );
     226                                                ui.item.updateDepthClass( sort.currentDepth );
    219227                                                children.shiftDepthClass( depthChange );
    220228                                        }
     229                                       
     230                                        // Unhighlight the parent
     231                                        sort.prev.removeClass('menu-item-highlight');
    221232                                        // Update the item data.
    222233                                        ui.item.updateParentMenuItemDBId();
    223234                                        // Update positions
     
    232243                                        updateDepthRange(ui);
    233244                                },
    234245                                sort: function(e, ui) {
    235                                         var depth = api.pxToDepth(ui.helper.offset().left - menuLeft);
     246                                        var offset = ui.helper.offset();
     247                                                depth = api.pxToDepth(offset.left - sort.menuLeft);
     248                                               
    236249                                        // Check and correct if depth is not within range.
    237                                         if ( depth < minDepth ) depth = minDepth;
    238                                         else if ( depth > maxDepth ) depth = maxDepth;
     250                                        if ( depth < sort.minDepth ) depth = sort.minDepth;
     251                                        else if ( depth > sort.maxDepth ) depth = sort.maxDepth;
     252                                       
     253                                        // If element is over another element, highlight and shift placeholder to max
     254                                        if ( offset.top < sort.prevBottom ) {
     255                                                sort.prev.addClass('menu-item-highlight');
     256                                                depth = sort.maxDepth;
     257                                        } else {
     258                                                sort.prev.removeClass('menu-item-highlight');
     259                                        }       
    239260
    240                                         if( depth != currentDepth )
     261                                        if( depth != sort.currentDepth )
    241262                                                updateCurrentDepth(ui, depth);
    242263                                }
    243264                        });
     
    249270                                // Make sure we don't select the moving item.
    250271                                if( prev[0] == ui.item[0] ) prev = prev.prev();
    251272                                if( next[0] == ui.item[0] ) next = next.next();
     273                               
     274                                sort.prev.removeClass('menu-item-highlight');
     275                                sort.prev = prev;
     276                                sort.next = next;
     277                               
     278                                sort.prevBottom = (prev.length) ? prev.offset().top + prev.height() : 0;
     279                                sort.minDepth = (next.length) ? next.menuItemDepth() : 0;
    252280
    253                                 minDepth = (next.length) ? next.menuItemDepth() : 0;
    254 
    255281                                if( prev.length )
    256                                         maxDepth = ( (depth = prev.menuItemDepth() + 1) > api.options.globalMaxDepth ) ? api.options.globalMaxDepth : depth;
     282                                        sort.maxDepth = ( (depth = prev.menuItemDepth() + 1) > api.options.globalMaxDepth ) ? api.options.globalMaxDepth : depth;
    257283                                else
    258                                         maxDepth = 0;
     284                                        sort.maxDepth = 0;
    259285                        }
    260286
    261287                        function updateCurrentDepth(ui, depth) {
    262                                 ui.placeholder.updateDepthClass( depth, currentDepth );
    263                                 currentDepth = depth;
     288                                ui.placeholder.updateDepthClass( depth, sort.currentDepth );
     289                                sort.currentDepth = depth;
    264290                        }
    265291                },
    266292
  • wp-admin/css/nav-menu.dev.css

     
    304304.menu li.deleting .menu-item-handle {
    305305        background-color:#faa;
    306306}
     307.menu-item-highlight .menu-item-handle {
     308        background: #ffffe0;
     309        border: 1px solid #e6db55;
     310}
    307311
    308312.menu-item-handle .item-title {
    309313        padding: 7px 0;