app/assets/javascripts/index.js

   1 //= require_self
   2 //= require numbered_pagination
   3 //= require leaflet.sidebar
   4 //= require leaflet.sidebar-pane
   5 //= require leaflet.locate
   6 //= require leaflet.layers
   7 //= require leaflet.legend
   8 //= require leaflet.note
   9 //= require leaflet.share
  10 //= require leaflet.polyline
  11 //= require leaflet.query
  12 //= require index/contextmenu
  13 //= require index/search
  14 //= require index/layers/data
  15 //= require index/export
  16 //= require index/layers/notes
  17 //= require index/history
  18 //= require index/note
  19 //= require index/new_note
  20 //= require index/directions
  21 //= require index/changeset
  22 //= require index/query
  23 //= require index/home
  24 //= require index/element
  25 //= require router
  26
  27 $(function () {
  28   const map = new L.OSM.Map("map", {
  29     zoomControl: false,
  30     layerControl: false,
  31     contextmenu: true,
  32     worldCopyJump: true
  33   });
  34
  35   OSM.loadSidebarContent = function (path, callback) {
  36     let content_path = path;
  37
  38     map.setSidebarOverlaid(false);
  39
  40     $("#sidebar_loader").prop("hidden", false).addClass("delayed-fade-in");
  41
  42     // Prevent caching the XHR response as a full-page URL
  43     // https://github.com/openstreetmap/openstreetmap-website/issues/5663
  44     if (content_path.indexOf("?") >= 0) {
  45       content_path += "&xhr=1";
  46     } else {
  47       content_path += "?xhr=1";
  48     }
  49
  50     $("#sidebar_content")
  51       .empty();
  52
  53     fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } })
  54       .then(response => {
  55         $("#flash").empty();
  56         $("#sidebar_loader").removeClass("delayed-fade-in").prop("hidden", true);
  57
  58         const title = response.headers.get("X-Page-Title");
  59         if (title) document.title = decodeURIComponent(title);
  60
  61         return response.text();
  62       })
  63       .then(html => {
  64         const content = $(html);
  65
  66         $("head")
  67           .find("link[type=\"application/atom+xml\"]")
  68           .remove();
  69
  70         $("head")
  71           .append(content.filter("link[type=\"application/atom+xml\"]"));
  72
  73         $("#sidebar_content").html(content.not("link[type=\"application/atom+xml\"]"));
  74
  75         if (callback) {
  76           callback();
  77         }
  78       });
  79   };
  80
  81   const token = $("head").data("oauthToken");
  82   if (token) OSM.oauth = { authorization: "Bearer " + token };
  83
  84   const params = OSM.mapParams();
  85
  86   map.attributionControl.setPrefix("");
  87
  88   map.updateLayers(params.layers);
  89
  90   map.on("baselayerchange", function (e) {
  91     if (map.getZoom() > e.layer.options.maxZoom) {
  92       map.setView(map.getCenter(), e.layer.options.maxZoom, { reset: true });
  93     }
  94   });
  95
  96   const sidebar = L.OSM.sidebar("#map-ui")
  97     .addTo(map);
  98
  99   const position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
 100
 101   function addControlGroup(controls) {
 102     for (const control of controls) control.addTo(map);
 103
 104     const firstContainer = controls[0].getContainer();
 105     $(firstContainer).find(".control-button").first()
 106       .addClass("control-button-first");
 107
 108     const lastContainer = controls[controls.length - 1].getContainer();
 109     $(lastContainer).find(".control-button").last()
 110       .addClass("control-button-last");
 111   }
 112
 113   addControlGroup([
 114     L.OSM.zoom({ position }),
 115     L.OSM.locate({ position })
 116   ]);
 117
 118   addControlGroup([
 119     L.OSM.layers({
 120       position,
 121       sidebar,
 122       layers: map.baseLayers
 123     }),
 124     L.OSM.legend({ position, sidebar }),
 125     L.OSM.share({
 126       position,
 127       sidebar,
 128       "short": true
 129     })
 130   ]);
 131
 132   addControlGroup([
 133     L.OSM.note({ position, sidebar })
 134   ]);
 135
 136   addControlGroup([
 137     L.OSM.query({ position, sidebar })
 138   ]);
 139
 140   L.control.scale()
 141     .addTo(map);
 142
 143   OSM.initializeContextMenu(map);
 144
 145   if (OSM.STATUS !== "api_offline" && OSM.STATUS !== "database_offline") {
 146     OSM.initializeNotesLayer(map);
 147     if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
 148       map.addLayer(map.noteLayer);
 149     }
 150
 151     OSM.initializeDataLayer(map);
 152     if (params.layers.indexOf(map.dataLayer.options.code) >= 0) {
 153       map.addLayer(map.dataLayer);
 154     }
 155
 156     if (params.layers.indexOf(map.gpsLayer.options.code) >= 0) {
 157       map.addLayer(map.gpsLayer);
 158     }
 159   }
 160
 161   $(".leaflet-control .control-button").tooltip({ placement: "left", container: "body" });
 162
 163   const expiry = new Date();
 164   expiry.setYear(expiry.getFullYear() + 10);
 165
 166   map.on("moveend baselayerchange overlayadd overlayremove", function () {
 167     updateLinks(
 168       map.getCenter().wrap(),
 169       map.getZoom(),
 170       map.getLayersCode(),
 171       map._object);
 172
 173     OSM.cookies.set("_osm_location", OSM.locationCookie(map), { expires: expiry });
 174   });
 175
 176   if (OSM.cookies.get("_osm_welcome") !== "hide") {
 177     $(".welcome").removeAttr("hidden");
 178   }
 179
 180   $(".welcome .btn-close").on("click", function () {
 181     $(".welcome").hide();
 182     OSM.cookies.set("_osm_welcome", "hide", { expires: expiry });
 183   });
 184
 185   const bannerExpiry = new Date();
 186   bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
 187
 188   $("#banner .btn-close").on("click", function (e) {
 189     const cookieId = e.target.id;
 190     $("#banner").hide();
 191     e.preventDefault();
 192     if (cookieId) {
 193       OSM.cookies.set(cookieId, "hide", { expires: bannerExpiry });
 194     }
 195   });
 196
 197   if (OSM.MATOMO) {
 198     map.on("baselayerchange overlayadd", function (e) {
 199       if (e.layer.options) {
 200         const goal = OSM.MATOMO.goals[e.layer.options.layerId];
 201
 202         if (goal) {
 203           $("body").trigger("matomogoal", goal);
 204         }
 205       }
 206     });
 207   }
 208
 209   if (params.bounds) {
 210     map.fitBounds(params.bounds);
 211   } else {
 212     map.setView([params.lat, params.lon], params.zoom);
 213   }
 214
 215   if (params.marker && params.mrad) {
 216     L.circle([params.mlat, params.mlon], { radius: params.mrad }).addTo(map);
 217   } else if (params.marker) {
 218     L.marker([params.mlat, params.mlon], { icon: OSM.getMarker({ color: "var(--marker-blue)" }) }).addTo(map);
 219   }
 220
 221   function remoteEditHandler(bbox, object) {
 222     const remoteEditHost = "http://127.0.0.1:8111",
 223           osmHost = location.protocol + "//" + location.host,
 224           query = new URLSearchParams({
 225             left: bbox.getWest() - 0.0001,
 226             top: bbox.getNorth() + 0.0001,
 227             right: bbox.getEast() + 0.0001,
 228             bottom: bbox.getSouth() - 0.0001
 229           });
 230
 231     if (object && object.type !== "note") query.set("select", object.type + object.id); // can't select notes
 232     sendRemoteEditCommand(remoteEditHost + "/load_and_zoom?" + query)
 233       .then(() => {
 234         if (object && object.type === "note") {
 235           const noteQuery = new URLSearchParams({ url: osmHost + OSM.apiUrl(object) });
 236           sendRemoteEditCommand(remoteEditHost + "/import?" + noteQuery);
 237         }
 238       })
 239       .catch(() => {
 240         OSM.showAlert(OSM.i18n.t("javascripts.remote_edit.failed.title"),
 241                       OSM.i18n.t("javascripts.remote_edit.failed.body"));
 242       });
 243
 244     function sendRemoteEditCommand(url) {
 245       return fetch(url, { mode: "no-cors", signal: AbortSignal.timeout(5000) });
 246     }
 247
 248     return false;
 249   }
 250
 251   $("a[data-editor=remote]").click(function (e) {
 252     const params = OSM.mapParams(this.search);
 253     remoteEditHandler(map.getBounds(), params.object);
 254     e.preventDefault();
 255   });
 256
 257   if (new URLSearchParams(location.search).get("edit_help")) {
 258     $("#editanchor")
 259       .removeAttr("title")
 260       .tooltip({
 261         placement: "bottom",
 262         title: OSM.i18n.t("javascripts.edit_help")
 263       })
 264       .tooltip("show");
 265
 266     $("body").one("click", function () {
 267       $("#editanchor").tooltip("hide");
 268     });
 269   }
 270
 271   OSM.Index = function (map) {
 272     const page = {};
 273
 274     page.pushstate = page.popstate = function () {
 275       map.setSidebarOverlaid(true);
 276       document.title = OSM.i18n.t("layouts.project_name.title");
 277     };
 278
 279     page.load = function () {
 280       const params = new URLSearchParams(location.search);
 281       if (params.has("query")) {
 282         $("#sidebar .search_form input[name=query]").value(params.get("query"));
 283       }
 284       return map.getState();
 285     };
 286
 287     return page;
 288   };
 289
 290   OSM.router = OSM.Router(map, {
 291     "/": OSM.Index,
 292     "/search": OSM.Search,
 293     "/directions": OSM.Directions,
 294     "/export": OSM.Export,
 295     "/note/new": OSM.NewNote,
 296     "/history/friends": OSM.History,
 297     "/history/nearby": OSM.History,
 298     "/history": OSM.History,
 299     "/user/:display_name/history": OSM.History,
 300     "/note/:id": OSM.Note,
 301     "/node/:id(/history)": OSM.MappedElement("node"),
 302     "/node/:id/history/:version": OSM.MappedElement("node"),
 303     "/way/:id(/history)": OSM.MappedElement("way"),
 304     "/way/:id/history/:version": OSM.Element("way"),
 305     "/relation/:id(/history)": OSM.MappedElement("relation"),
 306     "/relation/:id/history/:version": OSM.Element("relation"),
 307     "/changeset/:id": OSM.Changeset,
 308     "/query": OSM.Query,
 309     "/account/home": OSM.Home
 310   });
 311
 312   if (OSM.preferred_editor === "remote" && location.pathname === "/edit") {
 313     remoteEditHandler(map.getBounds(), params.object);
 314     OSM.router.setCurrentPath("/");
 315   }
 316
 317   OSM.router.load();
 318
 319   $(document).on("click", "a", function (e) {
 320     if (e.isDefaultPrevented() || e.isPropagationStopped() || $(e.target).data("turbo")) {
 321       return;
 322     }
 323
 324     // Open links in a new tab as normal.
 325     if (e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
 326       return;
 327     }
 328
 329     // Open local anchor links as normal.
 330     if ($(this).attr("href")?.startsWith("#")) {
 331       return;
 332     }
 333
 334     // Ignore cross-protocol and cross-origin links.
 335     const url = new URL($(this).attr("href"), location);
 336     if (location.protocol !== url.protocol || location.host !== url.host) {
 337       return;
 338     }
 339
 340     if (OSM.router.route(url.pathname + url.search + url.hash)) {
 341       e.preventDefault();
 342       if (url.pathname !== "/directions") {
 343         $("header").addClass("closed");
 344       }
 345     }
 346   });
 347
 348   $(document).on("click", "#sidebar .sidebar-close-controls button", function () {
 349     $(".search_form input[name=query]").val("");
 350     OSM.router.route("/" + OSM.formatHash(map));
 351   });
 352 });