sharing url formats
This commit is contained in:
parent
f5ab71dce5
commit
b2eac2d1fd
4 changed files with 443 additions and 269 deletions
|
@ -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%
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
Loading…
Reference in a new issue