Drupal 7 Module Development

Chapter 10
Drupal specific JavaScript
Within Drupal there are numerous helper functions. These range from systems like
theming and translation to utility functions that parse JSON.
Themeable presentation
The entire presentation inside of Drupal is customizable through the theme system,
and JavaScript is no different. Drupal provides a system for theming the presentation
generated by the JavaScript that can be overridden within JavaScript in a theme. We
can start with an example, hello_world.js, that is added by a module that looks
like this:
(function($) {
$().ready(function() {
$('#hello-world').html('Hello World!');
});
})(jQuery);
When the page is loaded, the html inside the div with the ID hello-world will be
replaced with Hello World!. What if a theme wants the wrapper to be
an h3 tag instead of an h2 tag? This is where Drupal JavaScript theming comes in.
A module should provide a theming function within the Drupal.theme.prototype
namespace. Then, the module would call Drupal.theme() to access the theme
function. This system allows a theme to provide an override function within the
Drupal.theme namespace. The following example illustrates this.
(function($) {
Drupal.theme.prototype.hello = function(text) {
return '' + text + '';
}
$().ready(function() {
$('#hello-world').html(Drupal.theme('hello', 'Hello World!'));
});
})(jQuery);
[ 301 ]