Changeset 24680

Timestamp:

07/12/2013 06:16:29 PM (13 years ago)

Author:

helen

Message:

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.

Location:

trunk/wp-admin

Files:

• css/wp-admin-rtl.css (modified) (1 diff)
• css/wp-admin.css (modified) (6 diffs)
• includes/template.php (modified) (1 diff)
• js/accordion.js (modified) (1 diff)
• js/nav-menu.js (modified) (3 diffs)
• nav-menus.php (modified) (1 diff)

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

@@ -2709 +2709 @@
 }
 
-.accordion-section-title:after {
+.js .accordion-section-title:after {
         right: auto;
         left: 20px;

trunk/wp-admin/css/wp-admin.css

@@ -7501 +7501 @@
 }
 
-.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;
@@ -7508 +7515 @@
 }
 
-.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;
@@ -8969 +8979 @@
         border-right: 1px solid #dfdfdf;
 
-        cursor: pointer;
-
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -8976 +8984 @@
 }
 
-.accordion-section-title:after {
+.js .accordion-section-title {
+        cursor: pointer;
+}
+
+.js .accordion-section-title:after {
         content: '';
         width: 0;
@@ -9029 +9041 @@
 }
 
-.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;
@@ -9045 +9057 @@
 }
 
-.control-section.accordion-section:hover,
+.js .control-section.accordion-section:hover,
 .control-section.accordion-section.open {
         border-top-color: #808080;

trunk/wp-admin/includes/template.php

@@ -986 +986 @@
         global $wp_meta_boxes;
 
+        wp_enqueue_script( 'accordion' );
+
         if ( empty( $screen ) )
                 $screen = get_current_screen();

trunk/wp-admin/js/accordion.js

@@ -1 @@
-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);

trunk/wp-admin/js/nav-menu.js

@@ -54 +54 @@
 
                         this.initToggles();
-
-                        // Open first accordion option
-                        this.initAccordion();
                 },
 
@@ -266 +263 @@
                                 }
                         });
-                },
-
-                initAccordion : function() {
-                        var accordionOptions = $( '.accordion-container li.accordion-section' );
-                        accordionOptions.removeClass('open');
-                        accordionOptions.filter(':visible').first().addClass( 'open' );
                 },
 
@@ -545 +536 @@
 
                         $('.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, {

trunk/wp-admin/nav-menus.php

@@ -24 +24 @@
 
 wp_enqueue_script( 'nav-menu' );
-wp_enqueue_script( 'accordion' );
 
 if ( wp_is_mobile() )