Inverted onAdd() method of sidebar panes

This commit is contained in:
Anton Khorev 2022-08-27 22:55:19 +03:00
parent 71e7208a0a
commit 9acde429bf
4 changed files with 39 additions and 80 deletions

View file

@ -1,21 +1,11 @@
L.OSM.key = function (options) {
var control = L.OSM.sidebarPane(options);
control.onAdd = function (map) {
var $container = $("<div>")
.attr("class", "control-key");
var button = this.makeButton("key", null, toggle)
.appendTo($container);
var $ui = this.makeUI("key-ui", "javascripts.key.title", toggle);
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);
@ -33,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
@ -65,8 +46,6 @@ L.OSM.key = function (options) {
}
});
}
return $container[0];
};
return control;

View file

@ -1,17 +1,9 @@
L.OSM.layers = function (options) {
var control = L.OSM.sidebarPane(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 = this.makeButton("layers", "javascripts.map.layers.title", toggle)
.appendTo($container);
var $ui = this.makeUI("layers-ui", "javascripts.map.layers.header", toggle);
var baseSection = $("<div>")
.attr("class", "section base-layers")
.appendTo($ui);
@ -162,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;

View file

@ -1,20 +1,12 @@
L.OSM.share = function (options) {
var control = L.OSM.sidebarPane(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 = this.makeButton("share", "javascripts.share.title", toggle)
.appendTo($container);
var $ui = this.makeUI("share-ui", "javascripts.share.title", toggle);
control.onAddPane = function (map, button, $ui) {
// Link / Embed
var $linkSection = $("<div>")
@ -228,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;
@ -240,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());
@ -396,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;

View file

@ -1,23 +1,24 @@
L.OSM.sidebarPane = function (options) {
L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
var control = L.control(options);
control.onAdd = function (map) {
var $container = $("<div>")
.attr("class", "control-" + uiClass);
control.makeButton = function (buttonClass, buttonTitle, toggle) {
var button = $("<a>")
.attr("class", "control-button")
.attr("href", "#")
.html("<span class=\"icon " + buttonClass + "\"></span>")
.html("<span class=\"icon " + uiClass + "\"></span>")
.on("click", toggle);
if (buttonTitle) {
button.attr("title", I18n.t(buttonTitle))
button.attr("title", I18n.t(buttonTitle));
}
return button;
};
button.appendTo($container);
control.makeUI = function (uiClass, paneTitle, toggle) {
var $ui = $("<div>")
.attr("class", uiClass);
.attr("class", uiClass + "-ui");
$("<div>")
.attr("class", "sidebar_heading")
@ -30,8 +31,24 @@ L.OSM.sidebarPane = function (options) {
$("<h4>")
.text(I18n.t(paneTitle)));
return $ui;
};
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;
};