X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/48775da938fcfa29902b1d18fdde80aadc17c249..6c0501d62a72fe217c522bcbf0017926c7e30fd6:/app/assets/javascripts/leaflet.share.js?ds=sidebyside diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index d43bc8ad2..7cfd50c8e 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') @@ -192,6 +213,15 @@ L.OSM.share = function (options) { .attr('type', 'hidden') .appendTo($form); + var csrf_param = $("meta[name=csrf-param]").attr("content"), + csrf_token = $("meta[name=csrf-token]").attr("content"); + + $('') + .attr('name', csrf_param) + .attr('value', csrf_token) + .attr('type', 'hidden') + .appendTo($form); + $('') .attr('class', 'deemphasize') .html(I18n.t('javascripts.share.image_size') + ' x ') @@ -206,8 +236,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 +247,7 @@ L.OSM.share = function (options) { function hidden() { map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; locationFilter.disable(); update(); } @@ -229,24 +261,24 @@ 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(); } function toggleFilter() { if ($(this).is(':checked')) { - if (!locationFilter.getBounds().isValid()) { - locationFilter.setBounds(map.getBounds().pad(-0.2)); - } - + locationFilter.setBounds(map.getBounds().pad(-0.2)); locationFilter.enable(); } else { locationFilter.disable(); @@ -254,11 +286,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') @@ -280,14 +340,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 @@ -312,6 +380,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() {
') .attr('class', 'deemphasize') .html(I18n.t('javascripts.share.image_size') + ' x ') @@ -206,8 +236,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 +247,7 @@ L.OSM.share = function (options) { function hidden() { map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; locationFilter.disable(); update(); } @@ -229,24 +261,24 @@ 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(); } function toggleFilter() { if ($(this).is(':checked')) { - if (!locationFilter.getBounds().isValid()) { - locationFilter.setBounds(map.getBounds().pad(-0.2)); - } - + locationFilter.setBounds(map.getBounds().pad(-0.2)); locationFilter.enable(); } else { locationFilter.disable(); @@ -254,11 +286,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') @@ -280,14 +340,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 @@ -312,6 +380,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() {