sharing url formats

This commit is contained in:
Emi Matchu 2012-07-17 16:14:05 -04:00
parent f5ab71dce5
commit b2eac2d1fd
4 changed files with 443 additions and 269 deletions

View file

@ -21,6 +21,10 @@ $outfit-header-padding: 24px
$outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
$outfit-content-inner-width: $outfit-content-width - $outfit-header-padding $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
=user-select($select)
select: unquote($select)
+experimental(user-select, $select, -moz, -webkit, not -o, not -ms, -khtml, official)
=active-mode =active-mode
color: $text-color color: $text-color
font-weight: bold font-weight: bold
@ -476,7 +480,7 @@ body.outfits-edit
#preview-sharing #preview-sharing
display: none display: none
> ul #preview-sharing-urls
+sidebar-view-child +sidebar-view-child
li li
@ -492,6 +496,40 @@ body.outfits-edit
display: block display: block
width: 100% width: 100%
#preview-sharing-url-formats
+sidebar-view-child
+user-select(none)
// remove whitespace between inline-block elements
font-size: 0
margin-top: 12px
text-align: center
li
+inline-block
border: 1px solid $module-border-color
border-left-width: 0
border-right-color: $soft-border-color
color: $soft-text-color
cursor: pointer
font-size: 12px
padding: 0 .75em
&.active
background: $module-bg-color
color: inherit
font-weight: bold
&:first-child
+border-top-left-radius(5px)
+border-bottom-left-radius(5px)
border-left-width: 1px
&:last-child
+border-top-right-radius(5px)
+border-bottom-right-radius(5px)
border-right-color: $module-border-color
#preview-sharing-thumbnail-wrapper #preview-sharing-thumbnail-wrapper
border: 1px solid $soft-border-color border: 1px solid $soft-border-color
display: block display: block
@ -500,12 +538,14 @@ body.outfits-edit
width: 150px width: 150px
#preview-sharing-thumbnail-loading #preview-sharing-thumbnail-loading
height: 100%
position: relative position: relative
width: 100%
span span
color: $soft-text-color color: $soft-text-color
font-size: 85% font-size: 85%
margin-top: -1em margin-top: -0.75em
position: absolute position: absolute
text-align: center text-align: center
top: 50% top: 50%

View file

@ -84,7 +84,7 @@
= image_tag 'outfits/small_loading.gif' = image_tag 'outfits/small_loading.gif'
%span Generating… %span Generating…
%img#preview-sharing-thumbnail %img#preview-sharing-thumbnail
%ul %ul#preview-sharing-urls
%li %li
%label{:for => 'preview-sharing-permalink-url'} Outfit page %label{:for => 'preview-sharing-permalink-url'} Outfit page
%input#preview-sharing-permalink-url.outfit-url{:type => 'text'} %input#preview-sharing-permalink-url.outfit-url{:type => 'text'}
@ -97,6 +97,10 @@
%li %li
%label{:for => 'preview-sharing-small-image-url'} Small image %label{:for => 'preview-sharing-small-image-url'} Small image
%input#preview-sharing-small-image-url.outfit-url{:type => 'text'} %input#preview-sharing-small-image-url.outfit-url{:type => 'text'}
%ul#preview-sharing-url-formats
%li.active{'data-format' => 'plain'} Plain
%li{'data-format' => 'html'} HTML
%li{'data-format' => 'bbcode'} BBCode
%form#preview-search-form %form#preview-search-form
%header %header
%h2 Add an item %h2 Add an item

View file

@ -445,13 +445,7 @@ View.Outfits = function (wardrobe) {
stars = $('#preview-outfits div.outfit-star'), stars = $('#preview-outfits div.outfit-star'),
sidebar_el = $('#preview-sidebar'), sidebar_el = $('#preview-sidebar'),
signed_in, signed_in,
previously_viewing = '', previously_viewing = '';
sharing_url_els = {
permalink: $('#preview-sharing-permalink-url'),
large_image: $('#preview-sharing-large-image-url'),
medium_image: $('#preview-sharing-medium-image-url'),
small_image: $('#preview-sharing-small-image-url'),
};
function liForOutfit(outfit) { function liForOutfit(outfit) {
return $('li.outfit-' + outfit.id); return $('li.outfit-' + outfit.id);
@ -652,64 +646,128 @@ View.Outfits = function (wardrobe) {
/* Sharing */ /* Sharing */
function setSharingUrls(outfit) { var sharing = new function Sharing() {
var small_image_url = pathToUrl(outfit.image_versions.small); var sharing_url_els = {
sharing_thumbnail.setUrl(small_image_url); permalink: $('#preview-sharing-permalink-url'),
sharing_url_els.small_image.val(small_image_url); large_image: $('#preview-sharing-large-image-url'),
medium_image: $('#preview-sharing-medium-image-url'),
small_image: $('#preview-sharing-small-image-url'),
};
var format_selector_els = $('#preview-sharing-url-formats li');
sharing_url_els.permalink.val(generateOutfitPermalink(outfit)); var formats = {
sharing_url_els.large_image.val(pathToUrl(outfit.image_versions.large)); plain: {
sharing_url_els.medium_image.val(pathToUrl(outfit.image_versions.medium)); image: function (url) { return url },
} text: function (url) { return url }
},
var sharing_thumbnail = new function SharingThumbnail() { html: {
var WRAPPER = $('#preview-sharing-thumbnail-wrapper'); image: function (url, permalink) {
var IMAGE = $('#preview-sharing-thumbnail'); return '<a href="' + permalink + '"><img src="' + url + '" /></a>';
var RETRY_DELAY = 2000; // 2 seconds },
var url = null; text: function (url) {
var xhr = null; return '<a href="' + url + '">Dress to Impress</a>';
}
function abort() { },
if(xhr && xhr.readystate != 4) { bbcode: {
log("Aborting sharing thumbnail XHR"); image: function (url, permalink) {
xhr.abort(); return '[URL=' + permalink + '][IMG]' + url + '[/IMG][/URL]';
},
text: function (url) {
return '[URL=' + url + ']Dress to Impress[/URL]';
}
} }
};
var format = formats.plain;
var urls = {permalink: null, small_image: null, medium_image: null,
large_image: null};
format_selector_els.click(function () {
var selector_el = $(this);
format_selector_els.removeClass('active');
selector_el.addClass('active');
log("Setting sharing URL format:", selector_el.attr('data-format'));
format = formats[selector_el.attr('data-format')];
formatUrls();
});
this.setOutfit = function (outfit) {
urls.permalink = generateOutfitPermalink(outfit);
urls.small_image = pathToUrl(outfit.image_versions.small);
urls.medium_image = pathToUrl(outfit.image_versions.medium);
urls.large_image = pathToUrl(outfit.image_versions.large);
thumbnail.setUrl(urls.small_image);
formatUrls();
} }
function hide() { function formatUrls() {
WRAPPER.removeClass('loaded'); formatImageUrl('small_image');
formatImageUrl('medium_image');
formatImageUrl('large_image');
formatTextUrl('permalink');
} }
function load() { function formatTextUrl(key) {
log("Loading sharing thumbnail", url); formatUrl(key, format.text(urls[key]));
xhr = $.ajax({
type: 'HEAD',
cache: false, // in case some browser tries to cache a 404
url: url,
success: show,
error: retry
});
} }
function retry() { function formatImageUrl(key) {
log("Sharing thumbnail not found, retry in", RETRY_DELAY); formatUrl(key, format.image(urls[key], urls.permalink));
setTimeout(load, RETRY_DELAY);
} }
function show() { function formatUrl(key, url) {
log("Sharing thumbnail found"); sharing_url_els[key].val(url);
IMAGE.attr('src', url);
WRAPPER.addClass('loaded');
} }
this.setUrl = function (newUrl) { var thumbnail = new function SharingThumbnail() {
if(newUrl != url) { var WRAPPER = $('#preview-sharing-thumbnail-wrapper');
abort(); var IMAGE = $('#preview-sharing-thumbnail');
hide(); var RETRY_DELAY = 2000; // 2 seconds
url = newUrl; var url = null;
load(); var xhr = null;
} else {
log("Sharing thumbnail URLs are identical; no change."); 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.");
}
} }
} }
} }
@ -763,7 +821,7 @@ View.Outfits = function (wardrobe) {
function shareComplete(outfit) { function shareComplete(outfit) {
save_outfit_wrapper_el.stopLoading().addClass('shared-outfit'); save_outfit_wrapper_el.stopLoading().addClass('shared-outfit');
setSharedOutfitPermalink(outfit); setSharedOutfitPermalink(outfit);
setSharingUrls(outfit); sharing.setOutfit(outfit);
showSharing(); showSharing();
} }

File diff suppressed because it is too large Load diff