Skip to content

Instantly share code, notes, and snippets.

@felipap
Created December 4, 2013 00:42
Show Gist options
  • Save felipap/7780410 to your computer and use it in GitHub Desktop.
Save felipap/7780410 to your computer and use it in GitHub Desktop.
Minimalistic share plugin for http://vempraruavem.org
$.fn.share = function (options) {
// Prevent binding multiple times.
if (this.find('.sn-share-btns').length)
return;
var defOptions = {
trigger: 'hover',
duration: 'fast',
text: undefined,
url: 'http://vempraruavem.org',
};
// Get options from default < element datset < arguments.
var options = _.extend(_.extend(defOptions, this.data()), options);
var funcs = {
twitter: function (e) {
if (options.text || options.url)
var url = 'http://twitter.com/share?'+(options.text && '&text='+encodeURIComponent(options.text))||('url='+encodeURIComponent(options.url));
else throw "No url or text specified";
window.open(url,'','width=500,height=350,toolbar=0,menubar=0,location=0','modal=yes');
},
facebook: function (e) {
if (options.url)
var url = 'http://www.facebook.com/sharer.php?u='+encodeURIComponent(options.url);
else throw "No url or text specified";
window.open(url,'','width=500,height=350,toolbar=0,menubar=0,location=0','modal=yes');
},
gplus: function (e) {
if (options.url)
var url = 'https://plusone.google.com/_/+1/confirm?hl=pt&url='+encodeURIComponent(options.url);
else throw "No url or text specified";
window.open(url,'','width=500,height=350,toolbar=0,menubar=0,location=0','modal=yes');
},
};
this.addClass('sn-share');
var html = $('<div class="sn-share-btns"><div class="btn-group"><button class="btn btn-xs btn-info btn-twitter"><i class="fa fa-twitter"></i></button><button class="btn btn-xs btn-info btn-facebook">&nbsp;<i class="fa fa-facebook"></i>&nbsp;</button><button class="btn btn-xs btn-info btn-gplus"><i class="fa fa-google-plus"></i></button></div><div class="arrow"></div></div>');
html.find('.btn-twitter').click(funcs.twitter);
html.find('.btn-facebook').click(funcs.facebook);
html.find('.btn-gplus').click(funcs.gplus);
html.appendTo(this);
this.click(function(evt){
evt.stopPropagation();
evt.preventDefault();
return false;
})
if (options.now === true) {
html.fadeIn();
this.on('click '+(options.trigger === 'hover'?'mouseenter':''), function (e) {
html.fadeIn(options.duration);
});
} else {
this.on('click '+(options.trigger === 'hover'?'mouseenter':''), function (e) {
html.fadeIn(options.duration);
});
}
this.on('mouseleave', function (e) {
html.fadeOut(options.duration);
});
}
// Style for social network items.
.sn-share {
display: inline-block;
position: relative;
text-align: center;
cursor: pointer;
.sn-share-btns {
position: absolute;
display: none;
top: 0;
margin: 0 auto;
margin-top: -25px;
width: 200px;
text-align: center;
left: -300px;
right: -300px;
.btn-group {
button {
margin-bottom: 0;
margin-left: 0 !important;
&:hover {
border-bottom: 1px solid white !important;
}
}
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.6);
}
.arrow {
width: 0;
border-top: 3px solid #444;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
position: relative;
left: 0; right: 0;
margin: auto;
top: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment