Skip to content

Instantly share code, notes, and snippets.

@DamonOehlman
Created March 4, 2011 06:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DamonOehlman/854251 to your computer and use it in GitHub Desktop.
Save DamonOehlman/854251 to your computer and use it in GitHub Desktop.
A simple Javascript snippet that allows you to obtain your GIT issues and use them to build a roadmap on a web page.

Using this is pretty simple, but you will need jQuery (and I would recommend 1.5.x so the data attributes are read correctly from the HTML):

First set up your page, for example on the Tile5 site I have something like:

<h2>0.9.5</h2>
<ul class="roadmap-items" data-label="0.9.5"></ul>

<h2>0.9.6</h2>
<ul class="roadmap-items" data-label="0.9.6"></ul>

<h2>0.9.7</h2>
<ul class="roadmap-items" data-label="0.9.7"></ul>

Next, embed the Gist in your page and then execute the roadmap for your particular project:

<script src="https://gist.github.com/raw/854251/git-roadmap.js"></script>
<script>
ROADMAP.display('sidelab', 'tile5');
</script>
ROADMAP = (function() {
var GITHUB_URL = 'https://github.com/',
ISSUES_URL = 'http://github.com/api/v2/json/issues/list/';
/* internals */
function createIssuesList(issues, projectUrl) {
var items = '';
for (var ii = 0; ii < issues.length; ii++) {
items += '<li class="' + issues[ii].labels.join(' ') + '">' +
'<a href="' + projectUrl + 'issues/' + issues[ii].number + '">' + issues[ii].title + '</a>' +
'</li>';
} // for
return items;
} // createIssuesList
function loadIssues(user, project, list) {
var label = list.data('label'),
projectUrl = GITHUB_URL + user + '/' + project + '/';
if (label) {
list.html('Retrieving items...');
$.ajax({
url: ISSUES_URL + user + '/' + project + '/label/' + label,
dataType: 'jsonp',
success: function(data) {
list.html(createIssuesList(data.issues, projectUrl));
}
});
} // if
} //
/* exports */
function display(user, project) {
$('ul.roadmap-items').each(function() {
loadIssues(user, project, $(this));
});
} // display
return {
display: display
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment