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 });