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