vitalif-js
/
social-likes-nojq
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Very big refactoring. Ability to change page URL.

master
Artem Sapegin 2012-01-26 17:18:54 +04:00
parent 7ccca71af1
commit 8762231b4f
2 changed files with 223 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo.html
View File

@ -28,5 +28,21 @@
<li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li> <li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li>
</ul> </ul>
<ul class="social-likes" data-url="http://landscapists.info/igor-shpilenok">
<li class="facebook"><a href="#" title="Опубликовать ссылку на Фейсбуке">Facebook</a></li>
<li class="twitter"><a href="#" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</a></li>
<li class="mailru"><a href="#" title="Опубликовать ссылку в Моём Мире">Мой мир</a></li>
<li class="vkontakte"><a href="#" title="Опубликовать ссылку во Вконтакте">Вконтакте</a></li>
<li class="odnoklassniki"><a href="#" title="Опубликовать ссылку в Одноклассниках">Одноклассники</a></li>
<!--li class="plusone" data-counter-url="/social-likes/googleplusonecount.php"><a href="#" title="Плюсануть в Гугле">+1</a></li-->
<li class="livejournal"><form action="http://www.livejournal.com/update.bml" method="post" target="_blank">
<input type="hidden" name="mode" value="full">
<input type="hidden" name="subject" value="Social Likes">
<input type="hidden" name="event" value="<a href=https://github.com/sapegin/social-likes>Красивые кнопки «лайков» социальных сетей</a>">
<input type="submit" value="LiveJournal" title="Опубликовать ссылку в ЖЖ">
</form></li>
<li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li>
</ul>
</body> </body>
</html> </html>

385
social-likes.js
View File

@ -4,8 +4,8 @@
* *
* Sharing buttons for Russian and worldwide social networks. * Sharing buttons for Russian and worldwide social networks.
* *
* @version 1.2.1 * @version 1.2.2
* @requires jQuery 1.4 * @requires jQuery 1.6
* @author Artem Sapegin * @author Artem Sapegin
* @copyright 2011 Artem Sapegin (sapegin.ru) * @copyright 2011 Artem Sapegin (sapegin.ru)
* @license http://creativecommons.org/licenses/by/3.0/ * @license http://creativecommons.org/licenses/by/3.0/
@ -19,196 +19,200 @@
socialLikes.prototype = { socialLikes.prototype = {
init: function() { init: function() {
this.pageUrl = window.location.href.replace(window.location.hash, '');
var escapedPageUrl = escape(this.pageUrl);
this.container = $('.social-likes');
var this_ = this;
this.counters = {}; this.counters = {};
var containers = $('.social-likes');
// Dirty hack for G+ button but I cannot find a better solution yet
if ($.browser.msie && $.browser.version <= 9) { if ($.browser.msie && $.browser.version <= 9) {
this.container.addClass('social-likes-msie-lte9'); containers.addClass('social-likes-msie-lte9');
} }
this.container.find('li').each(function(){ containers.each($.proxy(this.initWidget, this));
var buttonWrapper = $(this); },
var classes = buttonWrapper[0].className.split(' ');
for (var classIdx = 0; classIdx < classes.length; classIdx++) {
var cls = classes[classIdx];
switch(cls) {
case 'twitter':
if (!this_.counters.twiter) {
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + escapedPageUrl + '&callback=?', function(data){ this_.updateCount(cls, data.count); });
this_.counters.twiter = true;
}
this_.initButton({ initWidget: function(idx, container) {
urlParam: 'url', $(container).find('li').each($.proxy(this.findButtons, this));
textParam: 'text', },
additionalParams: ['via', 'related'],
popupUrl: 'http://twitter.com/share',
pupupWidth: 550,
popupHeight: 450
}, buttonWrapper, cls);
break; findButtons: function(idx, li) {
var buttonWrapper = $(li),
container = buttonWrapper.closest('.social-likes'),
pageUrl = this.getPageUrl(container),
escapedPageUrl = escape(pageUrl);
if (!this.counters[pageUrl]) this.counters[pageUrl] = {};
var counters = this.counters[pageUrl];
case 'facebook': var classes = buttonWrapper[0].className.split(' ');
if (!this_.counters.facebook) { for (var classIdx = 0; classIdx < classes.length; classIdx++) {
$.getJSON('https://api.facebook.com/method/fql.query?query=select total_count from link_stat where url="' + escapedPageUrl + '"&format=json&callback=?', function(data){ this_.updateCount(cls, data[0] && data[0].total_count); }); var cls = classes[classIdx];
this_.counters.facebook = true; switch(cls) {
} case 'twitter':
this.loadCount(cls, 'http://urls.api.twitter.com/1/urls/count.json?callback=?',
{url: pageUrl}, pageUrl, buttonWrapper, function(data) { return data.count; });
this_.initButton({ this.initButton({
urlParam: 'u', url: pageUrl,
textParam: 't', urlParam: 'url',
popupUrl: 'http://www.facebook.com/sharer.php', textParam: 'text',
pupupWidth: 550, additionalParams: ['via', 'related'],
popupHeight: 450 popupUrl: 'http://twitter.com/share',
}, buttonWrapper, cls); pupupWidth: 550,
popupHeight: 450
}, buttonWrapper, cls);
break; break;
case 'plusone':
/* buttonWrapper.replaceWith('<g:plusone></g:plusone>');
// Load standard Google +1 button case 'facebook':
window.___gcfg = { this.loadCount(cls, 'https://api.facebook.com/method/fql.query?query=select total_count from link_stat where url="' +
lang: 'ru', escapedPageUrl + '"&format=json&callback=?',
parsetags: 'explicit' {}, pageUrl, buttonWrapper, function(data) { return data[0] && data[0].total_count; });
};
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);*/
if (!this_.counters.plusone) { this.initButton({
var counterUrl = buttonWrapper.attr('data-counter-url'); url: pageUrl,
if (counterUrl) { urlParam: 'u',
$.getJSON(counterUrl + '?url=' + escapedPageUrl + '&callback=?', function(data){ this_.updateCount(cls, data); }); textParam: 't',
this_.counters.plusone = true; popupUrl: 'http://www.facebook.com/sharer.php',
} pupupWidth: 550,
} popupHeight: 450
}, buttonWrapper, cls);
this_.initButton({ break;
urlParam: 'url',
popupUrl: 'https://plusone.google.com/_/+1/confirm?hl=ru_RU', case 'plusone':
pupupWidth: 500, this.initButton({
popupHeight: 300 url: pageUrl,
}, buttonWrapper, cls); urlParam: 'url',
popupUrl: 'https://plusone.google.com/_/+1/confirm?hl=ru_RU',
pupupWidth: 500,
popupHeight: 300
}, buttonWrapper, cls);
break; break;
case 'mailru': case 'mailru':
if (!this_.counters.mailru) { this.loadCount(cls, 'http://connect.mail.ru/share_count?func=?', {
$.getJSON('http://connect.mail.ru/share_count?url_list=' + escapedPageUrl + '&callback=1&func=?', function(data){ this_.updateCount(cls, data[this_.pageUrl] && data[this_.pageUrl].shares); }); url_list: pageUrl,
this_.counters.mailru = true; callback: 1,
} }, pageUrl, buttonWrapper, function(data) { return data[pageUrl] && data[pageUrl].shares; });
this_.initButton({ this.initButton({
urlParam: 'share_url', url: pageUrl,
popupUrl: 'http://connect.mail.ru/share', urlParam: 'share_url',
pupupWidth: 550, popupUrl: 'http://connect.mail.ru/share',
popupHeight: 360 pupupWidth: 550,
}, buttonWrapper, cls); popupHeight: 360
}, buttonWrapper, cls);
break; break;
case 'vkontakte': case 'vkontakte':
if (!this_.counters.vkontakte) { if (!this._vkontakte) {
window.VK = {Share: {count: function(junk, count) { this._vkontakte = [];
this_.updateCount(cls, count); window.VK = {Share: {count: $.proxy(function(idx, count) {
}}}; this.updateCount(this._vkontakte[idx], count);
}, this)}};
}
var index = this._vkontakte.length;
this._vkontakte[index] = buttonWrapper;
this.loadCount(cls, null, null, pageUrl, buttonWrapper, null, function() {
$.ajax({ $.ajax({
url: 'http://vkontakte.ru/share.php?act=count&index=1&url=' + escapedPageUrl, url: 'http://vkontakte.ru/share.php?act=count&index=' + index + '&url=' + escapedPageUrl,
dataType: 'jsonp' dataType: 'jsonp'
}); });
this_.counters.vkontakte = true; });
}
this_.initButton({ this.initButton({
urlParam: 'url', url: pageUrl,
textParam: 'title', urlParam: 'url',
popupUrl: 'http://vkontakte.ru/share.php', textParam: 'title',
pupupWidth: 550, popupUrl: 'http://vkontakte.ru/share.php',
popupHeight: 330 pupupWidth: 550,
}, buttonWrapper, cls); popupHeight: 330
}, buttonWrapper, cls);
break; break;
case 'odnoklassniki': case 'odnoklassniki':
if (!this_.counters.odnoklassniki) { if (!this._odnoklassniki) {
window.ODKL = {updateCount: function(junk, count) { this._odnoklassniki = [];
this_.updateCount(cls, count); window.ODKL = {updateCount: $.proxy(function(idx, count) {
}}; this.updateCount(this._odnoklassniki[idx], count);
}, this)};
}
var index = this._odnoklassniki.length;
this._odnoklassniki[index] = buttonWrapper;
this.loadCount(cls, null, null, pageUrl, buttonWrapper, null, function() {
$.ajax({ $.ajax({
url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=odklcnt0&ref=' + escapedPageUrl, url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=' + index + '&ref=' + escapedPageUrl,
dataType: 'jsonp' dataType: 'jsonp'
}); });
this_.counters.odnoklassniki = true; });
this.initButton({
url: pageUrl,
urlParam: 'st._surl',
popupUrl: 'http://www.odnoklassniki.ru/dk?st.cmd=addShare',
pupupWidth: 550,
popupHeight: 360
}, buttonWrapper, cls);
break;
case 'livejournal':
var button = buttonWrapper.find(':submit');
var newLink = $('<a href="#">' + button.val() + '</a>');
newLink.click(function(){ $(this).closest('form').submit(); });
if (button.attr('title')) {
newLink.attr('title', button.attr('title'));
}
button.hide();
button.after(newLink);
break;
case 'code':
var link = buttonWrapper.find('a');
link.click($.proxy(function(){
var balloon = buttonWrapper.find('.social-balloon');
if (balloon.length) {
balloon.toggle();
}
else {
balloon = $([
'<div class="social-balloon">',
'<i></i>',
'Скопируйте код в&nbsp;буфер обмена:<br>',
'<textarea class="social-code-area"></textarea>',
'</div>'
].join(''));
link.after(balloon);
var textarea = buttonWrapper.find('textarea');
var messageField = container.find('.livejournal input[name="event"]');
if (!messageField.length) messageField = container.find('.code input[name="event"]');
textarea.val(messageField.val());
this.selectTextInTextarea(textarea);
} }
this_.initButton({ if (balloon.is(":visible")) {
urlParam: 'st._surl', $(document).bind('click.social-hide-code', function(e){
popupUrl: 'http://www.odnoklassniki.ru/dk?st.cmd=addShare', if (!$(e.target).hasClass('social-code-area')) {
pupupWidth: 550, balloon.hide();
popupHeight: 360 $(document).unbind('click.social-hide-code');
}, buttonWrapper, cls); }
return true;
break; });
case 'livejournal':
var button = buttonWrapper.find(':submit');
var newLink = $('<a href="#">' + button.val() + '</a>');
newLink.click(function(){ $(this).closest('form').submit(); });
if (button.attr('title')) {
newLink.attr('title', button.attr('title'));
} }
button.hide();
button.after(newLink);
break;
case 'code': return false;
var link = buttonWrapper.find('a'); }, this));
link.click(function(){
var balloon = buttonWrapper.find('.social-balloon');
if (balloon.length) {
balloon.toggle();
}
else {
balloon = $([
'<div class="social-balloon">',
'<i></i>',
'Скопируйте код в&nbsp;буфер обмена:<br>',
'<textarea class="social-code-area"></textarea>',
'</div>'
].join(''));
link.after(balloon);
var textarea = buttonWrapper.find('textarea');
var messageField = this_.container.find('.livejournal input[name="event"]');
if (!messageField.length) messageField = this_.container.find('.code input[name="event"]');
textarea.val(messageField.val());
this_.selectTextInTextarea(textarea);
}
if (balloon.is(":visible")) {
$(document).bind('click.social-hide-code', function(e){
if (!$(e.target).hasClass('social-code-area')) {
balloon.hide();
$(document).unbind('click.social-hide-code');
}
return true;
});
}
return false; break;
});
break;
}
// Icon container
buttonWrapper.find('a').prepend('<i></i>');
} }
});
// Icon container
buttonWrapper.find('a').prepend('<i></i>');
}
}, },
initButton: function(params, buttonWrapper, buttonName) { initButton: function(params, buttonWrapper, buttonName) {
@ -216,14 +220,14 @@
var query = {}; var query = {};
if (params.urlParam) if (params.urlParam)
query[params.urlParam] = this.pageUrl; query[params.urlParam] = params.url;
if (params.textParam) if (params.textParam)
query[params.textParam] = document.title; query[params.textParam] = document.title;
if (params.additionalParams) { if (params.additionalParams) {
for (var paramIdx = 0; paramIdx < params.additionalParams.length; paramIdx++) { for (var paramIdx = 0; paramIdx < params.additionalParams.length; paramIdx++) {
var key = params.additionalParams[paramIdx]; var key = params.additionalParams[paramIdx];
if (link.attr('data-' + key)) if (link.data(key))
query[key] = link.attr('data-' + key); query[key] = link.data(key);
} }
} }
@ -236,12 +240,33 @@
name: 'share_' + buttonName name: 'share_' + buttonName
}); });
return false; return false;
}); });
}, },
updateCount: function(buttonName, count) { loadCount: function(id, url, params, pageUrl, buttonWrapper, getNumber, request) {
if (!this.counters[pageUrl]) this.counters[pageUrl] = {};
var counters = this.counters[pageUrl];
if (counters[id] === undefined) {
if (request) {
request();
}
else {
$.getJSON(url, params, $.proxy(function(data){
var number = getNumber(data);
this.updateCount(buttonWrapper, number);
counters[id] = number;
}, this));
}
counters[id] = true;
}
else if (counters[id] !== true) {
this.updateCount(buttonWrapper, counters[id]);
}
},
updateCount: function(buttonWrapper, count) {
count = parseInt(count, 10); count = parseInt(count, 10);
var buttonWrapper = $('.' + buttonName, this.container);
var counter = buttonWrapper.find('b i i'); var counter = buttonWrapper.find('b i i');
if (counter.length) { if (counter.length) {
counter.html(count); counter.html(count);
@ -254,17 +279,21 @@
}, },
openWindow: function(url, params) { openWindow: function(url, params) {
var left = Math.round((screen.width / 2) - (params.width / 2)); var left = Math.round((screen.width / 2) - (params.width / 2));
var top = 0; var top = 0;
if (screen.height > params.height) { if (screen.height > params.height) {
top = Math.round((screen.height / 3) - (params.height / 2)); top = Math.round((screen.height / 3) - (params.height / 2));
} }
var win = window.open(url, params.name, "left=" + left + ",top=" + top + ",width=" + params.width + ",height=" + params.height + ",personalbar=0,toolbar=0,scrollbars=1,resizable=1"); var win = window.open(url, params.name, "left=" + left + ",top=" + top + ",width=" + params.width + ",height=" + params.height + ",personalbar=0,toolbar=0,scrollbars=1,resizable=1");
if (win) { if (win) {
win.focus(); win.focus();
} else { } else {
window.location.href = url; window.location.href = url;
} }
},
getPageUrl: function(buttonWrapper) {
return buttonWrapper.data('url') || window.location.href.replace(window.location.hash, '');
}, },
getQuery: function(params) { getQuery: function(params) {