Instantly share code, notes, and snippets.

@bbraithwaite /index.html Secret
Last active Aug 29, 2015

Embed
What would you like to do?
Refactoring: mid-point
<!DOCTYPE html>
<html>
<head>
<title>SF Movies | Find out where the best movies happened in San Fransisco</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/bower_components/boc-autocomplete/build/boc.autocomplete.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="bower_components/boc-autocomplete/build/boc.autocomplete.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="map-service.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;
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';
new SearchControl(searchControlDiv, map);
map.addView(searchControlDiv, 'TOP_LEFT');
var homeControlDiv = document.createElement('div');
homeControlDiv.id = 'bottom_panel';
homeControlDiv.className = 'bottom_panel';
new HomeControl(homeControlDiv, map);
map.addView(homeControlDiv, 'BOTTOM_CENTER');
}
google.maps.event.addDomListener(window, 'load', initialize);
function SearchControl(controlDiv, map) {
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) {
clicked(item);
}
});
var resultsUI = document.createElement('div');
resultsUI.id = 'films_results';
controlDiv.appendChild(resultsUI);
}
function clicked(item) {
map.clearMarkers();
map.setOptions({ streetViewControl: false, zoomControl: true });
document.getElementById('films_results').innerHTML = '';
detailPanel(item.title);
document.getElementById('q').value = item.title;
setMoveDetail(item.title, item.director);
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,
zoom(response, response.locations[i]));
};
}
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
xhr.responseType = "json";
xhr.send();
}
function detailPanel(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 = '<h2>' + response + '</h2><br><em>Loading locations and content...</em>';
document.getElementById('bottom_panel').appendChild(controlText);
} else {
var controlText = document.getElementById('film_detail');
controlText.innerHTML = '<h2>' + response + '</h2><em>Loading locations and content...</em>';
controlText.style.display = '';
}
}
function setMoveDetail(title, director) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var detail = this.response;
document.getElementById('film_detail').innerHTML = '<img src="' + detail.poster + '" alt="poster" align="right" width="80" height="119" style="padding-left:5px;" />'+
'<div id="plot" style="overflow: scroll; height:135px;margin-top:5px;">'+
'<h2>' + detail.title + '</h2>'+
'' + detail.releaseYear + '</em>, Director: '+
'<em>' + detail.director + '</em><br><br>'+
'Staring: ' + detail.actors + '<br><br>'+
'Rating: ' + detail.rating + '<br><br>'+
'Genre: ' + detail.genre + '<br><br>'+
'<br>Plot: ' + detail.plot + '<br><br></div>';
}
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
xhr.responseType = "json";
xhr.send();
}
function zoom(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 = '<h2>' + location.location + '</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=' + location.geo.lat + ',' + location.geo.lng + '" align="right">';
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';
}
}
function HomeControl(controlDiv, map) {
// Set CSS for the control border.
var dashBoard = document.createElement('div');
dashBoard.innerHTML = '<h2>SF Movies</h2><div>See film locations for all movies filmed in San Fransisco. <strong>Click on a marker to see more information about a location.</strong>.</div><p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>';
dashBoard.id = 'dashboard';
dashBoard.className = 'dashboard';
controlDiv.appendChild(dashBoard);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment