Drupal 7 Module Development

Chapter 10
When a JavaScript library or plugin is used, it should be added with a group of
JS_LIBRARY, so that it is added to the page before the JavaScript that uses the library
or plugin. When two libraries are added to the page that are dependent on each
other, they can be added with the same group with one followed by the other in the
order they should be included or with two different weights. To illustrate this, the
following code adds mylibrary.js to the page as a library before hello_world.js.
$path = drupal_get_path('module', 'hello_world');
$options = array(
'group' => JS_LIBRARY,
);
drupal_add_js($path . '/mylibrary.js', $options);
drupal_add_js($path . '/hello_world.js');
In our example you will notice that we can leave out the default settings. In this case
'file' is default so it does not need to be added to either of the calls.
For JavaScript included in ever page there is an option of every_page that should be
set to true. When this is set to true for a script it impacts preprocessing (more on that
later) and the order the script is included. Within a group files flagged as being on
every page are included before files that are not included in every page.
JavaScript within a group and within the sub-group of being or not being included in
every page are ordered by weight. The default weight is 0. Files with a lower weight
are listed before files with a higher weight.
Libraries that rely on drupal.js need to be aware of the weight set for
drupal.js. The weight set for jquery.js is - 20, and the weight for
drupal.js is – 1.
The scope that a file can be added to is either the 'header' or 'footer'. The
default value is 'header' and places the JavaScript at the head of the page. The most
common places to include the JavaScript are in the header or footer. Custom scopes
for JavaScript to be placed can be defined in a theme or module. In cases where
custom scopes have been defined, the scopes provided in the theme or module can
be used in addition to 'header' and 'footer'.
Defer is an option for the script tag in HTML, supported by Internet Explorer. It tells
the browser that the script can defer execution until after the page has been rendered.
This is useful for scripts that do not need to execute or be available when the page is
rendered. In Drupal this is set to TRUE or FALSE.
[ 291 ]