]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/user.js
Merge remote-tracking branch 'upstream/pull/6197'
[rails.git] / app / assets / javascripts / user.js
1 //= require leaflet.locate
2 //= require ./home_location_name-endpoint
3
4 $(function () {
5   const defaultHomeZoom = 12;
6   let map, marker, deleted_lat, deleted_lon, deleted_home_name, homeLocationNameGeocoder, savedLat, savedLon;
7
8   if ($("#social_links").length) {
9     $("#add-social-link").on("click", function () {
10       const newIndex = -Date.now();
11
12       $("#social_links template").contents().clone().appendTo("#social_links")
13         .find("input").attr("name", `user[social_links_attributes][${newIndex}][url]`).trigger("focus");
14
15       renumberSocialLinks();
16     });
17
18     $("#social_links").on("click", "button", function () {
19       const row = $(this).closest(".row");
20       const [destroyCheckbox] = row.find(".social_link_destroy input[type='checkbox']");
21
22       if (destroyCheckbox) {
23         destroyCheckbox.checked = true;
24         row.addClass("d-none");
25       } else {
26         row.remove();
27       }
28
29       renumberSocialLinks();
30     });
31
32     $(".social_link_destroy input[type='checkbox']:checked").each(function () {
33       $(this).closest(".row").addClass("d-none");
34     });
35
36     renumberSocialLinks();
37   }
38
39   function renumberSocialLinks() {
40     $("#social_links .row:not(.d-none)").each(function (i) {
41       const inputLabel = OSM.i18n.t("javascripts.profile.social_link_n", { n: i + 1 });
42       const removeButtonLabel = OSM.i18n.t("javascripts.profile.remove_social_link_n", { n: i + 1 });
43
44       $(this).find("input[type='text']")
45         .attr("placeholder", inputLabel)
46         .attr("aria-label", inputLabel);
47       $(this).find("button")
48         .attr("title", removeButtonLabel);
49     });
50   }
51
52   if ($("#map").length) {
53     map = L.map("map", {
54       attributionControl: false,
55       zoomControl: false
56     }).addLayer(new L.OSM.Mapnik());
57
58     savedLat = $("#home_lat").val();
59     savedLon = $("#home_lon").val();
60     homeLocationNameGeocoder = OSM.HomeLocationNameGeocoder($("#home_lat"), $("#home_lon"), $("#home_location_name"));
61
62     const position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
63
64     L.OSM.zoom({ position }).addTo(map);
65
66     L.OSM.locate({ position }).addTo(map);
67
68     if (OSM.home) {
69       map.setView([OSM.home.lat, OSM.home.lon], defaultHomeZoom);
70     } else {
71       map.setView([0, 0], 0);
72     }
73
74     marker = L.marker([0, 0], {
75       icon: OSM.getMarker({}),
76       keyboard: false,
77       interactive: false
78     });
79
80     if (OSM.home) {
81       marker.setLatLng([OSM.home.lat, OSM.home.lon]);
82       marker.addTo(map);
83     }
84
85     map.on("click", function (e) {
86       if (!$("#updatehome").is(":checked")) return;
87
88       const [lat, lon] = OSM.cropLocation(e.latlng, map.getZoom());
89
90       $("#home_lat").val(lat);
91       $("#home_lon").val(lon);
92
93       clearDeletedText();
94       respondToHomeLatLonUpdate();
95     }).on("moveend", function () {
96       const lat = $("#home_lat").val().trim(),
97             lon = $("#home_lon").val().trim();
98       let location;
99
100       try {
101         if (lat && lon) {
102           location = L.latLng(lat, lon);
103         }
104       } catch (error) {
105         // keep location undefined
106       }
107
108       $("#home_show").prop("disabled", !location || isCloseEnoughToMapCenter(location));
109     });
110
111     $("#home_lat, #home_lon").on("input", function () {
112       clearDeletedText();
113       respondToHomeLatLonUpdate();
114     });
115
116     $("#home_location_name").on("input", function () {
117       homeLocationNameGeocoder.autofill = false;
118       clearDeletedText();
119
120       respondToHomeLatLonUpdate(false);
121     });
122
123     $("#home_show").click(function () {
124       const lat = $("#home_lat").val(),
125             lon = $("#home_lon").val();
126
127       map.setView([lat, lon], defaultHomeZoom);
128     });
129
130     $("#home_delete").click(function () {
131       const lat = $("#home_lat").val(),
132             lon = $("#home_lon").val(),
133             locationName = $("#home_location_name").val();
134
135       $("#home_lat, #home_lon, #home_location_name").val("");
136       deleted_lat = lat;
137       deleted_lon = lon;
138       deleted_home_name = locationName;
139
140       respondToHomeLatLonUpdate(false);
141       $("#home_undelete").trigger("focus");
142     });
143
144     $("#home_undelete").click(function () {
145       $("#home_lat").val(deleted_lat);
146       $("#home_lon").val(deleted_lon);
147       $("#home_location_name").val(deleted_home_name);
148       clearDeletedText();
149
150       respondToHomeLatLonUpdate(false);
151       $("#home_delete").trigger("focus");
152     });
153   }
154
155   function respondToHomeLatLonUpdate(updateLocationName = true) {
156     const lat = $("#home_lat").val().trim(),
157           lon = $("#home_lon").val().trim(),
158           locationName = $("#home_location_name").val().trim();
159     let location;
160
161     try {
162       if (lat && lon) {
163         location = L.latLng(lat, lon);
164         if (updateLocationName) {
165           if (savedLat && savedLon && $("#home_location_name").val().trim()) {
166             homeLocationNameGeocoder.updateHomeLocationName(false, savedLat, savedLon, () => {
167               savedLat = savedLon = null;
168               homeLocationNameGeocoder.updateHomeLocationName();
169             });
170           } else {
171             savedLat = savedLon = null;
172             homeLocationNameGeocoder.updateHomeLocationName();
173           }
174         }
175       }
176       $("#home_lat, #home_lon").removeClass("is-invalid");
177     } catch (error) {
178       if (lat && isNaN(lat)) $("#home_lat").addClass("is-invalid");
179       if (lon && isNaN(lon)) $("#home_lon").addClass("is-invalid");
180     }
181
182     $("#home_message").toggleClass("invisible", Boolean(location));
183     $("#home_show").prop("hidden", !location);
184     $("#home_delete").prop("hidden", !location && !locationName);
185     $("#home_undelete").prop("hidden", !(
186       (!location || !locationName) &&
187       ((deleted_lat && deleted_lon) || deleted_home_name)
188     ));
189     if (location) {
190       marker.setLatLng([lat, lon]);
191       marker.addTo(map);
192       map.panTo([lat, lon]);
193     } else {
194       marker.removeFrom(map);
195     }
196   }
197
198   function isCloseEnoughToMapCenter(location) {
199     const inputPt = map.latLngToContainerPoint(location),
200           centerPt = map.latLngToContainerPoint(map.getCenter());
201
202     return centerPt.distanceTo(inputPt) < 10;
203   }
204
205   function clearDeletedText() {
206     deleted_lat = null;
207     deleted_lon = null;
208     deleted_home_name = null;
209   }
210
211   $("input#user_avatar").on("change", function () {
212     $("#user_avatar_action_new").prop("checked", true);
213   });
214
215   $("#content.user_confirm").each(function () {
216     $(this).hide();
217     $(this).find("#confirm").submit();
218   });
219
220   $("input[name=legale]").change(function () {
221     $("#contributorTerms").html("<div class='spinner-border' role='status'><span class='visually-hidden'>" + OSM.i18n.t("browse.start_rjs.loading") + "</span></div>");
222     fetch(this.dataset.url, { headers: { "x-requested-with": "XMLHttpRequest" } })
223       .then(r => r.text())
224       .then(html => { $("#contributorTerms").html(html); });
225   });
226
227   $("#read_ct").on("click", function () {
228     $("#continue").prop("disabled", !($(this).prop("checked") && $("#read_tou").prop("checked")));
229   });
230
231   $("#read_tou").on("click", function () {
232     $("#continue").prop("disabled", !($(this).prop("checked") && $("#read_ct").prop("checked")));
233   });
234 });