//= require_self
//= require leaflet.sidebar
+//= require leaflet.sidebar-pane
//= require leaflet.locatecontrol/src/L.Control.Locate
//= require leaflet.layers
//= require leaflet.key
function displayFeatureWarning(count, limit, add, cancel) {
$("#browse_status").html(
- $("<div>")
- .append(
- $("<button type='button' class='btn-close float-end mt-1'>")
- .click(cancel),
- $("<h2>")
- .text(I18n.t("browse.start_rjs.load_data"))
- .prepend(),
- $("<div>")
- .append(
- $("<p class='alert alert-warning clearfix'></p>")
- .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })))
- .append(
- $("<input type='submit' class='btn btn-primary'>")
- .val(I18n.t("browse.start_rjs.load_data"))
- .click(add))));
+ $("<div>").append(
+ $("<div class='d-flex'>").append(
+ $("<div class='flex-grow-1 text-break'>").append(
+ $("<h2>")
+ .text(I18n.t("browse.start_rjs.load_data"))),
+ $("<div>").append(
+ $("<button type='button' class='btn-close mt-1'>")
+ .click(cancel))),
+ $("<div>").append(
+ $("<p class='alert alert-warning'></p>")
+ .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })),
+ $("<input type='submit' class='btn btn-primary'>")
+ .val(I18n.t("browse.start_rjs.load_data"))
+ .click(add))));
}
var dataLoader;
map.fitBounds(polyline.getBounds().pad(0.05));
}
- var html = "<a class=\"geolink\" href=\"#\"><button type='button' class='btn-close float-end mt-1'></button></a>" +
- "<h2>" + I18n.t("javascripts.directions.directions") + "</h2>" +
- "<p>" +
+ var distanceText = $("<p>").append(
I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " +
- I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".";
+ I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + ".");
if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
- html += "<br />" +
+ distanceText.append(
+ $("<br>"),
I18n.t("javascripts.directions.ascend") + ": " + Math.round(route.ascend) + "m. " +
- I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.";
+ I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.");
}
- html += "</p><table id=\"turnbyturn\" class=\"mb-3\"/>";
+
+ var turnByTurnTable = $("<table class='mb-3'>");
$("#sidebar_content")
- .html(html);
+ .empty()
+ .append(
+ $("<div class='d-flex'>").append(
+ $("<div class='flex-grow-1 text-break'>").append(
+ $("<h2>")
+ .text(I18n.t("javascripts.directions.directions"))),
+ $("<div>").append(
+ $("<a class='geolink' href='#'>").append(
+ $("<button type='button' class='btn-close mt-1'>")))),
+ distanceText,
+ turnByTurnTable
+ );
// Add each row
route.steps.forEach(function (step) {
map.removeLayer(highlight);
});
- $("#turnbyturn").append(row);
+ turnByTurnTable.append(row);
});
$("#sidebar_content").append("<p class=\"text-center\">" +
L.OSM.key = function (options) {
- var control = L.control(options);
-
- control.onAdd = function (map) {
- var $container = $("<div>")
- .attr("class", "control-key");
-
- var button = $("<a>")
- .attr("class", "control-button")
- .attr("href", "#")
- .html("<span class=\"icon key\"></span>")
- .on("click", toggle)
- .appendTo($container);
-
- var $ui = $("<div>")
- .attr("class", "key-ui");
-
- $("<div>")
- .attr("class", "sidebar_heading")
- .appendTo($ui)
- .append(
- $("<button type='button' class='btn-close float-end mt-1'>")
- .attr("aria-label", I18n.t("javascripts.close"))
- .bind("click", toggle))
- .append(
- $("<h4>")
- .text(I18n.t("javascripts.key.title")));
+ var control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title");
+ control.onAddPane = function (map, button, $ui) {
var $section = $("<div>")
.attr("class", "section")
.appendTo($ui);
- options.sidebar.addPane($ui);
-
$ui
.on("show", shown)
.on("hide", hidden);
map.off("zoomend baselayerchange", update);
}
- function toggle(e) {
- e.stopPropagation();
- e.preventDefault();
- if (!button.hasClass("disabled")) {
- options.sidebar.togglePane($ui, button);
- }
- $(".leaflet-control .control-button").tooltip("hide");
- }
-
function updateButton() {
var disabled = ["mapnik", "cyclemap"].indexOf(map.getMapBaseLayerId()) === -1;
button
}
});
}
-
- return $container[0];
};
return control;
L.OSM.layers = function (options) {
- var control = L.control(options);
+ var control = L.OSM.sidebarPane(options, "layers", "javascripts.map.layers.title", "javascripts.map.layers.header");
- control.onAdd = function (map) {
+ control.onAddPane = function (map, button, $ui, toggle) {
var layers = options.layers;
- var $container = $("<div>")
- .attr("class", "control-layers");
-
- var button = $("<a>")
- .attr("class", "control-button")
- .attr("href", "#")
- .attr("title", I18n.t("javascripts.map.layers.title"))
- .html("<span class=\"icon layers\"></span>")
- .on("click", toggle)
- .appendTo($container);
-
- var $ui = $("<div>")
- .attr("class", "layers-ui");
-
- $("<div>")
- .attr("class", "sidebar_heading")
- .appendTo($ui)
- .append(
- $("<button type='button' class='btn-close float-end mt-1'>")
- .attr("aria-label", I18n.t("javascripts.close"))
- .bind("click", toggle))
- .append(
- $("<h4>")
- .text(I18n.t("javascripts.map.layers.header")));
-
var baseSection = $("<div>")
.attr("class", "section base-layers")
.appendTo($ui);
addOverlay(map.dataLayer, "data", OSM.MAX_REQUEST_AREA);
addOverlay(map.gpsLayer, "gps", Number.POSITIVE_INFINITY);
}
-
- options.sidebar.addPane($ui);
-
- function toggle(e) {
- e.stopPropagation();
- e.preventDefault();
- options.sidebar.togglePane($ui, button);
- $(".leaflet-control .control-button").tooltip("hide");
- }
-
- return $container[0];
};
return control;
L.OSM.share = function (options) {
- var control = L.control(options),
+ var control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
marker = L.marker([0, 0], { draggable: true }),
locationFilter = new L.LocationFilter({
enableButton: false,
adjustButton: false
});
- control.onAdd = function (map) {
- var $container = $("<div>")
- .attr("class", "control-share");
-
- var button = $("<a>")
- .attr("class", "control-button")
- .attr("href", "#")
- .attr("title", I18n.t("javascripts.share.title"))
- .html("<span class=\"icon share\"></span>")
- .on("click", toggle)
- .appendTo($container);
-
- var $ui = $("<div>")
- .attr("class", "share-ui");
-
- $("<div>")
- .attr("class", "sidebar_heading")
- .appendTo($ui)
- .append(
- $("<button type='button' class='btn-close float-end mt-1'>")
- .attr("aria-label", I18n.t("javascripts.close"))
- .bind("click", toggle))
- .append(
- $("<h4>")
- .text(I18n.t("javascripts.share.title")));
-
+ control.onAddPane = function (map, button, $ui) {
// Link / Embed
var $linkSection = $("<div>")
map.on("move", movedMap);
map.on("moveend layeradd layerremove", update);
- options.sidebar.addPane($ui);
-
$ui
+ .on("show", shown)
.on("hide", hidden);
+ function shown() {
+ $("#mapnik_scale").val(getScale());
+ update();
+ }
+
function hidden() {
map.removeLayer(marker);
map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
update();
}
- function toggle(e) {
- e.stopPropagation();
- e.preventDefault();
-
- $("#mapnik_scale").val(getScale());
- marker.setLatLng(map.getCenter());
-
- update();
- options.sidebar.togglePane($ui, button);
- $(".leaflet-control .control-button").tooltip("hide");
- }
-
function toggleMarker() {
if ($(this).is(":checked")) {
marker.setLatLng(map.getCenter());
var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
return precision * Math.ceil(scale / precision);
}
-
- return $container[0];
};
return control;
--- /dev/null
+L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
+ var control = L.control(options);
+
+ control.onAdd = function (map) {
+ var $container = $("<div>")
+ .attr("class", "control-" + uiClass);
+
+ var button = $("<a>")
+ .attr("class", "control-button")
+ .attr("href", "#")
+ .html("<span class=\"icon " + uiClass + "\"></span>")
+ .on("click", toggle);
+
+ if (buttonTitle) {
+ button.attr("title", I18n.t(buttonTitle));
+ }
+
+ button.appendTo($container);
+
+ var $ui = $("<div>")
+ .attr("class", uiClass + "-ui");
+
+ $("<div class='sidebar_heading d-flex'>")
+ .appendTo($ui)
+ .append($("<div class='flex-grow-1 text-break'>")
+ .append($("<h4>")
+ .text(I18n.t(paneTitle))))
+ .append($("<div>")
+ .append($("<button type='button' class='btn-close mt-1'>")
+ .attr("aria-label", I18n.t("javascripts.close"))
+ .bind("click", toggle)));
+
+ options.sidebar.addPane($ui);
+
+ this.onAddPane(map, button, $ui, toggle);
+
+ function toggle(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ if (!button.hasClass("disabled")) {
+ options.sidebar.togglePane($ui, button);
+ }
+ $(".leaflet-control .control-button").tooltip("hide");
+ }
+
+ return $container[0];
+ };
+
+ // control.onAddPane = function (map, button, $ui, toggle) {
+ // }
+
+ return control;
+};
</div>
<div>
<a class="geolink" href="<%= root_path %>">
- <button type="button" class="btn-close float-end mt-1"></button>
+ <button type="button" class="btn-close mt-1"></button>
</a>
</div>
</div>
</form>
<form method="GET" action="<%= directions_path %>" class="directions_form pb-3">
- <div class="clearfix px-3 py-3"><button type="button" class="btn-close float-end"></button></div>
+ <div class="d-flex flex-row-reverse px-3 py-3"><button type="button" class="btn-close"></button></div>
<div class="row gx-2 m-1">
<div class="col-1">
projects / rails.git / commitdiff