djacobs · May 25, 2010 14:47
diff --git a/gistfile1.html b/gistfile1.html
 <!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>
	<!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>