/
navbar.js
77 lines (62 loc) · 2.11 KB
/
navbar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(function() {
var $notifications_button = $('.sba-js-notifications-toggle'),
$search_button = $('.sba-js-search-button'),
$search_input = $('#topnav_search_query'),
$menu_button = $('#mobile_menu_button'),
$close_button = $('#close_menu_button'),
$search_box = $('#topnav-search'),
$notifications_box = $('#topnav-notifications-drawer'),
$notifications_drawer = $('.sba-c-top-nav__notifications-drawer__list'),
$nav_open_button = $('.sba-c-mobile-header__button'),
$nav_close_button = $('.sba-c-topnav__close'),
$nav = $('#top_navigation'),
visible_class = 'is-visible';
// Functions
var hideItems = function($button, $box){
$button.attr('aria-expanded', 'false');
$box.attr("hidden", "").addClass(visible_class);
};
var setFocus = function($this, $target){
if ($this.attr('aria-expanded') == "false") {
setTimeout(function(){
$target.focus();
}, 50);
}
}
// Notification button
$notifications_button.on('click', function(){
// Removes the notification pip
$('.sba-js-notifications-pip').remove();
// Hide search if open
hideItems($search_button, $search_box);
// Focus on first link
setFocus($(this), $notifications_drawer);
return false;
});
// Search button options
$search_button.on('click', function(){
// Hide the notificiations drawer if open
hideItems($notifications_button, $notifications_box);
// Set focus when opening up the search box
setFocus($(this), $search_input);
return false;
});
// Nav open and close
$nav_open_button.on('click', function(){
$nav.addClass(visible_class);
hideItems($search_button, $search_box);
hideItems($notifications_button, $notifications_box);
});
$nav_close_button.on('click', function(){
$nav.removeClass(visible_class);
hideItems($search_button, $search_box);
hideItems($notifications_button, $notifications_box);
});
// Toggle Menu on mobile
$menu_button.on('click', function(){
$close_button.focus();
});
$close_button.on('click', function(){
$menu_button.focus();
});
});