Ctools modal API. Опыт применения

09.01.2012
Ctools Modal API. An Example of Using
Автор:

В унисон с новыми веяниями моды, попапы оказались не на шутку популярны среди заказчиков, при этом у последних сформировалось устойчивое убеждение, что сайт, в идеале, должен быть в попапе. Если для шестого друпала был модуль Popups API, то для семерки его нет, хотя благодаря стараниям того же Эрла Майлза у нас и появился замечательный инструмент  - Ctools - который сам по себе представляет мощный API для друпал-разработчика. В посте мы рассмотрим лишь малую часть возможностей тулзов, а именно то, что предлагает в нашем контексте modal API.

Возьмем в качестве примера добавление отзывов к новостям. Сразу оговоримся: новости и отзывы - это два различных типа контента. На новостной странице существует блок со ссылкой "Добавить отзыв".  

Итак, приступим. Для начала нужно объявить страницу в hook_menu - к ней и будет обращаться ajax - а затем написать сам callback для объявленной страницы.  И наконец, объявляем блок со ссылкой "Добавить отзыв".  При этом не забываем в  hook_form_alter() выставить дефолтное значение для поля "node reference".

Вот, собственно, и сам код:

/**
* 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);
} 

В результате мы получим всплывающую в попапе форму добавления отзывов, при этом на ее сабмите страница перегружаться не будет, хотя сам отзыв в вьюшке будет отображаться.

Примеры использования Ctools modal API можна посмотреть тут (D7).

Демо доступно для просмотра здесь.

4 votes, Rating: 4.3

Также по теме

1

В предыдущем посте я приводил пример использования Ctools modal API с помощью одной формы. В этом же я рассмотрю использование еще одного мощного инструмента,...

2

Изначально идея #states заключалась в возможности создания динамических форм без написания JavaScript кода как такового. 

3

XML-RPC – простой протокол вызова удаленных процедур. XML-RPC является прародителем одного из популярных протоколов SOAP и, не смотря на свой возраст (реализован в 1998 году), XML-RPC не канул в...

4

В статье предоставлена информация о возможностях работы с платформой Titanium Appcelerator. Мы т...

5

В данном посте будут раскрыты основы создания среды для разработки Drupal проектов на основе Debian 6 "Squeeze". Имея даную площадку, каждый сможет попрактиковаться в настройке сервисов ОС,...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime