commit
bf17f95692
10
Readme.md
10
Readme.md
|
@ -68,7 +68,7 @@ If you want to remove button titles add `social-likes_notext` class to make it l
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
Options define via HTML data attributes.
|
Options define via HTML data attributes or JavaScript parameters object.
|
||||||
|
|
||||||
`url`
|
`url`
|
||||||
|
|
||||||
|
@ -104,6 +104,14 @@ Examples:
|
||||||
</ul>
|
</ul>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
$('.social-likes').socialLikes({
|
||||||
|
url: 'https://github.com/sapegin/social-likes/',
|
||||||
|
title: 'Beautiful “like” buttons with counters for popular social networks',
|
||||||
|
counters: true
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
### Services specific options
|
### Services specific options
|
||||||
|
|
||||||
#### Twitter
|
#### Twitter
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Social Likes</title>
|
<title>Social Likes</title>
|
||||||
<!-- <link href="../social-likes_classic.css" rel="stylesheet"> -->
|
<!-- <link href="../social-likes_classic.css" rel="stylesheet"> -->
|
||||||
<link href="../social-likes_flat.css" rel="stylesheet">
|
<link href="../social-likes.css" rel="stylesheet">
|
||||||
<!--script src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script-->
|
<!--script src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script-->
|
||||||
<script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
|
<script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
|
||||||
<script src="social-likes.js"></script>
|
<script src="social-likes.js"></script>
|
||||||
|
@ -132,7 +132,7 @@ body {
|
||||||
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
|
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
|
||||||
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
|
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/">
|
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me">
|
||||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||||
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
|
||||||
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
|
||||||
|
@ -211,6 +211,20 @@ sl.on('counter.social-likes', function(event, service, number) {
|
||||||
console.log('Counter', service, number);
|
console.log('Counter', service, number);
|
||||||
});
|
});
|
||||||
sl.socialLikes();
|
sl.socialLikes();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h3>Manual initialization with JavaScript options</h3>
|
||||||
|
<ul id="social-likes-manual-options">
|
||||||
|
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$('#social-likes-manual-options').socialLikes({
|
||||||
|
url: 'https://github.com/sapegin/social-likes/',
|
||||||
|
title: 'Beautiful “like” buttons with counters for popular social networks',
|
||||||
|
counters: true,
|
||||||
|
zeroes: false
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h3>User button & custom count</h3>
|
<h3>User button & custom count</h3>
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
else {
|
else {
|
||||||
factory(jQuery);
|
factory(jQuery);
|
||||||
}
|
}
|
||||||
}(function($) { 'use strict';
|
}(function($, undefined) { 'use strict';
|
||||||
|
|
||||||
var prefix = 'social-likes';
|
var prefix = 'social-likes';
|
||||||
var classPrefix = prefix + '__';
|
var classPrefix = prefix + '__';
|
||||||
|
@ -165,16 +165,16 @@ var counters = {
|
||||||
/**
|
/**
|
||||||
* jQuery plugin
|
* jQuery plugin
|
||||||
*/
|
*/
|
||||||
$.fn.socialLikes = function() {
|
$.fn.socialLikes = function(opts) {
|
||||||
return this.each(function() {
|
return this.each(function() {
|
||||||
new SocialLikes($(this));
|
new SocialLikes($(this), opts);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
function SocialLikes(container) {
|
function SocialLikes(container, opts) {
|
||||||
this.container = container;
|
this.container = container;
|
||||||
this.init();
|
this.init(opts);
|
||||||
}
|
}
|
||||||
|
|
||||||
SocialLikes.prototype = {
|
SocialLikes.prototype = {
|
||||||
|
@ -194,19 +194,23 @@ SocialLikes.prototype = {
|
||||||
showCounters: {
|
showCounters: {
|
||||||
attr: 'counters',
|
attr: 'counters',
|
||||||
defaultValue: 'yes',
|
defaultValue: 'yes',
|
||||||
convert: function(value) { return value === 'yes'; }
|
convert: function(value) { return value === true || value === 'yes'; }
|
||||||
},
|
},
|
||||||
showZeroes: {
|
showZeroes: {
|
||||||
attr: 'zeroes',
|
attr: 'zeroes',
|
||||||
defaultValue: 'no',
|
defaultValue: 'no',
|
||||||
convert: function(value) { return value === 'yes'; }
|
convert: function(value) { return value === true || value === 'yes'; }
|
||||||
|
},
|
||||||
|
singleTitle: {
|
||||||
|
attr: 'single-title',
|
||||||
|
defaultValue: 'Share'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
init: function() {
|
init: function(opts) {
|
||||||
// Add class in case of manual initialization
|
// Add class in case of manual initialization
|
||||||
this.container.addClass(prefix);
|
this.container.addClass(prefix);
|
||||||
|
|
||||||
this.readOptions();
|
this.readOptions(opts);
|
||||||
this.single = this.container.hasClass(prefix + '_single');
|
this.single = this.container.hasClass(prefix + '_single');
|
||||||
|
|
||||||
this.initUserButtons();
|
this.initUserButtons();
|
||||||
|
@ -220,12 +224,15 @@ SocialLikes.prototype = {
|
||||||
new Button($(this), options);
|
new Button($(this), options);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
readOptions: function() {
|
readOptions: function(opts) {
|
||||||
|
opts = opts || {};
|
||||||
this.options = {};
|
this.options = {};
|
||||||
|
|
||||||
for (var key in this.optionsMap) {
|
for (var key in this.optionsMap) {
|
||||||
var option = this.optionsMap[key];
|
var option = this.optionsMap[key];
|
||||||
var value = this.container.data(option.attr);
|
var value = opts[option.attr] !== undefined ? opts[option.attr] : this.container.data(option.attr);
|
||||||
if (!value) {
|
|
||||||
|
if (value === undefined) {
|
||||||
if ($.isFunction(option.defaultValue)) {
|
if ($.isFunction(option.defaultValue)) {
|
||||||
value = $.proxy(option.defaultValue, this)();
|
value = $.proxy(option.defaultValue, this)();
|
||||||
}
|
}
|
||||||
|
@ -256,7 +263,7 @@ SocialLikes.prototype = {
|
||||||
|
|
||||||
var button = $('<div>', {
|
var button = $('<div>', {
|
||||||
'class': getElementClassNames('button', 'single'),
|
'class': getElementClassNames('button', 'single'),
|
||||||
'text': container.data('single-title') || 'Share'
|
'text': this.options.singleTitle
|
||||||
});
|
});
|
||||||
button.prepend($('<span>', {'class': getElementClassNames('icon', 'single')}));
|
button.prepend($('<span>', {'class': getElementClassNames('icon', 'single')}));
|
||||||
wrapper.append(button);
|
wrapper.append(button);
|
||||||
|
|
Loading…
Reference in New Issue