What Would Drupal Do?

I previously demonstrated how to build a personal nodetracker using CCK, Views, and the Views Bonus Pack.

But it's no fun to have to open up your website, log in, go into the create content section, and manually type in all the information every time you want to keep track of a Drupal.org node.

Well, with a bit of Javascript hackery and the prepopulate module, we are freed from such dreary tasks.

This can be used for any sort of node type. I'm using the node tracker here as a generic example.

First let's take a look at the Javascript.

Window and Document shouldn't need much of an explanation here.

n is going to be our node id number.
t is going to be our title.

Let's break it down:

n=(d.location.href).replace(/\D/g, "");

For our node id number, we grab the URL of the current open web page (which will be in the form of "http://www.drupal.org/node/1234"), and using a bit of regex wizardry we null out all the non-numeric characters. We are left with n="1234".

I'm handling the title here in two steps, so that it is easier to see what is going on.

First we grab the title of the current open webpage. This will be in the form of the title of the drupal.org forum post we are trying to track followed by " | drupal.org".

Next we strip off the " | drupal.org" bit by splitting the string at the pipe character and only keeping what comes before it. Next we encode the string so that we have something we are able to pass via URL to our own Drupal site.

Here we are simply grabbing whatever text we have highlighted/selected in our browser window. We assign any selected text to variable s, and we will use this variable to automatically populate our "description" text area.

Ok. If you read the previous tutorial, you'll remember that I called my CCK type "nodetrack".

So here we are instructing the browser to pop up a new window containing a page to add content of the type nodetrack. The "http://www.whatwoulddrupaldo.org" part should of course be replaced with the URL of your own website.

Next, thanks to the prepopulate module, we can target certain elements of the form and have their values set through the URL that we pass it.

edit[title]='+t+'

This sets the title field to variable t (the title we extracted and parsed earlier)

edit[field_nodetrack___nodeid][0][value]='+n+'

This sets the form field nodetrack - nodeid (as defined through CCK) to variable n (the node id number that we pulled out of the browser URL).

Notice how we use the fully qualified CCK field name with non-alpha-numeric characters replaced by underscores. This is how CCK represents the individual fields of a CCK content type. If you are ever unsure what a particular fully qualified CCK field name is, you can easily find out by viewing the source in your create content page.

edit[field_nodetrack___description][0][value]='+s

If we have any text selected, we plug that into the nodetrack - description form field.

These last bits are simply regular ol' Javascript to set the attributes of the browser pop up window.

So let's turn this into a functioning bookmarklet.

You'll need all the Javascript code on one single line without linebreaks to paste into the location area of the bookmark you are creating. Click on the text file below, select all, and copy to the clipboard.

File: wwdd_nt_js.txt

Now right-click on your bookmark toolbar and select create new bookmark

Give your bookmarklet a name, and paste the Javascript code into the location field

Now while you are browsing drupal.org or reading the forums and you come across a node you want to track, simply click on your bookmarklet.

Here I am visiting node 260 - Installing Drupal.

A window will pop up, with the appropriate fields already filled in for you. If you selected any text in the browser window, the description area will be pre-populated for you as well. Simply review, add any appropriate tags, and click Submit.

... and the node is submitted to your Drupal site without ever leaving the page that you were on.