mozilla
/
webmaker-events
зеркало из https://github.com/mozilla/webmaker-events.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Added longitude/latitude to edit-event form, and general map-related cleanup.

This commit is contained in:
Hike Danakian 2013-06-12 03:29:05 -07:00
Родитель d1ab1c4abc
Коммит c8a4089cae
6 изменённых файлов: 82 добавлений и 170 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
static/js/events/details/index.js
Просмотреть файл

@ -1,16 +1,16 @@
require.config({
paths: {
'google': 'map/google',
}
});
define(['jquery', 'forms', 'google', 'domReady!'],
define(['jquery', 'forms', 'domReady!'],
function ($, forms, google) {
var $editForm = $('form#edit-event');
$editForm.validate({
rules: {
registerLink: 'url'
}
});
function toggleEditMode() {
$('.show').toggleClass('hidden');
$('.edit').toggleClass('hidden');
}
new google.maps.places.Autocomplete($editForm.find('input[name="address"]')[0]);
$editForm.find('button#edit-mode').click(function(ev) {
toggleEditMode();
});
@ -20,5 +20,6 @@ function ($, forms, google) {
$editForm.find('button#delete-event').click(function(ev) {
// TODO: show modal with confirmation
});
forms.setupAddressField($editForm);
forms.setupImageUpload($editForm);
});

14
static/js/events/forms.js
Просмотреть файл

@ -1,5 +1,5 @@
define(['jquery', '../base/ui', 'bootstrap-markdown', 'jquery.timepicker', 'jquery-ui.custom', 'domReady!'],
function ($, UI) {
define(['jquery', '../base/ui', 'map/map_maker', 'bootstrap-markdown', 'jquery.timepicker', 'jquery-ui.custom', 'domReady!'],
function ($, UI, MapMaker) {
$('.datepicker').datepicker().each(function(i, elem) {
$(elem).next('.icon').click(function () { $(elem).focus() });
});
@ -76,5 +76,15 @@ function ($, UI) {
UI.select($select);
});
},
setupAddressField: function ($form, mapMaker) {
var ac = mapMaker ? mapMaker.setupAutocomplete.bind(mapMaker)
: MapMaker.prototype.setupAutocomplete;
ac($form.find('input[name="address"]')[0], false, function (place) {
var loc = { latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng() };
for (var k in loc)
$form.find('input[name="'+k+'"]').val(loc[k]);
});
},
};
})

30
static/js/events/map/forms.js
Просмотреть файл

@ -30,6 +30,17 @@ function ($, EventModel, forms) { return function (mapMaker) {
}
});
});
mapMaker.setupAutocomplete($('input[name="find-where"]')[0], true, function (place) {
if (place.geometry) {
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
this.google_map.fitBounds(place.geometry.viewport);
} else {
this.google_map.setCenter(place.geometry.location);
this.google_map.setZoom(14);
}
}
});
var $createForm = $('form#create-event');
$createForm.validate({
@ -83,6 +94,7 @@ function ($, EventModel, forms) { return function (mapMaker) {
forms.setupImageUpload($createForm);
forms.setupSelectUI($createForm);
forms.setupAddressField($createForm, mapMaker);
// setup form toggle button
function toggleCreateForm() {
@ -95,23 +107,5 @@ function ($, EventModel, forms) { return function (mapMaker) {
toggleCreateForm();
});
mapMaker.setupAutocomplete($('input[name="address"]')[0], false, function (place) {
var loc = { latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng() };
for (var k in loc)
$createForm.find('input[name="'+k+'"]').val(loc[k]);
});
mapMaker.setupAutocomplete($('input[name="find-where"]')[0], true, function (place) {
if (place.geometry) {
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
this.google_map.fitBounds(place.geometry.viewport);
} else {
this.google_map.setCenter(place.geometry.location);
this.google_map.setZoom(14);
}
}
});
EventModel.all(function (events) { mapMaker.dropPins(events) });
}});

176
static/js/events/map/index.js
Просмотреть файл

@ -10,153 +10,45 @@ define(['jquery', 'google', 'map/map_maker', 'map/forms'],
function ($, google, MapMaker, EventForms) {
var defaultZoom = 13;
var mapCenter = new google.maps.LatLng(37.774546, -122.433523);
var mapOptions = {
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter,
function Address(place) {
function findComponent(type, short) {
place.address_components.forEach(function (c) {
c.types.forEach(function (t) {
if (t == type)
return short ? c.short_name : c.long_name;
});
});
};
this.number = findComponent("street_number", false);
this.street = findComponent("route", false);
this.city = findComponent("locality", false);
this.state = findComponent("administrative_area_level_1", true);
this.zip_code = findComponent("postal_code", true);
this.country = findComponent("country", true);
};
Address.prototype.lines = function() {
function X (x, y) { return x ? x + (y || '') : '' }
return [
X(this.number, ' ') + X(this.street, ', ') + X(this.city, ', '),
X(this.state, ' ') + X(this.zip_code, ', ') + X(this.country)
]
};
Address.prototype.findPlace = function(cb) {
var address = this.lines.join(' ');
geocoder.geocode({ 'address': address }, function(results, status) {
if (cb) cb(results, status == google.maps.GeocoderStatus.OK);
});
}
panControl: false,
rotateControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
function addDeleteAndLogButtons(map_canvas) {
$("<button/>")
.css({
position: 'absolute',
bottom: '12px',
right: 0,
})
.text('Clear Markers')
.appendTo($(map_canvas).parent())
.click(deleteMarkers);
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: [ 'webmaker_style',
google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ]
},
$("<button/>")
.css({
position: 'absolute',
bottom: '12px',
left: 0,
})
.text('Log Markers')
.appendTo($(map_canvas).parent())
.click(logMarkers);
}
function setColorOptions() {
var styles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// set style immediately (for testing)
//map.setOptions({styles: styles});
var styledMap = new google.maps.StyledMapType(styles, {name: "Webmaker Map"});
map.mapTypes.set('webmaker_style', styledMap);
}
function setupFunctionOverrides() { // TODO: consolidate utils/polyfills
// string helper function to interpolate
if (!String.prototype.interpolate) {
String.prototype.interpolate = function (o) {
return this.replace(
/\{([^{}]*)\}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
}
};
var mcOptions = {
gridSize: 20,
maxZoom: 15, // Don't cluster after this zoom level
// Clicking on a cluster goes to zoom 16,
// we don't want clusters at this level.
imagePath: "/img/map/c",
imageSizes: [43, 43, 43, 43, 43]
};
return (function () {
setupFunctionOverrides();
var mapMaker = new MapMaker($('#map-canvas')[0], mapOptions, mcOptions);
mapMaker.setupInfoWindow();
mapMaker.updateLocation() ;
var mapCenter = new google.maps.LatLng(37.774546, -122.433523);
var mapOptions = {
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter,
EventForms(mapMaker);
panControl: false,
rotateControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: [ 'webmaker_style',
google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var mcOptions = {
gridSize: 20,
maxZoom: 15, // Don't cluster after this zoom level
// Clicking on a cluster goes to zoom 16,
// we don't want clusters at this level.
imagePath: "/img/map/c",
imageSizes: [43, 43, 43, 43, 43]
};
// some stuff I want to keep around, but should be disabled for public releases
var debugging = false
if (debugging) {
addDeleteAndLogButtons();
setColorOptions();
}
var mapMaker = new MapMaker($('#map-canvas')[0], mapOptions, mcOptions);
mapMaker.setupInfoWindow();
mapMaker.updateLocation() ;
EventForms(mapMaker);
return mapMaker;
})();
return mapMaker;
});

14
static/js/events/map/map_maker.js
Просмотреть файл

@ -124,7 +124,7 @@ function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
this.infoWindow.open(this.google_map, marker);
};
MapMaker.prototype.setupAutocomplete = function (input, cityLevel, cb) {
var options = { types: cityLevel ? ['(regions)'] : [] }; // [] is all
var options = { types: cityLevel ? ['(cities)'] : ['geocode', 'establishment'] }; // [] is all
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', this.google_map);
@ -135,6 +135,18 @@ function ($, google, InfoBubble, OverlappingMarkerSpiderfier, MarkerClusterer) {
cb.call(self, place);
});
};
// no-map version
MapMaker.setupAutocomplete = function (input, cityLevel, cb) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: cityLevel ? ['(regions)'] : ['geocode']
});
var self = this;
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
cb.call(self, place);
});
};
MapMaker.prototype.updateLocation = function() {
var google_map = this.google_map;
function getCurrentPosition_success(pos) {

3
views/events/details.html
Просмотреть файл

@ -81,6 +81,9 @@
<span class="edit hidden">
<img class="pin-icon" src="/img/map/pin-event-red.png" />
<input type="text" name="address" class="address" placeholder="{{ event.address }}" />
// NOTE: only let address/latitude/longitude change together
<input name="latitude" type="hidden" />
<input name="longitude" type="hidden" />
</span>
</div>
</div>