WordPress.org

Make WordPress Core

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

File sorting.improvements.progress.1.patch, 5.8 KB (added by koopersmith, 4 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;