Ctools Modal API. An Example of Using

Popups have come so much into fashion, of late, and thus appealed to customers' sentiment that the public are starting growing more and more convinced: an ideal site has to be in popups. Whereas the module Popups API for Drupal 6 have so far hit the market, it's by no means the case with Drupal 7. Yet, it is much to the credit of Earl Milesthat we have presently acquired a very handy instrument, Ctools — the module that has turned to be a powerful API for Drupal developers. In this post, only a small portion of the Tools capabilities will be discussed, namely, the modal API.

Let's have a look at one isolated instance, and that is, adding reviews to current news. In the meantime, just bear in mind the following: 1/ news and reviews are considered as two separate types of content: 2/ there is a block with a “Add review” link available on the news page.

First, a hook_menu page needs to be announced to which AJAX will, eventually, be addressing. Secondly, a callback for the declared page should be written out and the block that  contains the “Add review” link should be added afterwards. That's it. You also keep in mind that the default value "node reference" for the field in hook_form_alter () is to be set (one can't skip it).

The code itself looks like this:

/**
* Implements hook_menu().
*/
function examples_menu() {
 $items['add/%ctools_js/review'] = array(
   'page callback'    => 'examples_ctools_modal_review',
   'page arguments'   => array(1),
   'access arguments' => array('create review content'),
 );
 return $items;
}


/**
* Implements hook_block_info().
*/
function examples_block_info(){
 $blocks['add_review'] = array(
   'info' => t('Add review'),
 );
 return $blocks;
}


/**
* Implements hook_block_view().
*/
function examples_block_view($delta = '') {
 switch ($delta) {
   case 'add_review':
     ctools_include('ajax');
     ctools_include('modal');
     ctools_modal_add_js();
     $news_id = arg(1);
     if (is_numeric($news_id)) {
       // Link class must be "ctools-use-modal"    
       $block['content'] = l(t('Add a review'), "add/nojs/review/{$news_id}", array('html' => TRUE, 'attributes' => array('class' => "ctools-use-modal")));
     }
     break;
 }
 return $block;
}


/**
* Implements hook_form_alter().
*/
function examples_form_alter(&$form, &$form_state, $form_id) {
 switch ($form_id) {
   case 'review_node_form':
     $news_id = arg(3);
     if (is_numeric(arg(3))) {
       $lang = field_language('node', $form['#node'], 'field_news');
       // Declaration the default value for field on the comment creating form.
       $form['field_news'][$lang][0]['nid']['#default_value'] = $news_id;
     }
 }
}


/**
* Page callback for modal review creation.
*/
function examples_ctools_modal_review($js = FALSE) {
 // loading libraries ctools'a 
 ctools_include('node.pages', 'node', '');
 ctools_include('modal');
 ctools_include('ajax');
 global $user;
 $type = 'review';
 $node = (object) array(
   'uid' => $user->uid,  
   'name' => (isset($user->name) ? $user->name : ''),  
   'type' => $type,  
   'language' => LANGUAGE_NONE);
  // Loading node form with disabled scripts.
 if (!$js) {
   return drupal_get_form($type . '_node_form', $node);
 }
 // Create array $form_state.
 $form_state = array(
   'title' => t('Add Review'),
   'ajax'  => TRUE,
 );
 $form_state['build_info']['args'] = array($node);
 $output = ctools_modal_form_wrapper($type . '_node_form', $form_state);
 // Actions after form submit. 
 if (!empty($form_state['executed'])) {
   $output = array();
   // Close pop up.
   $output[] = ctools_modal_command_dismiss();
   $news_id = arg(3);
   // Insert  updated  view into a  page.
   if (is_numeric(arg(3))) {
     $output[] = ajax_command_html('.latest-reviews-full-style ', views_embed_view('reviews', 'block', arg(3)));
   }
 }
 print ajax_render($output);
} 

At the end of the day, we have got a form for adding reviews in the popup; and mind that the whole thing spares the inconvenience of reloading the page 'on the submit'; whereas the newly created review post gets displayed in the view.

Examples of the Ctools modal API usage can be found here ( D7).