Changeset 8910

Timestamp:

06/03/2019 08:46:22 PM (6 years ago)

Author:

coffee2code

Message:

Developer: Add ability for second-level handbook sidebar menu items with sub-items to be collapsible/expandable.

Nested menu items are all initially collapsed.

Props welcher.
Fixes #4476.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• js/chapters.js (modified) (4 diffs)
• scss/main.scss (modified) (5 diffs)
• stylesheets/main.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/chapters.js

@@ -1 +1 @@
 // Mobile Subnav open/close
-jQuery(document).ready(function() {
+jQuery( document ).ready( function () {
 
     jQuery( document ).on( 'click', '.code-tab', function ( e ) {
@@ -13 +13 @@
     } );
 
-    var tocContainer = jQuery( 'div[class*="-table-of-contents-container"]').first();
+    var tocContainer = jQuery( 'div[class*="-table-of-contents-container"]' ).first();
 
     if ( 0 === tocContainer.length ) {
@@ -20 +20 @@
 
     // Add our expandable button
-    tocContainer.find( '> ul > .menu-item-has-children > a' )
+    tocContainer.find( '> ul .menu-item-has-children > a' )
         .wrap( '<div class="expandable"></div>' )
         .after( '<button class="dashicons dashicons-arrow-down-alt2" aria-expanded="false"></button>' );
 
-    // Invisibly open all of the submenus
-    jQuery( '.menu-item-has-children > ul ul' ).addClass( 'default-open' );
+    // Invisibly hide all of the submenus
+    jQuery( '.menu-item-has-children > ul ul' ).hide();
 
     // Open the current menu
@@ -31 +31 @@
         .addClass( 'active' )
         .parents( '.menu-item-has-children' )
-            .toggleClass( 'open' )
+        .toggleClass( 'open' )
         .find( '> div > .dashicons' )
-            .attr( 'aria-expanded', true );
+        .attr( 'aria-expanded', true );
 
+    // Open the current submenu
+    $secondary_menu = tocContainer.find( '.current-menu-item > ul' );
+    if ( $secondary_menu.length ) {
+        $secondary_menu.show();
+    } else {
+        tocContainer.find( '.current-menu-item' ).parents( 'ul' ).show();
+    }
     // Or if wrapped in a div.expandable
-    jQuery( '.menu-item-has-children > div > .dashicons' ).click( function() {
+    jQuery( '.menu-item-has-children > div > .dashicons' ).click( function () {
         var menuToggle = jQuery( this ).closest( '.menu-item-has-children' );
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -546 +546 @@
             margin: 0 auto;
         }
-        
+
     }
     .color.section {
@@ -737 +737 @@
     }
 
-        div#inner-search {
-            background-color: #666;
-            margin-bottom: 1em;
-            padding-top: 2px;
-            .section.search-section {
+    div#inner-search {
+        background-color: #666;
+        margin-bottom: 1em;
+        padding-top: 2px;
+        .section.search-section {
+            color: #ffffff;
+        }
+        div#inner-search-icon-container {
+            margin: 0 auto;
+            max-width: 60em;
+            cursor: pointer;
+            div#inner-search-icon {
+                background-color: #666;
                 color: #ffffff;
-            }
-            div#inner-search-icon-container {
-                margin: 0 auto;
-                max-width: 60em;
-                cursor: pointer;
-                div#inner-search-icon {
-                    background-color: #666;
-                    color: #ffffff;
-                    text-align: center;
-                    margin-right: 26px;
-                    margin-left: 4px;
-                    float: right;
-                    padding: 5px;
-                    -webkit-border-bottom-right-radius: 5px;
-                    -webkit-border-bottom-left-radius: 5px;
-                    -moz-border-radius-bottomright: 5px;
-                    -moz-border-radius-bottomleft: 5px;
-                    border-bottom-right-radius: 5px;
-                    border-bottom-left-radius: 5px;
-                    .dashicons-search {
-                        height: auto;
-                        width: auto;
-                        &:before {
-                            font-size: 36px;
-                            line-height: 36px;
-                        }
+                text-align: center;
+                margin-right: 26px;
+                margin-left: 4px;
+                float: right;
+                padding: 5px;
+                -webkit-border-bottom-right-radius: 5px;
+                -webkit-border-bottom-left-radius: 5px;
+                -moz-border-radius-bottomright: 5px;
+                -moz-border-radius-bottomleft: 5px;
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
+                .dashicons-search {
+                    height: auto;
+                    width: auto;
+                    &:before {
+                        font-size: 36px;
+                        line-height: 36px;
                     }
                 }
             }
         }
+    }
 
     .archive-filter-form {
@@ -1283 +1283 @@
         #comment-preview {
             border: 1px solid #dfdfdf;
-            border-radius: 2px; 
+            border-radius: 2px;
             width: 100%;
         }
@@ -1697 +1697 @@
             font-size: 68.6646px;
             font-size: 6.86646rem;
-        
+
             @media (max-width: 500px) {
                 font-size: 50px;
@@ -2132 +2132 @@
     }
     .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
-    .current-menu-item .expandable .dashicons:not(:focus) {
+    .current-menu-item > .expandable .dashicons:not(:focus) {
         background: #fff;
         color: #0073aa;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -2518 +2518 @@
 
 div[class*="-table-of-contents-container"] .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
-div[class*="-table-of-contents-container"] .current-menu-item .expandable .dashicons:not(:focus) {
+div[class*="-table-of-contents-container"] .current-menu-item > .expandable .dashicons:not(:focus) {
   background: #fff;
   color: #0073aa;