Hover interactions for social widget. Sizing should be accurate enoug…

…h that the buttons don't jump when the remote widgets are placed.
bjfrocha · Jul 16, 2012 · 9174219 · 9174219
1 parent 2892f14
commit 9174219
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 38 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -10,29 +10,6 @@
 			input[type="text"] {
 				width: 300px;
 			}
-			.facebook,
-			.twitter,
-			.googleplus {
-				font-weight: bold;
-			}
-			.facebook,
-			.facebook :link,
-			.facebook :visited {
-				color: #3b5998;
-			}
-			.twitter,
-			.twitter :link,
-			.twitter :visited {
-				color: #00aced;
-			}
-			.googleplus,
-			.googleplus :link,
-			.googleplus :visited {
-				color: #db583b;
-			}
-			ul {
-				margin: 0 auto;
-			}
 		</style>
 	</head>
 	<body>

diff --git a/lib/socialcount.css b/lib/socialcount.css
@@ -24,6 +24,8 @@
 	border-radius: 3px;
 	margin-left: .4em;
 	display: none;
+	-webkit-box-shadow: 1px 1px 1px 0 #ddd;
+	box-shadow: 1px 1px 1px 0 #ddd;
 }
 .socialcount.js .count {
 	display: inline;
@@ -49,9 +51,13 @@
 	-o-transform: rotate(315deg); 
 	transform: rotate(315deg);
 }
+.socialcount.vertical {
+	overflow: hidden;
+}
 .socialcount.vertical > li {
 	float: left;
 	clear: left;
+	padding-bottom: .6em;
 }
 .socialcount.js.vertical,
 .socialcount.js.horizontal {
@@ -63,7 +69,6 @@
 	margin-left: 0;
 	margin-top: -2px;
 	text-align: center;
-	min-width: 2.8em;
 }
 .socialcount.vertical .count:before,
 .socialcount.horizontal .count:before {
@@ -75,4 +80,56 @@
 	-ms-transform: rotate(45deg); /* IE9 */
 	-o-transform: rotate(45deg); 
 	transform: rotate(45deg);
+}
+
+/* Text-only share links */
+.socialcount .facebook,
+.socialcount .twitter,
+.socialcount .googleplus {
+	font-weight: bold;
+}
+.socialcount .facebook,
+.socialcount .facebook :link,
+.socialcount .facebook :visited {
+	color: #3b5998;
+}
+.socialcount .twitter,
+.socialcount .twitter :link,
+.socialcount .twitter :visited {
+	color: #00aced;
+}
+.socialcount .googleplus,
+.socialcount .googleplus :link,
+.socialcount .googleplus :visited {
+	color: #db583b;
+}
+
+/* Remote social widgets */
+.socialcount.horizontal-inline .googleplus a,
+.socialcount.horizontal-inline .twitter a,
+.socialcount.horizontal-inline .facebook a {
+	text-align: right;
+}
+.socialcount.js .googleplus a,
+.socialcount.js .g-plusone,
+.socialcount.js .twitter a,
+.socialcount.js .facebook a,
+.socialcount.js .facebook iframe {
+	display: inline-block;
+	*display: inline;
+	zoom: 1;
+}
+.socialcount .googleplus a,
+.socialcount .g-plusone {
+	width: 32px;
+}
+.socialcount .twitter a {
+	width: 56px;
+}
+.socialcount .facebook iframe {
+	height: 20px;
+}
+.socialcount .facebook a,
+.socialcount .facebook iframe {
+	width: 90px;
 }
diff --git a/lib/socialcount.js b/lib/socialcount.js
@@ -3,11 +3,12 @@
 	SocialCount = {
 		cache: {},
 		thousandCharacter: 'K',
+		millionCharacter: 'M',
 		missingResultText: '-',
-		dataKeyToSelectorsMap: {
-			facebook: '.facebook .count',
-			twitter: '.twitter .count',
-			googleplus: '.googleplus .count'
+		classes: {
+			facebook: '.facebook',
+			twitter: '.twitter',
+			googleplus: '.googleplus'
 		},
 		isIeLte8: function() {
 			// Props to https://gist.github.com/527683
@@ -18,28 +19,28 @@
 		},
 		init: function( $el ) {
 			var url = $el.attr('data-url') || window.location.href,
-				orientation = $el.attr('data-orientation' );
+				orientation = $el.attr('data-orientation' ) || 'horizontal-inline';
 
 			SocialCount.fetch( url, function complete( data ) {
-				var map = SocialCount.dataKeyToSelectorsMap;
+				var map = SocialCount.classes;
 				$el.addClass('js');
 
 				for( var j in data ) {
 					if( data.hasOwnProperty(j) ) {
-						$el.find( map[j] ).html( SocialCount.normalizeCount( data[j] ) );
+						$el.find( map[j] + ' .count' ).html( SocialCount.normalizeCount( data[j] ) );
 					}
 				}
 			});
 
-			if( orientation ) {
-				$el.addClass( orientation );
-			}
+			$el.addClass( orientation );
 
 			// Since there isn't a safe CSS Hack for IE8 and below, we add a helper class here.
 			// Needed because IE8 doesn't support filter rotation on pseudo elements.
 			if( SocialCount.isIeLte8() ) {
 				$el.addClass('ie-lte8');
 			}
+
+			SocialCount.bindEvents( $el, url );
 		},
 		fetch: function( url, callback ) {
 			if( !SocialCount.cache[ url ] ) {
@@ -63,14 +64,46 @@
 			if( !count && count !== 0 ) {
 				return SocialCount.missingResultText;
 			}
-			// TODO add commas for >= 1M
-			if( count > 100000 ) {
+			// > 1M
+			if( count >= 1000000 ) {
+				return Math.floor( count / 1000000 ) + SocialCount.millionCharacter;
+			}
+			// > 100K
+			if( count >= 100000 ) {
 				return Math.floor( count / 1000 ) + SocialCount.thousandCharacter;
 			}
 			if( count > 1000 ) {
 				return ( count / 1000 ).toFixed(1).replace( /\.0/, '' ) + SocialCount.thousandCharacter;
 			}
 			return count;
+		},
+		bindEvents: function( $el, url )
+		{
+			function bind( $a, html, jsUrl )
+			{
+				$a.one( 'mouseover', function() {
+						$( this ).replaceWith( html );
+
+						var js;
+						if( jsUrl ) {
+							js = document.createElement( 'script' );
+							js.src = jsUrl;
+
+							document.body.appendChild( js );
+						}
+					});
+			}
+
+			bind( $el.find( SocialCount.classes.facebook + ' a' ),
+				'<iframe src="//www.facebook.com/plugins/like.php?href=' + encodeURI( url ) + '&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=recommend&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>' );
+
+			bind( $el.find( SocialCount.classes.twitter + ' a' ),
+				'<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>',
+				'//platform.twitter.com/widgets.js' );
+
+			bind( $el.find( SocialCount.classes.googleplus + ' a' ),
+				'<div class="g-plusone" data-size="medium" data-annotation="none"></div>',
+				'//apis.google.com/js/plusone.js' );
 		}
 	};
 

diff --git a/test/socialcount_test.js b/test/socialcount_test.js
@@ -25,13 +25,23 @@ exports['SocialCountNormalizeCountTest'] = {
 		test.equal(SocialCount.normalizeCount(2050), '2K');
 		test.done();
 	},
-	normalizeCountAbove100K: function(test)
+	normalizeCountAround100K: function(test)
 	{
-		// >= 100K
+		test.equal(SocialCount.normalizeCount(99499), '99.5K');
+		test.equal(SocialCount.normalizeCount(99501), '99.5K');
+		// if >= 100K, uses Math.floor
 		test.equal(SocialCount.normalizeCount(100000), '100K');
 		test.equal(SocialCount.normalizeCount(100999), '100K');
 		test.equal(SocialCount.normalizeCount(101000), '101K');
 		test.equal(SocialCount.normalizeCount(101999), '101K');
 		test.done();
+	},
+	normalizeCountAround1M: function(test)
+	{
+		// uses Math.floor
+		test.equal(SocialCount.normalizeCount(999499), '999K');
+		test.equal(SocialCount.normalizeCount(999999), '999K');
+		test.equal(SocialCount.normalizeCount(1000000), '1M');
+		test.done();
 	}
 };