Commit c5735dc5 authored by lucha's avatar lucha Committed by lechuck
Browse files

updated Privacy Share Buttons plugin

parent 9632efbf
.social_share_privacy {clear:both; margin:0 auto; width:100%; margin-bottom:15px;}
.social_share_privacy_area {clear:both; margin:20px 0 !important; padding:0; height:25px; width:100%;}
.social_share_privacy_area li {margin:0 !important; padding:0; height:20px; float:left; list-style-type:none !important; list-style:none !important; background:none !important;}
.social_share_privacy_area li .dummy_btn {float:left; margin-left:10px; cursor:pointer; padding:0;}
.social_share_privacy {width:100%;}
.social_share_privacy_area ul {position:relative;}
.social_share_privacy_area li {float:left; list-style-type:none !important; list-style:none !important;}
.social_share_privacy_area li .dummy_btn {cursor:pointer;}
/* Facebook begin */
.social_share_privacy_area .facebook {width: 175px;}
.social_share_privacy_area .facebook .fb_edge_comment_widget {width:400px;}
/* .social_share_privacy_area .facebook div.dummy_btn {width: 150px;}
*//* Facebook end */
/* Tooltips */
.social_share_privacy .dropdown {border:1px solid #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:0 3px 4px #999; -webkit-box-shadow:0 3px 4px #999; box-shadow:0 3px 4px #999; background-color:#F7F7F7; color:#000; z-index:500; padding:4px 5px; font-weight: bold;}
.social_share_privacy_area li {position:relative;}
.social_share_privacy_area li span.info {position:absolute; bottom:35px;}
/* Identica begin */
.social_share_privacy_area .identica {width:148px;}
/* identica end */
/* Info & Option dropdown */
.social_share_privacy_area .psb_info {position:absolute; bottom:8em; width:150px;}
.social_share_privacy_area #option-dropdown label.checked {color:#090;}
.social_share_privacy_area div#option-dropdown {position:absolute; bottom:-6em; float:left;}
/* Twitter begin */
.social_share_privacy_area .twitter {width:148px;}
.social_share_privacy_area li div.tweet {width:115px;}
/* Twitter end */
/* Services */
.social_share_privacy_area li div {width:100px;}
.social_share_privacy_area .twitter {width:80px;}
.social_share_privacy_area .facebook {width: 125px; padding-right:10px;}
.social_share_privacy_area .identica {width:125px;}
.ui-icon-identica { background-image: url("../images/identica-share-button.png") !important; }
.ui-icon-identica-dummy { background-image: url("../images/dummy_identica.png") !important; }
/* Google+ begin */
.social_share_privacy_area .gplus {width:123px;}
.social_share_privacy_area li div.gplusone {width:90px;}
/* Google+ end */
/* Flattr begin */
.social_share_privacy_area .flattr {width:148px;}
.social_share_privacy_area li div.flattrbtn {width:115px;}
/* Flattr end */
/* Switch begin */
.social_share_privacy_area li .switch {display: none; text-indent:-9999em; background:transparent url(../images/socialshareprivacy_on_off.png) no-repeat 0 0 scroll; width:23px; height:12px; overflow:hidden; float:left; margin:4px 0 0; cursor:pointer;}
.social_share_privacy_area li .switch.on {background-position:0 -12px;}
/* Switch end */
/* Tooltips begin */
.social_share_privacy_area li.help_info {position:relative; padding:0 !important; margin:10px 0 !important;}
.social_share_privacy_area li.help_info .info, .social_share_privacy_area li .help_info.icon .info {display:none; position:absolute; bottom:40px; left:-10px; width:290px; padding:10px 15px; font-size:12px; line-height:16px; font-weight:bold; border:1px solid #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:0 3px 4px #999; -webkit-box-shadow:0 3px 4px #999; box-shadow:0 3px 4px #999; background-color:#fdfbec; color:#000; z-index:500;}
.social_share_privacy_area li .help_info.icon .info {left:-150px; width:350px;}
.social_share_privacy_area li.help_info.display .info, .social_share_privacy_area li .help_info.icon.display .info {display:block;}
.social_share_privacy_area li.help_info.info_off.display .info {display:none;}
.social_share_privacy_area li .help_info.icon {background:#fff url(../images/socialshareprivacy_info.png) no-repeat center center scroll; width:25px; height:20px; position:relative; display:inline-block; vertical-align:top; border:2px solid #e7e3e3; border-right-width:0; -moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px;}
.social_share_privacy_area li.settings_info .settings_info_menu.on .help_info.icon {border-top-width:0; border-left-width:0;}
.social_share_privacy_area li.settings_info .settings_info_menu.perma_option_off .help_info.icon {border-right-width:2px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
/* Tooltips end */
/* Settings/Info begin */
.social_share_privacy_area li.settings_info {position:relative; top:8px; width:135px; overflow:visible;}
.social_share_privacy_area li.settings_info a {text-decoration:none; margin:0 !important;}
.social_share_privacy_area li.settings_info .settings_info_menu {background-color:#f3f4f5; border:2px solid #e7e3e3; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #c1c1c1; -webkit-box-shadow:2px 2px 3px #c1c1c1; box-shadow:3px 3px 3px #c1c1c1; left:0; position:absolute; top:0; width:135px; z-index:10;}
.social_share_privacy_area li.settings_info .settings_info_menu.off {border-width:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; background-color:transparent; }
.social_share_privacy_area li.settings_info .settings_info_menu.off form {display:none;}
.social_share_privacy_area li.settings_info .settings_info_menu .settings {text-indent:-9999em; display:inline-block; background: #fff url(../images/settings.png) no-repeat center center scroll; width:25px; height:20px; border:2px solid #e7e3e3; -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; border-left:1px solid #ddd;}
.social_share_privacy_area li.settings_info .settings_info_menu.on .settings {border-top-width:0;}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset {border-width: 0; margin:0; padding:0 10px 10px; }
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset legend {font-size:11px; font-weight:bold; line-height:14px; margin:0; padding:10px 0; width:115px; color:#151515;}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset input {clear:both; float:left; margin:4px 10px 4px 0; width:auto;}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset label {display:inline-block; float:left; font-size:12px; font-weight:bold; line-height:24px; -moz-transition:color .5s ease-in; -webkit-transition:color .5s ease-in; transition:color .5s ease-in; color:#151515; margin-bottom:0px;}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset label.checked {color:#090;}
@media (max-width: 800px) {
.social_share_privacy_area .settings_info {clear: left;}
.count-o {
position: relative;
float: right;
top: 3px;
background: none repeat scroll 0 0 #fff;
border: 1px solid #bbb;
min-height: 18px;
min-width: 15px;
max-width: 30px;
text-align: center;
visibility: visible;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: 0 0 0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix (as it will come in WP 3.4)
----------------------------------------------- */
.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
\ No newline at end of file
#count {
color: #333;
}
#count:hover, #count:focus {
color: #333;
text-decoration: underline;
}
.count-o i, .count-o u {
border: 4px transparent solid;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #aaa transparent -moz-use-text-color;
border-style: solid solid solid none;
border-width: 4px 4px 4px 0;
border-right-color: #aaa;
height: 0;
left: 0;
line-height: 0;
margin: -4px 0 0 -4px;
position: absolute;
top: 50%;
width: 0;
}
.count-o u {
border-right-color: #fff;
margin-left: -3px;
}
\ No newline at end of file
......@@ -2,315 +2,391 @@
* jQuery Privacy Share Buttons plugin
*
* ideas, original code and images taken from:
* http://www.heise.de/extras/socialshareprivacy/
* http://www.heise.de/extras/socialshareprivacy/
* Copyright (c) 2011 Hilko Holweg, Sebastian Hilbig, Nicolas Heiringhoff, Juergen Schmidt,
* Heise Zeitschriften Verlag GmbH & Co. KG, http://www.heise.de
*
* Copyright (c) 2012 lucha <lucha@paranoici.org>
*
* released under the terms of either the MIT License or the GNU General Public License (GPL) Version 2
* Heise Zeitschriften Verlag GmbH & Co. KG, http://www.heise.de
*
* Copyright (c) 2012 lucha <lucha@paranoici.org>
*
* released under the terms of either the MIT License or the GNU General Public License (GPL) Version 2
*/
;(function($) {
var SocialButton = function(elements, options){
this.elements = elements;
this.options = $.extend(true, {}, this.defaults, options);
if (!this.is_on())
return;
this.append_css();
this.attach();
$.widget('psb.baseButton', {
// default options
options : {
'name' : '',
'display_name' : '',
'txt_info' : 'Click here to enable the button',
'dummy_img' : '',
'javascript': '',
'js_loaded' : false
},
}; SocialButton.prototype = {
// defalt values for options
defaults : {
'info_link' : 'http://cavallette.noblogs.org/?p=7641',
'txt_help' : 'When you activate these buttons by clicking on them, some of your personal data will be transferred to third parties and can be stored by them. For more information click on the <em> i </em>',
'settings_perma' : 'Permanently enable data transfer for:',
'css_path' : '',
'uri' : '',
'cookie_options' : {
'path' : '/',
'expires' : 365
_create: function(){
var self = this;
$('<span class="info">' + this.options.txt_info + '</span>')
.hide()
.addClass('dropdown')
.appendTo(this.element);
$('<div class="dummy_btn off"></div>')
.append(this._dummy_image())
.appendTo(this.element);
this.element.click( function(event) {self.switch_button();});
this.element.hover(
function(){
var info = $('.info',self.element);
if(!info.hasClass('info_off'))
info.show();
},
'services' : {
'facebook' : {
'display_name' : 'Facebook',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send your recommendation to Facebook. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_off' : 'not connected with Facebook',
'txt_on' : 'connected with Facebook',
'dummy_img' : '',
'action' : 'recommend',
'iframe_src' : function (options){
// return '<iframe src="//www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:auto; width:450px; height:21px;" allowTransparency="true"></iframe>';
return '<div id="fb-root"></div>'
+'<script>(function(d, s, id) {'
+' var js, fjs = d.getElementsByTagName(s)[0];'
+' if (d.getElementById(id)) return;'
+' js = d.createElement(s); js.id = id;'
+' js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";'
+' fjs.parentNode.insertBefore(js, fjs);'
+'}(document, "script", "facebook-jssdk"));</script>'
+'<div class="fb-like" data-send="false" data-layout="button_count" data-width="400" data-show-faces="false" data-action="recommend"></div>';
// return '<iframe src="//www.facebook.com/plugins/like.php?href='
// + options.uri
// + '&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false'
// + '&amp;action=' + options.services.facebook.action
// + '&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" '
// + 'style="border:none; overflow:hidden; width:130px; height:25px;" allowTransparency="true"></iframe>';
}
},
'twitter' : {
'display_name' : 'Twitter',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send your recommendation to Twitter. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_off' : 'not connected with Twitter',
'txt_on' : 'connected with Twitter',
'dummy_img' : '',
'reply_to' : '',
'text' : encodeURIComponent(document.title),
'iframe_src' : function(options){
var reply_to = (options.services.twitter.reply_to != '') ? '&amp;via=' + options.services.twitter.reply_to : '';
return '<iframe allowtransparency="true" frameborder="0" scrolling="no" '
+ 'src="http://platform.twitter.com/widgets/tweet_button.html?'
+ 'url=' + options.uri + '&amp;counturl=' + options.uri
+ '&amp;text=' + options.services.twitter.text
+ reply_to
+ '&amp;count=horizontal'
+ '&amp;lang=' + options.services.twitter.language
+ '" style="width:100px; height:25px;"></iframe>';
}
},
'identica' : {
'display_name' : 'Identi.ca',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send your recommendation to Identi.ca. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_off' : 'not connected with Identi.ca',
'txt_on' : 'connected with Identi.ca',
'dummy_img' : '',
'text' : encodeURIComponent(document.title),
'identica_lib' : '',
'iframe_src' : function(options){
return '<iframe scrolling="no" frameborder="0" src="'
+ options.services.identica.identica_lib
+ '?noscript&style2'
+ '&amp;title=' + options.services.identica.text
+ '" allowtransparency="true" style="width:130px; height:25px; position: absolute;"></iframe>';
}
},
'gplus' : {
'display_name' : 'Google+',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send your recommendation to Google+. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_off' : 'not connected with Google+',
'txt_on' : 'connected with Google+',
'dummy_img' : '',
'language' : 'en',
'iframe_src' : function(options){
var gplusdiv = $('<div class="g-plusone" data-size="medium"></div>');
var gplusjs = '<script type="text/javascript">window.___gcfg = {lang: "' + options.services.gplus.language
+ '"}; (function() { var po = document.createElement("script"); po.type = "text/javascript";'
+ 'po.async = true; po.src = "https://apis.google.com/js/plusone.js";'
+ ' var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script>';
return gplusdiv.append(gplusjs);
}
}
/* 'flattr' : {
'display_name' : 'Flattr',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send yout recommendation to Flattr. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_flattr_off' : 'not connected with Flattr',
'txt_flattr_on' : 'connected with Flattr',
'dummy_img' : '',
'iframe_src' : function(){return '';}
},
'xing' : {
'display_name' : 'Xing',
'status' : 'off',
'perma' : 'on',
'txt_info' : '2 click for more privacy: only if you click here, the button will activate and you will be able to send your recommendation to Xing. When enabled, data will be transferred to third parties - see <em> i </em>.',
'txt_gplus_off' : 'not connected with Xing',
'txt_plus_on' : 'connected with Xing',
'dummy_img' : '',
'xing_lib' : '',
'iframe_src' : function(){return '';}
}
*/
}
function() {
$('.info',self.element).hide();
});
},
// let's check if at least one service is active
is_on : function(){
var is_on = false;
for (var name in this.options.services){
var serv = this.options.services[name];
if (serv.status == 'on'){
is_on = true;
break;
}
}
return is_on;
_dummy_image : function(){
return $('<img/>', {
src : this.options.dummy_img,
alt : this.options.display_name + ' Dummy Image',
"class" : 'dummy_img'
});
},
_javascript_is_loaded : function(){
var proto = Object.getPrototypeOf(this);
var selector = proto.widgetBaseClass;
var name = proto.widgetName;
this._trigger('javacript',selector);
if ($(":"+selector).filter(function(index){return $(this)[name]('option','js_loaded');}).length > 0){
return true;
}
return false;
},
// let's check if we have to show the settings area
perma_is_on : function(){
var perma_is_on = false;
for (var name in this.options.services){
var serv = this.options.services[name];
if (serv.status == 'on' && serv.perma == 'on'){
perma_is_on = true;
break;
}
}
// IE7 has problems with cookies and JSON, so we don't show them the settings area
return perma_is_on && (!$.browser.msie || ($.browser.msie && ($.browser.version > 7.0)));
_append_javascript : function(){
if (!this.options.javascript || this._javascript_is_loaded() )
return;
this.options.js_loaded = true;
$.getScript(this.options.javascript);
},
// adds CSS to head if we have to do so
append_css : function(){
// insert stylesheet into document and prepend target element
if (this.options.css_path.length > 0) {
// IE fix (needed for IE < 9 - but this is done for all IE versions)
if (document.createStyleSheet) {
document.createStyleSheet(options.css_path);
} else {
$('head').append('<link rel="stylesheet" type="text/css" href="' + options.css_path + '" />');
}
}
_get_uri: function(){
var url = this.element.parents(".post").find('.entry-title').find("a").attr("href");
if (url)
return url;
else
return document.URL;
},
dummy_image : function(service){
return $('<img/>', {
src : service.dummy_img,
alt : service.display_name + ' Dummy Image',
"class" : 'dummy_img'
});
switch_button : function(){
var el = this.element;
var info = $('.info',el);
var dummy = $('.dummy_btn',el);
if (dummy.hasClass('off')){
this._trigger('switch-on',el);
info.addClass('info_off').hide();
dummy.addClass('on').removeClass('off').html(this._real_btn());
this._append_javascript();
}
/* we don't really want to deactivate the buttons...
else {
this._trigger('switch-off',el);
info.removeClass('info_off');
dummy.addClass('off').removeClass('on').html(this._dummy_image())
}*/
}
});
$.widget('psb.twitterButton',$.psb.baseButton,{
options : {
'name' : 'twitter',
'display_name' : 'Twitter',
'javascript' : '//platform.twitter.com/widgets.js',
'reply_to': '',
'language': '',
},
switch_button : function(service, element){
var c_switch = $('.switch',$(element));
var dummy_div = $('div.dummy_btn',$(element));
if (c_switch.hasClass('off')){
$(element).addClass('info_off');
c_switch.addClass('on').removeClass('off').html(service.txt_on);
dummy_div.html(service.iframe_src(this.options));
} else {
$(element).removeClass('info_off');
c_switch.addClass('off').removeClass('on').html(service.txt_off);
dummy_div.html(this.dummy_image(service));
}
_real_btn: function() {
return $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>')
.attr('data-url',this._get_uri())
.attr('counturl',this._get_uri())
.attr('data-via',this.options.reply_to)
.attr('data-lang', this.options.language)
.attr('data-related', this.options.reply_to)
.attr('data-dnt',true);
},
attach : function(){
var self = this;
this.elements.each( function(){
// contex will hold all the button, whether active or not, and the info and setting area
var context = $('<ul class="social_share_privacy_area"></ul>').appendTo(this);
// let's add the single buttons
for (var name in self.options.services){
var serv = self.options.services[name];
if (serv.status != 'on')
continue;
});
$.widget('psb.identicaButton',$.psb.baseButton,{
options : {
'name' : 'identica',
'display_name' : 'Identi.ca',
'img': '',
'javascript' : '',
'reply_to': '',
'language': '',
'result_limit' :100,
'count': 0,
},
countPost: function(){
var self = this;
$.get('https://identi.ca/api/search.json?q='+self._get_uri()+'&rpp=100',function(data){
var num;
if (data.results.length >= self.options.result_limit)
num = self.options.result_limit + '+';
else
num = data.results.length;
self.option('count',num);
});
},
var iframe = serv.iframe_src(self.options);
_button: function(disabled){
var count = this.options.count;
var icon = disabled ? 'ui-icon-identica-dummy' : 'ui-icon-identica';
return $('<button">identi.ca</button>')
.button({
icons:{
primary: icon,
},
text: true,
label: 'identi.ca',
disabled: false,
});
},
var container = $('<li class="help_info '+name +'"><span class="info">' + serv.txt_info + '</span></li>').appendTo(context);
_dummy_image: function(){
var self = this;
return this._button(true);
},
_real_btn: function(){