← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-content/themes/twentyfourteen/js/functions.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/twentyfourteen/js/functions.js
 
1
/**
 
2
 * Theme functions file
 
3
 *
 
4
 * Contains handlers for navigation, accessibility, header sizing
 
5
 * footer widgets and Featured Content slider
 
6
 *
 
7
 */
 
8
( function( $ ) {
 
9
        var body    = $( 'body' ),
 
10
                _window = $( window );
 
11
 
 
12
        // Enable menu toggle for small screens.
 
13
        ( function() {
 
14
                var nav = $( '#primary-navigation' ), button, menu;
 
15
                if ( ! nav ) {
 
16
                        return;
 
17
                }
 
18
 
 
19
                button = nav.find( '.menu-toggle' );
 
20
                if ( ! button ) {
 
21
                        return;
 
22
                }
 
23
 
 
24
                // Hide button if menu is missing or empty.
 
25
                menu = nav.find( '.nav-menu' );
 
26
                if ( ! menu || ! menu.children().length ) {
 
27
                        button.hide();
 
28
                        return;
 
29
                }
 
30
 
 
31
                $( '.menu-toggle' ).on( 'click.twentyfourteen', function() {
 
32
                        nav.toggleClass( 'toggled-on' );
 
33
                } );
 
34
        } )();
 
35
 
 
36
        /*
 
37
         * Makes "skip to content" link work correctly in IE9 and Chrome for better
 
38
         * accessibility.
 
39
         *
 
40
         * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
 
41
         */
 
42
        _window.on( 'hashchange.twentyfourteen', function() {
 
43
                var hash = location.hash.substring( 1 ), element;
 
44
 
 
45
                if ( ! hash ) {
 
46
                        return;
 
47
                }
 
48
 
 
49
                element = document.getElementById( hash );
 
50
 
 
51
                if ( element ) {
 
52
                        if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
 
53
                                element.tabIndex = -1;
 
54
                        }
 
55
 
 
56
                        element.focus();
 
57
 
 
58
                        // Repositions the window on jump-to-anchor to account for header height.
 
59
                        window.scrollBy( 0, -80 );
 
60
                }
 
61
        } );
 
62
 
 
63
        $( function() {
 
64
                // Search toggle.
 
65
                $( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
 
66
                        var that    = $( this ),
 
67
                                wrapper = $( '.search-box-wrapper' );
 
68
 
 
69
                        that.toggleClass( 'active' );
 
70
                        wrapper.toggleClass( 'hide' );
 
71
 
 
72
                        if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
 
73
                                wrapper.find( '.search-field' ).focus();
 
74
                        }
 
75
                } );
 
76
 
 
77
                /*
 
78
                 * Fixed header for large screen.
 
79
                 * If the header becomes more than 48px tall, unfix the header.
 
80
                 *
 
81
                 * The callback on the scroll event is only added if there is a header
 
82
                 * image and we are not on mobile.
 
83
                 */
 
84
                if ( _window.width() > 781 ) {
 
85
                        var mastheadHeight = $( '#masthead' ).height(),
 
86
                                toolbarOffset, mastheadOffset;
 
87
 
 
88
                        if ( mastheadHeight > 48 ) {
 
89
                                body.removeClass( 'masthead-fixed' );
 
90
                        }
 
91
 
 
92
                        if ( body.is( '.header-image' ) ) {
 
93
                                toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
 
94
                                mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
 
95
 
 
96
                                _window.on( 'scroll.twentyfourteen', function() {
 
97
                                        if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
 
98
                                                body.addClass( 'masthead-fixed' );
 
99
                                        } else {
 
100
                                                body.removeClass( 'masthead-fixed' );
 
101
                                        }
 
102
                                } );
 
103
                        }
 
104
                }
 
105
 
 
106
                // Focus styles for menus.
 
107
                $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
 
108
                        $( this ).parents().toggleClass( 'focus' );
 
109
                } );
 
110
        } );
 
111
 
 
112
        _window.load( function() {
 
113
                // Arrange footer widgets vertically.
 
114
                if ( $.isFunction( $.fn.masonry ) ) {
 
115
                        $( '#footer-sidebar' ).masonry( {
 
116
                                itemSelector: '.widget',
 
117
                                columnWidth: function( containerWidth ) {
 
118
                                        return containerWidth / 4;
 
119
                                },
 
120
                                gutterWidth: 0,
 
121
                                isResizable: true,
 
122
                                isRTL: $( 'body' ).is( '.rtl' )
 
123
                        } );
 
124
                }
 
125
 
 
126
                // Initialize Featured Content slider.
 
127
                if ( body.is( '.slider' ) ) {
 
128
                        $( '.featured-content' ).featuredslider( {
 
129
                                selector: '.featured-content-inner > article',
 
130
                                controlsContainer: '.featured-content'
 
131
                        } );
 
132
                }
 
133
        } );
 
134
} )( jQuery );