download links for each image size

app/assets/javascripts/outfits/edit.js

@@ -850,10 +850,23 @@ View.Outfits = function (wardrobe) {
       sharing_url_els[key].val(url);
     }
 
+    function formatDownload(key, outfit) {
+      var el = $('#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');
+    }
+    
     wardrobe.image_subscriptions.bind('imageEnqueued', function (outfit) {
       if(outfit.id == current_shared_outfit.id) {
         log("Sharing thumbnail enqueued for outfit", outfit);
         WRAPPER.removeClass('thumbnail-loaded');
+
+        $('#preview-sharing-urls a').removeAttr('href').removeAttr('download');
       }
     });
     
@@ -864,6 +877,11 @@ View.Outfits = function (wardrobe) {
         thumbnail_el.attr('src', src);
         WRAPPER.addClass('thumbnail-loaded');
         WRAPPER.addClass('thumbnail-available');
+
+        formatDownload('large', outfit);
+        formatDownload('medium', outfit);
+        formatDownload('small', outfit);
+
         unsubscribeFromImage(outfit);
       }
     });
@@ -878,6 +896,12 @@ View.Outfits = function (wardrobe) {
       log("Sharing sees the setOutfit signal, and will set", outfit);
       sharing.setOutfit(outfit);
     });
+
+    this.initialize = function() {
+      if ('download' in document.createElement('a')) {
+        $('#preview-sharing-urls').addClass('support-download');
+      }
+    }
   }
 
   /* Saving */
@@ -948,6 +972,8 @@ View.Outfits = function (wardrobe) {
   wardrobe.outfits.bind('outfitNotFound', function () {
     outfit_not_found_el.notify();
   });
+
+  this.initialize = sharing.initialize();
 }
 
 View.PetStateForm = function (wardrobe) {

app/assets/stylesheets/outfits/_edit.sass

@@ -634,13 +634,24 @@ body.outfits-edit
         width: 100%
         
         label
-          display: block
+          display: inline-block
           font-weight: bold
         
         input
           display: block
           width: 100%
 
+        a
+          display: none
+          float: right
+          font-size: 75%
+          margin-top: .25em
+          text-decoration: none
+
+      &.support-download
+        li a
+          display: block
+    
     #preview-sharing-url-formats
       +sidebar-view-child
       +user-select(none)

app/views/outfits/edit.html.haml

@@ -77,14 +77,17 @@
             %li
               %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'
               %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'
               %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'
               %input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
           %ul#preview-sharing-url-formats
             %li.active{'data-format' => 'plain'}

config/locales/en-MEEP.yml

@@ -565,6 +565,7 @@ en-MEEP:
             plain: Pleen
             html: HTMeepL
             bbcode: BBMeep
+          download: Downmeep
       search:
         header: Meep an item
         form:

config/locales/en.yml

@@ -623,6 +623,7 @@ en:
             plain: Plain
             html: HTML
             bbcode: BBCode
+          download: Download
       search:
         header: Add an item
         form: