Skip to content

Commit 78067d0

Browse files
bbraithwaitebbraithwaite
committed
refactor 5: logically group functionality
1 parent bf37619 commit 78067d0

File tree

1 file changed

+85
-73
lines changed

1 file changed

+85
-73
lines changed

‎app/index.html

+85-73
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,17 @@
3939

4040
google.maps.event.addDomListener(window, 'load', initialize);
4141

42+
/*
43+
* Search Panel
44+
*/
4245
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+
};
4353

4454
var searchInput = document.createElement('input');
4555
searchInput.type = 'search';
@@ -54,7 +64,7 @@
5464
label: 'title',
5565
value: 'releaseYear',
5666
select: function(item) {
57-
clicked(item);
67+
movieClicked(item);
5868
}
5969
});
6070

@@ -63,78 +73,10 @@
6373
controlDiv.appendChild(resultsUI);
6474
}
6575

66-
function clicked(item) {
67-
68-
map.clearMarkers();
69-
map.setOptions({ streetViewControl: false, zoomControl: true });
70-
71-
document.getElementById('films_results').innerHTML = '';
72-
73-
detailPanel(item.title);
74-
75-
document.getElementById('q').value = item.title;
76-
77-
setMoveDetail(item.title, item.director);
78-
79-
var xhr = new XMLHttpRequest();
80-
xhr.onload = function() {
81-
var response = this.response;
82-
for (var i = 0; i < response.locations.length; i++) {
83-
map.plotLocation(
84-
response.locations[i].geo.lat,
85-
response.locations[i].geo.lng,
86-
zoom(response, response.locations[i]));
87-
};
88-
}
89-
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
90-
xhr.responseType = "json";
91-
xhr.send();
92-
}
93-
94-
function detailPanel(response) {
95-
var locationDiv = document.getElementById('location_detail');
96-
if (locationDiv) {
97-
locationDiv.style.display = 'none';
98-
}
99-
100-
var dashboard = document.getElementById('dashboard');
101-
if (dashboard) {
102-
dashboard.style.display = 'none';
103-
}
104-
105-
if (!document.getElementById('film_detail')) {
106-
107-
// Set CSS for the control interior.
108-
var controlText = document.createElement('div');
109-
controlText.id = 'film_detail';
110-
controlText.className = 'film_detail';
111-
controlText.innerHTML = templates.loading(response);
112-
113-
document.getElementById('bottom_panel').appendChild(controlText);
114-
115-
} else {
116-
117-
var controlText = document.getElementById('film_detail');
118-
controlText.innerHTML = templates.loading(response);;
119-
controlText.style.display = '';
120-
121-
}
122-
}
123-
124-
function setMoveDetail(title, director) {
125-
126-
var xhr = new XMLHttpRequest();
127-
xhr.onload = function() {
128-
var detail = this.response;
129-
130-
document.getElementById('film_detail').innerHTML = templates.movie(detail);
131-
}
132-
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
133-
xhr.responseType = "json";
134-
xhr.send();
135-
}
136-
137-
function zoom(detail, location) {
76+
/*
77+
* Movie Detail
78+
*/
79+
function showLocation(detail, location) {
13880
return function() {
13981
map.zoomView(location.geo.lat, location.geo.lng);
14082

@@ -201,6 +143,76 @@
201143
}
202144
}
203145

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+
*/
204216
function HomeControl(controlDiv, map) {
205217
var dashBoard = document.createElement('div');
206218
dashBoard.innerHTML = templates.home();

0 commit comments

Comments
 (0)