Skip to content

Instantly share code, notes, and snippets.

@fprochazka

fprochazka/play.js

Forked from juzna/01-choose.png
Created January 24, 2012 17:28
Download ZIP

Revisions

  1. fprochazka revised this gist Jan 26, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,6 +16,7 @@
    });

    if (commits.length < 1) $('#next-commit').hide();
    return false;
    }

    // When commit play-ed
    @@ -43,7 +44,7 @@
    });

    // next commit link
    $('<a href="#toc" id="next-commit">Next commit</a>').css({
    $('<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');
  2. fprochazka revised this gist Jan 26, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    });
    $('html, body').animate({scrollTop:0}, 'slow');
    $('html, body').animate({scrollTop:0}, 'fast');
    });

    if (commits.length < 1) $('#next-commit').hide();
  3. fprochazka revised this gist Jan 26, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    });
    $.scrollTop(0);
    $('html, body').animate({scrollTop:0}, 'slow');
    });

    if (commits.length < 1) $('#next-commit').hide();
  4. fprochazka revised this gist Jan 26, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,7 @@
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    });
    $.scrollTop(0);
    });

    if (commits.length < 1) $('#next-commit').hide();
  5. fprochazka revised this gist Jan 26, 2012. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,11 +7,13 @@

    // show next commit
    var nextCommit = function () {
    $('.site .container').load(commits.shift() + ' #.site .container');
    $('span.sha').each(function () {
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    $('.site .container').load(commits.shift() + ' #.site .container', function () {
    $('span.sha').each(function () {
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    });
    });

    if (commits.length < 1) $('#next-commit').hide();
    }

  6. fprochazka revised this gist Jan 26, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    (function() {
    var commits = [], repo = "nette/nette";
    var commits = [], repo = document.location.href.match(/github\.com\/([^\/]+\/[^\/]+)\//)[1];

    // Play for all commits
    $('.commit-group .commit-links')
  7. fprochazka revised this gist Jan 26, 2012. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    (function() {
    var commits = [];
    var commits = [], repo = "nette/nette";

    // Play for all commits
    $('.commit-group .commit-links')
    @@ -8,6 +8,10 @@
    // show next commit
    var nextCommit = function () {
    $('.site .container').load(commits.shift() + ' #.site .container');
    $('span.sha').each(function () {
    var sha = $(this).html();
    $(this).replaceWith($('<a class="sha" href="/' + repo + '/commit/'+ sha + '">' + sha + '</a>'));
    });
    if (commits.length < 1) $('#next-commit').hide();
    }

    @@ -19,7 +23,7 @@
    if(!(x = href.match(/commit\/([0-9a-f]+)/))) return false; // something must have gone wrong
    var fromCommit = x[1]; //TODO: make diff from parent of this commit

    $.get('https://github.com/nette/nette/compare/' + fromCommit.toString() +'...HEAD', function(compare) {
    $.get('https://github.com/' + repo + '/compare/' + fromCommit.toString() +'...HEAD', function(compare) {
    $(compare).find('table.commits tr').each(function () {
    commits.push($(this).find('td:first a').attr('href'));
    });
  8. fprochazka revised this gist Jan 26, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions play.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,9 +6,9 @@

    1. Go to commits history
    2. Run the play.js script (e.g. in WebInspector/FireBug or as bookmarklet)
    3. Select two commits
    3. Select the commit, which you've seen as the last
    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
    5. Hit *Next commit* to see the newer one

    ## Example
    Open https://github.com/nette/nette/commits and run
  9. fprochazka revised this gist Jan 26, 2012. 2 changed files with 0 additions and 0 deletions.
    Binary file removed 01-choose.png
    View file
    Binary file not shown.
    Binary file removed 02-play.png
    View file
    Binary file not shown.
  10. fprochazka revised this gist Jan 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@
    });

    // next commit link
    $('<a href="#header" id="next-commit"> Next commit</a>').css({
    $('<a href="#toc" 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');
  11. fprochazka revised this gist Jan 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@
    });

    // next commit link
    $('<a href="#toc" id="next-commit"> Next commit</a>').css({
    $('<a href="#header" 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');
  12. fprochazka revised this gist Jan 24, 2012. 2 changed files with 40 additions and 75 deletions.
    113 changes: 39 additions & 74 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,89 +1,54 @@
    (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>"));
    var commits = [];

    // Play for all commits
    $('.commit-group .commit-links')
    .append($('<a href="#" class="browse-button github-play-select">Play</a>'));

    // Play for all commits
    $('.commit-group .commit-links').append($('<a class="browse-button github-play-select">Play</a>'));
    // show next commit
    var nextCommit = function () {
    $('.site .container').load(commits.shift() + ' #.site .container');
    if (commits.length < 1) $('#next-commit').hide();
    }

    // When commit play-ed
    $('.site .container').on('click', '.github-play-select', function(ev) {
    $('#play-spinner').css({'left' : ev.pageX + 15, 'top' : ev.pageY + 15}).show();

    var last, first, bucket, playSelected;
    var x, href = $(ev.target).closest('li.commit').find('a.gobutton')[0].href;
    if(!(x = href.match(/commit\/([0-9a-f]+)/))) return false; // something must have gone wrong
    var fromCommit = x[1]; //TODO: make diff from parent of this commit

    // Update function
    function update(url, cb) {
    $('.site .container').load(url + ' #.site .container', cb);
    }
    $.get('https://github.com/nette/nette/compare/' + fromCommit.toString() +'...HEAD', function(compare) {
    $(compare).find('table.commits tr').each(function () {
    commits.push($(this).find('td:first a').attr('href'));
    });

    var spinner = $('#play-spinner')
    .css({'position':'relative', 'left':'0', 'top':'0'});

    // 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; }
    // next commit link
    $('#next-commit').click(nextCommit).show()
    .prepend(spinner).click();
    });

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

    // 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);
    }
    // next commit link
    $('<a href="#toc" 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');

    // 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')
    // spinner
    $('<img id="play-spinner" />')
    .attr('src', GitHub.Ajax.spinner)
    .ajaxStart(function() {
    $(this).show();
    })
    .ajaxStop(function() {
    $(this).hide();
    });
    .css({'position':'absolute', 'display':'none', 'z-index':'1000'})
    .appendTo('body');

    $('#play-spinner')
    .ajaxStart(function() { $(this).show(); })
    .ajaxStop(function() { $(this).hide(); });

    })()
    2 changes: 1 addition & 1 deletion play.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,4 +13,4 @@
    ## Example
    Open https://github.com/nette/nette/commits and run

    javascript:$('head').append('<script src="https://raw.github.com/gist/1665386/play.js" />')
    javascript:$('head').append('<script src="https://raw.github.com/gist/1671348/play.js" />')
  13. @juzna juzna revised this gist Jan 24, 2012. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,11 @@ $('.github-play-select').live('click', function(ev) {

    // Play hit - show compare
    $('#play-play').live('click', function(ev) {
    var url = '/nette/nette/compare/' + $('#play-oldest')[0].value + '...' + $('#play-newest')[0].value;
    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
  14. @juzna juzna revised this gist Jan 24, 2012. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    (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</div>\n</div>"));
    $('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
    @@ -73,4 +73,13 @@ $('#play-prev').live('click', function(ev) {
    // Appear
    $('.github-play').fadeIn();

    $('#play-spinner')
    .attr('src', GitHub.Ajax.spinner)
    .ajaxStart(function() {
    $(this).show();
    })
    .ajaxStop(function() {
    $(this).hide();
    });

    })()
  15. @juzna juzna revised this gist Jan 24, 2012. 2 changed files with 0 additions and 0 deletions.
    Binary file added 01-choose.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added 02-play.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  16. @juzna juzna revised this gist Jan 24, 2012. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    (function() {
    // Play window
    $('body').append($('<div class="github-play" style="position: fixed;right: 10px;top: 50px;background: white;z-index: 10;"><h1>Play</h1>Newest commit: <input type="text" id="play-newest" /><br>Oldest commit: <input type="text" id="play-oldest" /><br><button id="play-play">Play</button><button id="play-next">Next</button>'));
    $('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</div>\n</div>"));


    // Play for all commits
    @@ -61,4 +61,16 @@ $('#play-next').live('click', function(ev) {
    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();

    })()
  17. @juzna juzna revised this gist Jan 23, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions play.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    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

    ## Install
    Add this as a Bookmarklet
    ## Example
    Open https://github.com/nette/nette/commits and run

    javascript:$('head').append('<script src="https://raw.github.com/gist/1665386/play.js" />')
  18. @juzna juzna revised this gist Jan 23, 2012. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions play.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,3 +9,8 @@
    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

    ## Install
    Add this as a Bookmarklet

    javascript:$('head').append('<script src="https://raw.github.com/gist/1665386/play.js" />')
  19. @juzna juzna created this gist Jan 23, 2012.
    64 changes: 64 additions & 0 deletions play.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    (function() {
    // Play window
    $('body').append($('<div class="github-play" style="position: fixed;right: 10px;top: 50px;background: white;z-index: 10;"><h1>Play</h1>Newest commit: <input type="text" id="play-newest" /><br>Oldest commit: <input type="text" id="play-oldest" /><br><button id="play-play">Play</button><button id="play-next">Next</button>'));


    // 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 url = '/nette/nette/compare/' + $('#play-oldest')[0].value + '...' + $('#play-newest')[0].value;
    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();
    });

    })()
    11 changes: 11 additions & 0 deletions play.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    # 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