X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/fa9b4a5f6a00fd862ce3230a64d6c6c89c7fbb6c..b9b255fa65813af95702b848cb084e2286345de9:/app/assets/javascripts/leaflet.share.js diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 6dd420cbe..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( $('

') @@ -64,23 +63,31 @@ L.OSM.share = function (options) { $('
') .attr('class', 'share-tabs') .appendTo($form) - .append($('') .attr('class', 'active') .attr('for', 'long_input') + .attr('id', 'long_link') .text(I18n.t('javascripts.share.long_link'))) - .append($('') .attr('for', 'short_input') + .attr('id', 'short_link') .text(I18n.t('javascripts.share.short_link'))) - .append($('') .attr('for', 'embed_html') + .attr('href', '#') .text(I18n.t('javascripts.share.embed'))) - .on('click', 'label', function() { + .on('click', 'a', function(e) { + e.preventDefault(); var id = '#' + $(this).attr('for'); - $linkSection.find('.share-tabs label') + $linkSection.find('.share-tabs a') .removeClass('active'); $(this).addClass('active'); - $linkSection.find('.share-tab').hide(); - $linkSection.find('.share-tab:has(' + id + ')').show(); + $linkSection.find('.share-tab') + .hide(); + $linkSection.find('.share-tab:has(' + id + ')') + .show() + .find('input, textarea') + .select(); }); $('
') @@ -90,12 +97,7 @@ L.OSM.share = function (options) { .append($('') .attr('id', 'long_input') .attr('type', 'text') - .on('click', select)) - .append($('') - .attr('id', 'long_link') - .on('click', function() { return false; }) - .append($('') - .attr('class', 'icon link'))); + .on('click', select)); $('
') .attr('class', 'form-row share-tab') @@ -103,12 +105,7 @@ L.OSM.share = function (options) { .append($('') .attr('id', 'short_input') .attr('type', 'text') - .on('click', select)) - .append($('') - .attr('id', 'short_link') - .on('click', function() { return false; }) - .append($('') - .attr('class', 'icon link'))); + .on('click', select)); $('
') .attr('class', 'form-row share-tab') @@ -123,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 = $('
') @@ -133,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') @@ -208,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); @@ -218,6 +238,7 @@ L.OSM.share = function (options) { function hidden() { map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; locationFilter.disable(); update(); } @@ -231,24 +252,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(); @@ -256,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') @@ -282,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 @@ -314,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() {