Drupal 7 содержит значительное количество модернизаций и нововведений, которые направлены на удобство программирования, расширяемость проектов и контроль над подключением и выполнением javascript-кода в Drupal.

Очередность подключения javascript в drupal 7

Функция drupal_add_js() в Drupal 7 позволяет выбрать последовательность загрузки скриптов. Помимо явного указания места в очереди существуют предопределенные константы:

• JS_LIBRARY: библиотеки, настройки (settings), jQuery plugins.
• JS_DEFAULT: JavaScript модулей.
• JS_THEME: JavaScript тем

Пример:

drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', array('type' => 'inline', 'scope' => 'footer', 'weight' => 5);

Добавление JavaScript в файл .info модуля

Если Javascript-файл должен подключаться на всех страницах, вне зависимости от темы, проще всего добавить его в .info файл модуля. Это позволяет системе управления Drupal скомпоновать итоговые Javascript файлы оптимальным образом.

Подключение внешних файлов Javascript

drupal_add_js() теперь позволяет добавлять скрипты со сторонних ресурсов.

Пример:

drupal_add_js('http://example.com/example.js', 'external');

Overriding JavaScript

hook_js_alter() дает возможность подменить скрипты ядра скриптами модуля. Так делает модуль jQuery Update, например.

function hook_js_alter(&$javascript) {
  $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update') . '/jquery.js'; // Swap out jQuery to use an updated version of the library
}

Библиотеки JavaScript

В Drupal 7 стандартизовано добавление коллекций JavaScript и CSS. Примером может служить, например, какой-либо плагин jQuery - коллекция скриптов и стилей. Если какой-либо модуль содержит такую коллекцию, настоятельно рекомендуется имплементировать hook_library() и дать возможность другим модулям добавлять имеющиеся в распоряжении модуля коллекции через #attached['library'] или drupal_add_library().

Пример: system.module определяет библиотеку Vertical Tabs, которая содержит один файл js и один файл css:

function system_library() {
  ...
  // Vertical Tabs.
  $libraries['vertical-tabs'] = array(
    'title' => 'Vertical Tabs',
    'website' => 'http://drupal.org/node/323112',
    'version' => '1.0',
    'js' => array(
      'misc/vertical-tabs.js' => array(),
    ),
    'css' => array(
      'misc/vertical-tabs.css' => array(),
    ),
  );
  ...
  return $libraries;
}

Библиотека подключается там где требуется через drupal_add_library():

function theme_vertical_tabs($variables) {
  $element = $variables['element'];
  // Add required JavaScript and Stylesheet.
  drupal_add_library('system', 'vertical-tabs');
 
  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
}

Для скриптов и стилей, подключение которых реализуется через hook_library(), подключение через drupal_add_js / drupal_add_css не требуется.

Использование jQuery

Для исключения засорения глобальной области видимости и для исключения конфликтов с другими JavaScript-фреймворками jQuery вынесен в отдельное пространство имен. Теперь весь JavaScript код который должен работать с $, должен быть вынесен в контекст. Пример:

(function ($) {
  // All your code here
})(jQuery);

Если так не делать, то появится ошибка Uncaught TypeError: Property '$' of object [object DOMWindow] is not a functionили подобная.

Behaviors

Очередные изменения в behaviors Drupal 7. Вкратце:

• attach обязателен
• detach опционален
• settings передаются в обработчики напрямую (были глобальными)

Было в Drupal 6:

 Drupal.behaviors.exampleModule = function (context) {
   $('.example', context).click(function () {
    $(this).next('ul').toggle('show');
  });
}

Стало в Drupal 7:

(function ($) {
 
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $('.example', context).click(function () {
        $(this).next('ul').toggle('show');
      });
    }
  };
 
})(jQuery);

Для лучшего понимания рекомендуется к знакомлению сравнительно простые примеры, например, mics/collapse.js