Versão mais recente do jQuery em Drupal

Por experiência própria, uma das maiores limitações do CMS Drupal a nível de interacção e UI prende-se com a utilização de uma versão antiga do jQuery. Relativamente ao Drupal 6, a versão de origem é a 1.2.6 e a alternativa mais usada consiste na utilização do módulo jQuery_Update, que permite avançar para a versão 1.3.2.

À data deste post, a versão actual do jQuery é a 1.6.4 que contém vários e importantes desenvolvimentos na biblioteca jQuery. Estar dependente de uma versão anterior limita, em muito, o potencial do jQuery fazendo cair por terra o ideal "write less, do more".

Posto isto, decidi deixar de usar o módulo jQuery_Update e passei a incluir nos meus projectos Drupal as versões mais recentes quer do jQuery, quer do jQuery UI. Para tal, basta editar o ficheiro template.php do vosso tema e coloquem/actualizem a função theme_preprocess() (onde theme é o nome do vosso tema) conforme indico em baixo:

function THEME_preprocess(&$vars, $hook) {
  //replace jquery for google js api in template pages
  if($hook == 'page') {
    if( ! in_array('page-admin', $vars['template_files'])
      AND ! in_array('page-batch', $vars['template_files']))
    {
      $vars['scripts'] = <<<JS
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
          var jQueryU = jQuery;
          jQuery.noConflict(true);
        </script>
JS;

      // Get an array of all JavaScripts that have been added
      $javascript = drupal_add_js(NULL, NULL, 'header');

      // Rerender the block of JavaScripts
      $vars['scripts'] .= drupal_get_js(NULL, $javascript);
    }
  }
}

O que este código faz consiste em modificar os scripts do header do site por forma a, antes de carregar qualquer script, incluir as librarias jQuery e jQuery UI pretendidas. No exemplo, estou a descarregar as bibliotecas directamente dos repositórios da Google. De seguida, faço uso da função noConflict() do jQuery para, após guardar em jQueryU o actual jQuery carregado (1.6.3), libertar o objecto jQuery de quaisquer conflitos de nomenclatura. Por último adiciono ao container de scripts do Drupal, os originais scripts do header.

A partir deste ponto, sempre que precisar de usar o jQuery mais recente, posso faze-lo de duas maneiras distintas.

Exemplo 1 - Chamada directa a jQueryU

//index() foi introduzido na versão 1.4 do jQuery.
var index = jQueryU("#menu li.active").index();

Exemplo 2 - Utilização de $ como referencia a jQueryU

(function($) {
  $(function() {
    // código a usar $ como referencia para jQueryU (1.6.3)
  });
})(jQueryU);
// código a usar $ como referencia para jQuery (1.2.6)

jQuery Array/DOM Shuffle

Deixo-vos aqui um compacto plug-in de jQuery para shuffle de arrays ou de elementos DOM.

(function($){
 $.fn.shuffle = function() {
  return this.each(function(){
   var items = $(this).children();
   return (items.length)
    ? $(this).html($.shuffle(items))
    : this;
  });
 }


 $.shuffle = function(arr) {
  for(
   var j, x, i = arr.length; i;
   j = parseInt(Math.random() * i),
   x = arr[--i], arr[i] = arr[j], arr[j] = x
  );
  return arr;
 }
})(jQuery);

Exemplo 1 - shuffle de uma lista não ordenada:

$('ul').shuffle();

Exemplo 2 - shuffle de um array:

var arr = [1,2,3,4,5,6];
arr = $.shuffle(arr);