mattmcw
/
these-3-words
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve search bar behaviour.

This commit is contained in:
Kevin Dungs 2014-11-18 14:35:16 +01:00
parent 9b411e4908
commit a651a584a9
2 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/style.css
View File

@ -11,7 +11,7 @@ body,
}
.controls {
margin-top: 16px;
margin: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
@ -37,3 +37,13 @@ body,
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
@media (max-width: 800px) {
.controls {
margin: 0;
}
#pac-input,
#pac-input:focus {
width: 100%;
}
}

57
static/js/app.js
View File

@ -6,9 +6,9 @@ var These3Words = (function () {
defaultLabel = 'spitting-ripple-fontanel';
var apiGet = function (latLng, callback, callbackError) {
var apiGet = function (req, callback, callbackError) {
var request = new window.XMLHttpRequest();
request.open('GET', '/api/' + latLng.lat() + ',' + latLng.lng(), true);
request.open('GET', '/api/' + req, true);
request.onload = function () {
callback(request.status, JSON.parse(request.responseText));
};
@ -18,6 +18,10 @@ var These3Words = (function () {
request.send();
};
var apiGetFromLatLng = function(latLng, callback, callbackError) {
apiGet('' + latLng.lat() + ',' + latLng.lng(), callback, callbackError);
};
var Map = function (lat, lng, label) {
this.latLng = new google.maps.LatLng(lat || defaultLat, lng || defaultLng);
@ -26,6 +30,9 @@ var These3Words = (function () {
this.mapCanvas = null;
this.map = null;
this.marker = null;
this.searchInput = null;
this.searchBox = null;
};
Map.prototype.init = function () {
@ -33,7 +40,18 @@ var These3Words = (function () {
var initMap = function () {
that.map = new google.maps.Map(that.mapCanvas, {
center: that.latLng,
zoom: 14
zoom: 14,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_LEFT
},
panControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
streetViewControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
that.marker = new google.maps.Marker({
position: that.latLng,
@ -45,19 +63,31 @@ var These3Words = (function () {
that.moveTo(evt.latLng);
});
var searchInput = document.createElement('input');
searchInput.id = 'pac-input';
searchInput.classList.add('controls');
searchInput.setAttribute('type', 'text');
searchInput.setAttribute('placeholder', 'Search Box');
that.map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput);
var searchBox = new google.maps.places.SearchBox(searchInput);
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
that.searchInput = document.createElement('input');
that.searchInput.value = that.label;
that.searchInput.id = 'pac-input';
that.searchInput.classList.add('controls');
that.searchInput.setAttribute('type', 'text');
that.searchInput.setAttribute('placeholder', 'These3Words');
that.map.controls[google.maps.ControlPosition.TOP_LEFT].push(
that.searchInput);
that.searchBox = new google.maps.places.SearchBox(that.searchInput);
google.maps.event.addListener(that.searchBox, 'places_changed',
function() {
var places = that.searchBox.getPlaces();
if (places.length > 0) {
var place = places[0];
that.map.setCenter(place.geometry.location);
that.moveTo(place.geometry.location);
} else {
var words = that.searchInput.value;
if (/\w+-\w+-\w+/.test(words)) {
apiGet(words, function(status, data) {
if (status >= 200 && status < 400) {
that.moveTo(new google.maps.LatLng(data.lat, data.lng), words);
}
});
}
}
});
};
@ -81,7 +111,7 @@ var These3Words = (function () {
Map.prototype.moveTo = function (latLng) {
var that = this;
apiGet(latLng, function (status, data) {
apiGetFromLatLng(latLng, function (status, data) {
if (status >= 200 && status < 400) {
that.update(latLng, data.three);
window.history.pushState({
@ -90,6 +120,7 @@ var These3Words = (function () {
label: data.three
}, data.three, '/' + data.three);
document.title = 'These3Words: ' + data.three;
that.searchInput.value = data.three;
}
});
};