7cfd50c8e23e09eb7fcc550ca159797e92a797d3
[rails.git] / app / assets / javascripts / leaflet.share.js
1 L.OSM.share = function (options) {
2   var control = L.control(options),
3     marker = L.marker([0, 0], {draggable: true}),
4     locationFilter = new L.LocationFilter({
5       enableButton: false,
6       adjustButton: false
7     });
8
9   control.onAdd = function (map) {
10     var $container = $('<div>')
11       .attr('class', 'control-share');
12
13     var button = $('<a>')
14       .attr('class', 'control-button')
15       .attr('href', '#')
16       .attr('title', I18n.t('javascripts.share.title'))
17       .html('<span class="icon share"></span>')
18       .on('click', toggle)
19       .appendTo($container);
20
21     var $ui = $('<div>')
22       .attr('class', 'share-ui');
23
24     $('<div>')
25       .attr('class', 'sidebar_heading')
26       .appendTo($ui)
27       .append(
28         $('<span>')
29           .text(I18n.t('javascripts.close'))
30           .attr('class', 'icon close')
31           .bind('click', toggle))
32       .append(
33         $('<h4>')
34           .text(I18n.t('javascripts.share.title')));
35
36     // Link / Embed
37
38     var $linkSection = $('<div>')
39       .attr('class', 'section share-link')
40       .appendTo($ui);
41
42     $('<h4>')
43       .text(I18n.t('javascripts.share.link'))
44       .appendTo($linkSection);
45
46     var $form = $('<form>')
47       .attr('class', 'standard-form')
48       .appendTo($linkSection);
49
50     $('<div>')
51       .attr('class', 'form-row')
52       .appendTo($form)
53       .append(
54         $('<label>')
55           .attr('for', 'link_marker')
56           .append(
57             $('<input>')
58               .attr('id', 'link_marker')
59               .attr('type', 'checkbox')
60               .bind('change', toggleMarker))
61           .append(I18n.t('javascripts.share.include_marker')));
62
63     $('<div>')
64       .attr('class', 'share-tabs')
65       .appendTo($form)
66       .append($('<a>')
67         .attr('class', 'active')
68         .attr('for', 'long_input')
69         .attr('id', 'long_link')
70         .text(I18n.t('javascripts.share.long_link')))
71       .append($('<a>')
72         .attr('for', 'short_input')
73         .attr('id', 'short_link')
74         .text(I18n.t('javascripts.share.short_link')))
75       .append($('<a>')
76         .attr('for', 'embed_html')
77         .attr('href', '#')
78         .text(I18n.t('javascripts.share.embed')))
79       .on('click', 'a', function(e) {
80         e.preventDefault();
81         var id = '#' + $(this).attr('for');
82         $linkSection.find('.share-tabs a')
83           .removeClass('active');
84         $(this).addClass('active');
85         $linkSection.find('.share-tab')
86           .hide();
87         $linkSection.find('.share-tab:has(' + id + ')')
88           .show()
89           .find('input, textarea')
90           .select();
91       });
92
93     $('<div>')
94       .attr('class', 'form-row share-tab')
95       .css('display', 'block')
96       .appendTo($form)
97       .append($('<input>')
98         .attr('id', 'long_input')
99         .attr('type', 'text')
100         .on('click', select));
101
102     $('<div>')
103       .attr('class', 'form-row share-tab')
104       .appendTo($form)
105       .append($('<input>')
106         .attr('id', 'short_input')
107         .attr('type', 'text')
108         .on('click', select));
109
110     $('<div>')
111       .attr('class', 'form-row share-tab')
112       .appendTo($form)
113       .append(
114         $('<textarea>')
115           .attr('id', 'embed_html')
116           .on('click', select))
117       .append(
118         $('<p>')
119           .attr('class', 'deemphasize')
120           .text(I18n.t('javascripts.share.paste_html'))
121           .appendTo($linkSection));
122
123     // Geo URI
124
125     var $geoUriSection = $('<div>')
126       .attr('class', 'section share-geo-uri')
127       .appendTo($ui);
128
129     $('<h4>')
130       .text(I18n.t('javascripts.share.geo_uri'))
131       .appendTo($geoUriSection);
132
133     $('<div>')
134       .appendTo($geoUriSection)
135       .append($('<a>')
136         .attr('id', 'geo_uri'));
137
138     // Image
139
140     var $imageSection = $('<div>')
141       .attr('class', 'section share-image')
142       .appendTo($ui);
143
144     $('<h4>')
145       .text(I18n.t('javascripts.share.image'))
146       .appendTo($imageSection);
147
148     $('<div>')
149       .attr('id', 'export-warning')
150       .attr('class', 'deemphasize')
151       .text(I18n.t('javascripts.share.only_standard_layer'))
152       .appendTo($imageSection);
153
154     $form = $('<form>')
155       .attr('id', 'export-image')
156       .attr('class', 'standard-form')
157       .attr('action', '/export/finish')
158       .attr('method', 'post')
159       .appendTo($imageSection);
160
161     $('<div>')
162       .attr('class', 'form-row')
163       .appendTo($form)
164       .append(
165         $('<label>')
166           .attr('for', 'image_filter')
167           .append(
168             $('<input>')
169               .attr('id', 'image_filter')
170               .attr('type', 'checkbox')
171               .bind('change', toggleFilter))
172           .append(I18n.t('javascripts.share.custom_dimensions')));
173
174     $('<div>')
175       .attr('class', 'form-row')
176       .appendTo($form)
177       .append(
178         $('<label>')
179           .attr('for', 'mapnik_format')
180           .text(I18n.t('javascripts.share.format')))
181       .append($('<select>')
182         .attr('name', 'mapnik_format')
183         .attr('id', 'mapnik_format')
184         .append($('<option>').val('png').text('PNG').prop('selected', true))
185         .append($('<option>').val('jpeg').text('JPEG'))
186         .append($('<option>').val('svg').text('SVG'))
187         .append($('<option>').val('pdf').text('PDF')));
188
189     $('<div>')
190       .attr('class', 'form-row')
191       .appendTo($form)
192       .append($('<label>')
193         .attr('for', 'mapnik_scale')
194         .text(I18n.t('javascripts.share.scale')))
195       .append('1 : ')
196       .append($('<input>')
197         .attr('name', 'mapnik_scale')
198         .attr('id', 'mapnik_scale')
199         .attr('type', 'text')
200         .on('change', update));
201
202     ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
203       $('<input>')
204         .attr('id', 'mapnik_' + name)
205         .attr('name', name)
206         .attr('type', 'hidden')
207         .appendTo($form);
208     });
209
210     $('<input>')
211       .attr('name', 'format')
212       .attr('value', 'mapnik')
213       .attr('type', 'hidden')
214       .appendTo($form);
215
216     var csrf_param = $("meta[name=csrf-param]").attr("content"),
217         csrf_token = $("meta[name=csrf-token]").attr("content");
218
219     $('<input>')
220       .attr('name', csrf_param)
221       .attr('value', csrf_token)
222       .attr('type', 'hidden')
223       .appendTo($form);
224
225     $('<p>')
226       .attr('class', 'deemphasize')
227       .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
228       .appendTo($form);
229
230     $('<input>')
231       .attr('type', 'submit')
232       .attr('value', I18n.t('javascripts.share.download'))
233       .appendTo($form);
234
235     locationFilter
236       .on('change', update)
237       .addTo(map);
238
239     marker.on('dragend', movedMarker);
240     map.on('move', movedMap);
241     map.on('moveend layeradd layerremove', update);
242
243     options.sidebar.addPane($ui);
244
245     $ui
246       .on('hide', hidden);
247
248     function hidden() {
249       map.removeLayer(marker);
250       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
251       locationFilter.disable();
252       update();
253     }
254
255     function toggle(e) {
256       e.stopPropagation();
257       e.preventDefault();
258
259       $('#mapnik_scale').val(getScale());
260       marker.setLatLng(map.getCenter());
261
262       update();
263       options.sidebar.togglePane($ui, button);
264       $('.leaflet-control .control-button').tooltip('hide');
265     }
266
267     function toggleMarker() {
268       if ($(this).is(':checked')) {
269         marker.setLatLng(map.getCenter());
270         map.addLayer(marker);
271         map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
272       } else {
273         map.removeLayer(marker);
274         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
275       }
276       update();
277     }
278
279     function toggleFilter() {
280       if ($(this).is(':checked')) {
281         locationFilter.setBounds(map.getBounds().pad(-0.2));
282         locationFilter.enable();
283       } else {
284         locationFilter.disable();
285       }
286       update();
287     }
288
289     function movedMap() {
290       marker.setLatLng(map.getCenter());
291       update();
292     }
293
294     function movedMarker() {
295       if (map.hasLayer(marker)) {
296         map.off('move', movedMap);
297         map.on('moveend', updateOnce);
298         map.panTo(marker.getLatLng());
299       }
300     }
301
302     function updateOnce() {
303       map.off('moveend', updateOnce);
304       map.on('move', movedMap);
305       update();
306     }
307
308     function escapeHTML(string) {
309       var htmlEscapes = {
310         '&': '&amp;',
311         '<': '&lt;',
312         '>': '&gt;',
313         '"': '&quot;',
314         "'": '&#x27;'
315       };
316       return string === null ? '' : (string + '').replace(/[&<>"']/g, function(match) {
317         return htmlEscapes[match];
318       });
319     }
320
321     function update() {
322       var bounds = map.getBounds();
323
324       $('#link_marker')
325         .prop('checked', map.hasLayer(marker));
326
327       $('#image_filter')
328         .prop('checked', locationFilter.isEnabled());
329
330       // Link / Embed
331
332       $('#short_input').val(map.getShortUrl(marker));
333       $('#long_input').val(map.getUrl(marker));
334       $('#short_link').attr('href', map.getShortUrl(marker));
335       $('#long_link').attr('href', map.getUrl(marker));
336
337       var params = {
338         bbox: bounds.toBBoxString(),
339         layer: map.getMapBaseLayerId()
340       };
341
342       if (map.hasLayer(marker)) {
343         var latLng = marker.getLatLng().wrap();
344         params.marker = latLng.lat + ',' + latLng.lng;
345       }
346
347       $('#embed_html').val(
348         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
349           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
350           '" style="border: 1px solid black"></iframe><br/>' +
351           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '">' +
352           escapeHTML(I18n.t('javascripts.share.view_larger_map')) + '</a></small>');
353
354       // Geo URI
355
356       $('#geo_uri')
357         .attr('href', map.getGeoUri(marker))
358         .html(map.getGeoUri(marker));
359
360       // Image
361
362       if (locationFilter.isEnabled()) {
363         bounds = locationFilter.getBounds();
364       }
365
366       var scale = $("#mapnik_scale").val(),
367         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
368                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
369         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
370
371       $('#mapnik_minlon').val(bounds.getWest());
372       $('#mapnik_minlat').val(bounds.getSouth());
373       $('#mapnik_maxlon').val(bounds.getEast());
374       $('#mapnik_maxlat').val(bounds.getNorth());
375
376       if (scale < maxScale) {
377         scale = roundScale(maxScale);
378         $("#mapnik_scale").val(scale);
379       }
380
381       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
382       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
383
384       if (map.getMapBaseLayerId() === 'mapnik') {
385         $('#export-image').show();
386         $('#export-warning').hide();
387       } else {
388         $('#export-image').hide();
389         $('#export-warning').show();
390       }
391     }
392
393     function select() {
394       $(this).select();
395     }
396
397     function getScale() {
398       var bounds = map.getBounds(),
399         centerLat = bounds.getCenter().lat,
400         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
401         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
402         pixelsPerMeter = map.getSize().x / meters,
403         metersPerPixel = 1 / (92 * 39.3701);
404       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
405     }
406
407     function roundScale(scale) {
408       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
409       return precision * Math.ceil(scale / precision);
410     }
411
412     return $container[0];
413   };
414
415   return control;
416 };