Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Activity widget combining comments, favorites, and reblogs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Activity widget</title>
<style type="text/css">
body { font-family: Helvetica; font-size: 12px; }
#note-list li { list-style: none; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999; }
#note-list li span.avatar { padding-right: 10px; }
#note-list li span.avatar img { max-width: 20px; }
</style>
</head>
<body>
<ul id="note-list">Loading...</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="mustache.js"></script>
<script>
var assetId = '6a00d83451c82369e2013480356a71970c';
var data = [];
var allLoaded = 0;
var ul = $( '#note-list' );
var templates = {
reblog: '<li><span class="avatar"><a href="{{profilePageUrl}}"><img class="avatar" src="{{avatarUrl}}" alt="{{displayName}}" /></a></span><span class="action"><a href="{{profilePageUrl}}" title="{{displayName}}">{{displayName}}</a> <a href="{{reblogPermalinkUrl}}">reblogged this</a></li>',
favorite: '<li><span class="avatar"><a href="{{profilePageUrl}}"><img class="avatar" src="{{avatarUrl}}" alt="{{displayName}}" /></a></span><span class="action"><a href="{{profilePageUrl}}" title="{{displayName}}">{{displayName}}</a> liked this</li>',
comment: '<li><span class="avatar"><a href="{{profilePageUrl}}"><img class="avatar" src="{{avatarUrl}}" alt="{{displayName}}" /></a></span><span class="action"><a href="{{profilePageUrl}}" title="{{displayName}}">{{displayName}}</a> replied:<blockquote>{{{commentText}}}</blockquote></li>'
};
$( document ).ready( function() {
$.each( [ 'favorites', 'reblogs', 'comments' ], function( index, meth ) {
$.getJSON(
'http://api.typepad.com/assets/' + assetId + '/' + meth + '.js?callback=?',
{ 'max-results': 50 },
function( res ) {
$.each( res.entries, function( index, entry ) {
data.push( entry );
} );
if ( ++allLoaded == 3 ) {
loaded();
}
}
);
} );
} );
function loaded () {
ul.empty();
data.sort( function( a, b ) {
return ( a.published < b.published ) ? 1 : ( a.published > b.published ) ? -1 : 0;
} );
$.each( data, function( index, val ) {
var user = val.author;
var view = {
profilePageUrl: user.profilePageUrl,
displayName: user.displayName,
avatarUrl: user.avatarLink.urlTemplate ?
user.avatarLink.urlTemplate.replace( '{spec}', '20si' ) :
user.avatarLink.url
};
var template;
if ( val.objectTypes == undefined ) {
template = templates.favorite;
} else if ( val.objectTypes[0].match( /Comment/ ) ) {
template = templates.comment;
view.commentText = val.content;
} else {
template = templates.reblog;
view.reblogPermalinkUrl = val.permalinkUrl;
}
ul.append( Mustache.to_html( template, view ) );
} );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.