← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-content/themes/twentytwelve/js/navigation.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-content/themes/twentytwelve/js/navigation.js
 
1
/**
 
2
 * Handles toggling the navigation menu for small screens and
 
3
 * accessibility for submenu items.
 
4
 */
 
5
( function() {
 
6
        var nav = document.getElementById( 'site-navigation' ), button, menu;
 
7
        if ( ! nav ) {
 
8
                return;
 
9
        }
 
10
 
 
11
        button = nav.getElementsByTagName( 'button' )[0];
 
12
        menu   = nav.getElementsByTagName( 'ul' )[0];
 
13
        if ( ! button ) {
 
14
                return;
 
15
        }
 
16
 
 
17
        // Hide button if menu is missing or empty.
 
18
        if ( ! menu || ! menu.childNodes.length ) {
 
19
                button.style.display = 'none';
 
20
                return;
 
21
        }
 
22
 
 
23
        button.onclick = function() {
 
24
                if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
 
25
                        menu.className = 'nav-menu';
 
26
                }
 
27
 
 
28
                if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
 
29
                        button.className = button.className.replace( ' toggled-on', '' );
 
30
                        menu.className = menu.className.replace( ' toggled-on', '' );
 
31
                } else {
 
32
                        button.className += ' toggled-on';
 
33
                        menu.className += ' toggled-on';
 
34
                }
 
35
        };
 
36
} )();
 
37
 
 
38
// Better focus for hidden submenu items for accessibility.
 
39
( function( $ ) {
 
40
        $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
 
41
                $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
 
42
        } );
 
43
 
 
44
  if ( 'ontouchstart' in window ) {
 
45
    $( '.menu-item-has-children > a' ).on( 'touchstart.twentytwelve', function( e ) {
 
46
      var el = $( this ).parent( 'li' );
 
47
 
 
48
      if ( ! el.hasClass( 'focus' ) ) {
 
49
        e.preventDefault();
 
50
        el.toggleClass( 'focus' );
 
51
        el.siblings( '.focus').removeClass( 'focus' );
 
52
      }
 
53
    } );
 
54
  }
 
55
} )( jQuery );