diff --git a/app/assets/javascripts/outfits/edit.js b/app/assets/javascripts/outfits/edit.js index 0db5f14e..d2738f70 100644 --- a/app/assets/javascripts/outfits/edit.js +++ b/app/assets/javascripts/outfits/edit.js @@ -849,11 +849,24 @@ View.Outfits = function (wardrobe) { function formatUrl(key, url) { 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) { diff --git a/app/assets/stylesheets/outfits/_edit.sass b/app/assets/stylesheets/outfits/_edit.sass index d11c0dea..7e46d66d 100644 --- a/app/assets/stylesheets/outfits/_edit.sass +++ b/app/assets/stylesheets/outfits/_edit.sass @@ -634,12 +634,23 @@ 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 diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index 7322e6f4..2ece6631 100644 --- a/app/views/outfits/edit.html.haml +++ b/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'} diff --git a/config/locales/en-MEEP.yml b/config/locales/en-MEEP.yml index 25e969bd..0c8a10b3 100644 --- a/config/locales/en-MEEP.yml +++ b/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: diff --git a/config/locales/en.yml b/config/locales/en.yml index a8e0100b..c8474a8b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -623,6 +623,7 @@ en: plain: Plain html: HTML bbcode: BBCode + download: Download search: header: Add an item form: