What is Drupal.settings all about in Drupal?

I’ve recently been using the Views nivo slider module for a Drupal project which needed a nice neat javascript slider. After installing the module & getting the slider in place I suddenly came up against a slight problem in that I needed to dynamically change the starting slide on the slideshow.

Now, the module itself doesn’t have the functionality to set the starting slide because this is usually covered by the sorting mechanism within views - sort the view by date & the slider will show a different start slide depending on the sort order (ascending/descending). The sorting method is usually fine, but in this case I needed to select a particular slide to start on.

After trying a couple of different approaches to try and change the start slide I went for a root around within the module code to get a feel for how the module itself determines the starting slide.

I found the code for applying the settings to the Nivo slider (most of which are configurable via the Views interface such as slide effect & transition time etc.) and the startSlide is set to 0. This kind of makes sense but what it means is that the actual slider always shows the first slide - the sorting of the view then changes the content rather than the actual position in the slider. Within the module: all of these settings are added to the page using the drupal_add_js function & whatsmore: they use the ‘settings’ parameter.

I had never used Drupal.settings before and saw the whole Drupal.behaviours javascript syntax to be quite confusing (mainly due to lack of documentation) however, after some research I managed to break open the Drupal.settings enigma.

All of the Nivo parameters are defined within the module code & placed inside the $cfg variable:

<?php

$view = $vars[‘view’];

$options = $vars[‘options’];

$vars[‘views_nivo_slider_id’] = ‘views-nivo-slider-‘. $view->name .’-‘. $view->current_display;

$cfg = array();

$params = array(

'startSlide'       => 0,


'effect'           => $options['effect'],


'slices'           => (int) $options['slices'],


'animSpeed'        => (int) $options['animSpeed'],


'pauseTime'        => (int) $options['pauseTime'],


'directionNav'     => $options['directionNav'] == 'true' ? TRUE : FALSE,


'directionNavHide' => $options['directionNavHide'] == 'true' ? TRUE : FALSE,


'controlNav'       => $options['controlNav'] != 'disabled' ? TRUE : FALSE,


'controlNavThumbs' => FALSE,


'controlNavThumbsFromRel' => FALSE,


//'controlNavThumbsSearch'  => '',


//'controlNavThumbsReplace' => '',


'keyboardNav'      => $options['keyboardNav'] == 'true' ? TRUE : FALSE,


'pauseOnHover'     => $options['pauseOnHover'] == 'true' ? TRUE : FALSE,


'manualAdvance'    => $options['manualAdvance'] == 'true' ? TRUE : FALSE,


'captionOpacity'   => (float) $options['captionOpacity'],

);

if ($options[‘controlNav’] == ‘thumbsIC’) {

$params['controlNavThumbs'] = TRUE;


$params['controlNavThumbsSearch'] = '/{$options['imagefield_preset']}/';


$params['controlNavThumbsReplace'] = '/{$options['controlNavThumbsIC']}/';

}

elseif ($options[‘controlNav’] == ‘thumbsField’) {

$params['controlNavThumbs'] = TRUE;


$params['controlNavThumbsFromRel'] = TRUE;

}

$cfg[$vars[‘views_nivo_slider_id’]] = $params;

drupal_add_js(array(‘views_nivo_slider’ => $cfg), ‘setting’);

?>

</code>

These are then placed into the Drupal.settings javascript object using:

<?php

drupal_add_js(array(‘views_nivo_slider’ => $cfg), ‘setting’);

?>

</code>

This means that in any bit of javascript within your site: you can access the Drupal.settings object containing these values & even override them too!

To access the Nivo slider settings for example, you could do the following within your javascript:

var sliderConfig = Drupal.settings.views_nivo_slider[‘id-of-your-slider-view-here’];

sliderConfig.startSlide = 1;

sliderConfig.effect = ‘random’;

</code>

So any of the parameters that were within the $params object can be accessed & changed in this way! Pretty cool huh?

To change the start slide of my slider - I created a custom module & set the weighting of it within the .install file so that my modules javascript executed last:

<?php

function MYMODULENAME_install(){

//set the weighting of the module to be heavier than the nivo slider module

db_query(‘UPDATE {system} SET weight = 2 WHERE name = ‘test’’);

}

?>

</code>

All in all the Drupal.settings object is really rather useful - I also discovered a pretty cool function: console_debug() - this will pass any javascript variables or objects to the firebug console allowing you to see exactly how they are structured.

The results of: console.debug(Drupal.settings.views_nivo_slider)

Have you ever used the Drupal.settings javascript objects or is this the first time you have ever seen them? Let me know in the comments!