app/assets/javascripts/user.js

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