choteaumt
/
adopt-a-hydrant
mirror of https://github.com/choteaumt/adopt-a-hydrant.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor JavaScript

This commit is contained in:
Erik Michaels-Ober 2012-01-14 11:59:59 -08:00
parent 09aac40d1c
commit 5d8463c7ad
1 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
app/assets/javascripts/main.js.erb
View File

@ -4,35 +4,45 @@ $(function() {
var mapOptions = { var mapOptions = {
center: center, center: center,
mapTypeControl: false, mapTypeControl: false,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false, panControl: false,
scrollwheel: false, scrollwheel: false,
zoom: zoomLevel zoom: zoomLevel,
}; zoomControl: false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions); var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var greenMarkerImage = new google.maps.MarkerImage('<%= image_path 'markers/green.png' %>',
new google.maps.Size(27.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
var redMarkerImage = new google.maps.MarkerImage('<%= image_path 'markers/red.png' %>',
new google.maps.Size(27.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
var markerShadowImage = new google.maps.MarkerImage('<%= image_path 'markers/shadow.png' %>',
new google.maps.Size(46.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
var activeThingId; var activeThingId;
var activeMarker; var activeMarker;
var activeInfoWindow; var activeInfoWindow;
var isWindowOpen = false; var isWindowOpen = false;
var thingIds = []; var thingIds = [];
function addMarker(thingId, point, image_path) { function addMarker(thingId, point, color) {
var image = new google.maps.MarkerImage(image_path, if(color == 'green') {
new google.maps.Size(27.0, 37.0), var image = greenMarkerImage;
new google.maps.Point(0, 0), } else if(color == 'red') {
new google.maps.Point(13.0, 18.0) var image = redMarkerImage;
); }
var shadow = new google.maps.MarkerImage('<%= image_path 'markers/shadow.png' %>',
new google.maps.Size(46.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
var marker = new google.maps.Marker({ var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP, animation: google.maps.Animation.DROP,
icon: image, icon: image,
map: map, map: map,
position: point, position: point,
shadow: shadow shadow: markerShadowImage
}); });
google.maps.event.addListener(marker, 'click', function() { google.maps.event.addListener(marker, 'click', function() {
if(activeInfoWindow) { if(activeInfoWindow) {
@ -66,6 +76,7 @@ $(function() {
thingIds.push(thingId); thingIds.push(thingId);
} }
function addMarkersAround(lat, lng) { function addMarkersAround(lat, lng) {
var submitButton = $("#address_form input[type='submit']");
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: '/things.json', url: '/things.json',
@ -76,7 +87,11 @@ $(function() {
'lng': lng, 'lng': lng,
'limit': $('#address_form input[name="limit"]').val() 'limit': $('#address_form input[name="limit"]').val()
}, },
error: function(jqXHR) {
$(submitButton).attr("disabled", false);
},
success: function(data) { success: function(data) {
$(submitButton).attr("disabled", false);
if(data.errors) { if(data.errors) {
$('#address_label').addClass('error', 500); $('#address_label').addClass('error', 500);
$('#address').addClass('error', 500); $('#address').addClass('error', 500);
@ -93,37 +108,29 @@ $(function() {
return true; return true;
} }
setTimeout(function() { setTimeout(function() {
point = new google.maps.LatLng(thing.lat, thing.lng); var point = new google.maps.LatLng(thing.lat, thing.lng);
if(thing.user_id) { if(thing.user_id) {
image_path = '<%= image_path 'markers/green.png' %>'; var color = 'green';
} else { } else {
image_path = '<%= image_path 'markers/red.png' %>'; var color = 'red';
} }
addMarker(thing.id, point, image_path); addMarker(thing.id, point, color);
}, i * 100); }, i * 100);
}); });
center = new google.maps.LatLng(lat, lng);
map.setCenter(center);
map.setZoom(18); map.setZoom(18);
} }
} }
}); });
} }
google.maps.event.addListener(map, 'dragend', function() { google.maps.event.addListener(map, 'dragend', function() {
if(isWindowOpen == true) { var center = map.getCenter();
return;
}
center = map.getCenter();
addMarkersAround(center.lat(), center.lng()); addMarkersAround(center.lat(), center.lng());
}); });
$('#address_form').live('submit', function() { $('#address_form').live('submit', function() {
var submitButton = $("#address_form input[type='submit']"); var submitButton = $("#address_form input[type='submit']");
$(submitButton).attr("disabled", true); $(submitButton).attr("disabled", true);
var submitButtonText = $(submitButton).attr("value");
$(submitButton).attr("value", "Please Wait...");
if($('#address').val() === '') { if($('#address').val() === '') {
$(submitButton).attr("disabled", false); $(submitButton).attr("disabled", false);
$(submitButton).attr("value", submitButtonText);
$('#address_label').addClass('error', 500); $('#address_label').addClass('error', 500);
$('#address').addClass('error', 500); $('#address').addClass('error', 500);
$('#address').focus(); $('#address').focus();
@ -137,15 +144,24 @@ $(function() {
'city_state': $('#city_state').val(), 'city_state': $('#city_state').val(),
'address': $('#address').val() 'address': $('#address').val()
}, },
error: function(jqXHR) {
$(submitButton).attr("disabled", false);
$('#address_label').addClass('error', 500);
$('#address').addClass('error', 500);
$('#address').focus();
},
success: function(data) { success: function(data) {
$(submitButton).attr("disabled", false); $(submitButton).attr("disabled", false);
$(submitButton).attr("value", submitButtonText);
if(data.errors) { if(data.errors) {
$('#address_label').addClass('error', 500); $('#address_label').addClass('error', 500);
$('#address').addClass('error', 500); $('#address').addClass('error', 500);
$('#address').focus(); $('#address').focus();
} else { } else {
$('#address_label').removeClass('error', 500);
$('#address').removeClass('error', 500);
addMarkersAround(data[0], data[1]); addMarkersAround(data[0], data[1]);
var center = new google.maps.LatLng(data[0], data[1]);
map.setCenter(center);
} }
} }
}); });
@ -162,15 +178,15 @@ $(function() {
}); });
} }
$('#combo-form input[type="radio"]').live('click', function() { $('#combo-form input[type="radio"]').live('click', function() {
var self = $(this); var radioInput = $(this);
if('new' == self.val()) { if('new' == radioInput.val()) {
$('#combo-form').data('state', 'user_sign_up'); $('#combo-form').data('state', 'user_sign_up');
$('#user_forgot_password_fields').slideUp(); $('#user_forgot_password_fields').slideUp();
$('#user_sign_in_fields').slideUp(); $('#user_sign_in_fields').slideUp();
$('#user_sign_up_fields').slideDown(function() { $('#user_sign_up_fields').slideDown(function() {
setComboFormFocus(); setComboFormFocus();
}); });
} else if('existing' == self.val()) { } else if('existing' == radioInput.val()) {
$('#user_sign_up_fields').slideUp(); $('#user_sign_up_fields').slideUp();
$('#user_sign_in_fields').slideDown(function() { $('#user_sign_in_fields').slideDown(function() {
$('#combo-form').data('state', 'user_sign_in'); $('#combo-form').data('state', 'user_sign_in');
@ -242,7 +258,7 @@ $(function() {
} }
}, },
error: function(jqXHR) { error: function(jqXHR) {
data = $.parseJSON(jqXHR.responseText); var data = $.parseJSON(jqXHR.responseText);
$(submitButton).attr("disabled", false); $(submitButton).attr("disabled", false);
if(data.errors.email) { if(data.errors.email) {
errors.push($('#user_email')); errors.push($('#user_email'));
@ -407,12 +423,7 @@ $(function() {
}, },
success: function(data) { success: function(data) {
activeInfoWindow.setContent(data); activeInfoWindow.setContent(data);
image = new google.maps.MarkerImage('<%= image_path 'markers/green.png' %>', activeMarker.setIcon(greenMarkerImage);
new google.maps.Size(27.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
activeMarker.setIcon(image);
activeMarker.setAnimation(google.maps.Animation.BOUNCE); activeMarker.setAnimation(google.maps.Animation.BOUNCE);
} }
}); });
@ -459,12 +470,7 @@ $(function() {
}, },
success: function(data) { success: function(data) {
activeInfoWindow.setContent(data); activeInfoWindow.setContent(data);
image = new google.maps.MarkerImage('<%= image_path 'markers/red.png' %>', activeMarker.setIcon(redMarkerImage);
new google.maps.Size(27.0, 37.0),
new google.maps.Point(0, 0),
new google.maps.Point(13.0, 18.0)
);
activeMarker.setIcon(image);
activeMarker.setAnimation(null); activeMarker.setAnimation(null);
} }
}); });
@ -566,7 +572,7 @@ $(function() {
} }
}, },
error: function(jqXHR) { error: function(jqXHR) {
data = $.parseJSON(jqXHR.responseText); var data = $.parseJSON(jqXHR.responseText);
$(submitButton).attr("disabled", false); $(submitButton).attr("disabled", false);
if(data.errors.email) { if(data.errors.email) {
errors.push($('#user_email')); errors.push($('#user_email'));