0

I am using hook_library to define two libraries:

  • mymodule_views_plugin_style_library
  • mymodule_views_plugin_row_library

The "style" library gets loaded in my custom style template: drupal_add_library('mymodule', 'mymodule_views_plugin_style_library')

The "row" library gets loaded in my custom row template: drupal_add_library('mymodule', 'mymodule_views_plugin_row_library')

Each library contains 3 javascript files, which must be added in the specified order.

The style library contains these 3 files:

  1. mymodule_views_lib.js
  2. mymodule_views_style1.js
  3. mymodule_views_style2.js

The row library contains these 3 files.

  1. mymodule_views_lib.js
  2. mymodule_views_row1.js
  3. mymodule_views_row2.js

Note that both the "style" and "row" library have a file in common (mymodule_views_lib.js) and that this file needs to load first.

Here is my hook_library code:

function mymodule_library() {
  $path = drupal_get_path('module', 'mymodule');
  $libraries = array(
    'my_views_plugin_style_library' => array(
      'js' => array(
        $path . '/mymodule_views_lib.js' => array('group' => JS_LIBRARY), 
        $path . '/mymodule_views_style1.js' => array('group' => JS_LIBRARY), 
        $path . '/mymodule_views_style2.js' => array('group' => JS_LIBRARY),
      )
    ),
    'my_views_plugin_row_library' => array(
      'js' => array(
        $path . '/mymodule_views_lib.js' => array('group' => JS_LIBRARY), 
        $path . '/mymodule_views_row1.js' => array('group' => JS_LIBRARY), 
        $path . '/mymodule_views_row2.js' => array('group' => JS_LIBRARY),
      )
    ),
  );
  return $libraries;
}

My problem: The file mymodule_views_lib.js does not load before mymodule_views_row1.js. It does not load until the "style" library (which happens to load after the "row" library) is loaded.

Question #1: I see here that there is a solution to my problem: I can create a separate library for the common js file, and then add this library as a dependency. I am wondering, though, whether this is the only solution. Is it possible to specify the relative load order when two different libraries share a common file?

Question #2: Assuming my libraries do not share any js files, is it safe to assume that the library files will be loaded in the same order in which they are listed, in hook_library? Or must I explicitly specify a weight?

UPDATE

I added a weight to each js file, as suggested by tenken below, and that solved the problem. The javascript files now load in the desired order:

   function mymodule_library() {
      $path = drupal_get_path('module', 'mymodule');
      $libraries = array(
        'my_views_plugin_style_library' => array(
          'js' => array(
            $path . '/mymodule_views_lib.js' => array('group' => JS_LIBRARY, 'weight'=>1), 
            $path . '/mymodule_views_style1.js' => array('group' => JS_LIBRARY, 'weight'=>2), 
            $path . '/mymodule_views_style2.js' => array('group' => JS_LIBRARY, 'weight'=>3),
          )
        ),
        'my_views_plugin_row_library' => array(
          'js' => array(
            $path . '/mymodule_views_lib.js' => array('group' => JS_LIBRARY, 'weight'=>4), 
            $path . '/mymodule_views_row1.js' => array('group' => JS_LIBRARY, 'weight'=>5), 
            $path . '/mymodule_views_row2.js' => array('group' => JS_LIBRARY, 'weight'=>6),
          )
        ),
      );
      return $libraries;
    }
1

For question #1 --

$options in hook_library() supports all the options in drupal_add_js.

$options in drupal_add_js supports a weight value to determine ordering:

From hook_library:

'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.

From drupal_add_js:

weight: A number defining the order in which the JavaScript is added to the page relative to other JavaScript with the same 'scope', 'group', and 'every_page' value. In some cases, the order in which the JavaScript is presented on the page is very important. jQuery, for example, must be added to the page before any jQuery code is run, so jquery.js uses the JS_LIBRARY group and a weight of -20, jquery.once.js (a library drupal.js depends on) uses the JS_LIBRARY group and a weight of -19, drupal.js uses the JS_LIBRARY group and a weight of -1, other libraries use the JS_LIBRARY group and a weight of 0 or higher, and all other scripts use one of the other group constants. The exact ordering of JavaScript is as follows:

For question #2 -- the safest thing todo is to always specify the inclusion order; eg weight.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.