From 9174219e3cf7fbbde74a8b29e282e9f6b9fcac4c Mon Sep 17 00:00:00 2001 From: zachleat Date: Mon, 16 Jul 2012 17:53:16 -0500 Subject: [PATCH] Hover interactions for social widget. Sizing should be accurate enough that the buttons don't jump when the remote widgets are placed. --- examples/index.html | 23 ---------------- lib/socialcount.css | 59 +++++++++++++++++++++++++++++++++++++++- lib/socialcount.js | 57 ++++++++++++++++++++++++++++++-------- test/socialcount_test.js | 14 ++++++++-- 4 files changed, 115 insertions(+), 38 deletions(-) diff --git a/examples/index.html b/examples/index.html index 92adf83..adbcef8 100644 --- 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; - } diff --git a/lib/socialcount.css b/lib/socialcount.css index 85c1926..9e8b05f 100644 --- 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; } \ No newline at end of file diff --git a/lib/socialcount.js b/lib/socialcount.js index 559cd00..88e07db 100644 --- 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' ), + '' ); + + bind( $el.find( SocialCount.classes.twitter + ' a' ), + 'Tweet', + '//platform.twitter.com/widgets.js' ); + + bind( $el.find( SocialCount.classes.googleplus + ' a' ), + '
', + '//apis.google.com/js/plusone.js' ); } }; diff --git a/test/socialcount_test.js b/test/socialcount_test.js index fb436f2..4b0b417 100644 --- 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(); } };