-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
112 lines (88 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neighborhood Map</title>
<meta name='description' content='Udacity - Fullstack Web Developer Nanodegree - The Frontend: Javascript and AJAX - Neighborhood Map Project'>
<meta name='keywords' content='Udacity, Fullstack, Web, Developer, Nanodegree, Frontend, Javascript, AJAX, Neighborhood, Map, Project, Google, Yelp, API, Foursquare, Asynchronous'>
<meta name='author' content='Glen Bland'>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>
<!-- style sheets -->
<link rel='stylesheet' href='css/style.css'>
<!-- font awesome icons -->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
</head>
<body>
<div class='container'>
<div class='optionsBox bg-gradient-brown'>
<h1>Coffee Shop Locations</h1>
<form class='filterForm'>
<!-- old method: onkeyup='myViewModel.filterFunction()' -->
<!-- event: { keypress: function} seems to be a keypress or 2 behind compared to onkeyup, but it kinda works and the button click works -->
<input type='text' name='filter' data-bind='textInput: myViewModel.filterInputKOO, event: { keypress: myViewModel.filterFunction() }' placeholder='Filter By...' id='txtFilterInput'>
<button type='button' id='btnFilter' data-bind='event: { click: myViewModel.filterFunction() }'><i class="fa fa-filter"></i></button>
</form>
<div data-bind='foreach: myViewModel.locationsKOOA' class='locationTitleList'>
<div class='locationTitle' data-bind='visible: isVisible'>
<span data-bind='text: title, visible: isVisible, attr: { id: id }, click: selectLocation'></span><br />
</div>
</div>
</div> <!-- end of div class='options-box' -->
<div class='headerMapWrapper'>
<div class='header'>
<i class='fas fa-bars menuBtn'></i>
</div> <!-- end of header div -->
<div class='mapContainer'>
<div id='map' class='map-canvas'></div>
</div> <!-- end of mapContainer -->
</div> <!-- end of headerMapWrapper -->
</div> <!-- end of div class='container' -->
<!-- load jquery -->
<script src='js/libs/jquery.min.js'></script>
<!-- start with menu closed and toggle onclick -->
<script>
let btnMenu = document.querySelector('.menuBtn');
let optionsBox = document.querySelector('.optionsBox');
let menuStatus = true; // opened
optionsBox.style.marginLeft = '0px';
function menuToggle() {
if (menuStatus == false) {
optionsBox.style.marginLeft = '0px';
menuStatus = true;
}
else if (menuStatus == true) {
optionsBox.style.marginLeft = '-362px';
menuStatus = false;
}
}
btnMenu.onclick = menuToggle; // don't us onclick() or it will run automatically.
</script>
<!-- Fix heights of map container and optionsBox (JQuery method) -->
<script>
// Flex does not work properly with google maps to fill remaining height as it would with an image.
// The header at 50px and 2 borders at 1px each extend the map size beyond 100% by 52px.
/**
* @description Fix heights of map container to window height - header height
*/
function fixHeight() {
// Set initial height of map to height of container - 52px
$('#map').height($('.container').height()-52);
// Set initial height of options-box to height of container - 12px
$('.optionsBox').height($('.container').height()-12);
// Set initial height of header_ma_wrapper to height of container - 52px
$('.headerMapWrapper').height($('.container').height()-52);
}
fixHeight(); // call on load
$(window).resize(fixHeight); //call on window resize
</script> <!-- end of script to fix heights of map container and optionsBox-->
<!-- load Knockout.js -->
<script src='js/libs/knockout-3.4.2.js'></script>
<!-- load my main javascript -->
<script src='js/script.js'></script>
<!-- google maps initMap callback script with error handling -->
<script async defer
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDqQry8xCE6UqTuRaXy1OQnIOhZa0AIo2A&v=3&callback=initMap'
onerror='googleMapsScriptError()'>
</script>
</body>
</html>