Permalink
Browse files

refactor 4: use html templates

  • Loading branch information...
bbraithwaite committed Apr 9, 2015
1 parent 3b09ce2 commit bf376193909a2ca1c1d727f757b2d9474262f7c5
Showing with 68 additions and 16 deletions.
  1. +7 −16 app/index.html
  2. +61 −0 app/templates.js
@@ -8,6 +8,7 @@
<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>
<script type="text/javascript" src="templates.js"></script>
</head>
<body>
<div id="map-canvas"></div>
@@ -107,14 +108,14 @@
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>';
controlText.innerHTML = templates.loading(response);
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.innerHTML = templates.loading(response);;
controlText.style.display = '';
}
@@ -126,15 +127,7 @@
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>';
document.getElementById('film_detail').innerHTML = templates.movie(detail);
}
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
xhr.responseType = "json";
@@ -155,7 +148,7 @@
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">';
locationDiv.innerHTML = templates.location(location);
var sateliteViewButton = document.createElement('input');
sateliteViewButton.type = 'button';
@@ -209,14 +202,12 @@
}
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.innerHTML = templates.home();
dashBoard.id = 'dashboard';
dashBoard.className = 'dashboard';
controlDiv.appendChild(dashBoard);
}
</script>
</body>
</html
</html>
@@ -0,0 +1,61 @@
var templates = {};
templates.mapCanvas = function mapCanvasTemplate() {
return document.getElementById('map-canvas');
};
templates.home = function homeTemplate() {
var buf = [];
buf.push('<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>');
buf.push('<p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>');
return buf.join('');
};
templates.loading = function loadingTemplate(response) {
var buf = [];
buf.push('<h2>');
buf.push(response);
buf.push('</h2><br><em>Loading locations and content...</em>');
return buf.join('');
};
templates.movie = function movieTemplate(detail) {
var buf = [];
buf.push('<img src="');
buf.push(detail.poster);
buf.push('" alt="poster" align="right" width="80" height="119" style="padding-left:5px;" />');
buf.push('<div id="plot" style="overflow: scroll; height:135px;margin-top:5px;">');
buf.push('<h2>');
buf.push(detail.title);
buf.push('</h2>');
buf.push(detail.releaseYear);
buf.push('</em>, Director: ');
buf.push('<em>');
buf.push(detail.director);
buf.push('</em><br><br>');
buf.push('Staring: ');
buf.push(detail.actors);
buf.push('<br><br>');
buf.push('Rating: ');
buf.push(detail.rating);
buf.push('<br><br>');
buf.push('Genre: ');
buf.push(detail.genre);
buf.push('<br><br>');
buf.push('<br>Plot: ');
buf.push(detail.plot);
buf.push('<br><br></div>');
return buf.join('');
};
templates.location = function locationTemplate(location) {
var buf = [];
buf.push('<h2>');
buf.push(location.location);
buf.push('</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=');
buf.push(location.geo.lat);
buf.push(',');
buf.push(location.geo.lng);
buf.push('" align="right">');
return buf.join('');
};

0 comments on commit bf37619

Please sign in to comment.