Skip to content

Instantly share code, notes, and snippets.

@bscofield
Forked from rumblex/rumblesnaps.js
Created August 22, 2009 11:48
Show Gist options
  • Save bscofield/172760 to your computer and use it in GitHub Desktop.
Save bscofield/172760 to your computer and use it in GitHub Desktop.
/* GitHub Commits, version 0.0.1
* (c) 2009 Jeff Rafter
*
* Based on GitHub Badge by Dr Nic Williams (but with the good code removed)
*
* You need: jquery.js, md5.js
*
* See http://pajhome.org.uk/crypt/md5 for more info.
*
*--------------------------------------------------------------------------*/
var RumbleSnaps = {
Version: '0.0.1'
};
RumbleSnaps = new function() {
this.init = function(id, limit, meta) {
this.id = id;
this.limit = limit;
this.meta = meta;
var url = "http://github.com/railsrumble/snapshots/raw/master/recent.js";
this.request(url, this.load)
}
this.load = function(data) {
$(RumbleSnaps.id).html(RumbleSnaps.content());
}
this.request = function(url, callback) {
// inserting via DOM fails in Safari 2.0, so brute force approach
if ("jQuery" in window) {
jQuery.getScript(url,callback);
} else {
onLoadStr = (typeof callback == "undefined") ? "" : 'onload="' + callback + '()"';
document.write('<script ' + onLoadStr + 'type="text/javascript" src="'+url+'"></script>');
}
}
this.escapeContent = function(content) {
return $('<div/>').text(content).html();
}
this.randOrd = function() {
return (Math.round(Math.random())-0.5);
}
this.content = function() {
snaps = RumbleSnaps.snaps;
if (RumbleSnaps.limit) snaps.sort(RumbleSnaps.randOrd);
limit = RumbleSnaps.limit || snaps.length;
html = "" +
"<div class='snaps'>" +
" <ul class='snaps'>";
for (var i=0; i < limit; i++) {
snap = RumbleSnaps.snaps[i];
data = snap.match(/^\d+\/(.*)\-(\d{4}\-\d{2}\-\d{2}\-\d{2}\d{2}?)\.png$/)
team = data[1];
time = data[2];
even = (i % 2 == 0);
html += "<li class=\"team-snap "+ (even ? 'left' : 'right') + "\">";
html += "<a href='http://" + team + ".r09.railsrumble.com' target='_blank' alt='" + team + "'><img class='snap' title='" + team + "' src=' http://github.com/railsrumble/snapshots/raw/master/" + snap + "' width=200 height=200 border=0></a>";
if (RumbleSnaps.meta) html += "<div class='meta'><div class='team'><a href='http://" + team + ".r09.railsrumble.com' target='_blank' alt='" + team + "'>" + team + "</a></div><div class='date'>" + time + "</div></div>";
html += "</li>";
}
html += "" +
" </ul>" +
"</div>";
return html;
}
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Rails Rumble 2009 :: Welcome to the '09 Rumble</title>
<link href="http://r09.railsrumble.com/stylesheets/commpete/default.css?1250902258" media="screen" rel="stylesheet" type="text/css" />
<link href="http://r09.railsrumble.com/stylesheets/humanmsg.css?1250902258" media="screen" rel="stylesheet" type="text/css" />
<script src="http://r09.railsrumble.com/javascripts/jquery/jquery-1.3.2.min.js?1250902258" type="text/javascript"></script>
<script src="http://r09.railsrumble.com/javascripts/jquery/fancyzoom.min.js?1250902258" type="text/javascript"></script>
<script src="http://r09.railsrumble.com/javascripts/jquery/countdown.min.js?1250902258" type="text/javascript"></script>
<script src="http://r09.railsrumble.com/javascripts/jquery/jquery.easing.1.3.js?1250902258" type="text/javascript"></script>
<script src="http://r09.railsrumble.com/javascripts/jquery/humanmsg.js?1250902258" type="text/javascript"></script>
<script src="http://r09.railsrumble.com/javascripts/commpete/general.js?1250902258" type="text/javascript"></script>
<style type="text/css">
ul.snaps {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.snaps li.team-snap {
background: transparent url(robot-left.png) no-repeat left bottom;
display: block;
float: left;
height: 289px;
padding: 0;
position: relative;
text-align: right;
width: 281px;
}
ul.snaps li.team-snap img {
right: 25px;
top: 10px;
position: absolute;
}
ul.snaps li.team-snap div.meta {
font-size: .9em;
position: absolute;
bottom: 15px;
right: 25px;
}
</style>
</head>
<body class='brick'>
<script type="text/javascript" src="./rumblesnaps.js"></script>
<script type="text/javascript">
$(document).ready(function(){
RumbleSnaps.init("#snaps", 4, true);
});
</script>
<div id="snaps">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment