JavaScript options

master
Alexander Burtsev 2013-11-01 18:00:21 +03:00
parent bfbdfcc15e
commit 9112c7aa41
3 changed files with 40 additions and 14 deletions

View File

@ -68,7 +68,7 @@ If you want to remove button titles add `social-likes_notext` class to make it l
### Options
Options define via HTML data attributes.
Options define via HTML data attributes or JavaScript parameters object.
`url`
@ -104,6 +104,15 @@ Examples:
</ul>
```
```js
$('.social-likes').socialLikes({
url: 'https://github.com/sapegin/social-likes/',
title: 'Beautiful “like” buttons with counters for popular social networks',
html: '<a href="https://github.com/sapegin/social-likes/">Share with us!</a>',
counters: 'yes'
});
```
### Services specific options
#### Twitter

View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>Social Likes</title>
<!-- <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/2.0.3/jquery.min.js"></script>
<script src="social-likes.js"></script>
@ -211,6 +211,21 @@ sl.on('counter.social-likes', function(event, service, number) {
console.log('Counter', service, number);
});
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',
html: '<a href="https://github.com/sapegin/social-likes/">Share with us!</a>',
counters: 'yes',
zeroes: 'no'
});
</script>
<h3>User button &amp; custom count</h3>

View File

@ -165,16 +165,16 @@ var counters = {
/**
* jQuery plugin
*/
$.fn.socialLikes = function() {
$.fn.socialLikes = function(options) {
return this.each(function() {
new SocialLikes($(this));
new SocialLikes($(this), options);
});
};
function SocialLikes(container) {
function SocialLikes(container, options) {
this.container = container;
this.init();
this.init(options || {});
}
SocialLikes.prototype = {
@ -202,17 +202,17 @@ SocialLikes.prototype = {
convert: function(value) { return value === 'yes'; }
}
},
init: function() {
init: function(options) {
// Add class in case of manual initialization
this.container.addClass(prefix);
this.readOptions();
this.readOptions(options);
this.single = this.container.hasClass(prefix + '_single');
this.initUserButtons();
if (this.single) {
this.makeSingleButton();
this.makeSingleButton(options);
}
var options = this.options;
@ -220,11 +220,13 @@ SocialLikes.prototype = {
new Button($(this), options);
});
},
readOptions: function() {
readOptions: function(options) {
this.options = {};
for (var key in this.optionsMap) {
for (var key in this.optionsMap) {
var option = this.optionsMap[key];
var value = this.container.data(option.attr);
var paramOption = options[option.attr];
var value = paramOption || this.container.data(option.attr);
if (!value) {
if ($.isFunction(option.defaultValue)) {
value = $.proxy(option.defaultValue, this)();
@ -245,7 +247,7 @@ SocialLikes.prototype = {
}
this.userButtonInited = true;
},
makeSingleButton: function() {
makeSingleButton: function(options) {
var container = this.container;
container.addClass(prefix + '_vertical');
container.wrap($('<div>', {'class': prefix + '_single-w'}));
@ -256,7 +258,7 @@ SocialLikes.prototype = {
var button = $('<div>', {
'class': getElementClassNames('button', 'single'),
'text': container.data('single-title') || 'Share'
'text': options['single-title'] || container.data('single-title') || 'Share'
});
button.prepend($('<span>', {'class': getElementClassNames('icon', 'single')}));
wrapper.append(button);