https://carlsbergmalaysia.com.my/assets/scripts/components/keyboard-navigation.js

1$(document).ready(function() {
2
3	var carlsbergGroupSiteSearch = (function() {
4 		
5 		// 'Private' variables
6 		var menuItem  = $('.nav__link');
7		var menuSubItem  = $('.subnav__link');
8		var menuSubnav  = '.subnav';
9		var menuSubnavContainer  = '.subnav__wrapper';
10			
11		// 'Private'
12		function init(){
13			bindClose();		// Bind the document click event to close	
14			bindkeyboard()		// Bind keyboard events to the menu and submenu items
15		}
16		
17		function bindkeyboard(){	
18			menuItem.on('focus', function(e) { 
19				openThis($(this));	
20				var navFocused = $(e.target).closest('.nav__item');
21				closeAllOpen(navFocused);
22			});
23		
24			menuSubItem.on('focus', function(e) { 
25				openThis($(this));	
26				var navFocused = $(e.target).closest('.nav__item');
27				closeAllOpen(navFocused);
28			});
29			menuItem.on('focusout', function() { 					
30				closeThis($(this));
31			})
32		}
33		
34		function closeAllOpen(exceptThisElement){
35			var openNavItems = $('.selected');
36			if(exceptThisElement){
37				openNavItems = openNavItems.not(exceptThisElement);
38			}
39			openNavItems.each(function(){
40				closeThis($(this));
41			});
42		}
43		
44		// click off close
45		function bindClose(){
46			$(document).click(function(e) { 
47				if(!$(e.target).closest('#nav').length) {
48					if($('#nav').is(":visible")) {
49					
50						var _this = $(this);
51						var targetMenuItem = $(_this, '.nav__item');
52					
53						var menuSubnavTarget = $(menuSubnav, targetMenuItem);
54						var menuSubnavWapperTarget = $(menuSubnavContainer, menuSubnavTarget);
55			
56						targetMenuItem.removeClass( "selected" );
57						menuSubnavTarget.removeClass( "subnav-focused" );
58						menuSubnavWapperTarget.removeClass( "subnav-open" );
59				
60					}
61				}        
62			})
63		}
64			
65		// close function
66		function closeThis(_this){
67			var targetMenuItem = _this.closest('.nav__item');
68		
69			var menuSubnavTarget = $(menuSubnav, targetMenuItem);
70			var menuSubnavWapperTarget = $(menuSubnavContainer, menuSubnavTarget);
71		
72			targetMenuItem.removeClass( "selected" );
73			menuSubnavTarget.removeClass( "subnav-focused" );
74			menuSubnavWapperTarget.removeClass( "subnav-open" );
75		}
76		
77		// open function
78		function openThis(_this){
79			var targetMenuItem = _this.closest('.nav__item');
80			
81			var menuSubnavTarget = $(menuSubnav, targetMenuItem);
82			var menuSubnavWapperTarget = $(menuSubnavContainer, menuSubnavTarget);
83			
84			targetMenuItem.addClass( "selected" );
85			menuSubnavTarget.addClass( "subnav-focused" );
86			menuSubnavWapperTarget.addClass( "subnav-open" );
87		}
88
89
90		// 'Public'
91		return {
92			init: init
93		};
94
95	})();
96 
97	carlsbergGroupSiteSearch.init();
98});
99