X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/c8f8dbca19f9f1ed3539f93e1785d4de70f2b093..bf9dd8f350ca1b54afb79dda79506d980ccb5738:/app/assets/javascripts/leaflet.key.js diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js index 4906cfcff..e839171ab 100644 --- a/app/assets/javascripts/leaflet.key.js +++ b/app/assets/javascripts/leaflet.key.js @@ -2,54 +2,80 @@ L.OSM.key = function (options) { var control = L.control(options); 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) + var $container = $("
") + .attr("class", "control-key"); + + var button = $("") + .attr("class", "control-button") + .attr("href", "#") + .html("") + .on("click", toggle) .appendTo($container); - var $ui = $('
') - .attr('class', 'layers-ui') - .appendTo(options.uiPane); + var $ui = $("
") + .attr("class", "key-ui"); - $('

') - .text(I18n.t('javascripts.key.title')) - .appendTo($ui); + $("
") + .attr("class", "sidebar_heading") + .appendTo($ui) + .append( + $("") + .text(I18n.t("javascripts.close")) + .attr("class", "icon close") + .bind("click", toggle)) + .append( + $("

") + .text(I18n.t("javascripts.key.title"))); - var $section = $('
') + var $section = $("
") + .attr("class", "section") .appendTo($ui); + options.sidebar.addPane($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 toggle(e) { e.stopPropagation(); e.preventDefault(); - - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - - if ($ui.is(':visible')) { - $(options.uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - map.off("zoomend baselayerchange", update); - } else { - $(options.uiPane).show(); - controlContainer.css({paddingRight: '200px'}); - map.on("zoomend baselayerchange", update); - $section.load('/key', update); + 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 + .toggleClass("disabled", disabled) + .attr("data-original-title", + I18n.t(disabled ? + "javascripts.key.tooltip_disabled" : + "javascripts.key.tooltip")); } function update() { - var mapLayer = getMapBaseLayerId(map), - mapZoom = map.getZoom(); + var layer = map.getMapBaseLayerId(), + zoom = map.getZoom(); $(".mapkey-table-entry").each(function () { var data = $(this).data(); - - if (mapLayer == data.layer && mapZoom >= data.zoomMin && mapZoom <= data.zoomMax) { + if (layer === data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) { $(this).show(); } else { $(this).hide();