X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/29aac6e14964d612ee6a06998ae61bc8923f5946..12ac6f8f27dfe63d9674fba54862db13a9e6d89a:/app/assets/javascripts/index.js?ds=inline diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 6584864d5..8ffa05c53 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -1,5 +1,7 @@ //= require_self //= require leaflet.sidebar +//= require leaflet.sidebar-pane +//= require leaflet.locatecontrol/src/L.Control.Locate //= require leaflet.locate //= require leaflet.layers //= require leaflet.key @@ -20,17 +22,16 @@ //= require index/changeset //= require index/query //= require router -//= require querystring +//= require qs/dist/qs $(document).ready(function () { - var querystring = require("querystring-component"); - var loaderTimeout; var map = new L.OSM.Map("map", { zoomControl: false, layerControl: false, - contextmenu: true + contextmenu: true, + worldCopyJump: true }); OSM.loadSidebarContent = function (path, callback) { @@ -98,62 +99,60 @@ $(document).ready(function () { } }); - var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright"; - - L.OSM.zoom({ position: position }) + var sidebar = L.OSM.sidebar("#map-ui") .addTo(map); - var locate = L.control.locate({ - position: position, - icon: "icon geolocate", - iconLoading: "icon geolocate", - strings: { - title: I18n.t("javascripts.map.locate.title"), - metersUnit: I18n.t("javascripts.map.locate.metersUnit"), - feetUnit: I18n.t("javascripts.map.locate.feetUnit"), - popup: I18n.t("javascripts.map.locate.popup") - } - }).addTo(map); + var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright"; - var locateContainer = locate.getContainer(); + function addControlGroup(controls) { + controls.forEach(function (control) { + control.addTo(map); + }); - $(locateContainer) - .removeClass("leaflet-control-locate leaflet-bar") - .addClass("control-locate") - .children("a") - .attr("href", "#") - .removeClass("leaflet-bar-part leaflet-bar-part-single") - .addClass("control-button"); + var firstContainer = controls[0].getContainer(); + $(firstContainer).find(".control-button").first() + .addClass("control-button-first"); - var sidebar = L.OSM.sidebar("#map-ui") - .addTo(map); + var lastContainer = controls[controls.length - 1].getContainer(); + $(lastContainer).find(".control-button").last() + .addClass("control-button-last"); + } - L.OSM.layers({ - position: position, - layers: map.baseLayers, - sidebar: sidebar - }).addTo(map); - - L.OSM.key({ - position: position, - sidebar: sidebar - }).addTo(map); - - L.OSM.share({ - "position": position, - "sidebar": sidebar, - "short": true - }).addTo(map); - - L.OSM.note({ - position: position, - sidebar: sidebar - }).addTo(map); - - L.OSM.query({ - position: position, - sidebar: sidebar - }).addTo(map); + addControlGroup([ + L.OSM.zoom({ position: position }), + L.OSM.locate({ position: position }) + ]); + + addControlGroup([ + L.OSM.layers({ + position: position, + layers: map.baseLayers, + sidebar: sidebar + }), + L.OSM.key({ + position: position, + sidebar: sidebar + }), + L.OSM.share({ + "position": position, + "sidebar": sidebar, + "short": true + }) + ]); + + addControlGroup([ + L.OSM.note({ + position: position, + sidebar: sidebar + }) + ]); + + addControlGroup([ + L.OSM.query({ + position: position, + sidebar: sidebar + }) + ]); L.control.scale() .addTo(map); @@ -176,8 +175,7 @@ $(document).ready(function () { } } - var placement = $("html").attr("dir") === "rtl" ? "right" : "left"; - $(".leaflet-control .control-button").tooltip({ placement: placement, container: "body" }); + $(".leaflet-control .control-button").tooltip({ placement: "left", container: "body" }); var expiry = new Date(); expiry.setYear(expiry.getFullYear() + 10); @@ -189,38 +187,37 @@ $(document).ready(function () { map.getLayersCode(), map._object); - $.removeCookie("_osm_location"); - $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" }); + Cookies.set("_osm_location", OSM.locationCookie(map), { secure: true, expires: expiry, path: "/", samesite: "lax" }); }); - if ($.cookie("_osm_welcome") !== "hide") { - $(".welcome").addClass("visible"); + if (Cookies.get("_osm_welcome") !== "hide") { + $(".welcome").removeAttr("hidden"); } - $(".welcome .close-wrap").on("click", function () { - $(".welcome").removeClass("visible"); - $.cookie("_osm_welcome", "hide", { expires: expiry, path: "/" }); + $(".welcome .btn-close").on("click", function () { + $(".welcome").hide(); + Cookies.set("_osm_welcome", "hide", { secure: true, expires: expiry, path: "/", samesite: "lax" }); }); var bannerExpiry = new Date(); bannerExpiry.setYear(bannerExpiry.getFullYear() + 1); - $("#banner .close-wrap").on("click", function (e) { + $("#banner .btn-close").on("click", function (e) { var cookieId = e.target.id; $("#banner").hide(); e.preventDefault(); if (cookieId) { - $.cookie(cookieId, "hide", { expires: bannerExpiry, path: "/" }); + Cookies.set(cookieId, "hide", { secure: true, expires: bannerExpiry, path: "/", samesite: "lax" }); } }); - if (OSM.PIWIK) { + if (OSM.MATOMO) { map.on("layeradd", function (e) { if (e.layer.options) { - var goal = OSM.PIWIK.goals[e.layer.options.keyid]; + var goal = OSM.MATOMO.goals[e.layer.options.keyid]; if (goal) { - $("body").trigger("piwikgoal", goal); + $("body").trigger("matomogoal", goal); } } }); @@ -247,8 +244,8 @@ $(document).ready(function () { }); function remoteEditHandler(bbox, object) { - var loaded = false, - url, + var remoteEditHost = "http://127.0.0.1:8111", + osmHost = location.protocol + "//" + location.host, query = { left: bbox.getWest() - 0.0001, top: bbox.getNorth() + 0.0001, @@ -256,25 +253,31 @@ $(document).ready(function () { bottom: bbox.getSouth() - 0.0001 }; - url = "http://127.0.0.1:8111/load_and_zoom?"; - - if (object) query.select = object.type + object.id; - - var iframe = $("