Put link next to input and make it non-navigable

[rails.git] / app / assets / javascripts / leaflet.share.js

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 9388bde658f992812547546cd64ab8034a839ad7..15e4a722989f029065d5b1053c8285f49e979780 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -34,7 +34,7 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
-    // Link / Embed
+    // Link
 
     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
@@ -61,22 +61,21 @@ L.OSM.share = function (options) {
               .bind('change', toggleMarker))
           .append(I18n.t('javascripts.share.include_marker')));
 
-    var $shortLink, $longLink;
-
     $('<div>')
       .attr('class', 'form-row')
       .appendTo($form)
       .append($('<label>')
         .attr('for', 'long_input')
         .text(I18n.t('javascripts.share.long_link')))
-      .append($('<a>')
-        .attr('id', 'long_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'long_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
 
     $('<div>')
       .attr('class', 'form-row')
@@ -84,14 +83,25 @@ L.OSM.share = function (options) {
       .append($('<label>')
         .attr('for', 'short_input')
         .text(I18n.t('javascripts.share.short_link')))
-      .append($('<a>')
-        .attr('id', 'short_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'short_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
+
+    // Embed
+
+    var $embedSection = $('<div>')
+      .attr('class', 'section share-embed')
+      .appendTo($ui);
+
+    var $form = $('<form>')
+      .attr('class', 'standard-form')
+      .appendTo($embedSection);
 
     $('<div>')
       .attr('class', 'form-row')
@@ -245,6 +255,10 @@ L.OSM.share = function (options) {
     }
 
     function update() {
+      if (map.hasLayer(marker)) {
+        map.panTo(marker.getLatLng());
+      }
+
       var bounds = map.getBounds();
 
       $('#link_marker')
@@ -271,9 +285,9 @@ L.OSM.share = function (options) {
 
       $('#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="' + map.getUrl(marker) + '</a></small>');
+          '<small><a href="' + escapeHTML(map.getUrl(marker)) + '</a></small>');
 
       // Image