sharing thumbnail

app/stylesheets/outfits/_edit.sass

@@ -492,6 +492,35 @@ body.outfits-edit
           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
     font-size: 85%

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

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);
   }
@@ -621,19 +627,6 @@ View.Outfits = function (wardrobe) {
     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');
     if(outfit.id) {
@@ -657,6 +650,70 @@ View.Outfits = function (wardrobe) {
     }
   });
   
+  /* 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 */
 
   save_current_outfit_el.click(function () {

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;
   }

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;
 }