cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Write directions sidebar header using .erb template

Browse source
This commit is contained in:
Anton Khorev 2024-06-14 18:45:29 +03:00
parent 1c66d7f50f
commit 18f03fe59b
2 changed files with 37 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/assets/javascripts/index/directions.js
View file

@ -134,7 +134,7 @@ OSM.Directions = function (map) {
// copy loading item to sidebar and display it. we copy it, rather than // 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 // just using it in-place and replacing it in case it has to be used
// again. // again.
$("#sidebar_content").html($(".directions_form .loader_copy").html()); $("#directions_content").html($(".directions_form .loader_copy").html());
map.setSidebarOverlaid(false); map.setSidebarOverlaid(false);
controller = new AbortController(); controller = new AbortController();
chosenEngine.getRoute(points, controller.signal).then(function (route) { chosenEngine.getRoute(points, controller.signal).then(function (route) {
@ -158,16 +158,10 @@ OSM.Directions = function (map) {
const turnByTurnTable = $("<table class='table table-hover table-sm mb-3'>") const turnByTurnTable = $("<table class='table table-hover table-sm mb-3'>")
.append($("<tbody>")); .append($("<tbody>"));
const directionsCloseButton = $("<button type='button' class='btn-close'>")
.attr("aria-label", I18n.t("javascripts.close"));
$("#sidebar_content") $("#directions_content")
.empty() .empty()
.append( .append(
$("<div class='d-flex'>").append(
$("<h2 class='flex-grow-1 text-break'>")
.text(I18n.t("javascripts.directions.directions")),
$("<div>").append(directionsCloseButton)),
distanceText, distanceText,
turnByTurnTable turnByTurnTable
); );
@ -203,27 +197,19 @@ OSM.Directions = function (map) {
URL.revokeObjectURL(downloadURL); URL.revokeObjectURL(downloadURL);
downloadURL = URL.createObjectURL(blob); downloadURL = URL.createObjectURL(blob);
$("#sidebar_content").append(`<p class="text-center"><a href="${downloadURL}" download="${ $("#directions_content").append(`<p class="text-center"><a href="${downloadURL}" download="${
I18n.t("javascripts.directions.filename") I18n.t("javascripts.directions.filename")
}">${ }">${
I18n.t("javascripts.directions.download") I18n.t("javascripts.directions.download")
}</a></p>`); }</a></p>`);
$("#sidebar_content").append("<p class=\"text-center\">" + $("#directions_content").append("<p class=\"text-center\">" +
I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) + I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) +
"</p>"); "</p>");
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 () { }).catch(function () {
map.removeLayer(polyline); map.removeLayer(polyline);
if (reportErrors) { if (reportErrors) {
$("#sidebar_content").html("<div class=\"alert alert-danger\">" + I18n.t("javascripts.directions.errors.no_route") + "</div>"); $("#directions_content").html("<div class=\"alert alert-danger\">" + I18n.t("javascripts.directions.errors.no_route") + "</div>");
} }
}).finally(function () { }).finally(function () {
controller = null; controller = null;
@ -238,6 +224,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("fossgis_osrm_car");
setEngine(Cookies.get("_osm_directions_engine")); setEngine(Cookies.get("_osm_directions_engine"));
@ -295,6 +290,8 @@ OSM.Directions = function (map) {
} }
function enableListeners() { function enableListeners() {
$("#sidebar_content").on("click", ".btn-close", hideRoute);
$("#map").on("dragend dragover", function (e) { $("#map").on("dragend dragover", function (e) {
e.preventDefault(); e.preventDefault();
}); });
@ -320,6 +317,21 @@ OSM.Directions = function (map) {
const page = {}; const page = {};
page.pushstate = page.popstate = function () { page.pushstate = page.popstate = function () {
if ($("#directions_content").length) {
page.load();
} else {
initializeFromParams();
$(".search_form").hide();
$(".directions_form").show();
OSM.loadSidebarContent("/directions", enableListeners);
map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
}
};
page.load = function () {
initializeFromParams(); initializeFromParams();
$(".search_form").hide(); $(".search_form").hide();
@ -330,13 +342,11 @@ OSM.Directions = function (map) {
map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
}; };
page.load = function () {
page.pushstate();
};
page.unload = function () { page.unload = function () {
$(".search_form").show(); $(".search_form").show();
$(".directions_form").hide(); $(".directions_form").hide();
$("#sidebar_content").off("click", ".btn-close", hideRoute);
$("#map").off("dragend dragover drop"); $("#map").off("dragend dragover drop");
map.off("locationfound", sendstartinglocation); map.off("locationfound", sendstartinglocation);

4
app/views/directions/search.html.erb
View file

@ -1 +1,5 @@
<% content_for(:content_class) { "overlay-sidebar" } %> <% content_for(:content_class) { "overlay-sidebar" } %>
<%= render "sidebar_header", :title => t("javascripts.directions.directions") %>
<div id="directions_content"></div>