var $container = $('<div>')
.attr('class', 'control-share');
- $('<a>')
.attr('class', 'control-button')
.attr('href', '#')
- .attr('title', 'Share')
+ .attr('title', I18n.t('javascripts.share.title'))
.html('<span class="icon share"></span>')
.on('click', toggle)
.appendTo($container);
.attr('class', 'sidebar_heading')
.appendTo($ui)
.append(
- $('<a>')
+ $('<span>')
.text(I18n.t('javascripts.close'))
- .attr('class', 'sidebar_close')
- .attr('href', '#')
+ .attr('class', 'icon close')
.bind('click', toggle))
.append(
$('<h4>')
.text(I18n.t('javascripts.share.title')));
- // Link
+ // Link / Embed
var $linkSection = $('<div>')
.attr('class', 'section share-link')
.text(I18n.t('javascripts.share.link'))
.appendTo($linkSection);
- var $shortLink, $longLink;
-
- $('<ul>')
- .appendTo($linkSection)
- .append($('<li>')
- .append($longLink = $('<a>')
- .text(I18n.t('javascripts.share.long_link'))))
- .append($('<li>')
- .append($shortLink = $('<a>')
- .text(I18n.t('javascripts.share.short_link'))));
-
- // Embeddable HTML
-
- var $embedSection = $('<div>')
- .attr('class', 'section share-html')
- .appendTo($ui);
-
- $('<h4>')
- .text(I18n.t('javascripts.share.embed'))
- .appendTo($embedSection);
-
var $form = $('<form>')
.attr('class', 'standard-form')
- .attr('action', '/export/finish')
- .attr('method', 'post')
- .appendTo($embedSection);
+ .appendTo($linkSection);
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append(
$('<label>')
- .attr('for', 'embed_marker')
+ .attr('for', 'link_marker')
.append(
$('<input>')
- .attr('id', 'embed_marker')
+ .attr('id', 'link_marker')
.attr('type', 'checkbox')
.bind('change', toggleMarker))
- .append(I18n.t('javascripts.share.include_marker')))
+ .append(I18n.t('javascripts.share.include_marker')));
$('<div>')
- .attr('class', 'form-row')
+ .attr('class', 'share-tabs')
+ .appendTo($form)
+ .append($('<a>')
+ .attr('class', 'active')
+ .attr('for', 'long_input')
+ .attr('id', 'long_link')
+ .text(I18n.t('javascripts.share.long_link')))
+ .append($('<a>')
+ .attr('for', 'short_input')
+ .attr('id', 'short_link')
+ .text(I18n.t('javascripts.share.short_link')))
+ .append($('<a>')
+ .attr('for', 'embed_html')
+ .attr('href', '#')
+ .text(I18n.t('javascripts.share.embed')))
+ .on('click', 'a', function(e) {
+ e.preventDefault();
+ var id = '#' + $(this).attr('for');
+ $linkSection.find('.share-tabs a')
+ .removeClass('active');
+ $(this).addClass('active');
+ $linkSection.find('.share-tab')
+ .hide();
+ $linkSection.find('.share-tab:has(' + id + ')')
+ .show()
+ .find('input, textarea')
+ .select();
+ });
+
+ $('<div>')
+ .attr('class', 'form-row share-tab')
+ .css('display', 'block')
+ .appendTo($form)
+ .append($('<input>')
+ .attr('id', 'long_input')
+ .attr('type', 'text')
+ .on('click', select));
+
+ $('<div>')
+ .attr('class', 'form-row share-tab')
+ .appendTo($form)
+ .append($('<input>')
+ .attr('id', 'short_input')
+ .attr('type', 'text')
+ .on('click', select));
+
+ $('<div>')
+ .attr('class', 'form-row share-tab')
.appendTo($form)
.append(
$('<textarea>')
.attr('id', 'embed_html')
- .on('click', select));
+ .on('click', select))
+ .append(
+ $('<p>')
+ .attr('class', 'deemphasize')
+ .text(I18n.t('javascripts.share.paste_html'))
+ .appendTo($linkSection));
- $('<p>')
- .attr('class', 'deemphasize')
- .text(I18n.t('javascripts.share.paste_html'))
- .appendTo($embedSection);
+ // Geo URI
+
+ var $geoUriSection = $('<div>')
+ .attr('class', 'section share-geo-uri')
+ .appendTo($ui);
+
+ $('<h4>')
+ .text(I18n.t('javascripts.share.geo_uri'))
+ .appendTo($geoUriSection);
+
+ $('<div>')
+ .appendTo($geoUriSection)
+ .append($('<a>')
+ .attr('id', 'geo_uri'));
// Image
.text(I18n.t('javascripts.share.image'))
.appendTo($imageSection);
+ $('<div>')
+ .attr('id', 'export-warning')
+ .attr('class', 'deemphasize')
+ .text(I18n.t('javascripts.share.only_standard_layer'))
+ .appendTo($imageSection);
+
$form = $('<form>')
+ .attr('id', 'export-image')
.attr('class', 'standard-form')
.attr('action', '/export/finish')
.attr('method', 'post')
.appendTo($form)
.append(
$('<label>')
- .attr('class', 'standard-label')
.attr('for', 'mapnik_format')
.text(I18n.t('javascripts.share.format')))
.append($('<select>')
.attr('class', 'form-row')
.appendTo($form)
.append($('<label>')
- .attr('class', 'standard-label')
.attr('for', 'mapnik_scale')
.text(I18n.t('javascripts.share.scale')))
.append('1 : ')
.attr('type', 'hidden')
.appendTo($form);
+ var csrf_param = $("meta[name=csrf-param]").attr("content"),
+ csrf_token = $("meta[name=csrf-token]").attr("content");
+
+ $('<input>')
+ .attr('name', csrf_param)
+ .attr('value', csrf_token)
+ .attr('type', 'hidden')
+ .appendTo($form);
+
$('<p>')
.attr('class', 'deemphasize')
.html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
.on('change', update)
.addTo(map);
+ marker.on('dragend', movedMarker);
+ map.on('move', movedMap);
map.on('moveend layeradd layerremove', update);
options.sidebar.addPane($ui);
+ $ui
+ .on('hide', hidden);
+
+ function hidden() {
+ map.removeLayer(marker);
+ map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
+ locationFilter.disable();
+ update();
+ }
+
function toggle(e) {
e.stopPropagation();
e.preventDefault();
marker.setLatLng(map.getCenter());
update();
- options.sidebar.togglePane($ui);
+ 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();
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() {
- // Link
+ var bounds = map.getBounds();
- $shortLink.attr('href', map.getShortUrl());
- $longLink.attr('href', map.getUrl());
+ $('#link_marker')
+ .prop('checked', map.hasLayer(marker));
- // Embed
+ $('#image_filter')
+ .prop('checked', locationFilter.isEnabled());
- var bounds = map.getBounds(),
- center = bounds.getCenter(),
- params = {
- bbox: bounds.toBBoxString(),
- layer: map.getMapBaseLayerId()
- },
- linkParams = {
- lat: center.lat,
- lon: center.lng,
- zoom: map.getBoundsZoom(bounds),
- layers: map.getLayersCode()
- };
+ // Link / Embed
+
+ $('#short_input').val(map.getShortUrl(marker));
+ $('#long_input').val(map.getUrl(marker));
+ $('#short_link').attr('href', map.getShortUrl(marker));
+ $('#long_link').attr('href', map.getUrl(marker));
+
+ var params = {
+ bbox: bounds.toBBoxString(),
+ layer: map.getMapBaseLayerId()
+ };
if (map.hasLayer(marker)) {
- var m = marker.getLatLng();
- params.marker = m.lat + ',' + m.lng;
- linkParams.mlat = m.lat;
- linkParams.mlon = m.lng;
+ var latLng = marker.getLatLng().wrap();
+ params.marker = latLng.lat + ',' + latLng.lng;
}
$('#embed_html').val(
'<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
- 'http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params) +
+ escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
'" style="border: 1px solid black"></iframe><br/>' +
- '<small><a href="' +
- 'http://' + OSM.SERVER_URL + '/?' + $.param(linkParams) +
- '">' + I18n.t('export.start_rjs.view_larger_map') + '</a></small>');
+ '<small><a href="' + escapeHTML(map.getUrl(marker)) + '">' +
+ escapeHTML(I18n.t('javascripts.share.view_larger_map')) + '</a></small>');
+
+ // Geo URI
+
+ $('#geo_uri')
+ .attr('href', map.getGeoUri(marker))
+ .html(map.getGeoUri(marker));
// Image
$("#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() {
projects / rails.git / blobdiff