From 3f61b8c9036ad73cc582bf26ba2025c80770a212 Mon Sep 17 00:00:00 2001 From: Sebastiaan Janssen Date: Thu, 1 Sep 2016 18:43:18 +0200 Subject: [PATCH] Re-populate location after submit with errors Move css and js into their own files --- OurUmbraco.Site/OurUmbraco.Site.csproj | 2 + .../Views/Partials/Members/Register.cshtml | 194 +----------------- OurUmbraco.Site/css/register.css | 98 +++++++++ OurUmbraco.Site/scripts/register.js | 110 ++++++++++ 4 files changed, 212 insertions(+), 192 deletions(-) create mode 100644 OurUmbraco.Site/css/register.css create mode 100644 OurUmbraco.Site/scripts/register.js diff --git a/OurUmbraco.Site/OurUmbraco.Site.csproj b/OurUmbraco.Site/OurUmbraco.Site.csproj index 6be59ffa..28642d74 100644 --- a/OurUmbraco.Site/OurUmbraco.Site.csproj +++ b/OurUmbraco.Site/OurUmbraco.Site.csproj @@ -479,6 +479,7 @@ + @@ -687,6 +688,7 @@ + diff --git a/OurUmbraco.Site/Views/Partials/Members/Register.cshtml b/OurUmbraco.Site/Views/Partials/Members/Register.cshtml index ac0dab0c..fa8a9c52 100644 --- a/OurUmbraco.Site/Views/Partials/Members/Register.cshtml +++ b/OurUmbraco.Site/Views/Partials/Members/Register.cshtml @@ -47,7 +47,6 @@ @Html.HiddenFor(m => m.Location) @Html.HiddenFor(m => m.Latitude) @Html.HiddenFor(m => m.Longitude) -
@@ -67,195 +66,6 @@ - - + - - \ No newline at end of file + \ No newline at end of file diff --git a/OurUmbraco.Site/css/register.css b/OurUmbraco.Site/css/register.css new file mode 100644 index 00000000..9bc0dfb8 --- /dev/null +++ b/OurUmbraco.Site/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; + } \ No newline at end of file diff --git a/OurUmbraco.Site/scripts/register.js b/OurUmbraco.Site/scripts/register.js new file mode 100644 index 00000000..faf4f82a --- /dev/null +++ b/OurUmbraco.Site/scripts/register.js @@ -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); + }); +} \ No newline at end of file