app/assets/javascripts/user.js

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