Saturday, July 23, 2011

Hook to register JS/CSS libraries in Drupal 7

hook_library()

Registers JavaScript/CSS libraries associated with a module.

Modules implementing this return an array of arrays. The key to each sub-array is the machine readable name of the library. Each library may contain the following items:

  • 'title': The human readable name of the library.
  • 'website': The URL of the library's web site.
  • 'version': A string specifying the version of the library; intentionally not a float because a version like "1.2.3" is not a valid float. Use PHP's version_compare() to compare different versions.
  • 'js': An array of JavaScript elements; each element's key is used as $data argument, each element's value is used as $options array for drupal_add_js(). To add library-specific (not module-specific) JavaScript settings, the key may be skipped, the value must specify 'type' => 'setting', and the actual settings must be contained in a 'data' element of the value.
  • 'css': Like 'js', an array of CSS elements passed to drupal_add_css().
  • 'dependencies': An array of libraries that are required for a library. Each element is an array listing the module and name of another library. Note that all dependencies for each dependent library will also be added when this library is added.

Registered information for a library should contain re-usable data only. Module- or implementation-specific data and integration logic should be added separately.

Return value

An array defining libraries associated with a module.

Usage

If you want to call drupal_add_library() in node add / edit pages, following approaches can be used.

Method 1:

function MODULE1_form_alter(&$form, &$form_state, $form_id) {
if (isset($form['#node_edit_form']) && $form['#node_edit_form') {
drupal_add_library('MODULE', 'LIBRARY');
}
}

This should ensure the library is loaded whenever a node form is displayed.

Method 2:

Using the ‘#attached’ attribute in hook_form_BASE_FORM_ID_alter

function MODULE1_form_node_form_alter(&$form, &$form_state) {
$form['#attached']['library'][] = array('MODULE', 'LIBRARY');
}

If you are modifying, or outputting a form, you can use the #attached attribute, which is described as "allows loading of CSS, Javascript, libraries, or custom types when the form is built".