use templates for tabs and panels
This commit is contained in:
Shane Caraveo
Родитель
da2a8c00c4
Коммит
7c7e79d542
|
|
@ -35,6 +35,7 @@ function (rdapi, url, TextCounter) {
|
|||
showNew = options.show === 'new';
|
||||
|
||||
function svcBase(name, options) {
|
||||
if (!name) return;
|
||||
this.name = name;
|
||||
this.type = name.replace(/\s/g,'').toLowerCase();
|
||||
this.tabName = this.type+'Tab';
|
||||
|
|
@ -42,6 +43,10 @@ function (rdapi, url, TextCounter) {
|
|||
this.shorten = false;
|
||||
this.autoCompleteWidget = null;
|
||||
|
||||
// set options
|
||||
this.supportsDirect = false;
|
||||
this.supportsCounter = false;
|
||||
|
||||
for (var i in options) {
|
||||
this[i] = options[i];
|
||||
}
|
||||
|
|
@ -119,8 +124,9 @@ function (rdapi, url, TextCounter) {
|
|||
/* common functionality for email based services */
|
||||
function emailSvcBase() {
|
||||
svcBase.constructor.apply(this, arguments);
|
||||
this.supportsDirect = true;
|
||||
};
|
||||
emailSvcBase.prototype = svcBase.prototype;
|
||||
emailSvcBase.prototype = new svcBase();
|
||||
emailSvcBase.constructor = emailSvcBase;
|
||||
emailSvcBase.prototype.validate = function (sendData) {
|
||||
if (!sendData.to || !sendData.to.trim()) {
|
||||
|
|
@ -147,15 +153,8 @@ function (rdapi, url, TextCounter) {
|
|||
var svcs = {
|
||||
showNew: showNew,
|
||||
domains: {
|
||||
'linkedin.com': new svcBase('LinkedIn', {
|
||||
serviceUrl: 'http://linkedin.com',
|
||||
revokeUrl: 'http://linkedin.com/settings/connections',
|
||||
signOutUrl: 'http://linkedin.com/logout',
|
||||
accountLink: function (account) {
|
||||
return 'http://linkedin.com/' + account.username;
|
||||
}
|
||||
}),
|
||||
'twitter.com': new svcBase('Twitter', {
|
||||
supportsCounter: true,
|
||||
counter: null,
|
||||
shorten: true,
|
||||
serviceUrl: 'http://twitter.com',
|
||||
|
|
@ -202,35 +201,6 @@ function (rdapi, url, TextCounter) {
|
|||
signOutUrl: 'http://facebook.com',
|
||||
accountLink: function (account) {
|
||||
return 'http://www.facebook.com/profile.php?id=' + account.userid;
|
||||
},
|
||||
getFormData: function () {
|
||||
var dom = $('#facebook');
|
||||
return {
|
||||
message: dom.find('textarea.message').val().trim() || '',
|
||||
picture: dom.find('[name="picture"]').val().trim() || '',
|
||||
canonicalUrl: dom.find('[name="link"]').val().trim() || '',
|
||||
title: dom.find('[name="name"]').val().trim() || '',
|
||||
description: dom.find('[name="caption"]').val().trim() || ''
|
||||
};
|
||||
},
|
||||
setFormData: function (data) {
|
||||
var dom = $('#facebook');
|
||||
if (data.message) {
|
||||
dom.find('textarea.message').val(data.message);
|
||||
}
|
||||
var picture = data.previews && data.previews[0];
|
||||
if (picture) {
|
||||
dom.find('[name="picture"]').val(picture);
|
||||
}
|
||||
if (data.canonicalUrl || data.url) {
|
||||
dom.find('[name="link"]').val(data.canonicalUrl || data.url);
|
||||
}
|
||||
if (data.title) {
|
||||
dom.find('[name="name"]').val(data.title);
|
||||
}
|
||||
if (data.description) {
|
||||
dom.find('[name="caption"]').val(data.description);
|
||||
}
|
||||
}
|
||||
}),
|
||||
'google.com': new emailSvcBase('Gmail', {
|
||||
|
|
@ -262,6 +232,14 @@ function (rdapi, url, TextCounter) {
|
|||
accountLink: function (account) {
|
||||
return 'http://profiles.yahoo.com/' + account.username;
|
||||
}
|
||||
}),
|
||||
'linkedin.com': new svcBase('LinkedIn', {
|
||||
serviceUrl: 'http://linkedin.com',
|
||||
revokeUrl: 'http://linkedin.com/settings/connections',
|
||||
signOutUrl: 'http://linkedin.com/logout',
|
||||
accountLink: function (account) {
|
||||
return 'http://linkedin.com/' + account.username;
|
||||
}
|
||||
})
|
||||
},
|
||||
domainList: []
|
||||
|
|
|
|||
208
share/index.html
208
share/index.html
|
|
@ -38,12 +38,6 @@
|
|||
<div id="tabs" class="invisible">
|
||||
|
||||
<ul class="nav">
|
||||
<li class="twitterTab leftTab hidden"><a class="icon twitter" name="twitter" href="#twitter">Twitter</a></li>
|
||||
<li class="facebookTab leftTab hidden"><a class="icon facebook" name="facebook" href="#facebook">Facebook</a></li>
|
||||
<li class="gmailTab leftTab hidden"><a class="icon gmail" name="google mail" href="#gmail">Gmail</a></li>
|
||||
<li class="googleappsTab leftTab hidden"><a class="icon googleApps" name="google apps" href="#googleapps">Google Apps</a></li>
|
||||
<li class="yahooTab leftTab hidden"><a class="icon yahoo" name="yahoo mail" href="#yahoo">Yahoo!</a></li>
|
||||
<li class="linkedinTab leftTab hidden"><a class="icon linkedin" name="linkedin" href="#linkedin">LinkedIn</a></li>
|
||||
<li class="debugTab"><a class="icon debug" name="debug" href="#debug">debug</a></li>
|
||||
<div class="user-info">
|
||||
<span class="avatar"><img class="avatar" src=""></span>
|
||||
|
|
@ -57,161 +51,7 @@
|
|||
<span class="close"></span>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div id="twitter" class="ui-tabs-hide">
|
||||
<form name="twitterSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col" data-domain="twitter.com">
|
||||
<input type="hidden" name="domain" value="twitter.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Twitter User</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title"></div>
|
||||
<div class="description"></div>
|
||||
<a title="The link for this page" class="url"></a>
|
||||
<a title="A smaller, shorter link to use for Twitter" class="surl"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message twitterCounter boxFlex">
|
||||
<textarea class="message" placeholder="Type your message here, and we'll attach the link" name="message"></textarea>
|
||||
<div class="counter"></div>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="facebook" class="ui-tabs-hide">
|
||||
<form name="facebookSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col">
|
||||
<input type="hidden" name="domain" value="facebook.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="picture" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="name" value="" />
|
||||
<input type="hidden" name="caption" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Facebook User</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title"></div>
|
||||
<div class="description"></div>
|
||||
<a title="The link for this page" class="url"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message boxFlex">
|
||||
<textarea class="message" placeholder="Type your message here" name="message"></textarea>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="gmail" class="ui-tabs-hide">
|
||||
<form name="googleSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col">
|
||||
<input type="hidden" name="domain" value="google.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="title" value="" />
|
||||
<input type="hidden" name="description" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Gmail User</span>
|
||||
</div>
|
||||
<div class="addressing">
|
||||
<input name="to" placeholder="to" type="text" value="" class="ffshareAutoComplete foobar" autocompletestore="google.com"/>
|
||||
<input name="subject" placeholder="subject" type="text" value=""/>
|
||||
</div>
|
||||
<div class="message boxFlex">
|
||||
<textarea class="message urlWithSpace" placeholder="Type your messasdfasdfasdfasdfage here, and we'll attach the link" name="message"></textarea>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="googleapps" class="ui-tabs-hide">
|
||||
<form name="googleAppsSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col">
|
||||
<input type="hidden" name="domain" value="googleapps.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="title" value="" />
|
||||
<input type="hidden" name="description" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Domain User</span>
|
||||
</div>
|
||||
<div class="addressing">
|
||||
<input name="to" placeholder="to" type="text" value="" class="ffshareAutoComplete" autocompletestore="googleapps.com"/>
|
||||
<input name="subject" placeholder="subject" type="text" value=""/>
|
||||
</div>
|
||||
<div class="message boxFlex">
|
||||
<textarea class="message urlWithSpace" placeholder="Type your message here, and we'll attach the link" name="message"></textarea>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="yahoo" class="ui-tabs-hide">
|
||||
<form name="yahooSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col">
|
||||
<input type="hidden" name="domain" value="yahoo.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="title" value="" />
|
||||
<input type="hidden" name="description" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Yahoo! User</span>
|
||||
</div>
|
||||
<div class="addressing">
|
||||
<input name="to" placeholder="to" type="text" value="" class="ffshareAutoComplete" autocompletestore="yahoo.com"/>
|
||||
<input name="subject" placeholder="subject" type="text" value=""/>
|
||||
</div>
|
||||
<div class="message boxFlex">
|
||||
<textarea class="message urlWithSpace" placeholder="Type your message here, and we'll attach the link" name="message"></textarea>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="linkedin" class="ui-tabs-hide">
|
||||
<form name="linkedinSend" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col" data-domain="linkedin.com">
|
||||
<input type="hidden" name="domain" value="linkedin.com" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="picture" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="name" value="" />
|
||||
<input type="hidden" name="description" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">LinkedIn User</span>
|
||||
</div>
|
||||
<div class="thumb">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title"></div>
|
||||
<div class="description"></div>
|
||||
<a title="The link for this page" class="url"></a>
|
||||
<a title="A smaller, shorter link to use for linkedin" class="surl"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message linkedinCounter boxFlex">
|
||||
<textarea class="message" placeholder="Type your message here, and we'll attach the link" name="message"></textarea>
|
||||
<div class="counter"></div>
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="debug" class="ui-tabs-hide">
|
||||
<div class="hbox messageForm">
|
||||
<div style="width:450px;">
|
||||
|
|
@ -234,6 +74,52 @@
|
|||
</div>
|
||||
|
||||
<!-- Start templates -->
|
||||
<script id="tabsTemplate" type="text/template">
|
||||
<li class="{tabName} leftTab hidden"><a class="icon {type}" name="{name}" href="#{type}">{name}</a></li>
|
||||
</script>
|
||||
|
||||
<script id="panelsTemplate" type="text/template">
|
||||
<div id="{type}" class="ui-tabs-hide">
|
||||
<form name="{type}Send" class="hbox messageForm" action="#">
|
||||
<div class="user inactive col">
|
||||
<input type="hidden" name="domain" value="{domain}" />
|
||||
<input type="hidden" name="userid" value="" />
|
||||
<input type="hidden" name="username" value="" />
|
||||
<input type="hidden" name="picture" value="" />
|
||||
<input type="hidden" name="link" value="" />
|
||||
<input type="hidden" name="title" value="" />
|
||||
<input type="hidden" name="caption" value="" />
|
||||
<input type="hidden" name="description" value="" />
|
||||
<span class="avatar"><img class="avatar" src="i/face2.png"></span>
|
||||
<span class="username">Facebook User</span>
|
||||
</div>
|
||||
{ supportsDirect [}
|
||||
<div class="addressing">
|
||||
<input name="to" placeholder="to" type="text" value="" class="ffshareAutoComplete" autocompletestore="{domain}"/>
|
||||
<input name="subject" placeholder="subject" type="text" value=""/>
|
||||
</div>
|
||||
{] [}
|
||||
<div class="thumb">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title"></div>
|
||||
<div class="description"></div>
|
||||
<a title="The link for this page" class="url"></a>
|
||||
<a title="A smaller, shorter link" class="surl"></a>
|
||||
</div>
|
||||
</div>
|
||||
{]}
|
||||
<div class="message boxFlex">
|
||||
<textarea class="message" placeholder="Type your message here" name="message"></textarea>
|
||||
{ supportsCounter [}
|
||||
<div class="counter"></div>
|
||||
{]}
|
||||
</div>
|
||||
<button class="share" type="submit">share</button>
|
||||
</form>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="accountTemplate" type="text/template">
|
||||
{.userAccount accounts[0]}
|
||||
<div class="account">
|
||||
|
|
|
|||
|
|
@ -449,11 +449,21 @@ function (require, $, fn, rdapi, oauth, jig, url,
|
|||
}
|
||||
|
||||
$(function () {
|
||||
var thumbImgDom = $('img.thumb'),
|
||||
picture,
|
||||
var thumbImgDom, picture,
|
||||
sessionRestore = store.sessionRestore,
|
||||
tabSelectionDom;
|
||||
tabSelectionDom, tabhtml='', panelhtml='';
|
||||
|
||||
// first thing, fill in the supported services
|
||||
services.domainList.forEach(function (domain) {
|
||||
var data = services.domains[domain];
|
||||
data.domain = domain;
|
||||
tabhtml += jig('#tabsTemplate', services.domains[domain]);
|
||||
panelhtml += jig('#panelsTemplate', services.domains[domain]);
|
||||
});
|
||||
$('.nav .debugTab').before(tabhtml);
|
||||
$('#tabs #debug').before(panelhtml);
|
||||
|
||||
thumbImgDom = $('img.thumb');
|
||||
bodyDom = $('body');
|
||||
clickBlockDom = $('#clickBlock');
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче