4 * Provides helper functions to enhance the theme experience. |
4 * Provides helper functions to enhance the theme experience. |
5 */ |
5 */ |
6 |
6 |
7 ( function( $ ) { |
7 ( function( $ ) { |
8 var body = $( 'body' ), |
8 var body = $( 'body' ), |
9 _window = $( window ); |
9 _window = $( window ), |
|
10 nav, button, menu; |
|
11 |
|
12 nav = $( '#site-navigation' ); |
|
13 button = nav.find( '.menu-toggle' ); |
|
14 menu = nav.find( '.nav-menu' ); |
10 |
15 |
11 /** |
16 /** |
12 * Adds a top margin to the footer if the sidebar widget area is higher |
17 * Adds a top margin to the footer if the sidebar widget area is higher |
13 * than the rest of the page, to help the footer always visually clear |
18 * than the rest of the page, to help the footer always visually clear |
14 * the sidebar. |
19 * the sidebar. |
15 */ |
20 */ |
16 $( function() { |
21 $( function() { |
17 if ( body.is( '.sidebar' ) ) { |
22 if ( body.is( '.sidebar' ) ) { |
18 var sidebar = $( '#secondary .widget-area' ), |
23 var sidebar = $( '#secondary .widget-area' ), |
19 secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(), |
24 secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(), |
20 margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary; |
25 margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary; |
21 |
26 |
22 if ( margin > 0 && _window.innerWidth() > 999 ) |
27 if ( margin > 0 && _window.innerWidth() > 999 ) { |
23 $( '#colophon' ).css( 'margin-top', margin + 'px' ); |
28 $( '#colophon' ).css( 'margin-top', margin + 'px' ); |
|
29 } |
24 } |
30 } |
25 } ); |
31 } ); |
26 |
32 |
27 /** |
33 /** |
28 * Enables menu toggle for small screens. |
34 * Enables menu toggle for small screens. |
29 */ |
35 */ |
30 ( function() { |
36 ( function() { |
31 var nav = $( '#site-navigation' ), button, menu; |
37 if ( ! nav || ! button ) { |
32 if ( ! nav ) |
|
33 return; |
38 return; |
34 |
39 } |
35 button = nav.find( '.menu-toggle' ); |
|
36 if ( ! button ) |
|
37 return; |
|
38 |
40 |
39 // Hide button if menu is missing or empty. |
41 // Hide button if menu is missing or empty. |
40 menu = nav.find( '.nav-menu' ); |
|
41 if ( ! menu || ! menu.children().length ) { |
42 if ( ! menu || ! menu.children().length ) { |
42 button.hide(); |
43 button.hide(); |
43 return; |
44 return; |
44 } |
45 } |
45 |
46 |
46 $( '.menu-toggle' ).on( 'click.twentythirteen', function() { |
47 button.on( 'click.twentythirteen', function() { |
47 nav.toggleClass( 'toggled-on' ); |
48 nav.toggleClass( 'toggled-on' ); |
|
49 if ( nav.hasClass( 'toggled-on' ) ) { |
|
50 $( this ).attr( 'aria-expanded', 'true' ); |
|
51 menu.attr( 'aria-expanded', 'true' ); |
|
52 } else { |
|
53 $( this ).attr( 'aria-expanded', 'false' ); |
|
54 menu.attr( 'aria-expanded', 'false' ); |
|
55 } |
|
56 } ); |
|
57 |
|
58 // Fix sub-menus for touch devices. |
|
59 if ( 'ontouchstart' in window ) { |
|
60 menu.find( '.menu-item-has-children > a, .page_item_has_children > a' ).on( 'touchstart.twentythirteen', function( e ) { |
|
61 var el = $( this ).parent( 'li' ); |
|
62 |
|
63 if ( ! el.hasClass( 'focus' ) ) { |
|
64 e.preventDefault(); |
|
65 el.toggleClass( 'focus' ); |
|
66 el.siblings( '.focus' ).removeClass( 'focus' ); |
|
67 } |
|
68 } ); |
|
69 } |
|
70 |
|
71 // Better focus for hidden submenu items for accessibility. |
|
72 menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() { |
|
73 $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); |
48 } ); |
74 } ); |
49 } )(); |
75 } )(); |
|
76 |
|
77 /** |
|
78 * @summary Add or remove ARIA attributes. |
|
79 * Uses jQuery's width() function to determine the size of the window and add |
|
80 * the default ARIA attributes for the menu toggle if it's visible. |
|
81 * @since Twenty Thirteen 1.5 |
|
82 */ |
|
83 function onResizeARIA() { |
|
84 if ( 643 > _window.width() ) { |
|
85 button.attr( 'aria-expanded', 'false' ); |
|
86 menu.attr( 'aria-expanded', 'false' ); |
|
87 button.attr( 'aria-controls', 'primary-menu' ); |
|
88 } else { |
|
89 button.removeAttr( 'aria-expanded' ); |
|
90 menu.removeAttr( 'aria-expanded' ); |
|
91 button.removeAttr( 'aria-controls' ); |
|
92 } |
|
93 } |
|
94 |
|
95 _window |
|
96 .on( 'load.twentythirteen', onResizeARIA ) |
|
97 .on( 'resize.twentythirteen', function() { |
|
98 onResizeARIA(); |
|
99 } ); |
50 |
100 |
51 /** |
101 /** |
52 * Makes "skip to content" link work correctly in IE9 and Chrome for better |
102 * Makes "skip to content" link work correctly in IE9 and Chrome for better |
53 * accessibility. |
103 * accessibility. |
54 * |
104 * |