Drupal Alters and Overrides: Drupal.theme.prototype

Recently I ran into a situation where I needed to alter the alt text of a link while using the Node relationships module. On mouse hover, it popped up the words "Search and reference..." while I wanted it to say something else, let's say, just "Search". Looking around the module's files, I found that it was embedded in a JavaScript file, node_form.js:

// Install the "Search and reference" button.
    if (fieldOptions.searchUrl) {
      var $searchButton = $(Drupal.theme('nodeRelationshipsReferenceButton', 'search', Drupal.t('Search and reference...')));
      $buttonsWrapper.append($searchButton);
...

You may notice the Drupal.theme namespace above. What Drupal.theme is doing is passing a few parameters; the first, nodeRelationshipsReferenceButton, is the name of our actual theme function:

/**
 * Theme the specified button for an autocomplete widget.
 */
Drupal.theme.prototype.nodeRelationshipsReferenceButton = function(type, title) {
  return '<a href="javascript:void(0)" class="noderelationships-nodereference-'+ type +'-button" title="'+ title +'"></a>';
};

The other parameters being passed are type and title.

Drupal.theme.prototype was introduced in Drupal 6, meant for any modules producing HTML content within their JavaScript, so that this content could be overridden properly.

In the Node relationships module, each dynamically generated button has it's alt tags created in this way. So in order to change things, I would simply add this to my custom JavaScript file:

Drupal.theme.nodeRelationshipsReferenceButton = function(type, title) {
  if (type == 'search') {
    title = 'Search';
  }
  return '<a href="javascript:void(0)" class="noderelationships-nodereference-'+ type +'-button" title="'+ title +'"></a>';
};

Note that the only real different between these functions is the removal of the prototype namespace.

You can read more about Drupal's JavaScript coding standards at http://drupal.org/node/172169