HEIDI Labs

John K. VanDyk confirmed that Pro Drupal Development 2nd edition will be published early this summer. I don’t know about you but in Montreal it sure does not look like summer. We’re still in the dead of winter, and it’s one snowstorm after another.Anywho, I got busy last night and, on a Drupal 6 install, I worked through chapter sweet seventeen of the Pro Drupal Development 1st edition book. The title of the chapter is "Using jQuery".(Hey, here is an idea for a thread: name the one computer book you’ve actually read from cover to cover in your life. My answer: Pro Drupal Development, and probably just a few other books.)You’ll find attached to this post a working digg-like module, so different from the Drupal-5-compliant one provided with the book, that I don’t believe I’ll receive any email about me committing some copyright law infringement.So here are the eight changes you should bring to the module plus1 to make it work in Drupal 6.But before we delve into this, here is something you should know. If you’ve worked through the example at the beginning of the chapter where we add jQuery code to a node, and you have not seen the first paragraph fade in as it did in Drupal 5, quiet your mind. Do not be alarmed. (I was quite flabbergasted when it happened to me.) You’ll have to first hide the paragraph. When you think about it... the fact that this worked as is with an earlier version of the jQuery library is... well, a bug.In Drupal 5, after adding the following to a node, you would see the first paragraph fade in:<?phpdrupal_add_js('$(document).ready(function(){ $("#one").fadeIn("slow"); });', 'inline' );?><p id="one">Paragraph one</p><p>Paragraph two</p><p>Paragraph three</p>In Drupal 6, you have to hide the paragraph first, then fade it in.<?phpdrupal_add_js('$(document).ready(function(){ $("#one").hide().fadeIn("slow"); });', 'inline' );?><p id="one">Paragraph one</p><p>Paragraph two</p><p>Paragraph three</p>Or you may harness the full power of jQuery by selecting the first paragraph of the node’s content, and make that paragraph fade in for the duration of 5 seconds, ie: 5000 ms.<?phpdrupal_add_js('$(document).ready(function(){ $(".content p:first").hide().fadeIn(5000); });', 'inline' );?><p>Paragraph one</p><p>Paragraph two</p><p>Paragraph three</p>On with the show.1. Open and edit your plus1.install file. Table creation for modules has been abstracted into a Schema API in Drupal 6.In Drupal 5, we created our table {plus_1} this way:<?php// $Id$/*** Implementation of hook_install().*/function plus1_install() {  switch ($GLOBALS['db_type']) {    case 'mysql':    case 'mysqli':      db_query("CREATE TABLE {plus1_vote} (        uid int NOT NULL default '0',        nid int NOT NULL default '0',        vote tinyint NOT NULL default '0',        created int NOT NULL default '0',        PRIMARY KEY (uid,nid),        KEY score (vote),        KEY nid (nid),        KEY uid (uid)      ) /*!40100 DEFAULT CHARACTER SET UTF8 */");      break;    case 'pgsql':      db_query("CREATE TABLE {plus1_vote} (        uid int NOT NULL default '0',        nid int NOT NULL default '0',        vote tinyint NOT NULL default '0',        created int NOT NULL default '0',        PRIMARY KEY (uid,nid)      );");      db_query("CREATE INDEX {plus1_vote}_score_idx ON {plus1_vote} (vote);");      db_query("CREATE INDEX {plus1_vote}_nid_idx ON {plus1_vote} (nid);");      db_query("CREATE INDEX {plus1_vote}_uid_idx ON {plus1_vote} (uid);");      break;  }}?>In Drupal 6, we do this instead:<?php// $Id$/*** Implementation of hook_install().*/function plus1_install() {  // Create tables.  drupal_install_schema('plus1');}/*** Implementation of hook_schema().*/function plus1_schema() {  $schema['plus1_vote'] = array(    'description' => t('The table used by the Plus1 module.'),    'fields' => array(      'uid' => array(        'description' => t('The primary identifier for the voter.'),        'type' => 'int',        'unsigned' => TRUE,        'not null' => TRUE),      'nid' => array(        'description' => t('The node that gets a vote.'),        'type' => 'int',        'unsigned' => TRUE,        'not null' => TRUE),      'vote' => array(        'description' => t('The vote.'),        'type' => 'int',        'size' => 'tiny',        'unsigned' => TRUE,        'not null' => TRUE),      'created' => array(        'description' => t('The timestamp of when the voter voted.'),        'type' => 'int',        'unsigned' => TRUE,        'not null' => TRUE)),    'primary key' => array(      'uid',      'nid'),    'indexes' => array(      'score' => array('vote')),  );  return $schema;}/*** Implementation of hook_uninstall().*/function plus1_uninstall() {  // Remove tables.  drupal_uninstall_schema('plus1');}?>Note that we’re creating a composite key as primary key. The voter and the node he votes for will always come in a unique combination. In other words, you can give a thumbs up only once for a any given content.2. We then modify our plus1.info file.In Drupal 5:name = Plus 1description = "A +1 voting widget for nodes. "version = "$Name$"In Drupal 6:; $Id$name = Plus 1description = "A +1 voting widget for nodes."core = 6.x('Version' is deprecated in Drupal 6.)3. We change our use of the menu hook in plus1.module.In Drupal 5 we had:/*** Implementation of hook_menu().*/function plus1_menu($may_cache) { $items = array(); if ($may_cache) { $items[] = array( 'path' => 'plus1/vote', 'callback' => 'plus1_vote', 'type' => MENU_CALLBACK, 'access' => user_access('rate content'), ); } return $items;}In Drupal 6, we do the following:/*** Implementation of hook_menu().*/function plus1_menu() { $items['plus1/vote/%'] = array( 'title' => 'Vote', 'page callback' => 'plus1_vote', // 'plus1' is the 0th arg. in the path, 'vote' is the 1st, // and the node id is the 2nd... // hence, we pass array(2) to 'page arguments' 'page arguments' => array(2), // where my wildcard is 'access arguments' => array('rate content'), // always use MENU_CALLBACK for ajax requests 'type' => MENU_CALLBACK, ); return $items;}?>Note that this symbol: % is a wildcard for the node hii-dee.4. We modify the callback function plus1_vote($nid).We have a new and improved way to write JSON in Drupal 6. We use the new function drupal_json($var = NULL). It sets the header for the JavaScript output to 'Content-Type: text/javascript; charset=utf-8'.In Drupal 5:/* This print statement will return results * to the jQuery's request. */print drupal_to_js(array( 'score' => $score, 'voted' => t('You voted'), ));In Drupal 6:/* This print statement will return results * to the jQuery's request. */print drupal_json(array( 'score' => $score, 'voted' => t('You voted'), ));5. We register our theme function.In Drupal 6, all modules must register all their theme functions via the new hook hook_theme().Therefore, we add the following function to our plus1.module file./*** Implementation of hook_theme().*/function plus1_theme() { return array( 'plus1_widget' => array( 'arguments' => array('nid', 'score', 'is_author', 'voted'), ), );}6. We modify our theme function theme_plus1_widget($nid, $score, $is_author, $voted) to account for the change in signature of the function l() in Drupal 6.In Drupal 5:<?php$output .= l(t('Vote'), "plus1/vote/$nid", array('class' => 'plus1-link'));?>?>In Drupal 6:<?php$output .= l(t('Vote'), "plus1/vote/$nid", array('attributes' => array('class' => 'plus1-link')));?>7. We thoroughly clean up our act when it comes to our jQuery.In the source code of our Drupal 5-compliant version, the file jquery.plus1.js contained this:// $Id$// Global killswitch: only run if we are in a supported browser.if (Drupal.jsEnabled) { $(document).ready(function(){ $('a.plus1-link').click(function(){ var voteSaved = function (data) { var result = Drupal.parseJson(data); $('div.score').fadeIn('slow').html(result['score']); $('div.vote').html(result['voted']); } $.get(this.href, null, voteSaved); return false; }); });}In Drupal 6, we will NOT use the method Drupal.parseJson — that function is deprecated in Drupal 6. We’ll use the jQuery.getJSON method instead.// $Id$// Global killswitch: only run if we are in a supported browser.if (Drupal.jsEnabled) { $(function(){ $('a.plus1-link').click(function(){ $.getJSON(this.href, function(json){ $('div.score').hide().fadeIn('slow').html(json.score); $('div.vote').html(json.voted); }); return false; }); });}8. Then we’ll go and read about this wonderful jQuery method jQuery.getJSON. For your convenience…This module has been committed to Drupal CVS. The link to the project page is http://drupal.org/project/plus1.Heshan Wanigasooriya