Skip to content

Instantly share code, notes, and snippets.

@juzna
Created January 23, 2012 20:30
Show Gist options
  • Save juzna/1665386 to your computer and use it in GitHub Desktop.
Save juzna/1665386 to your computer and use it in GitHub Desktop.
GitHub Play
(function($, undefined) {
var commits = [], pos = -1, repo = document.location.href.match(/github\.com\/([^\/]+\/[^\/]+)\//)[1];
$('table.commits tr').each(function () {
commits.push($(this).find('td.commit-meta a').attr('href'));
});
// show next commit
var nextCommit = function (step) {
if (typeof step == 'undefined') step = 1;
pos += step;
$('.site .container').load(commits[pos] + ' .site .container', function () {
$('span.sha').each(function () {
var sha = $(this).html();
$(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
});
$('html, body').animate({scrollTop:0}, 'fast');
});
if (commits.length < 1) $('#next-commit').hide();
return false;
}
// next commit link
$('<a href="#" id="next-commit">Next commit</a>').css({
'right':'20px', 'bottom':'20px', 'position':'fixed', // position
'font-size':'20px', 'font-weight':'bold', 'display':'none', 'z-index':'1000' // style
}).appendTo('body');
// spinner
$('<img id="play-spinner" />')
.attr('src', GitHub.Ajax.spinner)
.css({'position':'absolute', 'display':'none', 'z-index':'1000'})
.appendTo('body');
$('#play-spinner')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });
$('#next-commit').click(nextCommit).show();
// keyboard shortcuts: j / k
$(document).on('keypress', function(ev) {
switch (ev.keyCode) {
case 106: nextCommit(); break; // j
case 107: nextCommit(-1); break; // k
}
});
// show first commit
nextCommit();
})(jQuery);
(function() {
// Play window
$('body').append($("<div style=\"display: none; z-index: 10; padding: 20px; position: fixed; right: 10px; top: 50px; background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */\" class=\"github-play\">\n<h1>GitHub Play</h1>\n<div style=\"width: 300px;\">\n <div style=\"float: left;\">\n <label>Newest:</label><br>\n <input type=\"text\" id=\"play-newest\" size=\"10\">\n </div>\n <div style=\"float: left; margin-top: 20px; padding: 0 10px;\"> » </div>\n <div style=\"float: left;\">\n <label>Oldest:</label><br>\n <input type=\"text\" id=\"play-oldest\" size=\"10\">\n </div>\n <div style=\"float: left; margin-top: 20px; padding-left: 5px;\"> <button id=\"play-play\">Play</button></div>\n</div>\n<div class=\"controls\" style=\"clear: left; padding: 10px 5px 0px 0px; \">\n <button id=\"play-prev\">« Prev</button>\n <button id=\"play-next\">Next »</button>\n <img id=\"play-spinner\" style=\"display: none;\"></div>\n</div>"));
// Play for all commits
$('.commit-group .commit-links').append($('<a class="browse-button github-play-select">Play</a>'));
var last, first, bucket, playSelected;
// Update function
function update(url, cb) {
$('.site .container').load(url + ' #.site .container', cb);
}
// When commit play-ed
$('.github-play-select').live('click', function(ev) {
var x, href = $(ev.target).parent().find('a.gobutton')[0].href;
if(!(x = href.match(/commit\/([0-9a-f]+)/))) return false; // something must have gone wrong
var commit = x[1];
if(!last) last = commit; // 1st click -> last
else if(!first) first = commit; // 2nd click -> first
else last = first = undefined; // 3rd click -> clear
$('#play-newest')[0].value = last || '';
$('#play-oldest')[0].value = first || '';
});
// Play hit - show compare
$('#play-play').live('click', function(ev) {
var oldest = $('#play-oldest')[0].value;
var newest = $('#play-newest')[0].value;
if(!oldest || !newest) { alert('Choose two commits first'); return false; }
var url = '/nette/nette/compare/' + oldest + '...' + newest;
update(url, function() {
bucket = $('#commits_bucket');
$('.site .container').before(bucket); // Move
$('.site .container').html(); // clear it for now
playSelected = 0;
showPlay();
});
});
// Selected commit - table row of summary
function getSelectedRow() {
return $('#commits_bucket table.commits')[0].tBodies[0].rows[playSelected];
}
// Show current commit
function showPlay() {
getSelectedRow().children[0].style.backgroundColor = 'yellow';
update($('#commits_bucket td.commit code a')[playSelected].href);
}
// Go to next commit
$('#play-next').live('click', function(ev) {
getSelectedRow().children[0].style.backgroundColor = '';
playSelected++;
// TODO: check if it's not the last one
showPlay();
});
// Go to previous commit
$('#play-prev').live('click', function(ev) {
getSelectedRow().children[0].style.backgroundColor = '';
playSelected--;
// TODO: check if it's not the first one
showPlay();
});
// Appear
$('.github-play').fadeIn();
$('#play-spinner')
.attr('src', GitHub.Ajax.spinner)
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
})()

GitHub Play

RePlay a set of commits as they happened

Overview

GitHub Play is a scriptlet, which allows you to replay commits as they happened. Usage:

  1. Go to commits history
  2. Run the play.js script (e.g. in WebInspector/FireBug or as bookmarklet)
  3. Select two commits
  4. Hit Play on the right - it'll start Play mode and show you history between those two selected commits
  5. Hit Next after you've read the commit, you'll see the next one

Example

Open https://github.com/nette/nette/commits and run

javascript:$('head').append('<script src="https://raw.github.com/gist/1665386/play.js" />')
@Vrtak-CZ
Copy link

kde je točítko že se něco načítá? :-(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment