OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

sharing thumbnail

Browse source
This commit is contained in:
Emi Matchu 2012-07-17 14:42:31 -04:00
parent 7b5856ebf9
commit f5ab71dce5
6 changed files with 168 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/stylesheets/outfits/_edit.sass
View file

@ -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

5
app/views/outfits/edit.html.haml
View file

@ -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

BIN
public/images/outfits/small_loading.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

83
public/javascripts/outfits/edit.js
View file

@ -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 */

3
public/javascripts/wardrobe.js
View file

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

94
public/stylesheets/compiled/screen.css
View file

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