Add twitter, facebook, and google plus links to share dialog

This commit is contained in:
Neil Lalonde 2013-03-25 18:54:00 -04:00
parent 7f9f619f82
commit 1ed6406a7d
4 changed files with 42 additions and 5 deletions

View File

@ -27,6 +27,17 @@ Discourse.ShareController = Discourse.Controller.extend({
close: function() {
this.set('link', '');
return false;
},
popupHeights: {
twitter: 265,
facebook: 315,
googlePlus: 600
},
sharePopup: function(target, url) {
window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + this.popupHeights[target]);
return false;
}
});

View File

@ -1,5 +1,14 @@
<h3>{{view.title}}</h3>
<div><input type='text' /></div>
<div class='link'>
<a href='#' {{action close target="controller"}}>{{i18n share.close}}</a>
<div class="social-link">
<a href="#" {{action sharePopup "twitter" view.twitterUrl}}><i class="icon icon-twitter"></i></a>
</div>
<div class="social-link">
<a href="#" {{action sharePopup "facebook" view.facebookUrl}}><i class="icon icon-facebook-sign"></i></a>
</div>
<div class="social-link">
<a href="#" {{action sharePopup "googlePlus" view.googlePlusUrl}}><i class="icon icon-google-plus"></i></a>
</div>
<div class='link'>
<a href='#' {{action close target="controller"}}><i class="icon icon-remove-sign"></i></a>
</div>

View File

@ -27,6 +27,18 @@ Discourse.ShareView = Discourse.View.extend({
}
}).observes('controller.link'),
facebookUrl: function() {
return ("http://www.facebook.com/sharer.php?u=" + this.get('controller.link'));
}.property('controller.link'),
twitterUrl: function() {
return ("http://twitter.com/home?status=" + this.get('controller.link'));
}.property('controller.link'),
googlePlusUrl: function() {
return ("https://plus.google.com/share?url=" + this.get('controller.link'));
}.property('controller.link'),
didInsertElement: function() {
var _this = this;
$('html').on('click.outside-share-link', function(e) {

View File

@ -10,7 +10,7 @@
@include border-radius-all(3px);
@include box-shadow(1px 1px 5px $darkish_gray);
background-color: $light_gray;
padding: 3px 7px 3px 7px;
padding: 3px 7px 5px 7px;
width: 300px;
@include fades-in(0.25s);
&.visible {
@ -22,9 +22,14 @@
h3 {
font-size: 13px;
}
.social-link {
margin-left: 2px;
margin-right: 8px;
float: left;
font-size: 18px;
}
.link {
display: block;
margin-right: 2px;
text-align: right;
float: right;
}
}