From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 21:07:28 +0000 (-0700)
Subject: Make the toggles themselves permalinks
X-Git-Tag: live~4841^2~6
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/48775da938fcfa29902b1d18fdde80aadc17c249?hp=fa9b4a5f6a00fd862ce3230a64d6c6c89c7fbb6c

Make the toggles themselves permalinks
---

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 6dd420cbe..d43bc8ad2 100644
--- 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)
-      .append($('<label>')
+      .append($('<a>')
         .attr('class', 'active')
         .attr('for', 'long_input')
+        .attr('id', 'long_link')
         .text(I18n.t('javascripts.share.long_link')))
-      .append($('<label>')
+      .append($('<a>')
         .attr('for', 'short_input')
+        .attr('id', 'short_link')
         .text(I18n.t('javascripts.share.short_link')))
-      .append($('<label>')
+      .append($('<a>')
         .attr('for', 'embed_html')
+        .attr('href', '#')
         .text(I18n.t('javascripts.share.embed')))
-      .on('click', 'label', function() {
+      .on('click', 'a', function(e) {
+        e.preventDefault();
         var id = '#' + $(this).attr('for');
-        $linkSection.find('.share-tabs label')
+        $linkSection.find('.share-tabs a')
           .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>')
@@ -90,12 +98,7 @@ L.OSM.share = function (options) {
       .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')
@@ -103,12 +106,7 @@ L.OSM.share = function (options) {
       .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')
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 0db2c5302..19ad55d31 100644
--- 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;
 
-    label {
+    a {
+      color: #fff;
+      text-decoration: none;
       background-color: $lightblue;
       padding: 5px 10px;
     }
 
-    label:first-child {
+    a:first-child {
       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;
     }
 
-    label.active {
+    a.active {
       background-color: $blue;
     }
   }
@@ -665,17 +667,9 @@ a.donate {
   }
 
   .share-link {
-    #long_input,
-    #short_input {
-      width: 190px;
-    }
-
-    a {
-      margin-left: 5px;
-    }
-
-    input,
+    input[type=text],
     textarea {
+      width: 100%;
       font-family: monospace;
       font-size: small;
     }