Permalink
Browse files

refactor 5.1: break out logic into separate files

  • Loading branch information...
bbraithwaite committed Apr 9, 2015
1 parent 78067d0 commit 18c69f47d28424993d8ea36c11260725224828ca
Showing with 191 additions and 203 deletions.
  1. +7 −0 app/home-control.js
  2. +25 −203 app/index.html
  3. +66 −0 app/location-control.js
  4. +63 −0 app/movie-control.js
  5. +30 −0 app/search-control.js
@@ -0,0 +1,7 @@
function HomeControl(controlDiv, map) {
var dashBoard = document.createElement('div');
dashBoard.innerHTML = templates.home();
dashBoard.id = 'dashboard';
dashBoard.className = 'dashboard';
controlDiv.appendChild(dashBoard);
};
@@ -9,217 +9,39 @@
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="map-service.js"></script>
<script type="text/javascript" src="templates.js"></script>
<script type="text/javascript" src="home-control.js"></script>
<script type="text/javascript" src="search-control.js"></script>
<script type="text/javascript" src="location-control.js"></script>
<script type="text/javascript" src="movie-control.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">
/*
* NOTE: this (probably) isn't how you should be doing JavaScript!
*/
var map;
/*
* NOTE: this (probably) isn't how you should be doing JavaScript!
*/
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new MapService(window.google, mapDiv);
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new MapService(window.google, mapDiv);
var searchControlDiv = document.createElement('div');
searchControlDiv.id = 'top';
searchControlDiv.className = 'top';
var searchControlDiv = document.createElement('div');
searchControlDiv.id = 'top';
searchControlDiv.className = 'top';
new SearchControl(searchControlDiv, map);
map.addView(searchControlDiv, 'TOP_LEFT');
new SearchControl(searchControlDiv, map);
map.addView(searchControlDiv, 'TOP_LEFT');
var homeControlDiv = document.createElement('div');
homeControlDiv.id = 'bottom_panel';
homeControlDiv.className = 'bottom_panel';
var homeControlDiv = document.createElement('div');
homeControlDiv.id = 'bottom_panel';
homeControlDiv.className = 'bottom_panel';
new HomeControl(homeControlDiv, map);
map.addView(homeControlDiv, 'BOTTOM_CENTER');
}
new HomeControl(homeControlDiv, map);
map.addView(homeControlDiv, 'BOTTOM_CENTER');
}
google.maps.event.addDomListener(window, 'load', initialize);
/*
* Search Panel
*/
function SearchControl(controlDiv, map) {
var movieClicked = function(item) {
map.clearMarkers();
map.setOptions({ streetViewControl: false, zoomControl: true });
document.getElementById('films_results').innerHTML = '';
document.getElementById('q').value = item.title;
showMovieDetail(item);
};
var searchInput = document.createElement('input');
searchInput.type = 'search';
searchInput.name = 'q';
searchInput.id = 'q';
searchInput.placeholder = 'Enter film title...';
controlDiv.appendChild(searchInput);
new window.Autocomplete(searchInput, {
url: '/movies/search',
param: 'q',
label: 'title',
value: 'releaseYear',
select: function(item) {
movieClicked(item);
}
});
var resultsUI = document.createElement('div');
resultsUI.id = 'films_results';
controlDiv.appendChild(resultsUI);
}
/*
* Movie Detail
*/
function showLocation(detail, location) {
return function() {
map.zoomView(location.geo.lat, location.geo.lng);
var locationDiv = document.getElementById('location_detail');
if (!locationDiv) {
locationDiv = document.createElement('div');
document.getElementById('bottom_panel').appendChild(locationDiv);
}
locationDiv.id = 'location_detail';
locationDiv.className = 'location_detail';
locationDiv.style.display = '';
locationDiv.innerHTML = templates.location(location);
var sateliteViewButton = document.createElement('input');
sateliteViewButton.type = 'button';
sateliteViewButton.value = 'Satelite View';
sateliteViewButton.addEventListener('click', function() {
if (this.value === 'Satelite View') {
map.sateliteView(location.geo.lat, location.geo.lng);
this.value = 'Back to Roadmap'
} else {
map.roadmapView(location.geo.lat, location.geo.lng);
this.value = 'Satelite View'
}
});
locationDiv.appendChild(sateliteViewButton);
var streetViewButton = document.createElement('input');
streetViewButton.type = 'button';
streetViewButton.value = 'Street View';
streetViewButton.addEventListener('click', function() {
map.streetView(location.geo.lat, location.geo.lng);
});
locationDiv.appendChild(streetViewButton);
var backToFilm = document.createElement('input');
backToFilm.type = 'button';
backToFilm.value = 'Back to Film';
backToFilm.addEventListener('click', function() {
map.reset();
var location_detail = document.getElementById('location_detail');
if (location_detail) {
location_detail.style.display = 'none';
}
var film_detail = document.getElementById('film_detail');
if (film_detail) {
film_detail.style.display = '';
}
});
locationDiv.appendChild(backToFilm);
document.getElementById('film_detail').style.display = 'none';
}
}
/*
* Movie Detail
*/
function showMovieDetail(item) {
displayLoadingPanel(item.title);
getMoveDetail(item.title, item.director);
plotLocations(item);
}
function plotLocations(item) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var response = this.response;
for (var i = 0; i < response.locations.length; i++) {
map.plotLocation(
response.locations[i].geo.lat,
response.locations[i].geo.lng,
showLocation(response, response.locations[i]));
};
}
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
xhr.responseType = "json";
xhr.send();
}
function displayLoadingPanel(response) {
var locationDiv = document.getElementById('location_detail');
if (locationDiv) {
locationDiv.style.display = 'none';
}
var dashboard = document.getElementById('dashboard');
if (dashboard) {
dashboard.style.display = 'none';
}
if (!document.getElementById('film_detail')) {
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.id = 'film_detail';
controlText.className = 'film_detail';
controlText.innerHTML = templates.loading(response);
document.getElementById('bottom_panel').appendChild(controlText);
} else {
var controlText = document.getElementById('film_detail');
controlText.innerHTML = templates.loading(response);;
controlText.style.display = '';
}
}
function getMoveDetail(title, director) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var detail = this.response;
document.getElementById('film_detail').innerHTML = templates.movie(detail);
}
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
xhr.responseType = "json";
xhr.send();
}
/*
* Homepage Panel
*/
function HomeControl(controlDiv, map) {
var dashBoard = document.createElement('div');
dashBoard.innerHTML = templates.home();
dashBoard.id = 'dashboard';
dashBoard.className = 'dashboard';
controlDiv.appendChild(dashBoard);
}
</script>
</body>
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
@@ -0,0 +1,66 @@
function showLocation(detail, location) {
return function() {
map.zoomView(location.geo.lat, location.geo.lng);
var locationDiv = document.getElementById('location_detail');
if (!locationDiv) {
locationDiv = document.createElement('div');
document.getElementById('bottom_panel').appendChild(locationDiv);
}
locationDiv.id = 'location_detail';
locationDiv.className = 'location_detail';
locationDiv.style.display = '';
locationDiv.innerHTML = templates.location(location);
var sateliteViewButton = document.createElement('input');
sateliteViewButton.type = 'button';
sateliteViewButton.value = 'Satelite View';
sateliteViewButton.addEventListener('click', function() {
if (this.value === 'Satelite View') {
map.sateliteView(location.geo.lat, location.geo.lng);
this.value = 'Back to Roadmap'
} else {
map.roadmapView(location.geo.lat, location.geo.lng);
this.value = 'Satelite View'
}
});
locationDiv.appendChild(sateliteViewButton);
var streetViewButton = document.createElement('input');
streetViewButton.type = 'button';
streetViewButton.value = 'Street View';
streetViewButton.addEventListener('click', function() {
map.streetView(location.geo.lat, location.geo.lng);
});
locationDiv.appendChild(streetViewButton);
var backToFilm = document.createElement('input');
backToFilm.type = 'button';
backToFilm.value = 'Back to Film';
backToFilm.addEventListener('click', function() {
map.reset();
var location_detail = document.getElementById('location_detail');
if (location_detail) {
location_detail.style.display = 'none';
}
var film_detail = document.getElementById('film_detail');
if (film_detail) {
film_detail.style.display = '';
}
});
locationDiv.appendChild(backToFilm);
document.getElementById('film_detail').style.display = 'none';
};
}
@@ -0,0 +1,63 @@
function showMovieDetail(item) {
displayLoadingPanel(item.title);
getMoveDetail(item.title, item.director);
plotLocations(item);
}
function plotLocations(item) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var response = this.response;
for (var i = 0; i < response.locations.length; i++) {
map.plotLocation(
response.locations[i].geo.lat,
response.locations[i].geo.lng,
showLocation(response, response.locations[i]));
};
}
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
xhr.responseType = "json";
xhr.send();
}
function displayLoadingPanel(response) {
var locationDiv = document.getElementById('location_detail');
if (locationDiv) {
locationDiv.style.display = 'none';
}
var dashboard = document.getElementById('dashboard');
if (dashboard) {
dashboard.style.display = 'none';
}
if (!document.getElementById('film_detail')) {
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.id = 'film_detail';
controlText.className = 'film_detail';
controlText.innerHTML = templates.loading(response);
document.getElementById('bottom_panel').appendChild(controlText);
} else {
var controlText = document.getElementById('film_detail');
controlText.innerHTML = templates.loading(response);;
controlText.style.display = '';
}
}
function getMoveDetail(title, director) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var detail = this.response;
document.getElementById('film_detail').innerHTML = templates.movie(detail);
}
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
xhr.responseType = "json";
xhr.send();
}
Oops, something went wrong.

0 comments on commit 18c69f4

Please sign in to comment.