X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/c8fb5ad24c5751bd2d43b86e4359381d200af066..f9ea6aa718a5babc16bb5195098b504a1bd43e32:/app/assets/javascripts/leaflet.key.js diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index c5124e39d..f89ae0c3d 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -1,74 +1,51 @@ L.OSM.key = function (options) { - var control = L.control(options); + var control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title"); - control.onAdd = function (map) { - var $container = $('
') - .attr('class', 'control-key'); - - $('') - .attr('class', 'control-button') - .attr('href', '#') - .attr('title', I18n.t('javascripts.key.tooltip')) - .html('') - .on('click', toggle) - .appendTo($container); - - var $ui = $('
') - .attr('class', 'key-ui'); - - $('
') - .attr('class', 'sidebar_heading') - .appendTo($ui) - .append( - $('') - .text(I18n.t('javascripts.close')) - .attr('class', 'sidebar_close') - .attr('href', '#') - .bind('click', toggle)) - .append( - $('

') - .text(I18n.t('javascripts.key.title'))); - - var $section = $('
') - .attr('class', 'section') + control.onAddPane = function (map, button, $ui) { + var $section = $("
") + .attr("class", "p-3") .appendTo($ui); - options.sidebar.addPane($ui); - $ui - .on('show', shown) - .on('hide', hidden); + .on("show", shown) + .on("hide", hidden); + + map.on("baselayerchange", updateButton); + + updateButton(); function shown() { - map.on('zoomend baselayerchange', update); - $section.load('/key', update); + map.on("zoomend baselayerchange", update); + $section.load("/key", update); } function hidden() { - map.off('zoomend baselayerchange', update); + map.off("zoomend baselayerchange", update); } - function toggle(e) { - e.stopPropagation(); - e.preventDefault(); - options.sidebar.togglePane($ui); + 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(); + zoom = map.getZoom(); - $('.mapkey-table-entry').each(function () { + $(".mapkey-table-entry").each(function () { var data = $(this).data(); - if (layer == data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) { - $(this).show(); - } else { - $(this).hide(); - } + $(this).toggle( + layer === data.layer && + (!data.zoomMin || zoom >= data.zoomMin) && + (!data.zoomMax || zoom <= data.zoomMax) + ); }); } - - return $container[0]; }; return control;