WordPress 4.7.2-scripts

[autoinstalls/wordpress.git] / wp-content / themes / twentyfifteen / js / functions.js

diff --git a/wp-content/themes/twentyfifteen/js/functions.js b/wp-content/themes/twentyfifteen/js/functions.js
index 6610757eb0a0d5349741976d989beb3383ead11f..2da5cbc34016558e89427e0df77edbe31f36355d 100644 (file)
--- a/wp-content/themes/twentyfifteen/js/functions.js
+++ b/wp-content/themes/twentyfifteen/js/functions.js
@@ -8,29 +8,48 @@
 ( function( $ ) {
        var $body, $window, $sidebar, adminbarOffset, top = false,
            bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
-           topOffset = 0, bodyHeight, sidebarHeight, resizeTimer;
-
-       // Add dropdown toggle that display child menu items.
-       $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
-
-       $( '.dropdown-toggle' ).click( function( e ) {
-               var _this = $( this );
-               e.preventDefault();
-               _this.toggleClass( 'toggle-on' );
-               _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
-               _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
-               _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
-       } );
+           topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
+           secondary, button;
+
+       function initMainNavigation( container ) {
+               // Add dropdown toggle that display child menu items.
+               container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
+
+               // Toggle buttons and submenu items with active children menu items.
+               container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
+               container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
+
+               container.find( '.dropdown-toggle' ).click( function( e ) {
+                       var _this = $( this );
+                       e.preventDefault();
+                       _this.toggleClass( 'toggle-on' );
+                       _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
+                       _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+                       _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
+               } );
+       }
+       initMainNavigation( $( '.main-navigation' ) );
+
+       // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
+       $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
+               if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
+                       initMainNavigation( params.newContainer );
+
+                       // Re-sync expanded states from oldContainer.
+                       params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
+                               var containerId = $( this ).parent().prop( 'id' );
+                               $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
+                       });
+               }
+       });
+
+       secondary = $( '#secondary' );
+       button = $( '.site-branding' ).find( '.secondary-toggle' );
 
        // Enable menu toggle for small screens.
        ( function() {
-               var secondary = $( '#secondary' ), button, menu, widgets, social;
-               if ( ! secondary ) {
-                       return;
-               }
-
-               button = $( '.site-branding' ).find( '.secondary-toggle' );
-               if ( ! button ) {
+               var menu, widgets, social;
+               if ( ! secondary.length || ! button.length ) {
                        return;
                }
 
@@ -38,7 +57,7 @@
                menu    = secondary.find( '.nav-menu' );
                widgets = secondary.find( '#widget-area' );
                social  = secondary.find( '#social-navigation' );
-               if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) {
+               if ( ! widgets.length && ! social.length && ( ! menu.length || ! menu.children().length ) ) {
                        button.hide();
                        return;
                }
@@ -47,15 +66,37 @@
                        secondary.toggleClass( 'toggled-on' );
                        secondary.trigger( 'resize' );
                        $( this ).toggleClass( 'toggled-on' );
+                       if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
+                               $( this ).attr( 'aria-expanded', 'true' );
+                               secondary.attr( 'aria-expanded', 'true' );
+                       } else {
+                               $( this ).attr( 'aria-expanded', 'false' );
+                               secondary.attr( 'aria-expanded', 'false' );
+                       }
                } );
        } )();
 
+       /**
+        * @summary Add or remove ARIA attributes.
+        * Uses jQuery's width() function to determine the size of the window and add
+        * the default ARIA attributes for the menu toggle if it's visible.
+        * @since Twenty Fifteen 1.1
+        */
+       function onResizeARIA() {
+               if ( 955 > $window.width() ) {
+                       button.attr( 'aria-expanded', 'false' );
+                       secondary.attr( 'aria-expanded', 'false' );
+                       button.attr( 'aria-controls', 'secondary' );
+               } else {
+                       button.removeAttr( 'aria-expanded' );
+                       secondary.removeAttr( 'aria-expanded' );
+                       button.removeAttr( 'aria-controls' );
+               }
+       }
+
        // Sidebar scrolling.
        function resize() {
-               windowWidth   = $window.width();
-               windowHeight  = $window.height();
-               bodyHeight    = $body.height();
-               sidebarHeight = $sidebar.height();
+               windowWidth = $window.width();
 
                if ( 955 > windowWidth ) {
                        top = bottom = false;
@@ -70,6 +111,10 @@
                        return;
                }
 
+               sidebarHeight = $sidebar.height();
+               windowHeight  = $window.height();
+               bodyHeight    = $body.height();
+
                if ( sidebarHeight + adminbarOffset > windowHeight ) {
                        if ( windowPos > lastWindowPos ) {
                                if ( top ) {
@@ -115,11 +160,13 @@
 
                $window
                        .on( 'scroll.twentyfifteen', scroll )
+                       .on( 'load.twentyfifteen', onResizeARIA )
                        .on( 'resize.twentyfifteen', function() {
                                clearTimeout( resizeTimer );
                                resizeTimer = setTimeout( resizeAndScroll, 500 );
+                               onResizeARIA();
                        } );
-               $sidebar.on( 'click keydown', 'button', resizeAndScroll );
+               $sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
 
                resizeAndScroll();