Turn the Nav Menu meta boxes into an accordion. Less sprawling and overwhelming.
* Registration stays the same — they're meta boxes * Call `do_accordion_sections()` instead of `do_meta_boxes()` and they render as an accordion props DrewAPicture, lessbloat, jkudish. fixes #23450. see #23449 git-svn-id: http://core.svn.wordpress.org/trunk@23707 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith
parent
173ed0a72c
commit
83bb916b81
|
|
@ -6037,6 +6037,10 @@ body.full-overlay-active {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.wp-full-overlay-sidebar-content .accordion-section:first-child {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
/* Close Link */
|
||||
.wp-full-overlay .close-full-overlay {
|
||||
text-decoration: none;
|
||||
|
|
@ -7202,6 +7206,29 @@ a.rsswidget {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#nav-menu-meta ul.outer-border {
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.accordion-section ul.category-tabs,
|
||||
.accordion-section ul.add-menu-item-tabs,
|
||||
.accordion-section ul.wp-tab-bar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.accordion-section .categorychecklist {
|
||||
margin: 13px 0;
|
||||
}
|
||||
|
||||
#nav-menu-meta .accordion-section-content {
|
||||
padding: 18px 13px;
|
||||
}
|
||||
|
||||
#nav-menu-meta .button-controls {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#nav-menus-frame {
|
||||
margin-left: 300px;
|
||||
margin-top: 28px;
|
||||
|
|
@ -7331,7 +7358,7 @@ a.rsswidget {
|
|||
}
|
||||
|
||||
.nav-menus-php #post-body {
|
||||
padding: 0 10px;
|
||||
padding: 0 10px 10px;
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
|
@ -7401,13 +7428,36 @@ a.rsswidget {
|
|||
}
|
||||
|
||||
/* Add Menu Item Boxes */
|
||||
.postbox .howto input {
|
||||
.postbox .howto input,
|
||||
.accordion-container .howto input {
|
||||
width: 180px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.accordion-container .outer-border {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.accordion-container .accordion-section:first-child {
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
|
||||
.accordion-container .accordion-section:last-child {
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.customlinkdiv .howto input {
|
||||
width: 200px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.customlinkdiv p {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
#nav-menu-theme-locations .howto select {
|
||||
|
|
@ -8818,6 +8868,10 @@ a.widget-control-edit {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.accordion-section:first-child {
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.accordion-section:last-child {
|
||||
box-shadow: 0 1px 0 0px #fff;
|
||||
}
|
||||
|
|
@ -8825,6 +8879,8 @@ a.widget-control-edit {
|
|||
.accordion-section.open .accordion-section-content {
|
||||
display: block;
|
||||
background: #fdfdfd;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.accordion-section.open:hover {
|
||||
|
|
@ -8841,6 +8897,8 @@ a.widget-control-edit {
|
|||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -8914,6 +8972,8 @@ a.widget-control-edit {
|
|||
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080);
|
||||
background-image: -o-linear-gradient(bottom, #6d6d6d, #808080);
|
||||
background-image: linear-gradient(to top, #6d6d6d, #808080);
|
||||
border-left: 1px solid #808080;
|
||||
border-right: 1px solid #808080;
|
||||
}
|
||||
|
||||
.control-section.accordion-section:hover,
|
||||
|
|
|
|||
|
|
@ -387,7 +387,7 @@ function _wp_ajax_menu_quick_search( $request = array() ) {
|
|||
function wp_nav_menu_setup() {
|
||||
// Register meta boxes
|
||||
wp_nav_menu_post_type_meta_boxes();
|
||||
add_meta_box( 'add-custom-links', __( 'Add Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
|
||||
add_meta_box( 'add-custom-links', __( 'Links' ), 'wp_nav_menu_item_link_meta_box', 'nav-menus', 'side', 'default' );
|
||||
wp_nav_menu_taxonomy_meta_boxes();
|
||||
|
||||
// Register advanced menu items (columns)
|
||||
|
|
@ -447,7 +447,9 @@ function wp_nav_menu_post_type_meta_boxes() {
|
|||
$post_type = apply_filters( 'nav_menu_meta_box_object', $post_type );
|
||||
if ( $post_type ) {
|
||||
$id = $post_type->name;
|
||||
add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', 'default', $post_type );
|
||||
// give pages a higher priority
|
||||
$priority = ( 'page' == $post_type->name ? 'core' : 'default' );
|
||||
add_meta_box( "add-{$id}", $post_type->labels->name, 'wp_nav_menu_item_post_type_meta_box', 'nav-menus', 'side', $priority, $post_type );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -565,7 +567,6 @@ function wp_nav_menu_item_link_meta_box() {
|
|||
|
||||
?>
|
||||
<div class="customlinkdiv" id="customlinkdiv">
|
||||
|
||||
<input type="hidden" value="custom" name="menu-item[<?php echo $_nav_menu_placeholder; ?>][menu-item-type]" />
|
||||
<p id="menu-item-url-wrap">
|
||||
<label class="howto" for="custom-menu-item-url">
|
||||
|
|
@ -683,10 +684,22 @@ function wp_nav_menu_item_post_type_meta_box( $object, $post_type ) {
|
|||
?>
|
||||
<div id="posttype-<?php echo $post_type_name; ?>" class="posttypediv">
|
||||
<ul id="posttype-<?php echo $post_type_name; ?>-tabs" class="posttype-tabs add-menu-item-tabs">
|
||||
<li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'most-recent', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent"><?php _e('Most Recent'); ?></a></li>
|
||||
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#<?php echo $post_type_name; ?>-all"><?php _e('View All'); ?></a></li>
|
||||
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-search"><?php _e('Search'); ?></a></li>
|
||||
</ul>
|
||||
<li <?php echo ( 'most-recent' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="tabs-panel-posttype-<?php echo esc_attr( $post_type_name ); ?>-most-recent" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'most-recent', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent">
|
||||
<?php _e( 'Most Recent' ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="<?php echo esc_attr( $post_type_name ); ?>-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#<?php echo $post_type_name; ?>-all">
|
||||
<?php _e( 'View All' ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="tabs-panel-posttype-<?php echo esc_attr( $post_type_name ); ?>-search" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($post_type_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-posttype-<?php echo $post_type_name; ?>-search">
|
||||
<?php _e( 'Search'); ?>
|
||||
</a>
|
||||
</li>
|
||||
</ul><!-- .posttype-tabs -->
|
||||
|
||||
<div id="tabs-panel-posttype-<?php echo $post_type_name; ?>-most-recent" class="tabs-panel <?php
|
||||
echo ( 'most-recent' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
|
||||
|
|
@ -893,10 +906,22 @@ function wp_nav_menu_item_taxonomy_meta_box( $object, $taxonomy ) {
|
|||
?>
|
||||
<div id="taxonomy-<?php echo $taxonomy_name; ?>" class="taxonomydiv">
|
||||
<ul id="taxonomy-<?php echo $taxonomy_name; ?>-tabs" class="taxonomy-tabs add-menu-item-tabs">
|
||||
<li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'most-used', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-pop"><?php _e('Most Used'); ?></a></li>
|
||||
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-all"><?php _e('View All'); ?></a></li>
|
||||
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>><a class="nav-tab-link" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-search-taxonomy-<?php echo $taxonomy_name; ?>"><?php _e('Search'); ?></a></li>
|
||||
</ul>
|
||||
<li <?php echo ( 'most-used' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="tabs-panel-<?php echo esc_attr( $taxonomy_name ); ?>-pop" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'most-used', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-pop">
|
||||
<?php _e( 'Most Used' ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="tabs-panel-<?php echo esc_attr( $taxonomy_name ); ?>-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'all', remove_query_arg($removed_args))); ?>#tabs-panel-<?php echo $taxonomy_name; ?>-all">
|
||||
<?php _e( 'View All' ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li <?php echo ( 'search' == $current_tab ? ' class="tabs"' : '' ); ?>>
|
||||
<a class="nav-tab-link" data-type="tabs-panel-search-taxonomy-<?php echo esc_attr( $taxonomy_name ); ?>" href="<?php if ( $nav_menu_selected_id ) echo esc_url(add_query_arg($taxonomy_name . '-tab', 'search', remove_query_arg($removed_args))); ?>#tabs-panel-search-taxonomy-<?php echo $taxonomy_name; ?>">
|
||||
<?php _e( 'Search' ); ?>
|
||||
</a>
|
||||
</li>
|
||||
</ul><!-- .taxonomy-tabs -->
|
||||
|
||||
<div id="tabs-panel-<?php echo $taxonomy_name; ?>-pop" class="tabs-panel <?php
|
||||
echo ( 'most-used' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' );
|
||||
|
|
|
|||
|
|
@ -967,6 +967,70 @@ function remove_meta_box($id, $screen, $context) {
|
|||
$wp_meta_boxes[$page][$context][$priority][$id] = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Meta Box Accordion Template Function
|
||||
*
|
||||
* Largely made up of abstracted code from {@link do_meta_boxes()}, this
|
||||
* function serves to build meta boxes as list items for display as
|
||||
* a collapsible accordion.
|
||||
*
|
||||
* @since 3.6.0
|
||||
*
|
||||
* @uses global $wp_meta_boxes Used to retrieve registered meta boxes.
|
||||
*
|
||||
* @param string|object $screen The screen identifier.
|
||||
* @param string $context The meta box context.
|
||||
* @param mixed $object gets passed to the section callback function as first parameter.
|
||||
* @return int number of meta boxes as accordion sections.
|
||||
*/
|
||||
function do_accordion_sections( $screen, $context, $object ) {
|
||||
global $wp_meta_boxes;
|
||||
|
||||
if ( empty( $screen ) )
|
||||
$screen = get_current_screen();
|
||||
elseif ( is_string( $screen ) )
|
||||
$screen = convert_to_screen( $screen );
|
||||
|
||||
$page = $screen->id;
|
||||
|
||||
$hidden = get_hidden_meta_boxes( $screen );
|
||||
?>
|
||||
<div id="side-sortables" class="accordion-container">
|
||||
<ul class="outer-border">
|
||||
<?php
|
||||
$i = 0;
|
||||
do {
|
||||
if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
|
||||
break;
|
||||
|
||||
foreach ( array( 'high', 'sorted', 'core', 'default', 'low' ) as $priority ) {
|
||||
if ( isset( $wp_meta_boxes[$page][$context][$priority] ) ) {
|
||||
foreach ( $wp_meta_boxes[$page][$context][$priority] as $box ) {
|
||||
if ( false == $box || ! $box['title'] )
|
||||
continue;
|
||||
$i++;
|
||||
$hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : '';
|
||||
?>
|
||||
<li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
|
||||
<h3 class="accordion-section-title hndle" tabindex="0" title="<?php echo esc_attr( $box['title'] ); ?>"><?php echo esc_html( $box['title'] ); ?></h3>
|
||||
<div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
|
||||
<div class="inside">
|
||||
<?php call_user_func( $box['callback'], $object, $box ); ?>
|
||||
</div><!-- .inside -->
|
||||
</div><!-- .accordion-section-content -->
|
||||
</li><!-- .accordion-section -->
|
||||
<?php
|
||||
}
|
||||
}
|
||||
}
|
||||
} while(0);
|
||||
?>
|
||||
</ul><!-- .outer-border -->
|
||||
</div><!-- .accordion-container -->
|
||||
<?php
|
||||
return $i;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new section to a settings page.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ var wpNavMenu;
|
|||
|
||||
this.attachUnsavedChangesListener();
|
||||
|
||||
if( api.menuList.length ) // If no menu, we're in the + tab.
|
||||
if( api.menuList.length )
|
||||
this.initSortables();
|
||||
|
||||
if( oneThemeLocationNoMenus )
|
||||
|
|
@ -51,6 +51,9 @@ var wpNavMenu;
|
|||
this.initAccessibility();
|
||||
|
||||
this.initToggles();
|
||||
|
||||
// Open first accordion option
|
||||
this.initAccordion();
|
||||
},
|
||||
|
||||
jQueryExtensions : function() {
|
||||
|
|
@ -262,6 +265,12 @@ var wpNavMenu;
|
|||
});
|
||||
},
|
||||
|
||||
initAccordion : function() {
|
||||
var accordionOptions = $( '.accordion-container li.accordion-section' );
|
||||
accordionOptions.removeClass('open');
|
||||
accordionOptions.filter(':visible').first().addClass( 'open' );
|
||||
},
|
||||
|
||||
initAccessibility : function() {
|
||||
$( '.item-edit' ).off( 'focus' ).on( 'focus', function(){
|
||||
$(this).on( 'keydown', function(e){
|
||||
|
|
@ -391,6 +400,18 @@ var wpNavMenu;
|
|||
}
|
||||
// hide fields
|
||||
api.menuList.hideAdvancedMenuItemFields();
|
||||
|
||||
$('.hide-postbox-tog').click(function () {
|
||||
api.initAccordion();
|
||||
|
||||
var hidden = $( '.accordion-container li.accordion-section' ).filter(':hidden').map(function() { return this.id; }).get().join(',');
|
||||
$.post(ajaxurl, {
|
||||
action: 'closed-postboxes',
|
||||
hidden: hidden,
|
||||
closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
|
||||
page: 'nav-menus'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
initSortables : function() {
|
||||
|
|
@ -786,13 +807,10 @@ var wpNavMenu;
|
|||
target = $(e.target);
|
||||
|
||||
if ( target.hasClass('nav-tab-link') ) {
|
||||
panelId = /#(.*)$/.exec(e.target.href);
|
||||
if ( panelId && panelId[1] )
|
||||
panelId = panelId[1]
|
||||
else
|
||||
return false;
|
||||
|
||||
wrapper = target.parents('.inside').first();
|
||||
panelId = target.data( 'type' );
|
||||
|
||||
wrapper = target.parents('.accordion-section-content').first();
|
||||
|
||||
// upon changing tabs, we want to uncheck all checkboxes
|
||||
$('input', wrapper).removeAttr('checked');
|
||||
|
|
@ -806,7 +824,7 @@ var wpNavMenu;
|
|||
// select the search bar
|
||||
$('.quick-search', wrapper).focus();
|
||||
|
||||
return false;
|
||||
e.preventDefault();
|
||||
} else if ( target.hasClass('select-all') ) {
|
||||
selectAreaMatch = /#(.*)$/.exec(e.target.href);
|
||||
if ( selectAreaMatch && selectAreaMatch[1] ) {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ if ( ! current_user_can('edit_theme_options') )
|
|||
wp_die( __( 'Cheatin’ uh?' ) );
|
||||
|
||||
wp_enqueue_script( 'nav-menu' );
|
||||
wp_enqueue_script( 'accordion' );
|
||||
|
||||
if ( wp_is_mobile() )
|
||||
wp_enqueue_script( 'jquery-touch-punch' );
|
||||
|
|
@ -510,7 +511,7 @@ require_once( './admin-header.php' );
|
|||
<input type="hidden" name="menu" id="nav-menu-meta-object-id" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
|
||||
<input type="hidden" name="action" value="add-menu-item" />
|
||||
<?php wp_nonce_field( 'add-menu_item', 'menu-settings-column-nonce' ); ?>
|
||||
<?php do_meta_boxes( 'nav-menus', 'side', null ); ?>
|
||||
<?php do_accordion_sections( 'nav-menus', 'side', null ); ?>
|
||||
</form>
|
||||
|
||||
</div><!-- /#menu-settings-column -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue