Skip to content

Instantly share code, notes, and snippets.

@eiszfuchs

eiszfuchs/masonry_timeline.html

Created April 9, 2010 09:38
Show Gist options
  • Save eiszfuchs/361018 to your computer and use it in GitHub Desktop.
Save eiszfuchs/361018 to your computer and use it in GitHub Desktop.
Download ZIP
Fetch social feeds and display them. Live Demo: http://eisfuchslabor.de/playground/timeline/
Raw
masonry_timeline.html
<!DOCTYPE html>
<html lang="de">
<head>
<title>experiment : masonry timeline</title>
<meta charset="utf-8" />
<!-- icons via http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/ -->
<style type="text/css">
body {
font-family: Tahoma;
font-size: 8pt;
line-height: 1.5em;
}
.highlight { background-color: yellow; }
ul#status {
margin: 0;
padding: 0;
width: 200px;
}
#status li {
list-style: none;
margin-bottom: 1px;
padding: 2px 12px 2px 24px;
}
#status li.loading {
background-color: #E53232;
background-image: url(media/img/loading.gif);
background-position: 4px center;
background-repeat: no-repeat;
color: #fff;
}
#status li.ready {
background-color: #98D336;
background-image: url(media/img/check.png);
background-position: 4px center;
background-repeat: no-repeat;
color: #222;
}
#timeline {
width: 600px;
margin: auto;
}
#timeline div {
margin: 5px;
padding: 5px;
background-position: 4px 5px;
background-repeat: no-repeat;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#timeline div span {
word-wrap: break-word;
}
#timeline span.author {
margin-left: 20px;
margin-right: 6px;
font-weight: bold;
}
#timeline span.timestamp {
opacity: 0.5;
display: block;
}
#timeline span.link-description,
#timeline span.quote-text {
margin: 10px 8px;
display: block;
}
#timeline span.quote-source {
margin: 6px;
display: block;
}
#timeline .link-url {
margin: 6px;
text-align: center;
display: block;
font-weight: bold;
}
#timeline .twitter {
width: 180px;
background-color: #C0DEED;
color: #002132;
background-image: url(media/img/icon/twitter_16.png); /* link for icon see above */
}
#timeline .twitter a:visited,
#timeline .twitter a:link {
color: #357EB3;
}
/* special case */
#timeline .twitter.odd {
background-color: #8E9DD2;
color: #002132;
}
/* example for more feeds */
#timeline .tumblr {
width: 380px;
background-color: #162D3F;
color: #E6ECF2;
background-image: url(media/img/icon/tumblr_16.png); /* link for icon see above */
}
#timeline .tumblr a:visited,
#timeline .tumblr a:link {
color: #7E8C98;
}
/* special case */
#timeline .tumblr.link {
width: 180px;
}
</style>
<!-- http://code.jquery.com/jquery-1.4.2.js -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- http://desandro.com/resources/jquery-masonry/ -->
<script src="js/jquery.masonry.js" type="text/javascript"></script>
<!-- http://stackoverflow.com/questions/247479/jquery-text-to-link-script/248901#248901 -->
<script src="js/jquery.linkify.js" type="text/javascript"></script>
<!-- add your feeds here -->
<script type="text/javascript">
var feeds = [
{
id: 1,
name: 'eiszfuchs @ Twitter',
clss: 'twitter',
type: 'json',
hglt: 'eiszfuchs',
link: 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=eiszfuchs&count=150&callback=?'
},
{
id: 2,
name: 'eiszfuchs @ tumblr',
clss: 'tumblr',
type: 'json',
hglt: '',
link: 'http://eiszfuchs.tumblr.com/api/read/json?filter=none&callback=?'
},
// more feeds
{
id: 3,
name: 'paklWeb @ Twitter',
clss: 'twitter odd',
type: 'json',
hglt: 'paklWeb',
link: 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=paklweb&count=150&callback=?'
},
{
id: 4,
name: 'paklWeb @ tumblr',
clss: 'tumblr odd',
type: 'json',
hglt: '',
link: 'http://paklweb.tumblr.com/api/read/json?filter=none&callback=?'
}
];
var statuses = [];
var highestkey = 0;
$('document').ready(function() {
for(var feed in feeds) {
$('<li />')
.html(feeds[feed].name)
.attr('id', 'state-'+feeds[feed].id)
.addClass('loading')
.appendTo('#status');
}
for(var feed in feeds) {
switch(feeds[feed].type) {
case 'json':
var stuff = feeds[feed];
$.getJSON(feeds[feed].link, json_callback(stuff));
break;
case 'xml':
break;
}
}
});
var json_callback = function(stuff) {
return function(json, textStatus) {
$('#status li#state-'+stuff.id)
.addClass('ready')
.removeClass('loading');
if(json.posts) {
// tumblr
for(var index in json.posts) {
var time = json.posts[index]['unix-timestamp'];
highestkey = Math.max(time, highestkey);
statuses[time] = {};
statuses[time].data = json.posts[index];
statuses[time].clss = stuff.clss;
statuses[time].name = json.tumblelog.name;
statuses[time].api = 'tumblr';
}
} else if(typeof(json) == 'object') { // bad way to check
// twitter
for(var index in json) {
var time = Date.parse(json[index].created_at)/1000;
highestkey = Math.max(time, highestkey);
statuses[time] = {};
statuses[time].data = json[index];
statuses[time].clss = stuff.clss;
statuses[time].api = 'twitter';
}
}
if($('#status li.loading').length <= 0) {
$('#status').hide();
display();
}
}
}
var new_stats = [];
var twitter = '<div class="twitter"><span class="author" /><span class="message" /><span class="timestamp" /></div>';
var tumblr = [];
tumblr['quote'] = '<div class="tumblr quote"><span class="author" /><span class="quote-text" /><span class="quote-source" /><span class="timestamp" /></div>';
tumblr['link'] = '<div class="tumblr link"><span class="author" /><a href="#" class="link-url" /><span class="link-description" /><span class="timestamp" /></div>';
function display() {
// sort the events
new_stats = [];
for(var status in statuses) {
new_stats[highestkey-status] = statuses[status];
}
var keys = [];
for(var key in new_stats) {
keys[keys.length] = parseInt(key);
}
keys.sort(function(a,b) { return a - b; });
statuses = [];
for(var key in keys) {
statuses.push(new_stats[keys[key]]);
}
// events sorted; now display them
for(var status in statuses) {
switch(statuses[status].api) {
case 'twitter':
$(twitter).clone()
.attr('class', statuses[status].clss)
.children('.author')
.html(statuses[status].data.user.screen_name)
.end()
.children('.message')
.html(statuses[status].data.text)
.end()
.children('.timestamp')
.html(statuses[status].data.created_at)
.end()
.appendTo('#timeline');
break;
case 'tumblr':
switch(statuses[status].data.type) {
case 'quote':
$(tumblr['quote']).clone()
.attr('class', statuses[status].clss)
.children('.author')
.html(statuses[status].name)
.end()
.children('.quote-text')
.html(statuses[status].data['quote-text'])
.end()
.children('.quote-source')
.html(statuses[status].data['quote-source'])
.end()
.children('.timestamp')
.html(statuses[status].data.date)
.end()
.appendTo('#timeline');
break;
case 'link':
$(tumblr['link']).clone()
.attr('class', statuses[status].clss)
.children('.author')
.html(statuses[status].name)
.end()
.children('.link-description')
.html(statuses[status].data['link-description'])
.end()
.children('.link-url')
.html(statuses[status].data['link-text'])
.attr('href', statuses[status].data['link-url'])
.end()
.children('.timestamp')
.html(statuses[status].data.date)
.end()
.appendTo('#timeline');
break;
}
break;
}
}
$('#timeline').masonry({ columnWidth: 200 });
$('#timeline').linkify();
}
</script>
</head>
<body>
<div id="timeline"></div>
<ul id="status"></ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment