Changeset 24680

Timestamp:

07/12/2013 06:16:29 PM (11 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() )