Github: delicious-user-top

So if you stopped by last week you saw that I hacked together the github-repos javascript plugin for my new forum, erlanguid, to pull a users github repo information and display it in their posts. It was so easy that I got kind of plugin happy and decided to do a few more for my forum. The latest pulls the users top links for a given tag or tags from Delicious.com. Here’s how to use it!

If you read the github-repos post this script works in the same way, but since we need more information than just the user name, in this case the tag(s), and because the delicious feed doesn’t return the username with its json data like github does, things got more interesting.

The first big change was adding the tag(s) to the id of the div the links would be added to. In the page, the html where the links will be inserted looks like this:

You’ll notice that the id has the users delicious id, and also the tag were looking to search for. In this case we want johndoe’s links tagged with erlang. It’s important to note that you can add tags with a plus. So if I wanted to find only those links that had been tagged as both erlang and mnesia it would look like this:

So once thats in the page, and you’ve included delicious-user-top.js in the head of your page, you’ll get the links for the user and tags specified.

The second big change was forced by delicious only passing an array of links back with no association to the user which we queried for. Understandable, but it made it much more difficult to target the correct divs on the page for a given user and tags.

To maintain the asynchronous nature of the loading and also make sure that the script could add the new links to multiple divs in the page with the same username and tags, I simply added a new method into the DOM that would call the DeliciousTop.DisplayLinks method with the right id and the callback data. After that was defined, I added the script element that made the remote resource call to delicious with the user specific method added before as the callback. When all was said and done, for our example the DOM would have looked something like this:

The only reason for this is to pass the “johndoe|erlang” string to the function so it can insert the data from the callback into the right divs. It looks like crazyness but is necessary for multiple places on the page.

As a result everything works just fine for multiple divs for the same user. Because the function name doesn’t include tags, the same user can’t have multiple divs with different tags in the same page. This could be changed by making different functions with each of the tags added to the function name, but its not necessary for my purposes.

Post in the comments if you have any questions, or send me a message on github.

UPDATE: requires jQuery 1.2.6

[UPDATE]: You an see github-repos working over there on the right in my sidebar! It took me about 2 minutes to set up in my blog. I’m happy with it’s flexibility so far.

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!

So I finally got myself into a project I couldn’t get out of and I hacked together an event tracking system I dubbed, happenings.

As it stands now its a rails project by itself, but I would like to create a gem or plugin so that the models can easily be used by others. Some of the highlights are:

• Google maps (ym4r)
• Google geocode
• Desktop calendar client events (.vcs)
• Events, Addresses, Users, and Roles as seperate Models

That will all stay there if I ever get around to making a gem out of it but for the completed project, I also worked with:

• jQuery (effects)
• Prototype (calendar select)
• restful_authentication

It has some nice animations and I’m probably going to submit a patch to ym4r to add the :function option to the map.to_html method. Basically it let me assign a function call to the map service call so I could call it only when it was unhidden by some jquery niceness:

All and all very fun things. Next step since no one ever reads this blog is to unleash my master plan of an Mnesia webservice backend and datamapper adapter. MWAAHAHA!

I’ll post the code for happenings soon.