Make the toggles themselves permalinks

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 6dd420cbef1c62ac4ef28908881bf6c39bd120c2..d43bc8ad26665dd64ead12a4962f5655a1324f12 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -64,23 +64,31 @@ L.OSM.share = function (options) {
     $('<div>')
       .attr('class', 'share-tabs')
       .appendTo($form)
     $('<div>')
       .attr('class', 'share-tabs')
       .appendTo($form)

-      .append($('<label>')
+      .append($('<a>')

         .attr('class', 'active')
         .attr('for', 'long_input')
         .attr('class', 'active')
         .attr('for', 'long_input')

+        .attr('id', 'long_link')

         .text(I18n.t('javascripts.share.long_link')))
         .text(I18n.t('javascripts.share.long_link')))

-      .append($('<label>')
+      .append($('<a>')

         .attr('for', 'short_input')
         .attr('for', 'short_input')

+        .attr('id', 'short_link')

         .text(I18n.t('javascripts.share.short_link')))
         .text(I18n.t('javascripts.share.short_link')))

-      .append($('<label>')
+      .append($('<a>')

         .attr('for', 'embed_html')
         .attr('for', 'embed_html')

+        .attr('href', '#')

         .text(I18n.t('javascripts.share.embed')))
         .text(I18n.t('javascripts.share.embed')))

-      .on('click', 'label', function() {
+      .on('click', 'a', function(e) {
+        e.preventDefault();

         var id = '#' + $(this).attr('for');
         var id = '#' + $(this).attr('for');

-        $linkSection.find('.share-tabs label')
+        $linkSection.find('.share-tabs a')

           .removeClass('active');
         $(this).addClass('active');
           .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();

       });
 
     $('<div>')
       });
 
     $('<div>')


@@ -90,12 +98,7 @@ L.OSM.share = function (options) {
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')

-        .on('click', select))
-      .append($('<a>')
-        .attr('id', 'long_link')
-        .on('click', function() { return false; })
-        .append($('<span>')
-          .attr('class', 'icon link')));
+        .on('click', select));

 
     $('<div>')
       .attr('class', 'form-row share-tab')
 
     $('<div>')
       .attr('class', 'form-row share-tab')


@@ -103,12 +106,7 @@ L.OSM.share = function (options) {
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')

-        .on('click', select))
-      .append($('<a>')
-        .attr('id', 'short_link')
-        .on('click', function() { return false; })
-        .append($('<span>')
-          .attr('class', 'icon link')));
+        .on('click', select));

 
     $('<div>')
       .attr('class', 'form-row share-tab')
 
     $('<div>')
       .attr('class', 'form-row share-tab')

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 0db2c5302ec1e50867705a7878ec2d9688679092..19ad55d31672166c36935737715de4bef22182b3 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -640,22 +640,24 @@ a.donate {
   .share-tabs {
     margin-bottom: 10px;
 
   .share-tabs {
     margin-bottom: 10px;
 

-    label {
+    a {
+      color: #fff;
+      text-decoration: none;

       background-color: $lightblue;
       padding: 5px 10px;
     }
 
       background-color: $lightblue;
       padding: 5px 10px;
     }
 

-    label:first-child {
+    a:first-child {

       border-right: 1px solid #fff;
       border-radius: 4px 0 0 4px;
     }
 
       border-right: 1px solid #fff;
       border-radius: 4px 0 0 4px;
     }
 

-    label:last-child {
+    a:last-child {

       border-left: 1px solid #fff;
       border-radius: 0 4px 4px 0;
     }
 
       border-left: 1px solid #fff;
       border-radius: 0 4px 4px 0;
     }
 

-    label.active {
+    a.active {

       background-color: $blue;
     }
   }
       background-color: $blue;
     }
   }


@@ -665,17 +667,9 @@ a.donate {
   }
 
   .share-link {
   }
 
   .share-link {

-    #long_input,
-    #short_input {
-      width: 190px;
-    }
-
-    a {
-      margin-left: 5px;
-    }
-
-    input,
+    input[type=text],

     textarea {
     textarea {

+      width: 100%;

       font-family: monospace;
       font-size: small;
     }
       font-family: monospace;
       font-size: small;
     }