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,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

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>
@@ -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>

src/social-likes.js

@@ -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);