app/assets/javascripts/user.js

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