Skip to content

Commit 18c69f4

Browse files
committed
refactor 5.1: break out logic into separate files
1 parent 78067d0 commit 18c69f4

File tree

5 files changed

+191
-203
lines changed

5 files changed

+191
-203
lines changed

app/home-control.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
function HomeControl(controlDiv, map) {
2+
var dashBoard = document.createElement('div');
3+
dashBoard.innerHTML = templates.home();
4+
dashBoard.id = 'dashboard';
5+
dashBoard.className = 'dashboard';
6+
controlDiv.appendChild(dashBoard);
7+
};

app/index.html

Lines changed: 25 additions & 203 deletions
Original file line numberDiff line numberDiff line change
@@ -9,217 +9,39 @@
99
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
1010
<script type="text/javascript" src="map-service.js"></script>
1111
<script type="text/javascript" src="templates.js"></script>
12+
<script type="text/javascript" src="home-control.js"></script>
13+
<script type="text/javascript" src="search-control.js"></script>
14+
<script type="text/javascript" src="location-control.js"></script>
15+
<script type="text/javascript" src="movie-control.js"></script>
1216
</head>
1317
<body>
1418
<div id="map-canvas"></div>
1519
<script type="text/javascript">
16-
/*
17-
* NOTE: this (probably) isn't how you should be doing JavaScript!
18-
*/
19-
var map;
20+
/*
21+
* NOTE: this (probably) isn't how you should be doing JavaScript!
22+
*/
23+
var map;
2024

21-
function initialize() {
22-
var mapDiv = document.getElementById('map-canvas');
23-
map = new MapService(window.google, mapDiv);
25+
function initialize() {
26+
var mapDiv = document.getElementById('map-canvas');
27+
map = new MapService(window.google, mapDiv);
2428

25-
var searchControlDiv = document.createElement('div');
26-
searchControlDiv.id = 'top';
27-
searchControlDiv.className = 'top';
29+
var searchControlDiv = document.createElement('div');
30+
searchControlDiv.id = 'top';
31+
searchControlDiv.className = 'top';
2832

29-
new SearchControl(searchControlDiv, map);
30-
map.addView(searchControlDiv, 'TOP_LEFT');
33+
new SearchControl(searchControlDiv, map);
34+
map.addView(searchControlDiv, 'TOP_LEFT');
3135

32-
var homeControlDiv = document.createElement('div');
33-
homeControlDiv.id = 'bottom_panel';
34-
homeControlDiv.className = 'bottom_panel';
36+
var homeControlDiv = document.createElement('div');
37+
homeControlDiv.id = 'bottom_panel';
38+
homeControlDiv.className = 'bottom_panel';
3539

36-
new HomeControl(homeControlDiv, map);
37-
map.addView(homeControlDiv, 'BOTTOM_CENTER');
38-
}
40+
new HomeControl(homeControlDiv, map);
41+
map.addView(homeControlDiv, 'BOTTOM_CENTER');
42+
}
3943

40-
google.maps.event.addDomListener(window, 'load', initialize);
41-
42-
/*
43-
* Search Panel
44-
*/
45-
function SearchControl(controlDiv, map) {
46-
var movieClicked = function(item) {
47-
map.clearMarkers();
48-
map.setOptions({ streetViewControl: false, zoomControl: true });
49-
document.getElementById('films_results').innerHTML = '';
50-
document.getElementById('q').value = item.title;
51-
showMovieDetail(item);
52-
};
53-
54-
var searchInput = document.createElement('input');
55-
searchInput.type = 'search';
56-
searchInput.name = 'q';
57-
searchInput.id = 'q';
58-
searchInput.placeholder = 'Enter film title...';
59-
controlDiv.appendChild(searchInput);
60-
61-
new window.Autocomplete(searchInput, {
62-
url: '/movies/search',
63-
param: 'q',
64-
label: 'title',
65-
value: 'releaseYear',
66-
select: function(item) {
67-
movieClicked(item);
68-
}
69-
});
70-
71-
var resultsUI = document.createElement('div');
72-
resultsUI.id = 'films_results';
73-
controlDiv.appendChild(resultsUI);
74-
}
75-
76-
/*
77-
* Movie Detail
78-
*/
79-
function showLocation(detail, location) {
80-
return function() {
81-
map.zoomView(location.geo.lat, location.geo.lng);
82-
83-
var locationDiv = document.getElementById('location_detail');
84-
85-
if (!locationDiv) {
86-
locationDiv = document.createElement('div');
87-
document.getElementById('bottom_panel').appendChild(locationDiv);
88-
}
89-
90-
locationDiv.id = 'location_detail';
91-
locationDiv.className = 'location_detail';
92-
locationDiv.style.display = '';
93-
locationDiv.innerHTML = templates.location(location);
94-
95-
var sateliteViewButton = document.createElement('input');
96-
sateliteViewButton.type = 'button';
97-
sateliteViewButton.value = 'Satelite View';
98-
99-
sateliteViewButton.addEventListener('click', function() {
100-
101-
if (this.value === 'Satelite View') {
102-
map.sateliteView(location.geo.lat, location.geo.lng);
103-
this.value = 'Back to Roadmap'
104-
} else {
105-
map.roadmapView(location.geo.lat, location.geo.lng);
106-
this.value = 'Satelite View'
107-
}
108-
109-
});
110-
111-
locationDiv.appendChild(sateliteViewButton);
112-
113-
var streetViewButton = document.createElement('input');
114-
streetViewButton.type = 'button';
115-
streetViewButton.value = 'Street View';
116-
117-
streetViewButton.addEventListener('click', function() {
118-
map.streetView(location.geo.lat, location.geo.lng);
119-
});
120-
121-
locationDiv.appendChild(streetViewButton);
122-
123-
var backToFilm = document.createElement('input');
124-
backToFilm.type = 'button';
125-
backToFilm.value = 'Back to Film';
126-
127-
backToFilm.addEventListener('click', function() {
128-
map.reset();
129-
var location_detail = document.getElementById('location_detail');
130-
if (location_detail) {
131-
location_detail.style.display = 'none';
132-
}
133-
134-
var film_detail = document.getElementById('film_detail');
135-
if (film_detail) {
136-
film_detail.style.display = '';
137-
}
138-
});
139-
140-
locationDiv.appendChild(backToFilm);
141-
142-
document.getElementById('film_detail').style.display = 'none';
143-
}
144-
}
145-
146-
/*
147-
* Movie Detail
148-
*/
149-
function showMovieDetail(item) {
150-
displayLoadingPanel(item.title);
151-
getMoveDetail(item.title, item.director);
152-
plotLocations(item);
153-
}
154-
155-
function plotLocations(item) {
156-
var xhr = new XMLHttpRequest();
157-
xhr.onload = function() {
158-
var response = this.response;
159-
for (var i = 0; i < response.locations.length; i++) {
160-
map.plotLocation(
161-
response.locations[i].geo.lat,
162-
response.locations[i].geo.lng,
163-
showLocation(response, response.locations[i]));
164-
};
165-
}
166-
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
167-
xhr.responseType = "json";
168-
xhr.send();
169-
}
170-
171-
function displayLoadingPanel(response) {
172-
var locationDiv = document.getElementById('location_detail');
173-
if (locationDiv) {
174-
locationDiv.style.display = 'none';
175-
}
176-
177-
var dashboard = document.getElementById('dashboard');
178-
if (dashboard) {
179-
dashboard.style.display = 'none';
180-
}
181-
182-
if (!document.getElementById('film_detail')) {
183-
184-
// Set CSS for the control interior.
185-
var controlText = document.createElement('div');
186-
controlText.id = 'film_detail';
187-
controlText.className = 'film_detail';
188-
controlText.innerHTML = templates.loading(response);
189-
190-
document.getElementById('bottom_panel').appendChild(controlText);
191-
192-
} else {
193-
194-
var controlText = document.getElementById('film_detail');
195-
controlText.innerHTML = templates.loading(response);;
196-
controlText.style.display = '';
197-
198-
}
199-
}
200-
201-
function getMoveDetail(title, director) {
202-
var xhr = new XMLHttpRequest();
203-
xhr.onload = function() {
204-
var detail = this.response;
205-
206-
document.getElementById('film_detail').innerHTML = templates.movie(detail);
207-
}
208-
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
209-
xhr.responseType = "json";
210-
xhr.send();
211-
}
212-
213-
/*
214-
* Homepage Panel
215-
*/
216-
function HomeControl(controlDiv, map) {
217-
var dashBoard = document.createElement('div');
218-
dashBoard.innerHTML = templates.home();
219-
dashBoard.id = 'dashboard';
220-
dashBoard.className = 'dashboard';
221-
controlDiv.appendChild(dashBoard);
222-
}
223-
</script>
224-
</body>
44+
google.maps.event.addDomListener(window, 'load', initialize);
45+
</script>
46+
</body>
22547
</html>

app/location-control.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
function showLocation(detail, location) {
2+
return function() {
3+
map.zoomView(location.geo.lat, location.geo.lng);
4+
5+
var locationDiv = document.getElementById('location_detail');
6+
7+
if (!locationDiv) {
8+
locationDiv = document.createElement('div');
9+
document.getElementById('bottom_panel').appendChild(locationDiv);
10+
}
11+
12+
locationDiv.id = 'location_detail';
13+
locationDiv.className = 'location_detail';
14+
locationDiv.style.display = '';
15+
locationDiv.innerHTML = templates.location(location);
16+
17+
var sateliteViewButton = document.createElement('input');
18+
sateliteViewButton.type = 'button';
19+
sateliteViewButton.value = 'Satelite View';
20+
21+
sateliteViewButton.addEventListener('click', function() {
22+
23+
if (this.value === 'Satelite View') {
24+
map.sateliteView(location.geo.lat, location.geo.lng);
25+
this.value = 'Back to Roadmap'
26+
} else {
27+
map.roadmapView(location.geo.lat, location.geo.lng);
28+
this.value = 'Satelite View'
29+
}
30+
31+
});
32+
33+
locationDiv.appendChild(sateliteViewButton);
34+
35+
var streetViewButton = document.createElement('input');
36+
streetViewButton.type = 'button';
37+
streetViewButton.value = 'Street View';
38+
39+
streetViewButton.addEventListener('click', function() {
40+
map.streetView(location.geo.lat, location.geo.lng);
41+
});
42+
43+
locationDiv.appendChild(streetViewButton);
44+
45+
var backToFilm = document.createElement('input');
46+
backToFilm.type = 'button';
47+
backToFilm.value = 'Back to Film';
48+
49+
backToFilm.addEventListener('click', function() {
50+
map.reset();
51+
var location_detail = document.getElementById('location_detail');
52+
if (location_detail) {
53+
location_detail.style.display = 'none';
54+
}
55+
56+
var film_detail = document.getElementById('film_detail');
57+
if (film_detail) {
58+
film_detail.style.display = '';
59+
}
60+
});
61+
62+
locationDiv.appendChild(backToFilm);
63+
64+
document.getElementById('film_detail').style.display = 'none';
65+
};
66+
}

app/movie-control.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
function showMovieDetail(item) {
2+
displayLoadingPanel(item.title);
3+
getMoveDetail(item.title, item.director);
4+
plotLocations(item);
5+
}
6+
7+
function plotLocations(item) {
8+
var xhr = new XMLHttpRequest();
9+
xhr.onload = function() {
10+
var response = this.response;
11+
for (var i = 0; i < response.locations.length; i++) {
12+
map.plotLocation(
13+
response.locations[i].geo.lat,
14+
response.locations[i].geo.lng,
15+
showLocation(response, response.locations[i]));
16+
};
17+
}
18+
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
19+
xhr.responseType = "json";
20+
xhr.send();
21+
}
22+
23+
function displayLoadingPanel(response) {
24+
var locationDiv = document.getElementById('location_detail');
25+
if (locationDiv) {
26+
locationDiv.style.display = 'none';
27+
}
28+
29+
var dashboard = document.getElementById('dashboard');
30+
if (dashboard) {
31+
dashboard.style.display = 'none';
32+
}
33+
34+
if (!document.getElementById('film_detail')) {
35+
36+
// Set CSS for the control interior.
37+
var controlText = document.createElement('div');
38+
controlText.id = 'film_detail';
39+
controlText.className = 'film_detail';
40+
controlText.innerHTML = templates.loading(response);
41+
42+
document.getElementById('bottom_panel').appendChild(controlText);
43+
44+
} else {
45+
46+
var controlText = document.getElementById('film_detail');
47+
controlText.innerHTML = templates.loading(response);;
48+
controlText.style.display = '';
49+
50+
}
51+
}
52+
53+
function getMoveDetail(title, director) {
54+
var xhr = new XMLHttpRequest();
55+
xhr.onload = function() {
56+
var detail = this.response;
57+
58+
document.getElementById('film_detail').innerHTML = templates.movie(detail);
59+
}
60+
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
61+
xhr.responseType = "json";
62+
xhr.send();
63+
}

0 commit comments

Comments
 (0)