X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/0e98e2a33733915f55bb5483afce5d7da1a43b7c..356738e5c502b6907864ac1f0fed23bbbb5780c0:/app/assets/javascripts/user.js diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js index 68b399867..681ec3ace 100644 --- a/app/assets/javascripts/user.js +++ b/app/assets/javascripts/user.js @@ -1,6 +1,13 @@ //= require leaflet.locatecontrol/src/L.Control.Locate +(function () { + $(document).on("change", "#user_all", function () { + $("#user_list input[type=checkbox]").prop("checked", $("#user_all").prop("checked")); + }); +}()); + $(document).ready(function () { + var defaultHomeZoom = 12; var map, marker, deleted_lat, deleted_lon; if ($("#map").length) { @@ -37,13 +44,17 @@ $(document).ready(function () { .addClass("control-button"); if (OSM.home) { - map.setView([OSM.home.lat, OSM.home.lon], 12); + map.setView([OSM.home.lat, OSM.home.lon], defaultHomeZoom); } else { map.setView([0, 0], 0); } if ($("#map").hasClass("set_location")) { - marker = L.marker([0, 0], { icon: OSM.getUserIcon() }); + marker = L.marker([0, 0], { + icon: OSM.getUserIcon(), + keyboard: false, + interactive: false + }); if (OSM.home) { marker.setLatLng([OSM.home.lat, OSM.home.lon]); @@ -63,6 +74,20 @@ $(document).ready(function () { deleted_lat = null; deleted_lon = null; respondToHomeUpdate(); + }).on("moveend", function () { + var lat = $("#home_lat").val().trim(), + lon = $("#home_lon").val().trim(), + location; + + try { + if (lat && lon) { + location = L.latLng(lat, lon); + } + } catch (error) { + // keep location undefined + } + + $("#home_show").prop("disabled", !location || isCloseEnoughToMapCenter(location)); }); $("#home_lat, #home_lon").on("input", function () { @@ -75,7 +100,7 @@ $(document).ready(function () { var lat = $("#home_lat").val(), lon = $("#home_lon").val(); - map.panTo([lat, lon]); + map.setView([lat, lon], defaultHomeZoom); }); $("#home_delete").click(function () { @@ -86,6 +111,7 @@ $(document).ready(function () { deleted_lat = lat; deleted_lon = lon; respondToHomeUpdate(); + $("#home_undelete").trigger("focus"); }); $("#home_undelete").click(function () { @@ -94,28 +120,39 @@ $(document).ready(function () { deleted_lat = null; deleted_lon = null; respondToHomeUpdate(); + $("#home_delete").trigger("focus"); }); } else { $("[data-user]").each(function () { var user = $(this).data("user"); if (user.lon && user.lat) { L.marker([user.lat, user.lon], { icon: OSM.getUserIcon(user.icon) }).addTo(map) - .bindPopup(user.description); + .bindPopup(user.description, { minWidth: 200 }); } }); } } function respondToHomeUpdate() { - var lat = $("#home_lat").val(), - lon = $("#home_lon").val(), - has_home = !!(lat && lon); - - $("#home_message").toggleClass("invisible", has_home); - $("#home_show").prop("hidden", !has_home); - $("#home_delete").prop("hidden", !has_home); - $("#home_undelete").prop("hidden", !(!has_home && deleted_lat && deleted_lon)); - if (has_home) { + var lat = $("#home_lat").val().trim(), + lon = $("#home_lon").val().trim(), + location; + + try { + if (lat && lon) { + location = L.latLng(lat, lon); + } + $("#home_lat, #home_lon").removeClass("is-invalid"); + } catch (error) { + if (lat && isNaN(lat)) $("#home_lat").addClass("is-invalid"); + if (lon && isNaN(lon)) $("#home_lon").addClass("is-invalid"); + } + + $("#home_message").toggleClass("invisible", Boolean(location)); + $("#home_show").prop("hidden", !location); + $("#home_delete").prop("hidden", !location); + $("#home_undelete").prop("hidden", !(!location && deleted_lat && deleted_lon)); + if (location) { marker.setLatLng([lat, lon]); marker.addTo(map); map.panTo([lat, lon]); @@ -124,6 +161,13 @@ $(document).ready(function () { } } + function isCloseEnoughToMapCenter(location) { + var inputPt = map.latLngToContainerPoint(location), + centerPt = map.latLngToContainerPoint(map.getCenter()); + + return centerPt.distanceTo(inputPt) < 10; + } + function updateAuthUID() { var provider = $("select#user_auth_provider").val(); @@ -162,10 +206,6 @@ $(document).ready(function () { enableAuth(); } - $("#user_all").change(function () { - $("#user_list input[type=checkbox]").prop("checked", $("#user_all").prop("checked")); - }); - $("#content.user_confirm").each(function () { $(this).hide(); $(this).find("#confirm").submit();