forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (121 loc) · 4.96 KB
/
index.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="preload" href="dest/styles.css" as="style">
<link rel="stylesheet" href="dest/styles.css">
<link rel="manifest" href="/manifest.json">
<link rel="preload" href="dest/main.js" as="script">
<title>Restaurant Reviews</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Restaurants">
<link rel="apple-touch-icon" href="icons/icon-152x152.png">
<meta name="msapplication-TileImage" content="icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="theme-color" content="#2F3BA2"/>
</head>
<body>
<div id="wrapper" class="one-edge-shadow">
<header>
<div id="headmenu">
<nav>
<h1><a id="headref" href="/">Restaurant Reviews</a></h1>
</nav>
<a id="menu" class="header__menu" tabindex="-1" aria-hidden="true" aria-label="header menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMin meet">
<path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
</svg>
</a>
</div>
</header>
<script type="application/javascript" charset="utf-8" src="dest/main.js"></script>
<main id="maincontent" role="main">
<section id="map-container">
<div id="map-static" role="application" aria-label="google map static" tabindex="-1" aria-hidden="true">
<img data-src="img/gmap.webp" onClick="swapMap();" id="my-image-id"/>
</div>
<div id="map" role="application" aria-label="google map" tabindex="-1" aria-hidden="true"></div>
</section>
<section>
<div class="filter-options">
<h2>Filter Results</h2>
<select id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants(false)" role="listbox"
aria-hidden="false" aria-label="neighborhoods selector">
<option value="all">All Neighborhoods</option>
</select>
<select id="cuisines-select" name="cuisines" onchange="updateRestaurants(false)" role="listbox"
aria-hidden="false" aria-label="cuisines selector">
<option value="all">All Cuisines</option>
</select>
</div>
<ul id="restaurants-list"></ul>
</section>
</main>
<script>
/*
* Open the drawer when the menu ison is clicked.
*/
var menu = document.querySelector('#menu');
var menuStyle = window.getComputedStyle(menu);
var main = document.querySelector('main');
var drawer = document.querySelector('.filter-options');
var combo1 = document.querySelector('#neighborhoods-select');
var combo2 = document.querySelector('#cuisines-select');
toggleTabIndex = () => {
if (!(menuStyle.getPropertyValue('display') === 'block') || drawer.classList.contains('open')) {
combo1.setAttribute("tabindex", "0");
combo2.setAttribute("tabindex", "0");
} else {
combo1.setAttribute("tabindex", "-1");
combo2.setAttribute("tabindex", "-1");
}
}
menu.addEventListener('click', function(e) {
drawer.classList.toggle('open');
e.stopPropagation();
});
drawer.addEventListener('change', function() {
drawer.classList.remove('open');
});
toggleTabIndex();
var drawerObserver = new MutationObserver(function(mutations){
toggleTabIndex();
});
drawerObserver.observe(drawer, {attributes: true});
window.addEventListener('resize', function(event){
toggleTabIndex();
});
var prevfocus = document.querySelector('#headref');
var nextFocus = document.querySelector('#neighborhoods-select');
prevfocus.onkeydown = function(event) {
if (event.keyCode == 9 ) { // TAB
event.preventDefault();
nextFocus.focus();
return false;
}
return true;
};
nextFocus.onkeydown = function(event) {
if (event.keyCode == 9 && event.shiftKey) { // Shift+TAB
event.preventDefault();
prevfocus.focus();
return false;
}
return true;
};
if ('serviceWorker' in navigator) {
// Recommended to register onLoad
window.addEventListener('load', function() {
navigator.serviceWorker.register('./sw.min.js', {scope: './'});
});
}
</script>
<footer id="footer">
Copyright (c) 2018 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
</div>
</body>
</html>