github-repos.js
[Update] See it in action here on the right side of the page.
After attempting to add Dr. Nic’s GitHubBadge javascript pluggin into my new forum, erlanguid.com, I decided to create my own version that will work with multiple possible elements in the page (as is necessary in a forum). It should be noted that I am by no means a javascript expert and I used Dr. Nic’s pluggin as reference for some of my code. Credit where credit is due: Thanks Dr. Nic!
Via some jQuery 1.2.6 (required) goodness and a little bit of elbow grease, I seem to have it working alright. You can view the single source file here, but I still need to write some unit tests for it.
The main purpose for me was making this info available anywhere in the page. In this case, I wanted to put the information under the user information in a post, but the next chunk of code I’m going to write will be making use of a custom bbcode tag for my forum, where it will insert just the div and the javascript will take care of it when the page loads. Basically all you have to do is get the div in there an make sure your css is to your taste.
But without further adieu, I’ll quickly walk you through the code and how to make use of it should you so desire!
^ I defined some constants so the classes and html template are easy to edit for your given situation.
^ I’ve defined two methods and one object array, as you can see, for my GitHubRepos object within the javascript.
^ GetRepos is the first method called by document ready jQuery method. It loops through all the divs that match the GITHUB_PROJECTS_CLASS constant, which is .github-projects by default. So in your page you need at least one of these to see anything! For each of those divs it checks to see if an id is defined. This id must be a string that matches the username of the repos’ owner, that you wish to display in said div.
^ I realize it seems a little but clunky to set the id value as the user name, but in practice it reduces the amount of javascript, so stick with me!
^ If the id has been set (not undefined), it will attempt to add the object to the GitHubRepos.displayObjects array element corresponding to the username, which is itself an array. What we end up with is the ability to access all the div elements in the DOM with the username that correspond to that user! Again that array of arrays may seem clunky but this little bit of frontloading will save us pain down the road.
^ Here we insert a new script resource into the pages head element so that it will call github and give us back a call to GitHubRepos.DisplayRepos with some JSON data as a parameter. Note that only one call is made per user since in the loop above we simple added the extra DOM objects to the displayObjects[username] array. The resulting script element that’s loaded into the page looks like this:
When this loads into the DOM it will retrieve code from GitHub with JSON data and execute GitHubRepos.DisplayRepos with that data. It looks like this (thanks GitHub!):
And that will of course call our next method:
As you can see the above is relatively painless, because we’ve already queried the DOM once and stored the results in the displayObjects array we don’t have to query it again we can simply act. By looping through all of the DOM objects that correspond to the user login that was passed in JSON data we can fill each of the with links and divs and other fun things from the REPO_TEMPLATE.
Make sure to look at the classes from the template and example page html so you can make the display look how you want. Here’s how I have it on my site:
And thats about it except for a format(str) helper function that let me insert the data into the templates in a clean fashion. You can view and fork the source code from repo at GitHub. If you see something wrong please post in the comments and let me know so that I can make it better. And give it a try!