Re-populate location after submit with errors
Move css and js into their own files
This commit is contained in:
Sebastiaan Janssen
@@ -479,6 +479,7 @@
|
||||
<Content Include="css\jquery.ui.core.css" />
|
||||
<Content Include="css\jquery.ui.slider.css" />
|
||||
<Content Include="css\jquery.ui.theme.css" />
|
||||
<Content Include="css\register.css" />
|
||||
<Content Include="css\search\documentation.gif" />
|
||||
<Content Include="css\select2-new.css" />
|
||||
<Content Include="css\select2.css" />
|
||||
@@ -687,6 +688,7 @@
|
||||
<Content Include="scripts\jquery.validate.min.js" />
|
||||
<Content Include="scripts\jquery.validate.unobtrusive.js" />
|
||||
<Content Include="scripts\jquery.validate.unobtrusive.min.js" />
|
||||
<Content Include="scripts\register.js" />
|
||||
<Content Include="scripts\shadowbox\languages\README" />
|
||||
<Content Include="scripts\shadowbox\libraries\sizzle\sizzle.js" />
|
||||
<Content Include="scripts\shadowbox\players\README" />
|
||||
|
||||
@@ -47,7 +47,6 @@
|
||||
@Html.HiddenFor(m => m.Location)
|
||||
@Html.HiddenFor(m => m.Latitude)
|
||||
@Html.HiddenFor(m => m.Longitude)
|
||||
|
||||
<div id="map"></div>
|
||||
<input id="pac-input" class="controls" type="text" placeholder="Search for your location">
|
||||
</div>
|
||||
@@ -67,195 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Largely copied from the example at: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
|
||||
function initAutocomplete() {
|
||||
var map = new google.maps.Map(document.getElementById('map'),
|
||||
{
|
||||
center: { lat: 0, lng: 0 },
|
||||
zoom: 1,
|
||||
zoomControl: false,
|
||||
mapTypeControl: false,
|
||||
streetViewControl: false,
|
||||
scaleControl: false
|
||||
});
|
||||
|
||||
// Create the search box and link it to the UI element.
|
||||
var input = document.getElementById('pac-input');
|
||||
var searchBox = new google.maps.places.SearchBox(input);
|
||||
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
||||
|
||||
// Don't submit the form on pressing enter
|
||||
input.onkeypress = function (e) {
|
||||
var key = e.charCode || e.keyCode || 0;
|
||||
if (key === 13) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
$('#pac-input').css('display', 'block');
|
||||
|
||||
// Bias the SearchBox results towards current map's viewport.
|
||||
map.addListener('bounds_changed',
|
||||
function () {
|
||||
searchBox.setBounds(map.getBounds());
|
||||
});
|
||||
|
||||
var markers = [];
|
||||
// Listen for the event fired when the user selects a prediction and retrieve
|
||||
// more details for that place.
|
||||
searchBox.addListener('places_changed',
|
||||
function () {
|
||||
var places = searchBox.getPlaces();
|
||||
|
||||
if (places.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear out the old markers.
|
||||
markers.forEach(function (marker) {
|
||||
marker.setMap(null);
|
||||
});
|
||||
markers = [];
|
||||
|
||||
// For each place, get the icon, name and location.
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
places.forEach(function (place) {
|
||||
if (!place.geometry) {
|
||||
console.log("Returned place contains no geometry");
|
||||
return;
|
||||
}
|
||||
var icon = {
|
||||
url: place.icon,
|
||||
size: new google.maps.Size(71, 71),
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(17, 34),
|
||||
scaledSize: new google.maps.Size(25, 25)
|
||||
};
|
||||
|
||||
// Create a marker for each place.
|
||||
markers.push(new google.maps.Marker({
|
||||
map: map,
|
||||
icon: icon,
|
||||
title: place.name,
|
||||
position: place.geometry.location
|
||||
}));
|
||||
|
||||
document.getElementById("Location").value = place.formatted_address;
|
||||
document.getElementById("Latitude").value = place.geometry.location.lat();
|
||||
document.getElementById("Longitude").value = place.geometry.location.lng();
|
||||
|
||||
if (place.geometry.viewport) {
|
||||
// Only geocodes have viewport.
|
||||
bounds.union(place.geometry.viewport);
|
||||
} else {
|
||||
bounds.extend(place.geometry.location);
|
||||
}
|
||||
});
|
||||
map.fitBounds(bounds);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="/scripts/register.js"></script>
|
||||
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASbfPWsRxZgSnmH2jaQlrWNE7VTV5QuwI&libraries=places&callback=initAutocomplete"></script>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
height: 32px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#pac-input {
|
||||
background-color: #fff;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
margin-left: 12px;
|
||||
padding: 0 11px 0 13px;
|
||||
text-overflow: ellipsis;
|
||||
width: 470px !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pac-input:focus {
|
||||
border-color: #4d90fe;
|
||||
}
|
||||
|
||||
.pac-container {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
#type-selector {
|
||||
color: #fff;
|
||||
background-color: #4d90fe;
|
||||
padding: 5px 11px 0px 11px;
|
||||
}
|
||||
|
||||
#type-selector label {
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 345px;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 500px;
|
||||
height: 460px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#registrationForm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#registrationForm label {
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#registrationForm .profile-input em {
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#registrationForm input.button {
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#terms-conditions input {
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#terms-conditions {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#terms-conditions label {
|
||||
padding-top: 1px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.field-validation-error {
|
||||
color: red;
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.input-validation-error {
|
||||
border-color: red !important;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="/css/register.css" />
|
||||
@@ -0,0 +1,98 @@
|
||||
.controls {
|
||||
margin-top: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
height: 32px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#pac-input {
|
||||
background-color: #fff;
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
margin-left: 12px;
|
||||
padding: 0 11px 0 13px;
|
||||
text-overflow: ellipsis;
|
||||
width: 470px !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pac-input:focus {
|
||||
border-color: #4d90fe;
|
||||
}
|
||||
|
||||
.pac-container {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
#type-selector {
|
||||
color: #fff;
|
||||
background-color: #4d90fe;
|
||||
padding: 5px 11px 0px 11px;
|
||||
}
|
||||
|
||||
#type-selector label {
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 345px;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 500px;
|
||||
height: 460px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#registrationForm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#registrationForm label {
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#registrationForm .profile-input em {
|
||||
margin: 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#registrationForm input.button {
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#terms-conditions input {
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#terms-conditions {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#terms-conditions label {
|
||||
padding-top: 1px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.field-validation-error {
|
||||
color: red;
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.input-validation-error {
|
||||
border-color: red !important;
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
// Largely copied from the example at: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
|
||||
function initAutocomplete() {
|
||||
var markers = [];
|
||||
var lat = document.getElementById("Latitude").value;
|
||||
var lon = document.getElementById("Longitude").value;
|
||||
|
||||
if (lat === "") { lat = 0; }
|
||||
if (lon === "") { lon = 0; }
|
||||
|
||||
var zoom = 1;
|
||||
if (lat !== 0 && lon !== 0) { zoom = 10; }
|
||||
|
||||
var latlng = new google.maps.LatLng(lat, lon);
|
||||
var myOptions = {
|
||||
zoom: zoom,
|
||||
center: latlng,
|
||||
zoomControl: false,
|
||||
mapTypeControl: false,
|
||||
streetViewControl: false,
|
||||
scaleControl: false
|
||||
};
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('map'), myOptions);
|
||||
|
||||
var input = document.getElementById('pac-input');
|
||||
|
||||
if (lat !== 0 && lon !== 0) {
|
||||
var location = document.getElementById("Location").value;
|
||||
markers.push(new google.maps.Marker({
|
||||
map: map,
|
||||
position: latlng,
|
||||
title: document.getElementById("Location").value
|
||||
}));
|
||||
|
||||
input.value = location;
|
||||
}
|
||||
|
||||
// Create the search box and link it to the UI element.
|
||||
var searchBox = new google.maps.places.SearchBox(input);
|
||||
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
||||
|
||||
// Don't submit the form on pressing enter
|
||||
input.onkeypress = function (e) {
|
||||
var key = e.charCode || e.keyCode || 0;
|
||||
if (key === 13) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
$('#pac-input').css('display', 'block');
|
||||
|
||||
// Bias the SearchBox results towards current map's viewport.
|
||||
map.addListener('bounds_changed',
|
||||
function () {
|
||||
searchBox.setBounds(map.getBounds());
|
||||
});
|
||||
|
||||
// Listen for the event fired when the user selects a prediction and retrieve
|
||||
// more details for that place.
|
||||
searchBox.addListener('places_changed',
|
||||
function () {
|
||||
var places = searchBox.getPlaces();
|
||||
|
||||
if (places.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear out the old markers.
|
||||
markers.forEach(function (marker) {
|
||||
marker.setMap(null);
|
||||
});
|
||||
markers = [];
|
||||
|
||||
// For each place, get the icon, name and location.
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
places.forEach(function (place) {
|
||||
if (!place.geometry) {
|
||||
console.log("Returned place contains no geometry");
|
||||
return;
|
||||
}
|
||||
var icon = {
|
||||
url: place.icon,
|
||||
size: new google.maps.Size(71, 71),
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(17, 34),
|
||||
scaledSize: new google.maps.Size(25, 25)
|
||||
};
|
||||
|
||||
// Create a marker for each place.
|
||||
markers.push(new google.maps.Marker({
|
||||
map: map,
|
||||
icon: icon,
|
||||
title: place.name,
|
||||
position: place.geometry.location
|
||||
}));
|
||||
|
||||
document.getElementById("Location").value = place.formatted_address;
|
||||
document.getElementById("Latitude").value = place.geometry.location.lat();
|
||||
document.getElementById("Longitude").value = place.geometry.location.lng();
|
||||
|
||||
if (place.geometry.viewport) {
|
||||
// Only geocodes have viewport.
|
||||
bounds.union(place.geometry.viewport);
|
||||
} else {
|
||||
bounds.extend(place.geometry.location);
|
||||
}
|
||||
});
|
||||
map.fitBounds(bounds);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user