X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/f1a4669c957d29c012466768581c4a801e5029be..7e7ede890e8e948236d3dbc48e24aca00cd01f62:/app/assets/javascripts/leaflet.key.js diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index 4cab964c9..f89ae0c3d 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -1,25 +1,52 @@ -L.OSM.Key = L.Control.extend({ - onAdd: function (map) { - this._map = map; - this._initLayout(); - return this.$container[0]; - }, - - _initLayout: function () { - var map = this._map; - - this.$container = $('
') - .attr('class', 'control-key'); - - var link = $('') - .attr('class', 'control-button') - .attr('href', '#') - .attr('title', 'Map Key') - .html('') - .appendTo(this.$container); - } -}); - -L.OSM.key = function(options) { - return new L.OSM.Key(options); +L.OSM.key = function (options) { + var control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title"); + + control.onAddPane = function (map, button, $ui) { + var $section = $("
") + .attr("class", "p-3") + .appendTo($ui); + + $ui + .on("show", shown) + .on("hide", hidden); + + map.on("baselayerchange", updateButton); + + updateButton(); + + function shown() { + map.on("zoomend baselayerchange", update); + $section.load("/key", update); + } + + function hidden() { + map.off("zoomend baselayerchange", update); + } + + function updateButton() { + var disabled = OSM.LAYERS_WITH_MAP_KEY.indexOf(map.getMapBaseLayerId()) === -1; + button + .toggleClass("disabled", disabled) + .attr("data-bs-original-title", + I18n.t(disabled ? + "javascripts.key.tooltip_disabled" : + "javascripts.key.tooltip")); + } + + function update() { + var layer = map.getMapBaseLayerId(), + zoom = map.getZoom(); + + $(".mapkey-table-entry").each(function () { + var data = $(this).data(); + $(this).toggle( + layer === data.layer && + (!data.zoomMin || zoom >= data.zoomMin) && + (!data.zoomMax || zoom <= data.zoomMax) + ); + }); + } + }; + + return control; };