WordPress.org
Get WordPress

Make WordPress Core

Ticket #13247: 13247.progress.1.patch

File 13247.progress.1.patch, 15.4 KB (added by koopersmith, 16 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;