https://www.landkreis-regen.de/wp-content/themes/landkreis-regen/js/navigation.js

1/* global screenReaderText */
2/**
3 * Theme functions file.
4 *
5 * Contains handlers for navigation and widget area.
6 */
7
8(function ($) {
9    'use strict';
10
11    var screenReaderText = {"expand": "Untermen\u00fc anzeigen", "collapse": "Untermen\u00fc verbergen"};
12    var masthead, menuToggle, siteNavigation, socialNavigation, siteHeaderMenu;
13
14    function initMainNavigation(container) {
15
16        // Add dropdown toggle that displays child menu items.
17        var dropdownToggle = $('<button />', {
18            'class': 'dropdown-toggle',
19            'aria-expanded': false
20        }).append($('<span />', {
21            'class': 'screen-reader-text',
22            text: screenReaderText.expand
23        }));
24
25        container.find('.menu-item-has-children > a').after(dropdownToggle);
26
27        // Toggle buttons and submenu items with active children menu items.
28        container.find('.current-menu-ancestor > button').addClass('toggled-on');
29        container.find('.current-menu-ancestor > .sub-menu').addClass('toggled-on');
30
31        // Add menu items with submenus to aria-haspopup="true".
32        container.find('.menu-item-has-children').attr('aria-haspopup', 'true');
33
34        container.find('.dropdown-toggle').click(function (e) {
35            var _this = $(this),
36                screenReaderSpan = _this.find('.screen-reader-text');
37
38            e.preventDefault();
39            _this.toggleClass('toggled-on');
40            _this.next('.children, .submenu-wrapper').toggleClass('toggled-on');
41
42            // jscs:disable
43            _this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false');
44            // jscs:enable
45            screenReaderSpan.text(screenReaderSpan.text() === screenReaderText.expand
46                ? screenReaderText.collapse
47                : screenReaderText.expand);
48        });
49    }
50
51    initMainNavigation($('.main-navigation'));
52
53    masthead = $('#masthead');
54    menuToggle = masthead.find('#menu-toggle');
55    siteHeaderMenu = masthead.find('#site-header-menu');
56    siteNavigation = masthead.find('#site-navigation');
57    socialNavigation = masthead.find('#social-navigation');
58
59    // Enable menuToggle.
60    (function () {
61
62        // Return early if menuToggle is missing.
63        if (!menuToggle.length) {
64            return;
65        }
66
67        // Add an initial values for the attribute.
68        menuToggle.add(siteNavigation).add(socialNavigation).attr('aria-expanded', 'false');
69
70        menuToggle.on('click.twentytwelve', function () {
71            $(this).add(siteHeaderMenu).toggleClass('toggled-on');
72
73            // jscs:disable
74            $(this)
75                .add(siteNavigation)
76                .add(socialNavigation)
77                .attr('aria-expanded', $(this)
78                    .add(siteNavigation)
79                    .add(socialNavigation)
80                    .attr('aria-expanded') === 'false' ? 'true' : 'false');
81            // jscs:enable
82        });
83    })();
84
85    // Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
86    (function () {
87        if (!siteNavigation.length || !siteNavigation.children().length) {
88            return;
89        }
90
91        // Toggle `focus` class to allow submenu access on tablets.
92        function toggleFocusClassTouchScreen() {
93            if (window.innerWidth >= 910) {
94                $(document.body).on('touchstart.twentytwelve', function (e) {
95                    if (!$(e.target).closest('.main-navigation li').length) {
96                        $('.main-navigation li').removeClass('focus');
97                    }
98                });
99                siteNavigation.find('.menu-item-has-children > a').on('touchstart.twentytwelve', function (e) {
100                    var el = $(this).parent('li');
101
102                    if (!el.hasClass('focus')) {
103                        e.preventDefault();
104                        el.toggleClass('focus');
105                        el.siblings('.focus').removeClass('focus');
106                    }
107                });
108            } else {
109                siteNavigation.find('.menu-item-has-children > a').unbind('touchstart.twentytwelve');
110            }
111        }
112
113        if ('ontouchstart' in window) {
114            $(window).on('resize.twentytwelve', toggleFocusClassTouchScreen);
115            toggleFocusClassTouchScreen();
116        }
117
118        siteNavigation.find('a').on('focus.twentytwelve blur.twentytwelve', function () {
119            $(this).parents('.menu-item').toggleClass('focus');
120        });
121    })();
122
123    // Add the default ARIA attributes for the menu toggle and the navigations.
124    function onResizeARIA() {
125        if (window.innerWidth < 910) {
126            if (menuToggle.hasClass('toggled-on')) {
127                menuToggle.attr('aria-expanded', 'true');
128            } else {
129                menuToggle.attr('aria-expanded', 'false');
130            }
131
132            if (siteHeaderMenu.hasClass('toggled-on')) {
133                siteNavigation.attr('aria-expanded', 'true');
134                socialNavigation.attr('aria-expanded', 'true');
135            } else {
136                siteNavigation.attr('aria-expanded', 'false');
137                socialNavigation.attr('aria-expanded', 'false');
138            }
139
140            menuToggle.attr('aria-controls', 'site-navigation social-navigation');
141        } else {
142            menuToggle.removeAttr('aria-expanded');
143            siteNavigation.removeAttr('aria-expanded');
144            socialNavigation.removeAttr('aria-expanded');
145            menuToggle.removeAttr('aria-controls');
146        }
147    }
148
149    $('.main-navigation').find('a').off('focus.twentytwelve blur.twentytwelve');
150    if ('ontouchstart' in window) {
151        $('body').off('touchstart.twentytwelve', '.menu-item-has-children > a, .page_item_has_children > a');
152    }
153
154
155    $('.main-navigation').find('a').on('focus.twentytwelve blur.twentytwelve', function () {
156        if (window.innerWidth >= 600) {
157            $(this).parents('.menu-item, .page_item').toggleClass('focus');
158        }
159    });
160
161    if ('ontouchstart' in window) {
162        $('body')
163            .on('touchstart.twentytwelve', '.menu-item-has-children > a, .page_item_has_children > a', function (e) {
164                if (window.innerWidth >= 600) {
165                    var el = $(this).parent('li');
166
167                    if (!el.hasClass('focus')) {
168                        e.preventDefault();
169                        el.toggleClass('focus');
170                        el.siblings('.focus').removeClass('focus');
171                    }
172                }
173            });
174    }
175})(jQuery);