Ticket #13247: 13247.progress.1.patch

File 13247.progress.1.patch, 15.4 KB (added by koopersmith, 3 years ago)

  • wp-includes/nav-menu-template.php

     
    142142                $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; 
    143143 
    144144                $output .= $indent . '<li>'; 
    145                 $output .= '<label class="menu-item-title">'; 
    146                 $output .= '<input type="checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> '; 
    147                 $output .= $item->title .'</label>'; 
     145                $output .= '<ul class="potential-menu-item hide-if-no-js"><li><div>'; 
     146                $output .= '<span class="item-title">' . esc_html( $item->title ) . '</span>'; 
     147                $output .= '<span class="item-controls">'; 
     148                $output .= '<span class="item-type">' . esc_html( $item->append ) . '</span>'; 
     149                $output .= '<span class="item-edit">'; 
     150                $output .= '<img class="waiting" src="' . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . '" />'; 
     151                $output .= '</span></span>'; 
     152                $output .= '</div><ul class="additional-menu-items"></ul><ul class="menu-item-transport"></ul></li></ul>'; 
     153                $output .= '<label class="menu-item-title hide-if-js">'; 
     154                $output .= '<input type="checkbox" class="menu-item-checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> '; 
     155                $output .= esc_html( $item->title ) .'</label>'; 
    148156 
    149157                // Menu item hidden fields 
    150158                $output .= '<input type="hidden" class="menu-item-db-id" name="menu-item[' . $possible_object_id . '][menu-item-db-id]" value="' . $possible_db_id . '" />'; 

  • wp-admin/includes/nav-menu.php

     
    5959                } 
    6060                ?> 
    6161                <li id="menu-item-<?php echo $item_id; ?>" class="menu-item menu-item-depth-<?php echo $depth; ?> menu-item-<?php echo strtolower(esc_attr( $item->append )); ?>"> 
    62                         <dl class="<?php 
     62                        <dl class="menu-item-bar <?php 
    6363                                if ( isset($_GET['edit-menu-item']) && $item_id == $_GET['edit-menu-item'] ) 
    6464                                        echo 'menu-item-edit-active'; 
    6565                                else 
    6666                                        echo 'menu-item-edit-inactive'; 
    6767                        ?>"> 
    68                                 <dt> 
     68                                <dt class="menu-item-handle"> 
    6969                                        <span class="item-title"><?php echo esc_html( $item->title ); ?></span> 
    7070                                        <span class="item-controls"> 
    7171                                                <span class="item-type"><?php echo esc_html( $item->append ); ?></span> 
    … …  
    601601                </div><!-- /.tabs-panel --> 
    602602 
    603603 
    604                 <div id="<?php echo $post_type_name; ?>-all" class="tabs-panel <?php 
     604                <div id="<?php echo $post_type_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php 
    605605                        echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); 
    606606                ?>"> 
    607607                        <div class="add-menu-item-pagelinks"> 
    … …  
    664664                return; 
    665665        } 
    666666        // paginate browsing for large numbers of objects 
    667         $per_page = 50; 
     667        $per_page = 13; 
    668668        $pagenum = isset( $_REQUEST[$taxonomy_name . '-tab'] ) && isset( $_REQUEST['paged'] ) ? absint( $_REQUEST['paged'] ) : 1; 
    669669        $offset = 0 < $pagenum ? $per_page * ( $pagenum - 1 ) : 0; 
    670670 
    … …  
    776776                        </ul> 
    777777                </div><!-- /.tabs-panel --> 
    778778 
    779                 <div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel <?php 
     779                <div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php 
    780780                        echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); 
    781781                ?>"> 
    782782                        <div class="add-menu-item-pagelinks"> 

  • wp-admin/js/nav-menu.dev.js

     
    8787                return Math.floor(px / menuItemDepthPerLevel); 
    8888        }, 
    8989 
    90         menuList; 
     90        menuList, targetList; 
    9191 
    9292        // jQuery extensions 
    9393        $.fn.extend({ 
    … …  
    153153                // Functions that run on init. 
    154154                init : function() { 
    155155                        menuList = $('#menu-to-edit'); 
     156                        targetList = menuList; 
    156157 
    157158                        this.attachMenuEditListeners(); 
    158159 
    … …  
    166167                        this.initToggles(); 
    167168 
    168169                        this.initTabManager(); 
     170                         
     171                        this.initAddMenuItemDraggables(); 
    169172                }, 
    170173 
    171174                initToggles : function() { 
    … …  
    186189 
    187190                initSortables : function() { 
    188191                        var currentDepth = 0, originalDepth, minDepth, maxDepth, 
    189                                 menuLeft = menuList.offset().left; 
     192                                menuLeft = menuList.offset().left, 
     193                                newItem, transport; 
    190194 
    191195                        menuList.sortable({ 
    192                                 handle: ' > dl', 
     196                                handle: '.menu-item-handle', 
    193197                                placeholder: 'sortable-placeholder', 
    194198                                start: function(e, ui) { 
    195                                         var next, height, width, parent, children, maxChildDepth, 
    196                                                 transport = ui.item.children('.menu-item-transport'); 
     199                                        console.log('sort start', e, ui); 
     200                                        var next, height, width, parent, children, maxChildDepth; 
    197201 
    198                                         // Set depths 
    199                                         originalDepth = ui.item.menuItemDepth(); 
     202                                        transport = ui.item.children('.menu-item-transport'); 
     203                                        // Check if the item is in the menu, or new 
     204                                        newItem = ( ui.helper.hasClass('new-menu-item') ); 
     205                                         
     206                                        // Set depths. currentDepth must be set before children are located. 
     207                                        originalDepth = ( newItem ) ? 0 : ui.item.menuItemDepth(); 
    200208                                        updateCurrentDepth(ui, originalDepth); 
     209                                         
     210                                        if( ! newItem ) { 
     211                                                // Attach child elements to parent 
     212                                                // Skip the placeholder 
     213                                                parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item; 
     214                                                children = parent.childMenuItems(); 
     215                                                transport.append( children ); 
     216                                        } 
    201217 
    202                                         // Attach child elements to parent 
    203                                         // Skip the placeholder 
    204                                         parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item; 
    205                                         children = parent.childMenuItems(); 
    206                                         transport.append( children ); 
    207  
    208218                                        // Now that the element is complete, we can update... 
    209219                                        updateDepthRange(ui); 
    210220 
    … …  
    212222                                        height = transport.outerHeight(); 
    213223                                        // If there are children, account for distance between top of children and parent 
    214224                                        height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0; 
    215                                         height += ui.item.outerHeight(); 
     225                                        height += ui.helper.outerHeight(); 
    216226                                        height -= 2; // Subtract 2 for borders 
    217227                                        ui.placeholder.height(height); 
    218228 
    219229                                        // Update the width of the placeholder to match the moving item. 
    220230                                        maxChildDepth = originalDepth; 
    221                                         children.each(function(){ 
    222                                                 var depth = $(this).menuItemDepth(); 
    223                                                 maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth; 
    224                                         }); 
    225                                         width = ui.item.find('dl dt').outerWidth(); // Get original width 
     231                                        if( ! newItem ) { // Children have already been attached to new items 
     232                                                children.each(function(){ 
     233                                                        var depth = $(this).menuItemDepth(); 
     234                                                        maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth; 
     235                                                }); 
     236                                        } 
     237                                        width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width 
    226238                                        width += depthToPx(maxChildDepth - originalDepth); // Account for children 
    227239                                        width -= 2; // Subtract 2 for borders 
    228240                                        ui.placeholder.width(width); 
    … …  
    231243                                        var children, depthChange = currentDepth - originalDepth; 
    232244 
    233245                                        // Return child elements to the list 
    234                                         children = ui.item.children('.menu-item-transport').children().insertAfter(ui.item); 
    235  
    236                                         // Update depth classes 
    237                                         if( depthChange != 0 ) { 
    238                                                 ui.item.updateDepthClass( currentDepth ); 
    239                                                 children.shiftDepthClass( depthChange ); 
     246                                        children = transport.children().insertAfter(ui.item); 
     247                                         
     248                                        if( newItem ) { 
     249                                                // Remove the helper item 
     250                                                ui.item.remove(); 
     251                                                // Update depth classes 
     252                                                if( depthChange != 0 ) 
     253                                                        children.shiftDepthClass( depthChange ); 
     254                                                // All new menu items must be updated 
     255                                                children.updateParentMenuItemDBId(); 
     256                                        } else { 
     257                                                // Update depth classes 
     258                                                if( depthChange != 0 ) { 
     259                                                        ui.item.updateDepthClass( currentDepth ); 
     260                                                        children.shiftDepthClass( depthChange ); 
     261                                                } 
     262                                                // Update the item data. 
     263                                                ui.item.updateParentMenuItemDBId(); 
    240264                                        } 
    241                                         // Finally, update the item/menu data. 
    242                                         ui.item.updateParentMenuItemDBId(); 
     265                                        // Update positions 
    243266                                        recalculateMenuItemPositions(); 
    244267                                }, 
    245268                                change: function(e, ui) { 
    … …  
    251274                                        updateDepthRange(ui); 
    252275                                }, 
    253276                                sort: function(e, ui) { 
    254                                         var depth = pxToDepth(ui.item.offset().left - menuLeft); 
     277                                        var depth = pxToDepth(ui.helper.offset().left - menuLeft); 
    255278                                        // Check and correct if depth is not within range. 
    256279                                        if ( depth < minDepth ) depth = minDepth; 
    257280                                        else if ( depth > maxDepth ) depth = maxDepth; 
    258281 
    259282                                        if( depth != currentDepth ) 
    260283                                                updateCurrentDepth(ui, depth); 
     284                                }, 
     285                                receive: function(e, ui) { 
     286                                        transport = ui.sender.children('.menu-item-transport'); 
    261287                                } 
    262288                        }); 
    263289 
    … …  
    282308                                currentDepth = depth; 
    283309                        } 
    284310                }, 
     311                 
     312                initAddMenuItemDraggables : function() { 
     313                        $.fn.extend({ 
     314                                checkItem : function() { 
     315                                        return this.each(function(){ 
     316                                                $(this).addClass('selected-menu-item') 
     317                                                        .next().children('input').attr('checked','checked'); 
     318                                        }); 
     319                                }, 
     320                                uncheckItem : function() { 
     321                                        return this.each(function(){ 
     322                                                $(this).removeClass('selected-menu-item') 
     323                                                        .next().children('input').removeAttr('checked'); 
     324                                        }); 
     325                                }, 
     326                                toggleItem : function() { 
     327                                        return this.each(function(){ 
     328                                                var t = $(this); 
     329                                                if( t.hasClass('selected-menu-item') ) 
     330                                                        t.uncheckItem(); 
     331                                                else 
     332                                                        t.checkItem(); 
     333                                        }); 
     334                                } 
     335                        }); 
     336                         
     337                        var menuItems = $('.potential-menu-item'); 
     338                        menuItems.click(function(e){ 
     339                                $(this).toggleItem(); 
     340                        }).children().draggable({ 
     341                                helper: 'clone', 
     342                                connectToSortable: 'ul#menu-to-edit', 
     343                                distance: 5, 
     344                                zIndex: 100, 
     345                                start: function(e, ui) { 
     346                                        var target = $(e.target), 
     347                                                item = target.parent(), 
     348                                                li = item.parent(), 
     349                                                items; 
     350                                         
     351                                        // Make sure the item we're dragging is selected. 
     352                                        item.checkItem(); 
     353                                        // Set us to be the ajax target 
     354                                        targetList = target.children('.menu-item-transport'); 
     355                                        // Get all checked elements and assemble selected items. 
     356                                        items = menuItems.filter('.selected-menu-item').children().not( ui.helper ).clone(); 
     357                                        ui.helper.children('.additional-menu-items').append( items ); 
     358                                        // This class tells the sortables to treat it as a new item. 
     359                                        ui.helper.addClass('new-menu-item'); 
     360                                         
     361                                        // CSS tweaks to remove some unnecessary items 
     362                                        ui.helper.children('div').hide(); 
     363                                        items.first().css('margin-top', 0); 
    285364 
     365                                        // Make the items look like menu items 
     366                                        items.children('div').addClass('menu-item-handle'); 
     367                                        ui.helper.children('div').addClass('hidden-handle'); 
     368                                         
     369                                        // Trigger the ajax 
     370                                        li.parents('.inside').find('.add-to-menu input').trigger('submit'); 
     371                                         
     372                                        // Lock dimensions 
     373                                        ui.helper.width( ui.helper.width() ); 
     374                                        ui.helper.height( ui.helper.height() ); 
     375                                }, 
     376                                stop: function(e, ui) { 
     377                                        // Reset the targetList and unselect the menu items 
     378                                        targetList = menuList; 
     379                                        menuItems.filter('.selected-menu-item').uncheckItem(); 
     380                                } 
     381                        }); 
     382                }, 
     383 
    286384                attachMenuEditListeners : function() { 
    287385                        var that = this; 
    288386                        $('#update-nav-menu').bind('click', function(e) { 
    … …  
    599697                 */ 
    600698                eventSubmitMetaForm : function(thisForm, e) { 
    601699                        var inputs = thisForm.getElementsByTagName('input'), 
    602                         i = inputs.length, 
    603                         j, 
     700                        len = inputs.length, 
     701                        i, j, 
    604702                        listItemData, 
    605703                        listItemDBID, 
    606704                        listItemDBIDMatch, 
    … …  
    611709                        that = this; 
    612710                        params['action'] = ''; 
    613711 
    614                         while ( i-- ) { 
     712                        for ( i = 0; i < len; i++ ) { 
    615713                                if (    // we're submitting a checked item 
    616714                                        inputs[i].name && 
    617715                                        -1 != inputs[i].name.indexOf('menu-item-object-id') && 
    … …  
    668766                 * @param object req The request arguments. 
    669767                 */ 
    670768                processAddMenuItemResponse : function( menuMarkup, req ) { 
    671                         $(menuMarkup).hideAdvancedMenuItemFields().appendTo( menuList ); 
     769                        $(menuMarkup).hideAdvancedMenuItemFields().appendTo( targetList ); 
    672770 
    673771                        /* set custom link form back to defaults */ 
    674772                        $('#custom-menu-item-name').val('').blur(); 

  • wp-admin/css/wp-admin.dev.css

     
    20042004        border-width: 1px; 
    20052005} 
    20062006 
    2007 .nav-menus-php .categorydiv div.tabs-panel, 
    20082007.nav-menus-php .customlinkdiv div.tabs-panel, 
    20092008.nav-menus-php .posttypediv div.tabs-panel, 
    2010 .nav-menus-php .taxonomydiv div.tabs-panel, 
    2011 .nav-menus-php #linkcategorydiv div.tabs-panel { 
     2009.nav-menus-php .taxonomydiv div.tabs-panel { 
    20122010        height: auto; 
    2013         max-height: 205px; 
     2011        overflow: visible; 
    20142012} 
    20152013 
    20162014div.tabs-panel-active { 

  • wp-admin/css/nav-menu.dev.css

     
    201201        width: 210px; 
    202202} 
    203203 
     204.add-menu-item-view-all { 
     205        height: 400px; 
     206} 
     207 
     208#side-sortables .potential-menu-item { 
     209        margin-left: 0; 
     210        position: relative; 
     211        margin: 6px 0; 
     212} 
     213#side-sortables .potential-menu-item ul { 
     214        margin-left: 0; 
     215         
     216} 
     217#side-sortables .potential-menu-item li { 
     218        cursor: move; 
     219        padding: 1px 6px; 
     220        border-radius: 4px; 
     221        -webkit-border-radius: 4px; 
     222        -moz-border-radius: 4px; 
     223        -khtml-border-radius: 4px; 
     224} 
     225        .potential-menu-item li { 
     226                background: #eee; 
     227                border: 1px solid #dfdfdf; 
     228                color: #646464; 
     229        } 
     230        .potential-menu-item li:hover { 
     231                color: #222; 
     232                border-color: #ccc; 
     233                background: #f9f9f9; 
     234        } 
     235                .selected-menu-item li { 
     236                        background: #FFFFE0; 
     237                        border-color: #E6DB55; 
     238                } 
     239                .selected-menu-item li:hover { 
     240                        background: #ffffbe; 
     241                        border-color: #e2d537; 
     242                } 
     243        .potential-menu-item .item-controls, 
     244        .potential-menu-item .menu-item-transport { 
     245                display: none; 
     246        } 
     247        .potential-menu-item .ui-draggable-dragging div, 
     248        .potential-menu-item .menu-item-handle .item-controls { 
     249                display: block; 
     250        } 
     251        #side-sortables .new-menu-item, 
     252        #side-sortables .new-menu-item li, 
     253        #side-sortables .additional-menu-items li { 
     254                background: transparent; 
     255                border: 0; 
     256        } 
     257        #side-sortables .additional-menu-items li { 
     258                margin-top: 13px; 
     259        } 
     260        .item-edit img.waiting { 
     261                display: block; 
     262        } 
     263 
    204264/* Button Primary Actions */ 
    205265#menu-container .submit { margin: 0px 0px 10px; padding: 0px; } 
    206266 
    … …  
    259319.menu li { 
    260320        margin-bottom: 0; 
    261321} 
    262 .menu li dl { 
     322.menu-item-bar { 
    263323        clear:both; 
    264324        line-height:1.5em; 
    265325        position:relative; 
    266326        margin-top: 13px; 
    267327} 
    268 .menu li dl dt { 
     328.menu-item-handle { 
    269329        background: url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF; 
    270330        border: 1px solid #E6E6E6; 
    271         clear:both; 
    272331        position: relative; 
    273332        padding-left: 10px; 
    274333        height: auto; 
    … …  
    277336        text-shadow: 0 1px 0 #FFFFFF; 
    278337        font-weight:bold; 
    279338        overflow: hidden; 
    280 } 
    281 .menu li dl.menu-item-edit-inactive dt { 
    282339        border-radius: 6px; 
    283340        -webkit-border-radius: 6px; 
    284341        -moz-border-radius: 6px; 
    285342        -khtml-border-radius: 6px; 
    286343} 
    287 .menu li dl.menu-item-edit-active dt { 
     344.menu-item-edit-active .menu-item-handle { 
    288345        -moz-border-radius: 6px 6px 0 0; 
    289346        -webkit-border-top-right-radius: 6px; 
    290347        -webkit-border-top-left-radius: 6px; 
    … …  
    293350        border-top-right-radius: 6px; 
    294351        border-top-left-radius: 6px; 
    295352} 
    296 .js .menu li dl dt { 
     353.js .menu-item-handle { 
    297354        cursor: move; 
    298355} 
    299 .menu li dl dt:hover { 
    300 } 
    301 .menu li.deleting dl dt { 
     356.menu li.deleting .menu-item-handle { 
    302357        background-color:#faa; 
    303358} 
    304359 
    305 .menu li .item-title { 
     360.menu-item-handle .item-title { 
    306361        padding: 7px 0; 
    307362        line-height: 20px; 
    308363        display:block;