good-enough zeroclipboard implementation

app/assets/javascripts/outfits/edit.js

@@ -592,12 +592,6 @@ View.Outfits = function (wardrobe) {
     submitRename.apply(input);
   });
 
-  $('input.outfit-url').live('mouseover', function () {
-    this.focus();
-  }).live('mouseout', function () {
-    this.blur();
-  });
-
   $('a.outfit-delete').live('click', function (e) {
     e.stopPropagation();
     e.preventDefault();
@@ -836,6 +830,15 @@ View.Outfits = function (wardrobe) {
       formatImageUrl('medium_image');
       formatImageUrl('large_image');
       formatTextUrl('permalink');
+      formatCopyUrl('small');
+      formatCopyUrl('medium');
+      formatCopyUrl('large');
+    }
+
+    function formatCopyUrl(key) {
+      var url = urls[key + '_image'];
+      var copy_url = $('#preview-sharing-copy-' + key + '-image-url');
+      copy_url.attr('data-clipboard-text', url);
     }
     
     function formatTextUrl(key) {
@@ -851,14 +854,14 @@ View.Outfits = function (wardrobe) {
     }
 
     function formatDownload(key, outfit) {
-      var el = $('#preview-sharing-download-' + key + '-image');
+      var download = $('#preview-sharing-download-' + key + '-image');
 
       var url = urls[key + '_image'];
       var outfit_name = outfit.name === null ? ('Outfit ' + outfit.id) : outfit.name;
       var format_name = key.charAt(0).toUpperCase() + key.substr(1);
 
-      el.attr('href', url);
-      el.attr('download', 'Dress to Impress - ' + outfit_name + ' - ' + format_name + '.png');
+      download.attr('href', url);
+      download.attr('download', 'Dress to Impress - ' + outfit_name + ' - ' + format_name + '.png');
     }
     
     wardrobe.image_subscriptions.bind('imageEnqueued', function (outfit) {
@@ -866,7 +869,7 @@ View.Outfits = function (wardrobe) {
         log("Sharing thumbnail enqueued for outfit", outfit);
         WRAPPER.removeClass('thumbnail-loaded');
 
-        $('#preview-sharing-urls a').removeAttr('href').removeAttr('download');
+        $('#preview-sharing-urls a[download]').removeAttr('href').removeAttr('download');
       }
     });
     
@@ -901,6 +904,8 @@ View.Outfits = function (wardrobe) {
       if ('download' in document.createElement('a')) {
         $('#preview-sharing-urls').addClass('support-download');
       }
+
+      var client = new ZeroClipboard($('.preview-sharing-copy-url'));
     }
   }
 

app/assets/stylesheets/outfits/_edit.sass

@@ -648,8 +648,12 @@ body.outfits-edit
           float: right
           font-size: 75%
           margin-top: .25em
+          margin-left: 1.5em
           text-decoration: none
 
+          &.zeroclipboard-is-active
+            font-weight: bold
+
       &.support-download
         li a
           display: block

app/views/outfits/edit.html.haml

@@ -80,16 +80,19 @@
               %label{:for => 'preview-sharing-large-image-url'}
                 = t '.sidebar.sharing.links.images.large'
               %a#preview-sharing-download-large-image{download: true}= t '.sidebar.sharing.download'
+              %a#preview-sharing-copy-large-image-url.preview-sharing-copy-url{href: 'javascript:void(0)'}= t '.sidebar.sharing.copy_url'
               %input#preview-sharing-large-image-url.outfit-url{:type => 'text'}
             %li
               %label{:for => 'preview-sharing-medium-image-url'}
                 = t '.sidebar.sharing.links.images.medium'
               %a#preview-sharing-download-medium-image{download: true}= t '.sidebar.sharing.download'
+              %a#preview-sharing-copy-medium-image-url.preview-sharing-copy-url{href: 'javascript:void(0)'}= t '.sidebar.sharing.copy_url'
               %input#preview-sharing-medium-image-url.outfit-url{:type => 'text'}
             %li
               %label{:for => 'preview-sharing-small-image-url'}
                 = t '.sidebar.sharing.links.images.small'
               %a#preview-sharing-download-small-image{download: true}= t '.sidebar.sharing.download'
+              %a#preview-sharing-copy-small-image-url.preview-sharing-copy-url{href: 'javascript:void(0)'}= t '.sidebar.sharing.copy_url'
               %input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
           %ul#preview-sharing-url-formats
             %li.active{'data-format' => 'plain'}
@@ -263,5 +266,5 @@
 - content_for :javascripts do
   = include_javascript_libraries :jquery, :swfobject, :jquery_tmpl
   = javascript_include_tag 'ajax_auth', 'jquery.jgrowl', 'wardrobe',
-                           'outfits/edit'
+                           'ZeroClipboard.min', 'outfits/edit'
 

config/locales/en.yml

@@ -636,6 +636,7 @@ en:
             html: HTML
             bbcode: BBCode
           download: Download
+          copy_url: Copy URL
       search:
         header: Add an item
         form: