forked from OpenNeo/impress
sharing thumbnail
This commit is contained in:
parent
7b5856ebf9
commit
f5ab71dce5
6 changed files with 168 additions and 46 deletions
|
@ -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
|
||||
|
|
|
@ -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
BIN
public/images/outfits/small_loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
|
@ -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 */
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue