diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass index 93fa2352..68836be9 100644 --- a/app/stylesheets/outfits/_edit.sass +++ b/app/stylesheets/outfits/_edit.sass @@ -491,6 +491,35 @@ body.outfits-edit input display: block width: 100% + + #preview-sharing-thumbnail-wrapper + border: 1px solid $soft-border-color + display: block + height: 150px + margin: 0 auto + width: 150px + + #preview-sharing-thumbnail-loading + position: relative + + span + color: $soft-text-color + font-size: 85% + margin-top: -1em + position: absolute + text-align: center + top: 50% + width: 100% + + #preview-sharing-thumbnail + display: none + + &.loaded + #preview-sharing-thumbnail-loading + display: none + + #preview-sharing-thumbnail + display: block .preview-sidebar-nav float: right diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index 5f6580ec..8bc5b29b 100644 --- a/app/views/outfits/edit.html.haml +++ b/app/views/outfits/edit.html.haml @@ -79,6 +79,11 @@ #preview-sharing.sidebar-view %a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => '#'} ← Back to Closet %h2 Sharing + #preview-sharing-thumbnail-wrapper + #preview-sharing-thumbnail-loading + = image_tag 'outfits/small_loading.gif' + %span Generating… + %img#preview-sharing-thumbnail %ul %li %label{:for => 'preview-sharing-permalink-url'} Outfit page diff --git a/public/images/outfits/small_loading.gif b/public/images/outfits/small_loading.gif new file mode 100644 index 00000000..89f4b504 Binary files /dev/null and b/public/images/outfits/small_loading.gif differ diff --git a/public/javascripts/outfits/edit.js b/public/javascripts/outfits/edit.js index 359f2c4a..2b06bf5e 100644 --- a/public/javascripts/outfits/edit.js +++ b/public/javascripts/outfits/edit.js @@ -603,6 +603,12 @@ View.Outfits = function (wardrobe) { wardrobe.user.toggleOutfitStar(el.tmplItem().data); }); + function pathToUrl(path) { + var host = document.location.protocol + "//" + document.location.host; + if(document.location.port) host += ":" + document.location.port; + return host + path; + } + function generateOutfitPermalink(outfit) { return pathToUrl("/outfits/" + outfit.id); } @@ -620,19 +626,6 @@ View.Outfits = function (wardrobe) { function setSharedOutfitPermalink(outfit) { setOutfitPermalink(outfit, shared_outfit_permalink_el, shared_outfit_url_el); } - - function pathToUrl(path) { - var host = document.location.protocol + "//" + document.location.host; - if(document.location.port) host += ":" + document.location.port; - return host + path; - } - - function setSharingUrls(outfit) { - sharing_url_els.permalink.val(generateOutfitPermalink(outfit)); - sharing_url_els.large_image.val(pathToUrl(outfit.image_versions.large)); - sharing_url_els.medium_image.val(pathToUrl(outfit.image_versions.medium)); - sharing_url_els.small_image.val(pathToUrl(outfit.image_versions.small)); - } function setActiveOutfit(outfit) { outfits_list_el.find('li.active').removeClass('active'); @@ -656,6 +649,70 @@ View.Outfits = function (wardrobe) { save_current_outfit_name_el.text(outfit.name); } }); + + /* Sharing */ + + function setSharingUrls(outfit) { + var small_image_url = pathToUrl(outfit.image_versions.small); + sharing_thumbnail.setUrl(small_image_url); + sharing_url_els.small_image.val(small_image_url); + + sharing_url_els.permalink.val(generateOutfitPermalink(outfit)); + sharing_url_els.large_image.val(pathToUrl(outfit.image_versions.large)); + sharing_url_els.medium_image.val(pathToUrl(outfit.image_versions.medium)); + } + + var sharing_thumbnail = new function SharingThumbnail() { + var WRAPPER = $('#preview-sharing-thumbnail-wrapper'); + var IMAGE = $('#preview-sharing-thumbnail'); + var RETRY_DELAY = 2000; // 2 seconds + var url = null; + var xhr = null; + + function abort() { + if(xhr && xhr.readystate != 4) { + log("Aborting sharing thumbnail XHR"); + xhr.abort(); + } + } + + function hide() { + WRAPPER.removeClass('loaded'); + } + + function load() { + log("Loading sharing thumbnail", url); + xhr = $.ajax({ + type: 'HEAD', + cache: false, // in case some browser tries to cache a 404 + url: url, + success: show, + error: retry + }); + } + + function retry() { + log("Sharing thumbnail not found, retry in", RETRY_DELAY); + setTimeout(load, RETRY_DELAY); + } + + function show() { + log("Sharing thumbnail found"); + IMAGE.attr('src', url); + WRAPPER.addClass('loaded'); + } + + this.setUrl = function (newUrl) { + if(newUrl != url) { + abort(); + hide(); + url = newUrl; + load(); + } else { + log("Sharing thumbnail URLs are identical; no change."); + } + } + } /* Saving */ diff --git a/public/javascripts/wardrobe.js b/public/javascripts/wardrobe.js index f309dc26..6780e888 100644 --- a/public/javascripts/wardrobe.js +++ b/public/javascripts/wardrobe.js @@ -7,9 +7,6 @@ function arraysMatch(array1, array2) { return array1 == array2; } temp = []; - if ( (!array1[0]) || (!array2[0]) ) { - return false; - } if (array1.length != array2.length) { return false; } diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 07014120..497bd665 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -2954,13 +2954,47 @@ body.outfits-edit #preview-sharing > ul li input { width: 100%; } /* line 495, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper { + border: 1px solid #aaddaa; + display: block; + height: 150px; + margin: 0 auto; + width: 150px; +} +/* line 502, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper #preview-sharing-thumbnail-loading { + position: relative; +} +/* line 505, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper #preview-sharing-thumbnail-loading span { + color: #448844; + font-size: 85%; + margin-top: -1em; + position: absolute; + text-align: center; + top: 50%; + width: 100%; +} +/* line 514, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper #preview-sharing-thumbnail { + display: none; +} +/* line 518, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper.loaded #preview-sharing-thumbnail-loading { + display: none; +} +/* line 521, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sharing #preview-sharing-thumbnail-wrapper.loaded #preview-sharing-thumbnail { + display: block; +} +/* line 524, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit .preview-sidebar-nav { float: right; font-size: 85%; margin-right: 24px; margin-top: 1em; } -/* line 502, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 531, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edit #outfit-not-found, body.outfits-edit #preview-sidebar-donation-request { margin-left: 24px; margin-right: 24px; @@ -2968,7 +3002,7 @@ body.outfits-edit #save-success, body.outfits-edit #save-error, body.outfits-edi margin-top: 1em; text-align: center; } -/* line 509, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 538, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #preview-sidebar-donation-request { background: #e6efc2; border: 1px solid #c6d880; @@ -2976,23 +3010,23 @@ body.outfits-edit #preview-sidebar-donation-request { font-size: 85%; padding: 1em; } -/* line 514, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 543, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #preview-sidebar-donation-request-no-thanks { margin-left: 1em; } -/* line 517, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 546, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #save-success { background: #e6efc2; border: 1px solid #c6d880; color: #264409; } -/* line 520, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 549, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #save-error, body.outfits-edit #outfit-not-found { background: #fbe3e4; border: 1px solid #fbc2c4; color: #8a1f11; } -/* line 523, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 552, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #userbar-message { -moz-opacity: 0.5; -webkit-opacity: 0.5; @@ -3000,7 +3034,7 @@ body.outfits-edit #userbar-message { -khtml-opacity: 0.5; display: none; } -/* line 527, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 556, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #new-outfit { padding: 0.25em 0; margin-left: 24px; @@ -3186,28 +3220,28 @@ body.outfits-edit #new-outfit.renaming:hover .outfit-rename-button { body.outfits-edit #new-outfit:hover .outfit-rename-button { display: inline; } -/* line 531, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 560, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #new-outfit h4 { display: inline; } -/* line 533, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 562, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #new-outfit h4:hover { text-decoration: none; } -/* line 535, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 564, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #new-outfit .outfit-star { margin-top: 0.5em; } -/* line 538, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 567, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #new-outfit-name { font: inherit; line-height: 1; } -/* line 542, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 571, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #pet-type-form, body.outfits-edit #pet-state-form, body.outfits-edit #preview-swf, body.outfits-edit #preview-search-form { position: relative; } -/* line 545, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 574, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit .control-overlay { height: 100%; left: 0; @@ -3216,11 +3250,11 @@ body.outfits-edit .control-overlay { width: 100%; z-index: 5; } -/* line 553, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 582, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #preview-sidebar-nav-outfits, body.outfits-edit #save-outfit-signed-in { display: none; } -/* line 556, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 585, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit form#save-outfit-form { padding: 0.25em 0; display: none; @@ -3406,7 +3440,7 @@ body.outfits-edit form#save-outfit-form.renaming:hover .outfit-rename-button { body.outfits-edit form#save-outfit-form:hover .outfit-rename-button { display: inline; } -/* line 562, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 591, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button { display: -moz-inline-box; -moz-box-orient: vertical; @@ -3420,50 +3454,50 @@ body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#sav body.outfits-edit form#save-outfit-form .outfit-star, body.outfits-edit form#save-outfit-form input, body.outfits-edit form#save-outfit-form button { *display: inline; } -/* line 567, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 596, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit form#save-outfit-form .outfit-star { margin-top: 0.25em; } -/* line 570, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 599, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit .outfit-url { font-size: 75%; } -/* line 573, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 602, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #preview-search-form-error { background: #fbe3e4; border: 1px solid #fbc2c4; color: #8a1f11; padding: 0.25em 0.5em; } -/* line 578, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 607, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #preview-sidebar-nav-outfits { display: block; } -/* line 580, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 609, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit { display: inline-block; } -/* line 584, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 613, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit { display: none; } -/* line 586, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 615, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #save-outfit-copy { display: inline-block; } -/* line 588, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 617, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit-wrapper.active-outfit #current-outfit-permalink { display: inline-block; } -/* line 591, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 620, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-form { display: block; } -/* line 593, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 622, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-current-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #save-outfit-copy, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #current-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-permalink, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #share-outfit, body.outfits-edit.user-signed-in #save-outfit-wrapper.saving-outfit #shared-outfit-url { display: none; } -/* line 595, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 624, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-signed-in .preview-search-form-your-items { display: -moz-inline-box; -moz-box-orient: vertical; @@ -3475,15 +3509,15 @@ body.outfits-edit.user-signed-in .preview-search-form-your-items { body.outfits-edit.user-signed-in .preview-search-form-your-items { *display: inline; } -/* line 599, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 628, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit.user-not-signed-in #save-outfit-not-signed-in { display: inline-block; } -/* line 603, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 632, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-permalink, body.outfits-edit #save-outfit-wrapper.shared-outfit #shared-outfit-url { display: inline-block; } -/* line 605, ../../../app/stylesheets/outfits/_edit.sass */ +/* line 634, ../../../app/stylesheets/outfits/_edit.sass */ body.outfits-edit #save-outfit-wrapper.shared-outfit #current-outfit-permalink { display: none !important; }