1 js_example.module js_example_js_weights()

Weights demonstration.

Here we demonstrate attaching a number of scripts to the render array. These scripts generate content according to 'weight' and color.

On the Backdrop side, we do three main things:

  • Create a container DIV, with an ID all the scripts can recognize.
  • Attach some scripts which generate color-coded content. We use the 'weight' attribute to set the order in which the scripts are included.
  • Add the color->weight array to the settings variable in each *color*.js file. This is where Backdrop passes data out to JavaScript.

Each of the color scripts (red.js, blue.js, etc) uses jQuery to find our DIV, and then add some content to it. The order in which the color scripts execute will end up being the order of the content.

The 'weight' form attribute determines the order in which a script is output to the page. To see this in action:

  • Uncheck the 'Aggregate JavaScript files' setting at admin/config/development/performance.
  • Load js_example/weights. Examine the page source. You will see that the color JavaScript scripts have been added in the <head> element in weight order.

To test further, change a weight in the $weights array below, then save this file and reload js_example/weights. Examine the new source to see the reordering.

Return value

string: The HTML markup.

Related topics

Example: JavaScript This example demonstrates how to use the Backdrop's built-in JavaScript.

File

modules/examples/js_example/js_example.module, line 76
Hook implementations for the JavaScript Example module.

Code

function js_example_js_weights() {
  // Add some CSS to show which line is output by which script.
  backdrop_add_css(backdrop_get_path('module', 'js_example') . '/css/jsweights.css');
  // Create an array of items with random-ish weight values.
  $weights = array(
    'red' => 100,
    'blue' => 23,
    'green' => 3,
    'brown' => 45,
    'black' => 5,
    'purple' => 60,
  );
  // Attach the weights array to our JavaScript settings. This allows the color
  // scripts to discover their weight values, by accessing
  // settings.jsWeights.*color*. The color scripts only use this information for
  // display to the user.
  backdrop_add_js(array('jsWeights' => $weights), array('type' => 'setting'));
  // Add our individual scripts. We add them in an arbitrary order, but the
  // 'weight' attribute will cause Backdrop to render (and thus load and
  // execute) them in the weighted order.
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/red.js', array('weight' => $weights['red']));
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/blue.js', array('weight' => $weights['blue']));
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/green.js', array('weight' => $weights['green']));
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/brown.js', array('weight' => $weights['brown']));
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/black.js', array('weight' => $weights['black']));
  backdrop_add_js(backdrop_get_path('module', 'js_example') . '/js/purple.js', array('weight' => $weights['purple']));
  // Main container DIV. We give it a unique ID so that the JavaScript can
  // find it using jQuery.
  $output = '<div id="js-weights"></div>';
  return $output;
}