bscofield (owner)

Revisions

gist: 172760 Download_button fork
public
Public Clone URL: git://gist.github.com/172760.git
Embed All Files: show embed
robot-left.png #
rumblesnaps.js #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* 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;
  }
};
test.html #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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>