X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/21ad851612156ce977cfefc59c90898fff72266a..69b967c9ff7c185f99ba881a8b8591c02c809628:/app/assets/javascripts/leaflet.share.js diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index d58b62313..a6b10821e 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -13,7 +13,7 @@ L.OSM.share = function (options) { var button = $('') .attr('class', 'control-button') .attr('href', '#') - .attr('title', 'Share') + .attr('title', I18n.t('javascripts.share.title')) .html('') .on('click', toggle) .appendTo($container); @@ -25,10 +25,9 @@ L.OSM.share = function (options) { .attr('class', 'sidebar_heading') .appendTo($ui) .append( - $('') + $('') .text(I18n.t('javascripts.close')) - .attr('class', 'sidebar_close') - .attr('href', '#') + .attr('class', 'icon close') .bind('click', toggle)) .append( $('

') @@ -121,6 +120,21 @@ L.OSM.share = function (options) { .text(I18n.t('javascripts.share.paste_html')) .appendTo($linkSection)); + // Geo URI + + var $geoUriSection = $('
') + .attr('class', 'section share-geo-uri') + .appendTo($ui); + + $('

') + .text(I18n.t('javascripts.share.geo_uri')) + .appendTo($geoUriSection); + + $('
') + .appendTo($geoUriSection) + .append($('') + .attr('id', 'geo_uri')); + // Image var $imageSection = $('
') @@ -131,7 +145,14 @@ L.OSM.share = function (options) { .text(I18n.t('javascripts.share.image')) .appendTo($imageSection); + $('
') + .attr('id', 'export-warning') + .attr('class', 'deemphasize') + .text(I18n.t('javascripts.share.only_standard_layer')) + .appendTo($imageSection); + $form = $('
') + .attr('id', 'export-image') .attr('class', 'standard-form') .attr('action', '/export/finish') .attr('method', 'post') @@ -206,8 +227,9 @@ L.OSM.share = function (options) { .on('change', update) .addTo(map); + marker.on('dragend', movedMarker); + map.on('move', movedMap); map.on('moveend layeradd layerremove', update); - marker.on('dragend', update); options.sidebar.addPane($ui); @@ -216,6 +238,7 @@ L.OSM.share = function (options) { function hidden() { map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; locationFilter.disable(); update(); } @@ -229,14 +252,17 @@ L.OSM.share = function (options) { update(); options.sidebar.togglePane($ui, button); + $('.leaflet-control .control-button').tooltip('hide'); } function toggleMarker() { if ($(this).is(':checked')) { marker.setLatLng(map.getCenter()); map.addLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center'; } else { map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; } update(); } @@ -251,11 +277,39 @@ L.OSM.share = function (options) { update(); } - function update() { + function movedMap() { + marker.setLatLng(map.getCenter()); + update(); + } + + function movedMarker() { if (map.hasLayer(marker)) { + map.off('move', movedMap); + map.on('moveend', updateOnce); map.panTo(marker.getLatLng()); } + } + + function updateOnce() { + map.off('moveend', updateOnce); + map.on('move', movedMap); + update(); + } + function escapeHTML(string) { + var htmlEscapes = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }; + return string === null ? '' : (string + '').replace(/[&<>"']/g, function(match) { + return htmlEscapes[match]; + }); + } + + function update() { var bounds = map.getBounds(); $('#link_marker') @@ -277,14 +331,22 @@ L.OSM.share = function (options) { }; if (map.hasLayer(marker)) { - params.marker = marker.getLatLng().lat + ',' + marker.getLatLng().lng; + var latLng = marker.getLatLng().wrap(); + params.marker = latLng.lat + ',' + latLng.lng; } $('#embed_html').val( '
' + - '
' + + escapeHTML(I18n.t('javascripts.share.view_larger_map')) + ''); + + // Geo URI + + $('#geo_uri') + .attr('href', map.getGeoUri(marker)) + .html(map.getGeoUri(marker)); // Image @@ -309,6 +371,14 @@ L.OSM.share = function (options) { $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028)); $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028)); + + if (map.getMapBaseLayerId() === 'mapnik') { + $('#export-image').show(); + $('#export-warning').hide(); + } else { + $('#export-image').hide(); + $('#export-warning').show(); + } } function select() {