Agregació de fitxers CSS/JS en els nostres mòduls i temes de Drupal 7

Com afegir arxius CSS/JS al nostre propi mòdul o tema Drupal?

• Declarar els fitxers a l'arxiu ".info" del tema/mòdul: té l'inconvenient que aquests fitxers s'agregaran a totes les pàgines de Drupal. Per tant, només hem d'utilitzar aquest mètode si realment és necessari que els fitxers estiguin presents a totes les pàgines de la web.
• Funcions drupal_add_js/drupal_add_css: Permeten agregar fitxers i també dóna l'opció d'agregar codi "inline". Hem d'anar en compte amb aquesta opció perquè depèn de a on fem les crides podríem estar agregant els fitxers a totes les pàgines de Drupal (com en el cas anterior).
• Propietat #attached: Permet agregar fitxers a formularis i blocs de manera que només s'agreguen per el formulari o bloc on l'estem declarant. És recomenable fer servir aquest mètode sempre que sigui possible.
• Mòdul Libraries: Es declaren les llibraries amb el hook_library i després s'agreguen amb la funció drupal_add_library o libraries_load. Aquest mètode és ideal per agregar llibreries de tercers donat que permetria a altres mòduls fer servir la mateixa llibreria de forma fàcil.

Tot seguit, mostrem un mòdul que agrega fitxers CSS/JS a un bloc i a un formulari amb la propietat #attached:

<?php

/**
 * Implements hook_block_info().
 */
function drauta_block_info() {
  $blocks = array();
  $blocks['drauta_block'] = array(
    'info' => t('Drauta block'),
  );
  $blocks['drauta_form'] = array(
    'info' => t('Drauta form'),
  );
  return $blocks;
}

/**
 * Implements hook_block_view().
 */
function drauta_block_view($delta = '') {
  $block = array();

  switch ($delta) {
    case 'drauta_block':
      $block['content']['#markup'] = '<h1 class="drauta">Drauta Team</h1>';
      $block['content']['#attached'] = drauta_get_attached();
      break;

    case 'drauta_form':
      $block['content'] = drupal_get_form('drauta_contact_form');
      break;
  }

  return $block;
}

/**
 * Drauta contact form.
 */
function drauta_contact_form($form, &$form_state) {

  $form = array();
  $form['bcn_cis_title'] = array(
    '#markup' => '<h1 class="drauta">' . t('Example form') . '</h1>',
  );
  $form['#attached'] = drauta_get_attached();

  return $form;
}

/**
 * Attach JS and CSS files.
 */
function drauta_get_attached() {
  $result = array();
  $cur_path = drupal_get_path('module', 'drauta');

  $result['js']['drauta'] = $cur_path . '/includes/drauta.js';
  $result['css']['drauta'] = $cur_path . '/includes/drauta.css';

  return $result;
}

Exemple d'ús de la propietat #attached amb un bloc i un formulari.

Finalment, volem recordar que en els fitxers JS hem d'utilitzar les "behaviors" de Drupal en comptes de la funció .ready() de jQuery sempre que ens sigui possible. D'aquesta manera, ens assegurem que el nostre codi s'executa sempre que el Drupal fa alguna petició AJAX (paginació de vistes, etc). Veiem un exemple:

/**
 * @file
 * drauta.js javascript file.
 * El nom de la behaviour és "drauta" perquè es el nom del mòdul
 */

(function ($) {
  Drupal.behaviors.drauta = {
    attach: function (context, settings) {
      console.log('javascript included');      
    }
  };
})(jQuery);

Exemple de behaviour pel mòdul "drauta".