Tweaks to the accordion:

* Enqueues JS in `do_accordion_sections()`.
* Top and bottom rounded corners for the nav menu accordion.
* Better RTL and no-JS.

props lessbloat, DrewAPicture, aaroncampbell, helen. fixes #23449.


git-svn-id: http://core.svn.wordpress.org/trunk@24680 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin-rtl.css

@@ -2708,7 +2708,7 @@ div.sidebar-name h3 {
 	font-family: Tahoma, Arial, sans-serif;
 }
 
-.accordion-section-title:after {
+.js .accordion-section-title:after {
 	right: auto;
 	left: 20px;
 }

wp-admin/css/wp-admin.css

@@ -7500,14 +7500,24 @@ body.interim-login {
 	margin: 0;
 }
 
-.accordion-container .accordion-section:first-child {
+#nav-menu-meta .accordion-container .top {
+	border-top: 1px solid #dfdfdf;
+}
+
+#nav-menu-meta .accordion-container .accordion-section:first-child,
+#nav-menu-meta .accordion-container .accordion-section:first-child h3,
+#nav-menu-meta .accordion-container .top,
+#nav-menu-meta .accordion-container .top h3 {
 	-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 {
+#nav-menu-meta .accordion-container .accordion-section:last-child,
+#nav-menu-meta .accordion-container .accordion-section:last-child .accordion-section-content,
+#nav-menu-meta .accordion-container .bottom,
+#nav-menu-meta .accordion-container .bottom:not(.open) h3 {
 	-webkit-border-bottom-right-radius: 3px;
 	-webkit-border-bottom-left-radius: 3px;
 	border-bottom-right-radius: 3px;
@@ -8968,14 +8978,16 @@ a.widget-control-edit {
 	border-left: 1px solid #dfdfdf;
 	border-right: 1px solid #dfdfdf;
 
-	cursor: pointer;
-
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
 }
 
-.accordion-section-title:after {
+.js .accordion-section-title {
+	cursor: pointer;
+}
+
+.js .accordion-section-title:after {
 	content: '';
 	width: 0;
 	height: 0;
@@ -9028,10 +9040,10 @@ a.widget-control-edit {
 	border-color: #eee transparent;
 }
 
-.control-section:hover .accordion-section-title,
-.control-section .accordion-section-title:hover,
-.control-section.open .accordion-section-title,
-.control-section .accordion-section-title:focus {
+.js .control-section:hover .accordion-section-title,
+.js .control-section .accordion-section-title:hover,
+.js .control-section.open .accordion-section-title,
+.js .control-section .accordion-section-title:focus {
 	color: #fff;
 	text-shadow: 0 -1px 0 #333;
 	background: #808080;
@@ -9044,7 +9056,7 @@ a.widget-control-edit {
 	border-right: 1px solid #808080;
 }
 
-.control-section.accordion-section:hover,
+.js .control-section.accordion-section:hover,
 .control-section.accordion-section.open {
 	border-top-color: #808080;
 }

wp-admin/includes/template.php

@@ -985,6 +985,8 @@ function remove_meta_box($id, $screen, $context) {
 function do_accordion_sections( $screen, $context, $object ) {
 	global $wp_meta_boxes;
 
+	wp_enqueue_script( 'accordion' );
+
 	if ( empty( $screen ) )
 		$screen = get_current_screen();
 	elseif ( is_string( $screen ) )

wp-admin/js/accordion.js

@@ -1,20 +1,54 @@
-jQuery(document).ready( function($) {
-	// Expand/Collapse
-	$('.accordion-container').on( 'click keydown', '.accordion-section-title', function(e) {
-		if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
-				return;
-		e.preventDefault(); // Keep this AFTER the key filter above
+( function( $ ){
 
-		var section = $( this ).closest( '.accordion-section' ),
-		    siblings = section.siblings( '.open' ),
-		    content = section.find( '.accordion-section-content' );
+	$( document ).ready( function () {
 
-		if ( section.hasClass('cannot-expand') )
+		// Expand/Collapse on click
+		$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
+			if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
+					return;
+			e.preventDefault(); // Keep this AFTER the key filter above
+
+			accordionSwitch( $( this ) );
+			accordionCorners();
+		});
+
+		// Refresh selected accordion option when screen options are toggled
+		$( '.hide-postbox-tog' ).click( function () {
+			accordionInit();
+		});
+
+	});
+
+	var accordionOptions = $( '.accordion-container li.accordion-section' ),
+		sectionContent   = $( '.accordion-section-content' );
+
+	// Rounded corners
+	function accordionCorners () {
+		accordionOptions.removeClass( 'top bottom' );
+		accordionOptions.filter( ':visible' ).first().addClass( 'top' );
+		accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom');
+	};
+
+	function accordionInit () {
+		accordionSwitch( accordionOptions.filter( ':visible' ).first() );
+		accordionCorners();
+	}
+
+	function accordionSwitch ( el ) {
+		var section = el.closest( '.accordion-section' ),
+		    siblings = section.parent().find( '.open' ),
+		    content = section.find( sectionContent );
+
+		if ( section.hasClass( 'cannot-expand' ) )
 			return;
 
 		siblings.removeClass( 'open' );
-		siblings.find( '.accordion-section-content' ).show().slideUp( 150 );
+		siblings.find( sectionContent ).show().slideUp( 150 );
 		content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 );
 		section.toggleClass( 'open' );
-	});
-});
+	}
+
+	// Show the first accordion option by default
+	accordionInit();
+
+})(jQuery);

wp-admin/js/nav-menu.js

@@ -53,9 +53,6 @@ var wpNavMenu;
 			this.initAccessibility();
 
 			this.initToggles();
-
-			// Open first accordion option
-			this.initAccordion();
 		},
 
 		jQueryExtensions : function() {
@@ -267,12 +264,6 @@ var wpNavMenu;
 			});
 		},
 
-		initAccordion : function() {
-			var accordionOptions = $( '.accordion-container li.accordion-section' );
-			accordionOptions.removeClass('open');
-			accordionOptions.filter(':visible').first().addClass( 'open' );
-		},
-
 		countMenuItems : function( depth ) {
 			return $( '.menu-item-depth-' + depth ).length;
 		},
@@ -544,8 +535,6 @@ var wpNavMenu;
 			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',

wp-admin/nav-menus.php

@@ -23,7 +23,6 @@ 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' );