Integrating Javascript with Tripal/Drupal

Let's assume that you want to use in a Drupal page, my_drupal/page, an external library, ext_lib, that has two Javascript files, ext_lib_1.js and ext_lib_2.js, and a CSS file, ext_lib.css. In addition, you want to create your own Javascript library, my_lib_a.js and my_lib_b.js, and CSS, my_style.css. The machine name for the your module is demo.

Integrating an external Javascript library

1. Implement hook_libraries_info() in .module file.

/**
* Implements hook_libraries_info().
*
* For defining external libraries.
*/
function demo_libraries_info() {
    // Expected to be extracted into 'sites/all/libraries/ext_lib'.
    $libraries = array();
    $libraries['ext_lib'] = array(
      'name' => 'Name of external library',
      'vendor url' => 'http://external_library.url',
      'download url' => 'https://external_library.url/download',
      'version' => '1.0',
      'version arguments' => array(
        // file where version can be found
        'file' => 'ext_lib_1.js',
        // Version: v1.0
        'pattern' => '/Version: v([0-9\.]+)/', // regular expresion used to find version
        'lines' => 5, // where in the file is the version listed
                      // in this case within the first 5 lies
      ),
      'files' => array(
        'js' => array(
          // https://external_library.url/download/ext_lib_1.js
          'ext_lib_1.js',
          'ext_lib_2.js',
        ),
        'css' => array(
          // https://external_library.url/download/ext_lib.css
          'ext_lib.css',
        ),
      ),
    );
    return $libraries;
}

2. Create directory in sites/all/libraries and download external .js and .css files in it.

$ cd sites/all/libraries
$ mkdir ext_lib
$ cd ext_lib
$ wget https://external_library.url/download/ext_lib_1.js
$ wget https://external_library.url/download/ext_lib_2.js
$ wget https://external_library.url/download/ext_lib.css

3. Implement hook_requirements() in .install file. When this module is enabled using the Drupal UI, this code checks if the ext_lib files are in sites/all/libraries/ext_lib.

/**
* Implements hook_requirements().
*/
function demo_requirements($phase) {
    $requirements = array();
    // Ensure translations don't break at install time
    $t = get_t();
   
    // Check to see if the ext_lib library is available for Demo
  if ($phase == 'runtime') {
    $library = libraries_detect('ext_lib');

    if ($library['installed']) {
      $version = explode('.', $library['version']);

      if ($version[0] == DEMO_COMPATIBLE_MAJOR_VERSION) {
        $requirements['demo'] = array(
          'value' => $library['version'],
          'severity' => REQUIREMENT_OK,
        );
      }
      else {
        $requirements['demo'] = array(
          'value' => $library['version'],
          'description' => $t('Incompatible version detected. The ext_lib library version for demo must be from the %version.x branch.', array('%version' => DEMO_COMPATIBLE_MAJOR_VERSION)),
          'severity' => REQUIREMENT_WARNING,
        );
      }
    }
    else {
      $requirements['demo'] = array(
        'value' => $t('ext_lib library for demo not found.'),
        'description' => $t('The ext_lib library for demo could not be detected. Please consult the README.md for installation instructions.'),
        'severity' => REQUIREMENT_ERROR,
      );
    }

    $requirements['demo']['title'] = $t('demo');
  }

  return $requirements;
}

4. Load external library in your Drupal page, in .module file.

define("DEMO_COMPATIBLE_MAJOR_VERSION", ‘1’);

/**
* Implements hook_menu().
*/
function demo_menu() {
  $items = array();

    $items[‘my_drupal/page’] = array(
      // …
      'page callback' => 'demo_page',
    );

    return $items;
}

function demo_page() {
  $content = array();
  // …
   
  libraries_load(‘ext_lib’);

  return content();
}

Integrating Javascript file(s) provided with your module

Make sure that you practice defensive development. Make sure when you are selecting your elements with js that you do so using very selective CSS rules. Also make sure your CSS ids/classes are prefixed with demo (machine name). This minimizes the likelihood that different Drupal themes will adversely affect your application and also ensures that your application doesn’t change the style of Drupal elements outside your application.

For sharing reasons, it’s also a good idea to include your styles in external stylesheets rather then using inline styles. This makes it easier for anyone else using your module to alter the theme to meet their needs.
 

1. Create Javascript library (one or more files).

(function ($) {
  Drupal.behaviors.demo = {
    attach: function (context, settings) {
      // demo code
    }
  };
}(jQuery));

function my_function() {
  // do something here
}

2. Load library in your Drupal page, in .module file.

function demo_page() {
  $content = array();
  // …
  
  drupal_add_js(drupal_get_path('module','demo') . '/my_lib_a.js');
  drupal_add_js(drupal_get_path('module','demo') . '/my_lib_b.js');
  drupal_add_css(drupal_get_path('module','demo') . ‘/my_style.css’);

  return content();
}