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

Merge tooltip fixes/tests

Browse source
This commit is contained in:
Anton Khorev 2022-09-13 01:52:23 +03:00
commit e409e83b48
103 changed files with 6640 additions and 1533 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/application.js
View file

@ -13,7 +13,7 @@
//= require leaflet.locationfilter
//= require i18n
//= require oauth
//= require piwik
//= require matomo
//= require richtext
//= require qs/dist/qs
//= require bs-custom-file-input

11
app/assets/javascripts/index.js
View file

@ -1,5 +1,6 @@
//= require_self
//= require leaflet.sidebar
//= require leaflet.sidebar-pane
//= require leaflet.locatecontrol/src/L.Control.Locate
//= require leaflet.layers
//= require leaflet.key
@ -195,7 +196,7 @@ $(document).ready(function () {
$(".welcome").addClass("visible");
}
$(".welcome .close").on("click", function () {
$(".welcome .btn-close").on("click", function () {
$(".welcome").removeClass("visible");
Cookies.set("_osm_welcome", "hide", { secure: true, expires: expiry, path: "/", samesite: "lax" });
});
@ -203,7 +204,7 @@ $(document).ready(function () {
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();
@ -212,13 +213,13 @@ $(document).ready(function () {
}
});
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);
}
}
});

28
app/assets/javascripts/index/browse.js
View file

@ -48,20 +48,20 @@ OSM.initializeBrowse = function (map) {
function displayFeatureWarning(count, limit, add, cancel) {
$("#browse_status").html(
$("<div>")
.append(
$("<h2>")
.text(I18n.t("browse.start_rjs.load_data"))
.prepend($("<span class='icon close'></span>").click(cancel)))
.append(
$("<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;

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

@ -157,7 +157,7 @@ OSM.Directions = function (map) {
}));
});
$(".directions_form .close").on("click", function (e) {
$(".directions_form .btn-close").on("click", function (e) {
e.preventDefault();
var route_from = endpoints[0].value;
if (route_from) {
@ -254,20 +254,30 @@ OSM.Directions = function (map) {
map.fitBounds(polyline.getBounds().pad(0.05));
}
var html = "<h2><a class=\"geolink\" href=\"#\">" +
"<span class=\"icon close\"></span></a>" + 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'>");
var directionsCloseButton = $("<button type='button' class='btn-close mt-1'>");
$("#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(directionsCloseButton)),
distanceText,
turnByTurnTable
);
// Add each row
route.steps.forEach(function (step) {
@ -309,15 +319,14 @@ OSM.Directions = function (map) {
map.removeLayer(highlight);
});
$("#turnbyturn").append(row);
turnByTurnTable.append(row);
});
$("#sidebar_content").append("<p class=\"text-center\">" +
I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) +
"</p>");
$("#sidebar_content a.geolink").on("click", function (e) {
e.preventDefault();
directionsCloseButton.on("click", function () {
map.removeLayer(polyline);
$("#sidebar_content").html("");
map.setSidebarOverlaid(true);

2
app/assets/javascripts/index/directions/graphhopper.js
View file

@ -14,7 +14,7 @@ function GraphHopperEngine(id, vehicleType) {
return {
id: id,
creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">Graphhopper</a>",
creditline: "<a href=\"https://www.graphhopper.com/\" target=\"_blank\">GraphHopper</a>",
draggable: false,
getRoute: function (points, callback) {

12
app/assets/javascripts/index/history.js
View file

@ -10,18 +10,6 @@ OSM.History = function (map) {
})
.on("mouseout", "[data-changeset]", function () {
unHighlightChangeset($(this).data("changeset").id);
})
.on("mousedown", "[data-changeset]", function () {
var moved = false;
$(this)
.one("click", function (e) {
if (!moved && !$(e.target).is("a")) {
clickChangeset($(this).data("changeset").id, e);
}
})
.one("mousemove", function () {
moved = true;
});
});
var group = L.featureGroup()

42
app/assets/javascripts/leaflet.key.js
View file

@ -1,38 +1,11 @@
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(
$("<span>")
.text(I18n.t("javascripts.close"))
.attr("class", "icon 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);
@ -50,15 +23,6 @@ L.OSM.key = function (options) {
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
@ -82,8 +46,6 @@ L.OSM.key = function (options) {
}
});
}
return $container[0];
};
return control;

44
app/assets/javascripts/leaflet.layers.js
View file

@ -1,35 +1,9 @@
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(
$("<span>")
.text(I18n.t("javascripts.close"))
.attr("class", "icon close")
.bind("click", toggle))
.append(
$("<h4>")
.text(I18n.t("javascripts.map.layers.header")));
var baseSection = $("<div>")
.attr("class", "section base-layers")
.appendTo($ui);
@ -171,8 +145,7 @@ L.OSM.layers = function (options) {
}
$(item).attr("class", disabled ? "disabled" : "");
// item.attr("data-bs-original-title", disabled ? // has additional bug when zooming out from enabled state
item.attr("data-original-title", disabled ?
item.attr("data-bs-original-title", disabled ? // has additional bug when zooming out from enabled state
I18n.t("javascripts.site.map_" + name + "_zoom_in_tooltip") : "");
});
};
@ -181,17 +154,6 @@ L.OSM.layers = function (options) {
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;

52
app/assets/javascripts/leaflet.share.js
View file

@ -1,38 +1,12 @@
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(
$("<span>")
.text(I18n.t("javascripts.close"))
.attr("class", "icon close")
.bind("click", toggle))
.append(
$("<h4>")
.text(I18n.t("javascripts.share.title")));
control.onAddPane = function (map, button, $ui) {
// Link / Embed
var $linkSection = $("<div>")
@ -246,11 +220,15 @@ L.OSM.share = function (options) {
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;
@ -258,18 +236,6 @@ L.OSM.share = function (options) {
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());
@ -414,8 +380,6 @@ L.OSM.share = function (options) {
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;

53
app/assets/javascripts/leaflet.sidebar-pane.js Normal file
View file

@ -0,0 +1,53 @@
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;
};

32
app/assets/javascripts/matomo.js Normal file
View file

@ -0,0 +1,32 @@
if (OSM.MATOMO) {
$(document).ready(function () {
var base = document.location.protocol + "//" + OSM.MATOMO.location + "/";
var matomoTracker;
var matomoLoader = $.ajax({
url: base + "matomo.js",
dataType: "script",
cache: true,
success: function () {
matomoTracker = Matomo.getTracker(base + "matomo.php", OSM.MATOMO.site);
if (OSM.user) {
matomoTracker.setUserId(OSM.user.toString());
}
matomoTracker.trackPageView();
matomoTracker.enableLinkTracking();
$("meta[name=matomo-goal]").each(function () {
matomoTracker.trackGoal($(this).attr("content"));
});
}
});
$("body").on("matomogoal", function (e, goal) {
matomoLoader.done(function () {
matomoTracker.trackGoal(goal);
});
});
});
}

4
app/assets/javascripts/osm.js.erb
View file

@ -3,8 +3,8 @@
//= require qs/dist/qs
OSM = {
<% if defined?(PIWIK) %>
PIWIK: <%= PIWIK.to_json %>,
<% if defined?(Settings.matomo) %>
MATOMO: <%= Settings.matomo.to_json %>,
<% end %>
MAX_REQUEST_AREA: <%= Settings.max_request_area.to_json %>,

32
app/assets/javascripts/piwik.js
View file

@ -1,32 +0,0 @@
if (OSM.PIWIK) {
$(document).ready(function () {
var base = document.location.protocol + "//" + OSM.PIWIK.location + "/";
var piwikTracker;
var piwikLoader = $.ajax({
url: base + "piwik.js",
dataType: "script",
cache: true,
success: function () {
piwikTracker = Piwik.getTracker(base + "piwik.php", OSM.PIWIK.site);
if (OSM.user) {
piwikTracker.setUserId(OSM.user.toString());
}
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
$("meta[name=piwik-goal]").each(function () {
piwikTracker.trackGoal($(this).attr("content"));
});
}
});
$("body").on("piwikgoal", function (e, goal) {
piwikLoader.done(function () {
piwikTracker.trackGoal(goal);
});
});
});
}

58
app/assets/stylesheets/common.scss
View file

@ -55,7 +55,6 @@ small, aside {
.icon.clipboard { /* no-r2 */ background-position: -160px 0; }
.icon.link { /* no-r2 */ background-position: -180px 0; }
.icon.close { /* no-r2 */ background-position: -200px 0; }
.close-wrap:hover .icon.close,
.icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
.icon.check { /* no-r2 */ background-position: -220px 0; }
.icon.note { /* no-r2 */ background-position: -240px 0; }
@ -146,7 +145,7 @@ header {
nav.primary {
.btn-outline-primary {
@include button-outline-variant($green, $white);
@include button-outline-variant($green, $color-hover: $white, $active-color: $white);
}
.disabled {
@ -191,27 +190,17 @@ nav.secondary {
.login-menu {
.btn-outline-secondary {
@include button-outline-variant($darkgrey, $white, null, null, $white);
@include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);
}
}
.user-menu {
.btn-outline-secondary {
@include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
@include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);
border-color: $grey;
&:hover {
border-color: $grey;
}
&:focus {
background-color: white;
box-shadow: none;
}
}
&.show .btn-outline-secondary {
background-color: white;
&:focus {
box-shadow: none;
}
}
}
@ -284,7 +273,8 @@ body.compact-nav {
margin-bottom: 10px;
outline: none;
&:hover {
&:hover,
&:focus {
background-color: black;
}
@ -358,22 +348,6 @@ body.compact-nav {
clear: both;
width: 100%;
}
.close-wrap {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
.icon.close {
pointer-events: none;
position: absolute;
right: 20px;
top: 20px;
}
}
}
.overlay-sidebar #sidebar {
@ -625,11 +599,6 @@ body.compact-nav {
padding: $lineheight/2 $lineheight;
// background: $offwhite;
// border-bottom: 1px solid $grey;
> .close {
float: right;
margin-top: 2px;
cursor: pointer;
}
}
#browse_status {
@ -678,15 +647,15 @@ legend {
reconsider our colours at some point with that in mind. */
.btn-primary {
@include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white);
@include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
}
.btn-secondary {
@include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white);
@include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
}
.btn-outline-secondary {
@include button-outline-variant($secondary, $white, null, null, $white);
@include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
}
/* Rules for the search and direction forms */
@ -773,10 +742,13 @@ tr.turn:hover {
#sidebar .changesets {
li {
cursor: pointer;
&.selected { background: $list-highlight; }
/* color is derived from changeset bbox fillColor in history.js */
a.stretched-link > span, a:not(.stretched-link), [title] {
position: relative;
z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
}
}
.comments {
@ -1310,10 +1282,6 @@ tr.turn:hover {
vertical-align: middle;
}
}
a.reverse_directions {
cursor: pointer;
}
}
/* Rules for user images */