functions.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /* global screenReaderText */
  2. /**
  3. * Theme functions file.
  4. *
  5. * Contains handlers for navigation and widget area.
  6. */
  7. ( function( $ ) {
  8. var $body, $window, $sidebar, adminbarOffset, top = false,
  9. bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
  10. topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
  11. secondary, button;
  12. function initMainNavigation( container ) {
  13. // Add dropdown toggle that display child menu items.
  14. container.find( '.item.dropdown > a' ).after( '<button class="dropdown-toggle-button" aria-expanded="false">' + screenReaderText.expand + '</button>' );
  15. // Toggle buttons and submenu items with active children menu items.
  16. container.find( '.item.dropdown.active > button' ).addClass( 'toggle-on' );
  17. container.find( '.item.dropdown.active > .subnav' ).addClass( 'toggled-on' );
  18. container.find( '.dropdown-toggle-button' ).click( function( e ) {
  19. var _this = $( this );
  20. e.preventDefault();
  21. _this.toggleClass( 'toggle-on' );
  22. _this.next( '.children, .sub-menu, .subnav, .dropdown-menu' ).toggleClass( 'toggled-on' );
  23. _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  24. _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
  25. } );
  26. }
  27. initMainNavigation( $( '.main-navigation' ) );
  28. // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
  29. $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
  30. if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
  31. initMainNavigation( params.newContainer );
  32. // Re-sync expanded states from oldContainer.
  33. params.oldContainer.find( '.dropdown-toggle-button.toggle-on' ).each(function() {
  34. var containerId = $( this ).parent().prop( 'id' );
  35. $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle-button' ).triggerHandler( 'click' );
  36. });
  37. }
  38. });
  39. secondary = $( '#secondary' );
  40. button = $( '.site-branding' ).find( '.secondary-toggle' );
  41. // Enable menu toggle for small screens.
  42. ( function() {
  43. var menu, widgets, social;
  44. if ( ! secondary || ! button ) {
  45. return;
  46. }
  47. // Hide button if there are no widgets and the menus are missing or empty.
  48. menu = secondary.find( '.nav-menu' );
  49. widgets = secondary.find( '#widget-area' );
  50. social = secondary.find( '#social-navigation' );
  51. if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) {
  52. button.hide();
  53. return;
  54. }
  55. button.on( 'click.twentyfifteen', function() {
  56. secondary.toggleClass( 'toggled-on' );
  57. secondary.trigger( 'resize' );
  58. $( this ).toggleClass( 'toggled-on' );
  59. if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
  60. $( this ).attr( 'aria-expanded', 'true' );
  61. secondary.attr( 'aria-expanded', 'true' );
  62. } else {
  63. $( this ).attr( 'aria-expanded', 'false' );
  64. secondary.attr( 'aria-expanded', 'false' );
  65. }
  66. } );
  67. } )();
  68. $('#sidebar, #content').theiaStickySidebar();
  69. } )( jQuery );