From: Tom Hughes Date: Thu, 6 Mar 2025 17:55:14 +0000 (+0000) Subject: Merge remote-tracking branch 'upstream/pull/5756' X-Git-Tag: live~185 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/41b086e217191a73b9c5afa297df6fb8c80bb2fb?hp=f47b3af8c2c879696db47e1566f6a09709551375 Merge remote-tracking branch 'upstream/pull/5756' --- diff --git a/app/assets/images/routing-sprite.svg b/app/assets/images/routing-sprite.svg deleted file mode 100644 index 97701d5a8..000000000 --- a/app/assets/images/routing-sprite.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index cbb6afafe..b79c33088 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -37,7 +37,7 @@ $(function () { map.setSidebarOverlaid(false); - $("#sidebar_loader").show().addClass("delayed-fade-in"); + $("#sidebar_loader").prop("hidden", false).addClass("delayed-fade-in"); // Prevent caching the XHR response as a full-page URL // https://github.com/openstreetmap/openstreetmap-website/issues/5663 @@ -53,7 +53,7 @@ $(function () { fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } }) .then(response => { $("#flash").empty(); - $("#sidebar_loader").removeClass("delayed-fade-in").hide(); + $("#sidebar_loader").removeClass("delayed-fade-in").prop("hidden", true); const title = response.headers.get("X-Page-Title"); if (title) document.title = decodeURIComponent(title); diff --git a/app/assets/javascripts/index/directions-endpoint.js b/app/assets/javascripts/index/directions-endpoint.js index 0b52d3d4c..e3f6afa46 100644 --- a/app/assets/javascripts/index/directions-endpoint.js +++ b/app/assets/javascripts/index/directions-endpoint.js @@ -14,23 +14,16 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, ch autoPan: true }); - endpoint.enable = function () { + endpoint.enableListeners = function () { endpoint.marker.on("drag dragend", markerDragListener); input.on("keydown", inputKeydownListener); input.on("change", inputChangeListener); }; - endpoint.disable = function () { + endpoint.disableListeners = function () { endpoint.marker.off("drag dragend", markerDragListener); input.off("keydown", inputKeydownListener); input.off("change", inputChangeListener); - - if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort(); - delete endpoint.geocodeRequest; - removeLatLng(); - delete endpoint.value; - input.val(""); - map.removeLayer(endpoint.marker); }; function markerDragListener(e) { @@ -91,6 +84,15 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, ch } }; + endpoint.clearValue = function () { + if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort(); + delete endpoint.geocodeRequest; + removeLatLng(); + delete endpoint.value; + input.val(""); + map.removeLayer(endpoint.marker); + }; + endpoint.swapCachedReverseGeocodes = function (otherEndpoint) { const g0 = endpoint.cachedReverseGeocode; const g1 = otherEndpoint.cachedReverseGeocode; diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 40ca85d96..89888bbd1 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -134,7 +134,7 @@ OSM.Directions = function (map) { // copy loading item to sidebar and display it. we copy it, rather than // just using it in-place and replacing it in case it has to be used // again. - $("#sidebar_content").html($(".directions_form .loader_copy").html()); + $("#directions_content").html($(".directions_form .loader_copy").html()); map.setSidebarOverlaid(false); controller = new AbortController(); chosenEngine.getRoute(points, controller.signal).then(function (route) { @@ -158,16 +158,10 @@ OSM.Directions = function (map) { const turnByTurnTable = $("") .append($("")); - const directionsCloseButton = $(""); - row.append(" "); + if (direction) { + row.append(""); + } else { + row.append("
"); + } row.append("" + instruction); row.append("" + getDistText(dist)); @@ -203,27 +201,19 @@ OSM.Directions = function (map) { URL.revokeObjectURL(downloadURL); downloadURL = URL.createObjectURL(blob); - $("#sidebar_content").append(`

${ I18n.t("javascripts.directions.download") }

`); - $("#sidebar_content").append("

" + + $("#directions_content").append("

" + I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) + "

"); - - directionsCloseButton.on("click", function () { - map.removeLayer(polyline); - $("#sidebar_content").html(""); - popup.close(); - map.setSidebarOverlaid(true); - // TODO: collapse width of sidebar back to previous - }); }).catch(function () { map.removeLayer(polyline); if (reportErrors) { - $("#sidebar_content").html("
" + I18n.t("javascripts.directions.errors.no_route") + "
"); + $("#directions_content").html("
" + I18n.t("javascripts.directions.errors.no_route") + "
"); } }).finally(function () { controller = null; @@ -238,6 +228,15 @@ OSM.Directions = function (map) { } } + function hideRoute(e) { + e.stopPropagation(); + map.removeLayer(polyline); + $("#directions_content").html(""); + popup.close(); + map.setSidebarOverlaid(true); + // TODO: collapse width of sidebar back to previous + } + setEngine("fossgis_osrm_car"); setEngine(Cookies.get("_osm_directions_engine")); @@ -284,11 +283,18 @@ OSM.Directions = function (map) { map.once("startinglocation", startingLocationListener); }); - const page = {}; + function initializeFromParams() { + const params = new URLSearchParams(location.search), + route = (params.get("route") || "").split(";"); - page.pushstate = page.popstate = function () { - $(".search_form").hide(); - $(".directions_form").show(); + if (params.has("engine")) setEngine(params.get("engine")); + + endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", ")); + endpoints[1].setValue(params.get("to") || route[1] || ""); + } + + function enableListeners() { + $("#sidebar_content").on("click", ".btn-close", hideRoute); $("#map").on("dragend dragover", function (e) { e.preventDefault(); @@ -308,32 +314,51 @@ OSM.Directions = function (map) { map.on("locationfound", sendstartinglocation); - endpoints[0].enable(); - endpoints[1].enable(); + endpoints[0].enableListeners(); + endpoints[1].enableListeners(); + } - const params = new URLSearchParams(location.search), - route = (params.get("route") || "").split(";"); + const page = {}; - if (params.has("engine")) setEngine(params.get("engine")); + page.pushstate = page.popstate = function () { + if ($("#directions_content").length) { + page.load(); + } else { + initializeFromParams(); - endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", ")); - endpoints[1].setValue(params.get("to") || route[1] || ""); + $(".search_form").hide(); + $(".directions_form").show(); - map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); + OSM.loadSidebarContent("/directions", enableListeners); + + map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); + } }; page.load = function () { - page.pushstate(); + initializeFromParams(); + + $(".search_form").hide(); + $(".directions_form").show(); + + enableListeners(); + + map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); }; page.unload = function () { $(".search_form").show(); $(".directions_form").hide(); + + $("#sidebar_content").off("click", ".btn-close", hideRoute); $("#map").off("dragend dragover drop"); map.off("locationfound", sendstartinglocation); - endpoints[0].disable(); - endpoints[1].disable(); + endpoints[0].disableListeners(); + endpoints[1].disableListeners(); + + endpoints[0].clearValue(); + endpoints[1].clearValue(); map .removeLayer(popup) diff --git a/app/assets/javascripts/index/directions/fossgis_osrm.js b/app/assets/javascripts/index/directions/fossgis_osrm.js index 2332049be..4e8691a79 100644 --- a/app/assets/javascripts/index/directions/fossgis_osrm.js +++ b/app/assets/javascripts/index/directions/fossgis_osrm.js @@ -34,31 +34,31 @@ "arrive": "destination" }; const ICON_MAP = { - "continue": 0, - "merge right": 21, - "merge left": 20, - "off ramp right": 24, - "off ramp left": 25, - "on ramp right": 2, - "on ramp left": 6, - "fork right": 18, - "fork left": 19, - "end of road right": 22, - "end of road left": 23, - "turn straight": 0, - "turn slight right": 1, - "turn right": 2, - "turn sharp right": 3, - "turn uturn": 4, - "turn slight left": 5, - "turn left": 6, - "turn sharp left": 7, - "roundabout": 10, - "rotary": 10, - "exit roundabout": 10, - "exit rotary": 10, - "depart": 8, - "arrive": 14 + "continue": "straight", + "merge right": "merge-right", + "merge left": "merge-left", + "off ramp right": "exit-right", + "off ramp left": "exit-left", + "on ramp right": "right", + "on ramp left": "left", + "fork right": "fork-right", + "fork left": "fork-left", + "end of road right": "end-of-road-right", + "end of road left": "end-of-road-left", + "turn straight": "straight", + "turn slight right": "slight-right", + "turn right": "right", + "turn sharp right": "sharp-right", + "turn uturn": "u-turn", + "turn slight left": "slight-left", + "turn left": "left", + "turn sharp left": "sharp-left", + "roundabout": "roundabout", + "rotary": "roundabout", + "exit roundabout": "roundabout", + "exit rotary": "roundabout", + "depart": "start", + "arrive": "destination" }; function numToWord(num) { return ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"][num - 1]; diff --git a/app/assets/javascripts/index/directions/fossgis_valhalla.js b/app/assets/javascripts/index/directions/fossgis_valhalla.js index 11aa4470b..493d09072 100644 --- a/app/assets/javascripts/index/directions/fossgis_valhalla.js +++ b/app/assets/javascripts/index/directions/fossgis_valhalla.js @@ -1,36 +1,36 @@ (function () { function FOSSGISValhallaEngine(modeId, costing) { const INSTR_MAP = [ - 0, // kNone = 0; - 8, // kStart = 1; - 8, // kStartRight = 2; - 8, // kStartLeft = 3; - 14, // kDestination = 4; - 14, // kDestinationRight = 5; - 14, // kDestinationLeft = 6; - 0, // kBecomes = 7; - 0, // kContinue = 8; - 1, // kSlightRight = 9; - 2, // kRight = 10; - 3, // kSharpRight = 11; - 4, // kUturnRight = 12; - 4, // kUturnLeft = 13; - 7, // kSharpLeft = 14; - 6, // kLeft = 15; - 5, // kSlightLeft = 16; - 0, // kRampStraight = 17; - 24, // kRampRight = 18; - 25, // kRampLeft = 19; - 24, // kExitRight = 20; - 25, // kExitLeft = 21; - 0, // kStayStraight = 22; - 1, // kStayRight = 23; - 5, // kStayLeft = 24; - 20, // kMerge = 25; - 10, // kRoundaboutEnter = 26; - 10, // kRoundaboutExit = 27; - 17, // kFerryEnter = 28; - 0, // kFerryExit = 29; + "straight", // kNone = 0; + "start", // kStart = 1; + "start", // kStartRight = 2; + "start", // kStartLeft = 3; + "destination", // kDestination = 4; + "destination", // kDestinationRight = 5; + "destination", // kDestinationLeft = 6; + "straight", // kBecomes = 7; + "straight", // kContinue = 8; + "slight-right", // kSlightRight = 9; + "right", // kRight = 10; + "sharp-right", // kSharpRight = 11; + "u-turn", // kUturnRight = 12; + "u-turn", // kUturnLeft = 13; + "sharp-left", // kSharpLeft = 14; + "left", // kLeft = 15; + "slight-left", // kSlightLeft = 16; + "straight", // kRampStraight = 17; + "exit-right", // kRampRight = 18; + "exit-left", // kRampLeft = 19; + "exit-right", // kExitRight = 20; + "exit-left", // kExitLeft = 21; + "straight", // kStayStraight = 22; + "slight-right", // kStayRight = 23; + "slight-left", // kStayLeft = 24; + "merge-left", // kMerge = 25; + "roundabout", // kRoundaboutEnter = 26; + "roundabout", // kRoundaboutExit = 27; + "ferry", // kFerryEnter = 28; + "straight", // kFerryExit = 29; null, // kTransit = 30; null, // kTransitTransfer = 31; null, // kTransitRemainOn = 32; @@ -38,8 +38,8 @@ null, // kTransitConnectionTransfer = 34; null, // kTransitConnectionDestination = 35; null, // kPostTransitConnectionDestination = 36; - 21, // kMergeRight = 37; - 20 // kMergeLeft = 38; + "merge-right", // kMergeRight = 37; + "merge-left" // kMergeLeft = 38; ]; function _processDirections(tripLegs) { diff --git a/app/assets/javascripts/index/directions/graphhopper.js b/app/assets/javascripts/index/directions/graphhopper.js index b3194d16c..430801a3b 100644 --- a/app/assets/javascripts/index/directions/graphhopper.js +++ b/app/assets/javascripts/index/directions/graphhopper.js @@ -1,21 +1,21 @@ (function () { function GraphHopperEngine(modeId, vehicleType) { const GH_INSTR_MAP = { - "-3": 7, // sharp left - "-2": 6, // left - "-1": 5, // slight left - "0": 0, // straight - "1": 1, // slight right - "2": 2, // right - "3": 3, // sharp right - "4": 14, // finish reached - "5": 14, // via reached - "6": 10, // roundabout - "-7": 19, // keep left - "7": 18, // keep right - "-98": 4, // unknown direction u-turn - "-8": 4, // left u-turn - "8": 4 // right u-turn + "-3": "sharp-left", + "-2": "left", + "-1": "slight-left", + "0": "straight", + "1": "slight-right", + "2": "right", + "3": "sharp-right", + "4": "destination", // finish reached + "5": "destination", // via reached + "6": "roundabout", + "-7": "fork-left", + "7": "fork-right", + "-98": "u-turn", // unknown direction u-turn + "-8": "u-turn", // left u-turn + "8": "u-turn" // right u-turn }; function _processDirections(path) { @@ -34,7 +34,7 @@ lineseg ]; // TODO does graphhopper map instructions onto line indices? }); - steps.at(-1)[1] = 14; + steps.at(-1)[1] = "destination"; return { line: line, diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index c1728f870..27cfb465c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -336,10 +336,6 @@ body.small-nav { #sidebar { float: left; width: $sidebarWidth; - - #sidebar_loader { - display: none; - } } .overlay-sidebar #sidebar { @@ -355,6 +351,7 @@ body.small-nav { display: block; } + #sidebar_loader, #sidebar_content { display: none; } @@ -592,22 +589,6 @@ header .search_forms, /* Rules for routing */ -div.direction { - background-image: image-url('routing-sprite.svg'); - width: 20px; - height: 20px; - background-repeat: no-repeat; -} -@for $i from 0 through 25 { -div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } -} - -@include color-mode(dark) { - div.direction { - filter: invert(1); - } -} - td.distance { font-size: x-small; } diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb index ea6ee7088..ff2bcb2da 100644 --- a/app/views/directions/search.html.erb +++ b/app/views/directions/search.html.erb @@ -1 +1,82 @@ <% content_for(:content_class) { "overlay-sidebar" } %> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +<%= render "sidebar_header", :title => t(".title") %> + +
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 72f6076b4..eeb6d7472 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -18,7 +18,7 @@
-
+