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