Создание ноды через кастомную форму с использованием модального окна CTools

Здравствуйте, товарищи! Наконец-то закончил с очередным проектом и теперь есть немного времени, чтобы поделиться опытом и рассказать о приемах, которые способствуют улучшению юзабилити сайта. Начну, пожалуй, с создания нод через собственные формы: как выводить и обрабатывать подобные формы в модальных окнах CTools, в блоках — и все это даже с использованием AJAX.

Сразу хочу сказать, что листинги кода будут представлены из реального проекта, поэтому не удивляйтесь непонятным константам и функциям с префиксом «GM_». По архитектуре: есть нода объявления ("advertisement"), на основании данных которой необходимо создать ноду сделки ("deal"). Поэтому представьте, что есть страница объявления, на которой выводится кнопка «Предложить сделку». По клику на эту кнопку инициализируется модальное окно CTools с формой создания ноды сделки. Задача ясна? Тогда поехали!

Я думаю, каждый разработчик ставил модуль CTools, однако далеко не все используют его API. Согласитесь, что в большинстве случаев этот модуль Drupal устанавливается потому, что этого требует Views. Сегодня же мы постараемся узнать об этом модуле чуточку больше, а именно о том, как работать с модальными окнами.

Создание CTools кнопки с AJAX

Для начала необходимо создать ссылку (или кнопку), по клику на которую будет начинаться вся магия. В моем случае эту ссылку я выводил через кастомный Views field, но об этом уже расскажу в рамках другой статьи. Сейчас достаточно знать следующее:

// Подключение необходимых библиотек.
ctools_include('ajax');
ctools_include('modal');
 
// Подключение JS для модальных окон.
ctools_modal_add_js();
 
// Создание пользовательского стиля, который будет использоваться для темизации модального окна.
$sample_style = array(
  'gm-offer-deal-ctools' => array(
    'modalSize' => array(
      'type' => 'fixed',
      'width' => 500,
      'height' => 'auto',
      'addWidth' => 0,
      'addHeight' => 0,
    ),
    'modalOptions' => array(
      'opacity' => .5,
      'background-color' => '#000',
    ),
    'closeText' => '',
    'animation' => 'fadeIn',
    'animationSpeed' => 500,
  ),
);
 
drupal_add_js($sample_style, 'setting');
 
$link = ctools_modal_text_button(t('Offer a deal'), 'gm_ajax/gm_deal/nojs/offer/' . $node->nid,
  t('Offer a deal'), 'ctools-modal-gm-offer-deal-ctools');

Как вы уже успели заметить, данная ссылка стучится по адресу 'gm_ajax/gm_deal/nojs/offer/<NODE_ID>'. Что ж, самое время зарегистрировать данный путь в системе Drupal:

/**
 * Implements hook_menu().
 */
function gm_deal_menu() {
  $items['gm_ajax/gm_deal/%ctools_js/offer/%node'] = array(
    'title' => 'Offer a Deal',
    'page callback' => 'gm_deal_ctools_ajax_offer_deal',
    'page arguments' => array(2, 4),
    'access callback' => TRUE,
    'file' => 'gm_deal.pages.inc',
    'type' => MENU_CALLBACK,
  );
 
  return $items;
}

Создание ноды через собственную форму

Прежде чем перейти к описанию функции gm_deal_ctools_ajax_offer_deal() я, пожалуй, расскажу почему я тут не использовал drupal_get_form() с ID формы для создания ноды сделки. Это самая распространенная ошибка зеленых разработчиков, когда необходимо создать кастомную форму для создания ноды.

Есть два нюанса. Первый заключается в том, что необходимо подключить файл 'node.pages.inc', при чем подключить через $form_state, иначе рискуете тем, что данный файл отвалится при ошибках на валидации. Это равносильно тому, что пытаться подключить .js-файл к форме через drupal_add_js(), когда для этого есть $form[‘#attached’][‘js’] массив. В общем, для правильного подключения файла надо использовать следующую функцию:

form_load_include($form_state, 'inc', 'node', 'node.pages');

Второй нюанс – это то, что для успешного создания ноды у формы в $form_state должен находиться объект этой самой ноды, который может быть передан через дополнительные аргументы в drupal_get_form(). Заглянув в эту функцию, вы поймете, что она есть не что иное, как надстройка над drupal_build_form(), которую я, собственно, и намереваюсь использовать.

Основным преимуществом использования drupal_build_form() является то, что вы можете формировать и передавать $form_state массив. Для начала листинг вспомогательной функции, которая формирует этот самый $form_state:

/**
 * Helper function.
 *
 * Вся магия использования вышеописанных колбэков находится здесь.
 * Инициализируется форма добавления сделки включая данные выбранного объявления.
 *
 * @param $adv_node
 *  Нода объявления, на основе данных которого будет создана сделка.
 * @return array
 */
function _gm_deal_custom_form_state_prepare($adv_node) {
  global $user;
  global $language;
 
  $form_state = array();
 
  // Тот самый нюанс #1.
  // Подключаем файл, который необходим для успешного создания ноды.
  form_load_include($form_state, 'inc', 'node', 'node.pages');
 
  // Инициализируем объект ноды сделки.
  $node = new StdClass();
  $node->uid = $user->uid;
  $node->name = $user->name;
  $node->type = GM_DEAL_NODE_TYPE;
  $node->language = $language->language;
  $node->status = NODE_PUBLISHED;
  // Вы также можете сразу предопределить некоторые значения полей ноды.
  $node->{GM_DEAL_FIELD_STATE}[LANGUAGE_NONE][0] = array('value' => GM_DEAL_ACTIONS_STATE_AUTHOR_OFFER);
  $node->{GM_DEAL_FIELD_ADVERTISEMENT}[LANGUAGE_NONE][0] = array('node_vid' => $adv_node->vid);
 
  // Тот самый нюанс #2.
  // Это станадртный прием. См. drupal_get_form.
  $form_state['build_info']['args'] = array($node);
 
  // Мы можем добавить любые доп. данные, которые будут 
  // использоваться в дальнейшем. Например, при альтере формы.
  $form_state['build_info']['advertisement'] = $adv_node;
  $form_state['build_info']['gm_deal_processing'] = TRUE;
 
  return $form_state;
}

Ну, а теперь самое время раскрыть весь секрет menu callback’a:

/**
 * Menu callback.
 *
 * @param $js
 * @param $adv_node
 *  Нода объявления.
 */
function gm_deal_ctools_ajax_offer_deal($js, $adv_node) {
  // Подключаем библиотеки.
  ctools_include('modal');
  ctools_include('ajax');
 
  // Формируем $form_state через вышеописанную функцию.
  $form_state = _gm_deal_custom_form_state_prepare($adv_node);
 
  $form_state += array(
    'title' => t('Offer a Deal'),
    'ajax' => TRUE,
  );
 
  // Обрабатываем форму. Своего рода надстройка CTools над drupal_build_form().
  $output = ctools_modal_form_wrapper(GM_DEAL_NODE_TYPE . '_node_form', $form_state);
 
  // Если нода была успешно создана, выводим сообщение и доп. текст в том же модальном окне.
  if (!empty($form_state['executed'])) {
    $nid = $form_state['node']->nid;
    $link = ctools_ajax_text_button(t('link'), 'node/' . $nid, t('Go to page'), 'goto', 'link');
    $message = t('You can look it by the !link.', array('!link' => $link));
 
    $output = array();
    $output[] = ctools_modal_command_display(t('Deal created'), '<div class="modal-message">' . $message . '</div>');
    $output[] = ajax_command_prepend('#modal-content', theme('status_messages'));
  }
 
  print ajax_render($output);
  exit;
}

AJAX-команды для работы с модальными окнами

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

Также вы можете изменить массив в AJAX-команд и добиться другого результата – например, закрытия окна и перезагрузки страницы при успешном выполнении формы:

$output[] = ctools_modal_command_dismiss();
$output[] = ctools_ajax_command_reload();

Вот такие возможности таит в себе модуль CTools. Согласитесь, что данная реализация выглядит «модно, современно, молодежно» с использованием AJAX’a, что должно сказаться на юзабилити вашего сайта. Еще добавлю, что модальные окна чудесно темизируются Bootstrap фреймворком, о котором писал в предыдущих материалах.

И чуть было не забыл: в упаковке CTools есть модуль 'ctools_ajax_sample', который мне в свое время и помог разобраться с API для создания вот таких вещей. Так что дерзайте!