Add ability to drag objects from meta boxes and drop them into your menu. Includes multiple-select before dragging. Select all is todo. Checkboxes remain non-JS fallback. props koopersmith, see #13247.

git-svn-id: http://svn.automattic.com/wordpress/trunk@14434 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
nacin 2010-05-04 07:24:49 +00:00
parent 3e035809a1
commit 7466fadd24
9 changed files with 220 additions and 61 deletions

File diff suppressed because one or more lines are too long

View File

@ -201,6 +201,66 @@ body {
width: 210px; width: 210px;
} }
.add-menu-item-view-all {
height: 400px;
}
#side-sortables .potential-menu-item {
margin-left: 0;
position: relative;
margin: 6px 0;
}
#side-sortables .potential-menu-item ul {
margin-left: 0;
}
#side-sortables .potential-menu-item li {
cursor: move;
padding: 1px 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
}
.potential-menu-item li {
background: #eee;
border: 1px solid #dfdfdf;
color: #646464;
}
.potential-menu-item li:hover {
color: #222;
border-color: #ccc;
background: #f9f9f9;
}
.selected-menu-item li {
background: #FFFFE0;
border-color: #E6DB55;
}
.selected-menu-item li:hover {
background: #ffffbe;
border-color: #e2d537;
}
.potential-menu-item .item-controls,
.potential-menu-item .menu-item-transport {
display: none;
}
.potential-menu-item .ui-draggable-dragging div,
.potential-menu-item .menu-item-handle .item-controls {
display: block;
}
#side-sortables .new-menu-item,
#side-sortables .new-menu-item li,
#side-sortables .additional-menu-items li {
background: transparent;
border: 0;
}
#side-sortables .additional-menu-items li {
margin-top: 13px;
}
.item-edit img.waiting {
display: block;
}
/* Button Primary Actions */ /* Button Primary Actions */
#menu-container .submit { margin: 0px 0px 10px; padding: 0px; } #menu-container .submit { margin: 0px 0px 10px; padding: 0px; }
@ -259,16 +319,15 @@ body {
.menu li { .menu li {
margin-bottom: 0; margin-bottom: 0;
} }
.menu li dl { .menu-item-bar {
clear:both; clear:both;
line-height:1.5em; line-height:1.5em;
position:relative; position:relative;
margin-top: 13px; margin-top: 13px;
} }
.menu li dl dt { .menu-item-handle {
background: url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF; background: url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF;
border: 1px solid #E6E6E6; border: 1px solid #E6E6E6;
clear:both;
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
height: auto; height: auto;
@ -277,14 +336,12 @@ body {
text-shadow: 0 1px 0 #FFFFFF; text-shadow: 0 1px 0 #FFFFFF;
font-weight:bold; font-weight:bold;
overflow: hidden; overflow: hidden;
}
.menu li dl.menu-item-edit-inactive dt {
border-radius: 6px; border-radius: 6px;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
-moz-border-radius: 6px; -moz-border-radius: 6px;
-khtml-border-radius: 6px; -khtml-border-radius: 6px;
} }
.menu li dl.menu-item-edit-active dt { .menu-item-edit-active .menu-item-handle {
-moz-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0;
-webkit-border-top-right-radius: 6px; -webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px; -webkit-border-top-left-radius: 6px;
@ -293,16 +350,14 @@ body {
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.js .menu li dl dt { .js .menu-item-handle {
cursor: move; cursor: move;
} }
.menu li dl dt:hover { .menu li.deleting .menu-item-handle {
}
.menu li.deleting dl dt {
background-color:#faa; background-color:#faa;
} }
.menu li .item-title { .menu-item-handle .item-title {
padding: 7px 0; padding: 7px 0;
line-height: 20px; line-height: 20px;
display:block; display:block;

File diff suppressed because one or more lines are too long

View File

@ -2004,13 +2004,11 @@ input#link_url {
border-width: 1px; border-width: 1px;
} }
.nav-menus-php .categorydiv div.tabs-panel,
.nav-menus-php .customlinkdiv div.tabs-panel, .nav-menus-php .customlinkdiv div.tabs-panel,
.nav-menus-php .posttypediv div.tabs-panel, .nav-menus-php .posttypediv div.tabs-panel,
.nav-menus-php .taxonomydiv div.tabs-panel, .nav-menus-php .taxonomydiv div.tabs-panel {
.nav-menus-php #linkcategorydiv div.tabs-panel {
height: auto; height: auto;
max-height: 205px; overflow: visible;
} }
div.tabs-panel-active { div.tabs-panel-active {

View File

@ -59,13 +59,13 @@ class Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
} }
?> ?>
<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 )); ?>"> <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 )); ?>">
<dl class="<?php <dl class="menu-item-bar <?php
if ( isset($_GET['edit-menu-item']) && $item_id == $_GET['edit-menu-item'] ) if ( isset($_GET['edit-menu-item']) && $item_id == $_GET['edit-menu-item'] )
echo 'menu-item-edit-active'; echo 'menu-item-edit-active';
else else
echo 'menu-item-edit-inactive'; echo 'menu-item-edit-inactive';
?>"> ?>">
<dt> <dt class="menu-item-handle">
<span class="item-title"><?php echo esc_html( $item->title ); ?></span> <span class="item-title"><?php echo esc_html( $item->title ); ?></span>
<span class="item-controls"> <span class="item-controls">
<span class="item-type"><?php echo esc_html( $item->append ); ?></span> <span class="item-type"><?php echo esc_html( $item->append ); ?></span>
@ -601,7 +601,7 @@ function wp_nav_menu_item_post_type_meta_box( $object, $post_type ) {
</div><!-- /.tabs-panel --> </div><!-- /.tabs-panel -->
<div id="<?php echo $post_type_name; ?>-all" class="tabs-panel <?php <div id="<?php echo $post_type_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php
echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
?>"> ?>">
<div class="add-menu-item-pagelinks"> <div class="add-menu-item-pagelinks">
@ -664,7 +664,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
return; return;
} }
// paginate browsing for large numbers of objects // paginate browsing for large numbers of objects
$per_page = 50; $per_page = 13;
$pagenum = isset( $_REQUEST[$taxonomy_name . '-tab'] ) && isset( $_REQUEST['paged'] ) ? absint( $_REQUEST['paged'] ) : 1; $pagenum = isset( $_REQUEST[$taxonomy_name . '-tab'] ) && isset( $_REQUEST['paged'] ) ? absint( $_REQUEST['paged'] ) : 1;
$offset = 0 < $pagenum ? $per_page * ( $pagenum - 1 ) : 0; $offset = 0 < $pagenum ? $per_page * ( $pagenum - 1 ) : 0;
@ -776,7 +776,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
</ul> </ul>
</div><!-- /.tabs-panel --> </div><!-- /.tabs-panel -->
<div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel <?php <div id="tabs-panel-<?php echo $taxonomy_name; ?>-all" class="tabs-panel tabs-panel-view-all <?php
echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
?>"> ?>">
<div class="add-menu-item-pagelinks"> <div class="add-menu-item-pagelinks">

View File

@ -87,7 +87,7 @@ var WPNavMenuHandler = function ($) {
return Math.floor(px / menuItemDepthPerLevel); return Math.floor(px / menuItemDepthPerLevel);
}, },
menuList; menuList, targetList;
// jQuery extensions // jQuery extensions
$.fn.extend({ $.fn.extend({
@ -153,6 +153,7 @@ var WPNavMenuHandler = function ($) {
// Functions that run on init. // Functions that run on init.
init : function() { init : function() {
menuList = $('#menu-to-edit'); menuList = $('#menu-to-edit');
targetList = menuList;
this.attachMenuEditListeners(); this.attachMenuEditListeners();
@ -166,6 +167,8 @@ var WPNavMenuHandler = function ($) {
this.initToggles(); this.initToggles();
this.initTabManager(); this.initTabManager();
this.initAddMenuItemDraggables();
}, },
initToggles : function() { initToggles : function() {
@ -186,24 +189,31 @@ var WPNavMenuHandler = function ($) {
initSortables : function() { initSortables : function() {
var currentDepth = 0, originalDepth, minDepth, maxDepth, var currentDepth = 0, originalDepth, minDepth, maxDepth,
menuLeft = menuList.offset().left; menuLeft = menuList.offset().left,
newItem, transport;
menuList.sortable({ menuList.sortable({
handle: ' > dl', handle: '.menu-item-handle',
placeholder: 'sortable-placeholder', placeholder: 'sortable-placeholder',
start: function(e, ui) { start: function(e, ui) {
var next, height, width, parent, children, maxChildDepth, console.log('sort start', e, ui);
transport = ui.item.children('.menu-item-transport'); var next, height, width, parent, children, maxChildDepth;
// Set depths transport = ui.item.children('.menu-item-transport');
originalDepth = ui.item.menuItemDepth(); // Check if the item is in the menu, or new
newItem = ( ui.helper.hasClass('new-menu-item') );
// Set depths. currentDepth must be set before children are located.
originalDepth = ( newItem ) ? 0 : ui.item.menuItemDepth();
updateCurrentDepth(ui, originalDepth); updateCurrentDepth(ui, originalDepth);
// Attach child elements to parent if( ! newItem ) {
// Skip the placeholder // Attach child elements to parent
parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item; // Skip the placeholder
children = parent.childMenuItems(); parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item;
transport.append( children ); children = parent.childMenuItems();
transport.append( children );
}
// Now that the element is complete, we can update... // Now that the element is complete, we can update...
updateDepthRange(ui); updateDepthRange(ui);
@ -212,17 +222,19 @@ var WPNavMenuHandler = function ($) {
height = transport.outerHeight(); height = transport.outerHeight();
// If there are children, account for distance between top of children and parent // If there are children, account for distance between top of children and parent
height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0; height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0;
height += ui.item.outerHeight(); height += ui.helper.outerHeight();
height -= 2; // Subtract 2 for borders height -= 2; // Subtract 2 for borders
ui.placeholder.height(height); ui.placeholder.height(height);
// Update the width of the placeholder to match the moving item. // Update the width of the placeholder to match the moving item.
maxChildDepth = originalDepth; maxChildDepth = originalDepth;
children.each(function(){ if( ! newItem ) { // Children have already been attached to new items
var depth = $(this).menuItemDepth(); children.each(function(){
maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth; var depth = $(this).menuItemDepth();
}); maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth;
width = ui.item.find('dl dt').outerWidth(); // Get original width });
}
width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width
width += depthToPx(maxChildDepth - originalDepth); // Account for children width += depthToPx(maxChildDepth - originalDepth); // Account for children
width -= 2; // Subtract 2 for borders width -= 2; // Subtract 2 for borders
ui.placeholder.width(width); ui.placeholder.width(width);
@ -231,15 +243,26 @@ var WPNavMenuHandler = function ($) {
var children, depthChange = currentDepth - originalDepth; var children, depthChange = currentDepth - originalDepth;
// Return child elements to the list // Return child elements to the list
children = ui.item.children('.menu-item-transport').children().insertAfter(ui.item); children = transport.children().insertAfter(ui.item);
// Update depth classes if( newItem ) {
if( depthChange != 0 ) { // Remove the helper item
ui.item.updateDepthClass( currentDepth ); ui.item.remove();
children.shiftDepthClass( depthChange ); // Update depth classes
if( depthChange != 0 )
children.shiftDepthClass( depthChange );
// All new menu items must be updated
children.updateParentMenuItemDBId();
} else {
// Update depth classes
if( depthChange != 0 ) {
ui.item.updateDepthClass( currentDepth );
children.shiftDepthClass( depthChange );
}
// Update the item data.
ui.item.updateParentMenuItemDBId();
} }
// Finally, update the item/menu data. // Update positions
ui.item.updateParentMenuItemDBId();
recalculateMenuItemPositions(); recalculateMenuItemPositions();
}, },
change: function(e, ui) { change: function(e, ui) {
@ -251,13 +274,16 @@ var WPNavMenuHandler = function ($) {
updateDepthRange(ui); updateDepthRange(ui);
}, },
sort: function(e, ui) { sort: function(e, ui) {
var depth = pxToDepth(ui.item.offset().left - menuLeft); var depth = pxToDepth(ui.helper.offset().left - menuLeft);
// Check and correct if depth is not within range. // Check and correct if depth is not within range.
if ( depth < minDepth ) depth = minDepth; if ( depth < minDepth ) depth = minDepth;
else if ( depth > maxDepth ) depth = maxDepth; else if ( depth > maxDepth ) depth = maxDepth;
if( depth != currentDepth ) if( depth != currentDepth )
updateCurrentDepth(ui, depth); updateCurrentDepth(ui, depth);
},
receive: function(e, ui) {
transport = ui.sender.children('.menu-item-transport');
} }
}); });
@ -282,6 +308,78 @@ var WPNavMenuHandler = function ($) {
currentDepth = depth; currentDepth = depth;
} }
}, },
initAddMenuItemDraggables : function() {
$.fn.extend({
checkItem : function() {
return this.each(function(){
$(this).addClass('selected-menu-item')
.next().children('input').attr('checked','checked');
});
},
uncheckItem : function() {
return this.each(function(){
$(this).removeClass('selected-menu-item')
.next().children('input').removeAttr('checked');
});
},
toggleItem : function() {
return this.each(function(){
var t = $(this);
if( t.hasClass('selected-menu-item') )
t.uncheckItem();
else
t.checkItem();
});
}
});
var menuItems = $('.potential-menu-item');
menuItems.click(function(e){
$(this).toggleItem();
}).children().draggable({
helper: 'clone',
connectToSortable: 'ul#menu-to-edit',
distance: 5,
zIndex: 100,
start: function(e, ui) {
var target = $(e.target),
item = target.parent(),
li = item.parent(),
items;
// Make sure the item we're dragging is selected.
item.checkItem();
// Set us to be the ajax target
targetList = target.children('.menu-item-transport');
// Get all checked elements and assemble selected items.
items = menuItems.filter('.selected-menu-item').children().not( ui.helper ).clone();
ui.helper.children('.additional-menu-items').append( items );
// This class tells the sortables to treat it as a new item.
ui.helper.addClass('new-menu-item');
// CSS tweaks to remove some unnecessary items
ui.helper.children('div').hide();
items.first().css('margin-top', 0);
// Make the items look like menu items
items.children('div').addClass('menu-item-handle');
ui.helper.children('div').addClass('hidden-handle');
// Trigger the ajax
li.parents('.inside').find('.add-to-menu input').trigger('submit');
// Lock dimensions
ui.helper.width( ui.helper.width() );
ui.helper.height( ui.helper.height() );
},
stop: function(e, ui) {
// Reset the targetList and unselect the menu items
targetList = menuList;
menuItems.filter('.selected-menu-item').uncheckItem();
}
});
},
attachMenuEditListeners : function() { attachMenuEditListeners : function() {
var that = this; var that = this;
@ -599,8 +697,8 @@ var WPNavMenuHandler = function ($) {
*/ */
eventSubmitMetaForm : function(thisForm, e) { eventSubmitMetaForm : function(thisForm, e) {
var inputs = thisForm.getElementsByTagName('input'), var inputs = thisForm.getElementsByTagName('input'),
i = inputs.length, len = inputs.length,
j, i, j,
listItemData, listItemData,
listItemDBID, listItemDBID,
listItemDBIDMatch, listItemDBIDMatch,
@ -611,7 +709,7 @@ var WPNavMenuHandler = function ($) {
that = this; that = this;
params['action'] = ''; params['action'] = '';
while ( i-- ) { for ( i = 0; i < len; i++ ) {
if ( // we're submitting a checked item if ( // we're submitting a checked item
inputs[i].name && inputs[i].name &&
-1 != inputs[i].name.indexOf('menu-item-object-id') && -1 != inputs[i].name.indexOf('menu-item-object-id') &&
@ -668,7 +766,7 @@ var WPNavMenuHandler = function ($) {
* @param object req The request arguments. * @param object req The request arguments.
*/ */
processAddMenuItemResponse : function( menuMarkup, req ) { processAddMenuItemResponse : function( menuMarkup, req ) {
$(menuMarkup).hideAdvancedMenuItemFields().appendTo( menuList ); $(menuMarkup).hideAdvancedMenuItemFields().appendTo( targetList );
/* set custom link form back to defaults */ /* set custom link form back to defaults */
$('#custom-menu-item-name').val('').blur(); $('#custom-menu-item-name').val('').blur();

File diff suppressed because one or more lines are too long

View File

@ -142,9 +142,17 @@ class Walker_Nav_Menu_Checklist extends Walker_Nav_Menu {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$output .= $indent . '<li>'; $output .= $indent . '<li>';
$output .= '<label class="menu-item-title">'; $output .= '<ul class="potential-menu-item hide-if-no-js"><li><div>';
$output .= '<input type="checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> '; $output .= '<span class="item-title">' . esc_html( $item->title ) . '</span>';
$output .= $item->title .'</label>'; $output .= '<span class="item-controls">';
$output .= '<span class="item-type">' . esc_html( $item->append ) . '</span>';
$output .= '<span class="item-edit">';
$output .= '<img class="waiting" src="' . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . '" />';
$output .= '</span></span>';
$output .= '</div><ul class="additional-menu-items"></ul><ul class="menu-item-transport"></ul></li></ul>';
$output .= '<label class="menu-item-title hide-if-js">';
$output .= '<input type="checkbox" class="menu-item-checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> ';
$output .= esc_html( $item->title ) .'</label>';
// Menu item hidden fields // Menu item hidden fields
$output .= '<input type="hidden" class="menu-item-db-id" name="menu-item[' . $possible_object_id . '][menu-item-db-id]" value="' . $possible_db_id . '" />'; $output .= '<input type="hidden" class="menu-item-db-id" name="menu-item[' . $possible_object_id . '][menu-item-db-id]" value="' . $possible_db_id . '" />';

View File

@ -393,7 +393,7 @@ function wp_default_scripts( &$scripts ) {
) ); ) );
// Custom Navigation // Custom Navigation
$scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100503a' ); $scripts->add( 'nav-menu', "/wp-admin/js/nav-menu$suffix.js", false, '20100504' );
$scripts->localize( 'nav-menu', 'navMenuL10n', array( $scripts->localize( 'nav-menu', 'navMenuL10n', array(
'custom' => _x('Custom', 'menu nav item type'), 'custom' => _x('Custom', 'menu nav item type'),
'thickbox' => _x('Edit Menu Item', 'Thickbox Title'), 'thickbox' => _x('Edit Menu Item', 'Thickbox Title'),
@ -442,7 +442,7 @@ function wp_default_styles( &$styles ) {
// Any rtl stylesheets that don't have a .dev version for ltr // Any rtl stylesheets that don't have a .dev version for ltr
$no_suffix = array( 'farbtastic' ); $no_suffix = array( 'farbtastic' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20100501a' ); $styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20100504' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20100219' ); $styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20100219' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' ); $styles->add_data( 'ie', 'conditional', 'lte IE 7' );
@ -474,7 +474,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' ); $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.2' );
$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' ); $styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' ); $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100503a' ); $styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100504' );
foreach ( $rtl_styles as $rtl_style ) { foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true ); $styles->add_data( $rtl_style, 'rtl', true );