Skip to content

Commit

Permalink
Stop prefilling text into sharer boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@timdream
timdream committed Jun 26, 2013
1 parent 8f96ba5 commit e7cd8af
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 55 deletions.
122 changes: 77 additions & 45 deletions assets/sharer-dialog-view.js
View file
Expand Up @@ -9,7 +9,10 @@ var SharerDialogView = function SharerDialogView(opts) {
imgLinkElement: 'wc-sharer-img-link',
progressElement: 'wc-sharer-progress',
titleInputElement: 'wc-sharer-title-input',
captionInputElement: 'wc-sharer-caption',
descInputElement: 'wc-sharer-desc',

termsElement: 'wc-sharer-terms',
hashTagElement: 'wc-sharer-hashtag',

imgurStatusElement: 'wc-sharer-imgur-status',
facebookStatusElement: 'wc-sharer-facebook-status',
Expand All @@ -21,6 +24,8 @@ var SharerDialogView = function SharerDialogView(opts) {
doneBtnElement: 'wc-sharer-done-btn'
});

this.hashTagElement.textContent = this.HASHTAG;

this.imgLinkElement.addEventListener('click', this);

this.imgurStatusElement.addEventListener('click', this);
Expand Down Expand Up @@ -92,27 +97,31 @@ SharerDialogView.prototype.beforeShow = function sdv_beforeShow() {
this.uploadSupported = !!(window.HTMLCanvasElement.prototype.toBlob &&
window.XMLHttpRequest && window.FormData);

// XXX: To be replaced with text from fetcher
this.titleInputElement.value = _('app-title');

this.captionInputElement.value = (function getCloudList(list) {
var list = this.app.data.list;
var i = 0;
var sharedItems = [];
do {
sharedItems[i] = list[i][0];
} while (++i < this.SHARED_ITEM_LIMIT);

return sharedItems.join(_('sep').replace(/"/g, '')) +
((list.length > this.SHARED_ITEM_LIMIT) ? _('frequent-terms-more') : '');
}).call(this) + '\n\n' + this.HASHTAG;

if (this.uploadSupported && !this.imgurData) {
this.uploadImage();
} else {
this.updateUI();
}
};
SharerDialogView.prototype.updateTermsUI = function sdv_updateTermsUI() {
this.termsElement.textContent = this.getCloudList();
};
SharerDialogView.prototype.getCloudTitle = function sdv_getCloudTitle() {
// XXX: To be replaced with title fetched from fetcher,
// e.g. "Timothy Chien's Facebook"
return _('app-title');
};
SharerDialogView.prototype.getCloudList = function sdv_getCloudList() {
var list = this.app.data.list;
var i = 0;
var sharedItems = [];
do {
sharedItems[i] = list[i][0];
} while (++i < this.SHARED_ITEM_LIMIT);

return sharedItems.join(_('sep').replace(/"/g, '')) +
((list.length > this.SHARED_ITEM_LIMIT) ? _('frequent-terms-more') : '');
};
SharerDialogView.prototype.updateStatusElement =
function sdv_updateStatusElement(el, stringId, href) {
if (!href) {
Expand Down Expand Up @@ -144,7 +153,6 @@ SharerDialogView.prototype.updateUI = function sdv_updateUI() {
var imageUrl = this.imgurData.link;
var imgurPageUrl = this.IMGUR_URL + this.imgurData.id;


this.reUploadBtnElement.disabled = false;

this.updateStatusElement(
Expand All @@ -168,7 +176,13 @@ SharerDialogView.prototype.updateUI = function sdv_updateUI() {
this.plurkStatusElement, this.LABEL_CLICK_TO_SHARE, '#');

} else { // text upload only
// If upload is not supported, terms should match
// the current on-canvas image.
if (!this.uploadSupported)
this.updateTermsUI();

this.reUploadBtnElement.disabled = true;

if (this.uploadSupported) {
this.updateStatusElement(
this.imgurStatusElement, this.LABEL_IMAGE_UPLOAD_FAILED);
Expand Down Expand Up @@ -267,6 +281,10 @@ SharerDialogView.prototype.share = function sdv_share(type) {
SharerDialogView.prototype.shareText = function sdv_shareText(type) {
this.app.logAction('SharerDialogView::shareText', type);

var title = this.titleInputElement.value || this.getCloudTitle();
var desc = this.descInputElement.value ||
this.getCloudList() + '\n\n' + this.HASHTAG;

var url = window.location.href;
var shortUrl = (url.length > 128) ? url.replace(/#.*$/, '') : url;

Expand All @@ -276,12 +294,19 @@ SharerDialogView.prototype.shareText = function sdv_shareText(type) {
// We won't wrap other FB.xxx calls in other functions
// because this is the only entry point for FacebookPanelView.
(new FacebookSDKLoader()).load((function sdv_bindFacebookSDK() {
// XXX This will be blocked by pop-up blocker.
var ogImageUrl =
document.querySelector('meta[property="og:image"]').content;

FB.ui({
method: 'feed',
picture: (this.imgurData) ? this.imgurData.link : ogImageUrl,
link: url,
name: this.titleInputElement.value,
description: this.captionInputElement.value,
// We cannot bring what the user had just typed in the sharer dialog
// because Facebook doesn't allow us to.
name: this.getCloudTitle(),
description: this.getCloudList() + ' -- ' + this.HASHTAG,
// This will be blocked by pop-up blocker
// so we will use iframe instead
display: 'iframe'
});
}).bind(this));
Expand All @@ -290,23 +315,19 @@ SharerDialogView.prototype.shareText = function sdv_shareText(type) {
case 'plurk':
window.open(this.PLURK_SHARE_URL +
encodeURIComponent(
shortUrl + ' (' +
this.titleInputElement.value + ') ' +
this.captionInputElement.value));
shortUrl + ' (' + title + ') ' + desc));
break;

case 'twitter':
window.open(this.TWITTER_SHARE_URL +
encodeURIComponent(
shortUrl + ' ' +
this.titleInputElement.value + ' ' +
this.captionInputElement.value));
shortUrl + ' ' + title + ' ' + desc), null, 'width=575,height=216');
break;

case 'tumblr':
window.open('http://www.tumblr.com/share/link?=description=' +
encodeURIComponent(this.captionInputElement.value) +
'&name=' + encodeURIComponent(this.titleInputElement.value) +
encodeURIComponent(desc) +
'&name=' + encodeURIComponent(title) +
'&url=' + encodeURIComponent(url));
this.close();

Expand Down Expand Up @@ -337,11 +358,20 @@ SharerDialogView.prototype.uploadImage = function sdv_uploadImage() {
this.imgLinkElement.href = '#';
this.updateProgress(0.05, true);

var title = this.titleInputElement.value || this.getCloudTitle();
var desc = this.descInputElement.value ||
this.getCloudList() + '\n\n' + this.HASHTAG;

var url = window.location.href;
if (url.length > 128)
url = url.replace(/#.*$/, '');

this.cloudUrl = url;

var formdata = new FormData();
formdata.append('title', this.titleInputElement.value);
formdata.append('title', title);
formdata.append('name', 'wordcloud.png');
formdata.append('description',
this.captionInputElement.value + '\n\n' + window.location.href);
formdata.append('description', desc + '\n\n' + url);

var xhr = this.xhr = new XMLHttpRequest();
xhr.open('POST', this.IMGUR_API_URL);
Expand Down Expand Up @@ -395,6 +425,7 @@ SharerDialogView.prototype.uploadImage = function sdv_uploadImage() {
}).bind(this);

this.updateUI();
this.updateTermsUI();
this.getCanvasBlob(function sdv_gotBlob(blob) {
if (this.xhr !== xhr)
return;
Expand All @@ -413,9 +444,11 @@ SharerDialogView.prototype.uploadImage = function sdv_uploadImage() {
SharerDialogView.prototype.shareImage = function sdv_shareImage(type) {
this.app.logAction('SharerDialogView::shareImage2', type);

var url = window.location.href;
if (url.length > 128)
url = url.replace(/#.*$/, '');
var title = this.titleInputElement.value || this.getCloudTitle();
var desc = this.descInputElement.value ||
this.getCloudList() + '\n\n' + this.HASHTAG;

var url = this.cloudUrl;

switch (type) {
case 'facebook':
Expand Down Expand Up @@ -455,12 +488,18 @@ SharerDialogView.prototype.shareImage = function sdv_shareImage(type) {
this.updateUI();
FB.api('/me/photos', 'post', {
url: this.imgurData.link,
// Facebook strictly require the message here to be what user typed.
// pre-filling or supplying default will be in violation of
// Facebook Platform Policies, section IV.2.
message: this.titleInputElement.value + '\n\n' +
this.captionInputElement.value + '\n\n' + url
this.descInputElement.value + '\n\n' + url
}, (function sdv_facebookImageUploaded(res) {
this.facebookLoading = false;

if (!res || !res.id) {
// If we failed to send an image,
// use the feed dialog instead.
this.shareText(type);
this.updateUI();
return;
}
Expand All @@ -474,28 +513,21 @@ SharerDialogView.prototype.shareImage = function sdv_shareImage(type) {
case 'plurk':
window.open(this.PLURK_SHARE_URL +
encodeURIComponent(
this.imgurData.link + ' ' +
url + ' (' + this.titleInputElement.value + ') ' +
this.captionInputElement.value));
this.imgurData.link + ' ' + url + ' (' + title + ') ' + desc));

break;

case 'twitter':
window.open(this.TWITTER_SHARE_URL +
encodeURIComponent(
url + ' ' +
this.titleInputElement.value + ' ' +
this.captionInputElement.value + ' ' +
this.imgurData.link));
url + ' ' + title + ' ' + desc + ' ' + this.imgurData.link));

break;

case 'tumblr':
window.open('http://www.tumblr.com/share/photo?source=' +
encodeURIComponent(this.imgurData.link) +
'&caption=' + encodeURIComponent(
this.titleInputElement.value + '\n' +
this.captionInputElement.value) +
'&desc=' + encodeURIComponent(title + '\n' + desc + '\n\n' + url) +
'&clickthru=' + encodeURIComponent(url));

break;
Expand Down
5 changes: 5 additions & 0 deletions assets/wordcloud.css
View file
Expand Up @@ -118,6 +118,11 @@ body {
visibility: hidden;
opacity: 0; }

#wc-sharer-img-link {
margin-bottom: 20px; }
#wc-sharer-img-link[hidden] {
display: none; }

#wc-about-icon {
position: relative;
height: 120px; }
Expand Down
7 changes: 7 additions & 0 deletions assets/wordcloud.scss
View file
Expand Up @@ -175,6 +175,13 @@ $transition-time: 0.5s;
}
}

#wc-sharer-img-link {
&[hidden] {
display: none;
}
margin-bottom: 20px;
}

#wc-about-icon {
position: relative;
height: 120px;
Expand Down
14 changes: 8 additions & 6 deletions index.html
View file
Expand Up @@ -339,16 +339,18 @@ <h3 id="wc-sharer-title" data-l10n-id="share-dialog-title"></h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span3">
<div class="span4">
<a class="thumbnail" id="wc-sharer-img-link" target="_blank" hidden>
<img id="wc-sharer-img" />
</a>
<p data-l10n-id="share-dialog-terms"></p>
<p class="well well-small" id="wc-sharer-terms"></p>
<p data-l10n-id="share-dialog-hashtag"></p>
<p class="well well-small" id="wc-sharer-hashtag"></p>
</div>
<div class="span9">
<label for="wc-sharer-title-input" data-l10n-id="share-dialog-title-input"></label>
<input type="text" id="wc-sharer-title-input" class="input-block-level" />
<label for="wc-sharer-caption" data-l10n-id="share-dialog-caption-input"></label>
<textarea id="wc-sharer-caption" class="input-block-level" rows="5"></textarea>
<div class="span8">
<input type="text" data-l10n-id="share-dialog-title-input" id="wc-sharer-title-input" class="input-block-level" />
<textarea id="wc-sharer-desc" class="input-block-level" data-l10n-id="share-dialog-desc-input" rows="5"></textarea>

<div class="progress progress-striped active">
<div class="bar" id="wc-sharer-progress"></div>
Expand Down
6 changes: 4 additions & 2 deletions locales/wordcloud.en-US.properties
View file
Expand Up @@ -84,8 +84,10 @@ dashboard-theme-btn.title=Switch Theme
dashboard-theme-span=Theme

share-dialog-title=Share
share-dialog-title-input=Title
share-dialog-caption-input=Caption
share-dialog-title-input.placeholder=Title
share-dialog-desc-input.placeholder=Description
share-dialog-terms=Terms
share-dialog-hashtag=Hashtag
share-dialog-reupload-btn=New Upload
share-dialog-done-btn=Done

Expand Down
6 changes: 4 additions & 2 deletions locales/wordcloud.zh-TW.properties
View file
Expand Up @@ -84,8 +84,10 @@ dashboard-theme-btn.title=變更配色
dashboard-theme-span=配色

share-dialog-title=分享圖片
share-dialog-title-input=標題
share-dialog-caption-input=說明
share-dialog-title-input.placeholder=標題
share-dialog-desc-input.placeholder=說明
share-dialog-terms=詞彙
share-dialog-hashtag=標籤
share-dialog-reupload-btn=重新上傳
share-dialog-done-btn=完成

Expand Down

0 comments on commit e7cd8af

Please sign in to comment.