Merge pull request #42 from albburtsev/params

JavaScript options

Readme.md

@@ -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,14 @@ Examples:
 </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
 
 #### Twitter

src/demo.html

@@ -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>
@@ -132,7 +132,7 @@ body {
 		<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>
 	</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="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
 		<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
@@ -211,6 +211,20 @@ 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',
+	counters: true,
+	zeroes: false
+});
 </script>
 
 	<h3>User button &amp; custom count</h3>

src/social-likes.js

@@ -19,7 +19,7 @@
 	else {
 		factory(jQuery);
 	}
-}(function($) { 'use strict';	
+}(function($, undefined) { 'use strict';	
 
 var prefix = 'social-likes';
 var classPrefix = prefix + '__';
@@ -165,16 +165,16 @@ var counters = {
 /**
  * jQuery plugin
  */
-$.fn.socialLikes = function() {
+$.fn.socialLikes = function(opts) {
 	return this.each(function() {
-		new SocialLikes($(this));
+		new SocialLikes($(this), opts);
 	});
 };
 
 
-function SocialLikes(container) {
+function SocialLikes(container, opts) {
 	this.container = container;
-	this.init();
+	this.init(opts);
 }
 
 SocialLikes.prototype = {
@@ -194,19 +194,23 @@ SocialLikes.prototype = {
 		showCounters: {
 			attr: 'counters',
 			defaultValue: 'yes',
-			convert: function(value) { return value === 'yes'; }
+			convert: function(value) { return value === true || value === 'yes'; }
 		},
 		showZeroes: {
 			attr: 'zeroes',
 			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
 		this.container.addClass(prefix);
 
-		this.readOptions();
+		this.readOptions(opts);
 		this.single = this.container.hasClass(prefix + '_single');
 
 		this.initUserButtons();
@@ -220,12 +224,15 @@ SocialLikes.prototype = {
 			new Button($(this), options);
 		});
 	},
-	readOptions: function() {
+	readOptions: function(opts) {
+		opts = opts || {};
 		this.options = {};
+
 		for (var key in this.optionsMap) {
 			var option = this.optionsMap[key];
-			var value = this.container.data(option.attr);
-			if (!value) {
+			var value = opts[option.attr] !== undefined ? opts[option.attr] : this.container.data(option.attr);
+
+			if (value === undefined) {
 				if ($.isFunction(option.defaultValue)) {
 					value = $.proxy(option.defaultValue, this)();
 				}
@@ -256,7 +263,7 @@ SocialLikes.prototype = {
 
 		var button = $('<div>', {
 			'class': getElementClassNames('button', 'single'),
-			'text': container.data('single-title') || 'Share'
+			'text': this.options.singleTitle
 		});
 		button.prepend($('<span>', {'class': getElementClassNames('icon', 'single')}));
 		wrapper.append(button);