GitHub Play

01-choose.png

02-play.png

play-pull-request.js

(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);

play.js

(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();
    });

})()

play.md

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" />')

Ještě by to mohlo ukládat nějakou sušenku... :) A jako plugin do browseru ještě lepší :) Takový Chrome nativně podporuje userscripty.

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