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
parent
3e035809a1
commit
7466fadd24
File diff suppressed because one or more lines are too long
|
|
@ -201,6 +201,66 @@ body {
|
|||
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 */
|
||||
#menu-container .submit { margin: 0px 0px 10px; padding: 0px; }
|
||||
|
||||
|
|
@ -259,16 +319,15 @@ body {
|
|||
.menu li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.menu li dl {
|
||||
.menu-item-bar {
|
||||
clear:both;
|
||||
line-height:1.5em;
|
||||
position:relative;
|
||||
margin-top: 13px;
|
||||
}
|
||||
.menu li dl dt {
|
||||
.menu-item-handle {
|
||||
background: url("../images/gray-grad.png") repeat-x scroll left top #DFDFDF;
|
||||
border: 1px solid #E6E6E6;
|
||||
clear:both;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
height: auto;
|
||||
|
|
@ -277,14 +336,12 @@ body {
|
|||
text-shadow: 0 1px 0 #FFFFFF;
|
||||
font-weight:bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu li dl.menu-item-edit-inactive dt {
|
||||
border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-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;
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
|
|
@ -293,16 +350,14 @@ body {
|
|||
border-top-right-radius: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
.js .menu li dl dt {
|
||||
.js .menu-item-handle {
|
||||
cursor: move;
|
||||
}
|
||||
.menu li dl dt:hover {
|
||||
}
|
||||
.menu li.deleting dl dt {
|
||||
.menu li.deleting .menu-item-handle {
|
||||
background-color:#faa;
|
||||
}
|
||||
|
||||
.menu li .item-title {
|
||||
.menu-item-handle .item-title {
|
||||
padding: 7px 0;
|
||||
line-height: 20px;
|
||||
display:block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2004,13 +2004,11 @@ input#link_url {
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
.nav-menus-php .categorydiv div.tabs-panel,
|
||||
.nav-menus-php .customlinkdiv div.tabs-panel,
|
||||
.nav-menus-php .posttypediv div.tabs-panel,
|
||||
.nav-menus-php .taxonomydiv div.tabs-panel,
|
||||
.nav-menus-php #linkcategorydiv div.tabs-panel {
|
||||
.nav-menus-php .taxonomydiv div.tabs-panel {
|
||||
height: auto;
|
||||
max-height: 205px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
div.tabs-panel-active {
|
||||
|
|
|
|||
|
|
@ -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 )); ?>">
|
||||
<dl class="<?php
|
||||
<dl class="menu-item-bar <?php
|
||||
if ( isset($_GET['edit-menu-item']) && $item_id == $_GET['edit-menu-item'] )
|
||||
echo 'menu-item-edit-active';
|
||||
else
|
||||
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-controls">
|
||||
<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 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' );
|
||||
?>">
|
||||
<div class="add-menu-item-pagelinks">
|
||||
|
|
@ -664,7 +664,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
|
|||
return;
|
||||
}
|
||||
// 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;
|
||||
$offset = 0 < $pagenum ? $per_page * ( $pagenum - 1 ) : 0;
|
||||
|
||||
|
|
@ -776,7 +776,7 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
|
|||
</ul>
|
||||
</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' );
|
||||
?>">
|
||||
<div class="add-menu-item-pagelinks">
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ var WPNavMenuHandler = function ($) {
|
|||
return Math.floor(px / menuItemDepthPerLevel);
|
||||
},
|
||||
|
||||
menuList;
|
||||
menuList, targetList;
|
||||
|
||||
// jQuery extensions
|
||||
$.fn.extend({
|
||||
|
|
@ -153,6 +153,7 @@ var WPNavMenuHandler = function ($) {
|
|||
// Functions that run on init.
|
||||
init : function() {
|
||||
menuList = $('#menu-to-edit');
|
||||
targetList = menuList;
|
||||
|
||||
this.attachMenuEditListeners();
|
||||
|
||||
|
|
@ -166,6 +167,8 @@ var WPNavMenuHandler = function ($) {
|
|||
this.initToggles();
|
||||
|
||||
this.initTabManager();
|
||||
|
||||
this.initAddMenuItemDraggables();
|
||||
},
|
||||
|
||||
initToggles : function() {
|
||||
|
|
@ -186,24 +189,31 @@ var WPNavMenuHandler = function ($) {
|
|||
|
||||
initSortables : function() {
|
||||
var currentDepth = 0, originalDepth, minDepth, maxDepth,
|
||||
menuLeft = menuList.offset().left;
|
||||
menuLeft = menuList.offset().left,
|
||||
newItem, transport;
|
||||
|
||||
menuList.sortable({
|
||||
handle: ' > dl',
|
||||
handle: '.menu-item-handle',
|
||||
placeholder: 'sortable-placeholder',
|
||||
start: function(e, ui) {
|
||||
var next, height, width, parent, children, maxChildDepth,
|
||||
transport = ui.item.children('.menu-item-transport');
|
||||
console.log('sort start', e, ui);
|
||||
var next, height, width, parent, children, maxChildDepth;
|
||||
|
||||
// Set depths
|
||||
originalDepth = ui.item.menuItemDepth();
|
||||
transport = ui.item.children('.menu-item-transport');
|
||||
// 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);
|
||||
|
||||
if( ! newItem ) {
|
||||
// Attach child elements to parent
|
||||
// Skip the placeholder
|
||||
parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item;
|
||||
children = parent.childMenuItems();
|
||||
transport.append( children );
|
||||
}
|
||||
|
||||
// Now that the element is complete, we can update...
|
||||
updateDepthRange(ui);
|
||||
|
|
@ -212,17 +222,19 @@ var WPNavMenuHandler = function ($) {
|
|||
height = transport.outerHeight();
|
||||
// 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 += ui.item.outerHeight();
|
||||
height += ui.helper.outerHeight();
|
||||
height -= 2; // Subtract 2 for borders
|
||||
ui.placeholder.height(height);
|
||||
|
||||
// Update the width of the placeholder to match the moving item.
|
||||
maxChildDepth = originalDepth;
|
||||
if( ! newItem ) { // Children have already been attached to new items
|
||||
children.each(function(){
|
||||
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 -= 2; // Subtract 2 for borders
|
||||
ui.placeholder.width(width);
|
||||
|
|
@ -231,15 +243,26 @@ var WPNavMenuHandler = function ($) {
|
|||
var children, depthChange = currentDepth - originalDepth;
|
||||
|
||||
// Return child elements to the list
|
||||
children = ui.item.children('.menu-item-transport').children().insertAfter(ui.item);
|
||||
children = transport.children().insertAfter(ui.item);
|
||||
|
||||
if( newItem ) {
|
||||
// Remove the helper item
|
||||
ui.item.remove();
|
||||
// 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 );
|
||||
}
|
||||
// Finally, update the item/menu data.
|
||||
// Update the item data.
|
||||
ui.item.updateParentMenuItemDBId();
|
||||
}
|
||||
// Update positions
|
||||
recalculateMenuItemPositions();
|
||||
},
|
||||
change: function(e, ui) {
|
||||
|
|
@ -251,13 +274,16 @@ var WPNavMenuHandler = function ($) {
|
|||
updateDepthRange(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.
|
||||
if ( depth < minDepth ) depth = minDepth;
|
||||
else if ( depth > maxDepth ) depth = maxDepth;
|
||||
|
||||
if( depth != currentDepth )
|
||||
updateCurrentDepth(ui, depth);
|
||||
},
|
||||
receive: function(e, ui) {
|
||||
transport = ui.sender.children('.menu-item-transport');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -283,6 +309,78 @@ var WPNavMenuHandler = function ($) {
|
|||
}
|
||||
},
|
||||
|
||||
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() {
|
||||
var that = this;
|
||||
$('#update-nav-menu').bind('click', function(e) {
|
||||
|
|
@ -599,8 +697,8 @@ var WPNavMenuHandler = function ($) {
|
|||
*/
|
||||
eventSubmitMetaForm : function(thisForm, e) {
|
||||
var inputs = thisForm.getElementsByTagName('input'),
|
||||
i = inputs.length,
|
||||
j,
|
||||
len = inputs.length,
|
||||
i, j,
|
||||
listItemData,
|
||||
listItemDBID,
|
||||
listItemDBIDMatch,
|
||||
|
|
@ -611,7 +709,7 @@ var WPNavMenuHandler = function ($) {
|
|||
that = this;
|
||||
params['action'] = '';
|
||||
|
||||
while ( i-- ) {
|
||||
for ( i = 0; i < len; i++ ) {
|
||||
if ( // we're submitting a checked item
|
||||
inputs[i].name &&
|
||||
-1 != inputs[i].name.indexOf('menu-item-object-id') &&
|
||||
|
|
@ -668,7 +766,7 @@ var WPNavMenuHandler = function ($) {
|
|||
* @param object req The request arguments.
|
||||
*/
|
||||
processAddMenuItemResponse : function( menuMarkup, req ) {
|
||||
$(menuMarkup).hideAdvancedMenuItemFields().appendTo( menuList );
|
||||
$(menuMarkup).hideAdvancedMenuItemFields().appendTo( targetList );
|
||||
|
||||
/* set custom link form back to defaults */
|
||||
$('#custom-menu-item-name').val('').blur();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -142,9 +142,17 @@ class Walker_Nav_Menu_Checklist extends Walker_Nav_Menu {
|
|||
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
|
||||
|
||||
$output .= $indent . '<li>';
|
||||
$output .= '<label class="menu-item-title">';
|
||||
$output .= '<input type="checkbox" name="menu-item[' . $possible_object_id . '][menu-item-object-id]" value="'. esc_attr( $item->object_id ) .'" /> ';
|
||||
$output .= $item->title .'</label>';
|
||||
$output .= '<ul class="potential-menu-item hide-if-no-js"><li><div>';
|
||||
$output .= '<span class="item-title">' . esc_html( $item->title ) . '</span>';
|
||||
$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
|
||||
$output .= '<input type="hidden" class="menu-item-db-id" name="menu-item[' . $possible_object_id . '][menu-item-db-id]" value="' . $possible_db_id . '" />';
|
||||
|
|
|
|||
|
|
@ -393,7 +393,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
) );
|
||||
|
||||
// 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(
|
||||
'custom' => _x('Custom', 'menu nav item type'),
|
||||
'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
|
||||
$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_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( '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( '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 ) {
|
||||
$styles->add_data( $rtl_style, 'rtl', true );
|
||||
|
|
|
|||
Loading…
Reference in New Issue