From 0da48b83350d28f29fe6c7e9b045dc97c5140ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helen=20Hou-Sand=C3=AD?= Date: Fri, 12 Jul 2013 18:16:29 +0000 Subject: [PATCH] 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 | 2 +- wp-admin/css/wp-admin.css | 32 ++++++++++++------ wp-admin/includes/template.php | 2 ++ wp-admin/js/accordion.js | 60 ++++++++++++++++++++++++++-------- wp-admin/js/nav-menu.js | 11 ------- wp-admin/nav-menus.php | 1 - 6 files changed, 72 insertions(+), 36 deletions(-) diff --git a/wp-admin/css/wp-admin-rtl.css b/wp-admin/css/wp-admin-rtl.css index 70a82e1fd4..962f2fd096 100644 --- a/wp-admin/css/wp-admin-rtl.css +++ b/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; } diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index e0103777d0..6b4d7ed311 100644 --- a/wp-admin/css/wp-admin.css +++ b/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; } diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index 2fd0cda620..61080c2012 100644 --- a/wp-admin/includes/template.php +++ b/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 ) ) diff --git a/wp-admin/js/accordion.js b/wp-admin/js/accordion.js index 6510f701e2..5e524782c4 100644 --- a/wp-admin/js/accordion.js +++ b/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); diff --git a/wp-admin/js/nav-menu.js b/wp-admin/js/nav-menu.js index ee829da826..4c6efec3df 100644 --- a/wp-admin/js/nav-menu.js +++ b/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', diff --git a/wp-admin/nav-menus.php b/wp-admin/nav-menus.php index 895ffdcae0..549d03b5a8 100644 --- a/wp-admin/nav-menus.php +++ b/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' );