Изменение модального окна CTools

mbaev 12.05.2016, 07:52

Модуль CTools, был написан программистом по имени Earl Miles. Он так же написал такие модули Views, Panels и другие. CTools предоставляет большое количество вспомогательных функций, которые упрощают жизнь программисту. На текущий момент у модуля CTools нет официальной страницы с документацией.

Это описание одной из фич модуля CTools, а именно изменение модального окна.

Простой вариант

Темизируем любое окно, вызванное ссылкой/кнопкой.

  1. /**
  2.  * Implements hook_init()
  3.  */
  4. function example_init() {
  5.   // Стиль для модального окна.
  6.   drupal_add_js(array(
  7.     'example-modal' => array(
  8.       'modalSize' => array(
  9.         'type' => 'fixed',
  10.         'width' => 850,
  11.         'height' => 550,
  12.       ),
  13.       // Добавляем анимацию.
  14.       'animation' => 'fadeIn',
  15.     ),
  16.   ), 'setting');
  17. }
  18. // Остается добавить класс "ctools-example-modal" в ссылку,
  19. // кнопку или другой элемент, который вызывает модальное окно.

Вариант сложнее

Так можно создавать страницы, вызывая форму создания страницы в модальном окне.

  1. /**
  2.  * Implements hook_menu().
  3.  */
  4. function example_menu(){
  5.   $items['ajax-create-page'] = array(
  6.     'title'             => 'Create page',
  7.     'type'              => MENU_CALLBACK,
  8.     'access callback'   => true,
  9.     'page callback'     => 'example_ajax_callback',
  10.     'delivery callback' => 'ajax_deliver',
  11.   );
  12.   return $items;
  13. }
  14.  
  15. /**
  16.  * Ajax callback for create page using modal window.
  17.  *
  18.  * @return array
  19.  * @throws \Exception
  20.  */
  21. function example_ajax_callback() {
  22.   // Подключение CTools файлов для работы с AJAX и модальными окнами.
  23.   ctools_include('ajax');
  24.   ctools_include('modal');
  25.   // Подключает CTools js файлы.
  26.   ctools_modal_add_js();
  27.   // Создаем свои настройки, которые будут помещены
  28.   // в javascript для темизации модального окна.
  29.   $example_style = array(
  30.     'CToolsModal' => array(
  31.       'modalSize' => array(
  32.         // display: fixed;
  33.         'type' => 'fixed',
  34.         'width' => 1000,
  35.         'height' => 500,
  36.         'addWidth' => 10,
  37.         'addHeight' => 10,
  38.         'contentRight' => 0,
  39.         'contentBottom' => 0,
  40.       ),
  41.       'modalOptions' => array(
  42.         'opacity' => .7,
  43.         'background-color' => '#fff',
  44.       ),
  45.       // Анимация для заднего фона.
  46.       'animation' => 'fadeIn',
  47.       // При необходимости можно объявить свою функцию
  48.       // темизации модального окна в JS.
  49.       // Drupal.theme.example_modal();
  50.       # 'modalTheme' => 'example_modal',
  51.      // Изменение AJAX-throbber'а. Использую эту функцию предполагается,
  52.       // что изображения находятся в папке "images" модуля.
  53.       // ctools_image_path($image, $module = 'ctools', $dir = 'images')
  54.       #'throbber'   => theme('image', array(
  55.      #  'path'  => ctools_image_path('throbber.gif', 'example'),
  56.      #  'alt'   => t('Loading...'),
  57.      #  'title' => t('Loading'),
  58.      #)),
  59.      // Изменение значка закрытия модального окна.
  60.       #'closeImage' => theme('image', array(
  61.      #  'path'  => ctools_image_path('close.png', 'example'),
  62.      #  'alt'   => t('Close window'),
  63.      #  'title' => t('Close window'),
  64.      #)),
  65.    ),
  66.   );
  67.  
  68.   // Добавляем настройки стиля модального окна.
  69.   drupal_add_js($example_style, 'setting');
  70.   // Добавляем заголовок модального окна в форму.
  71.   $form_state = array(
  72.     'title' => t('Create page'),
  73.   );
  74.  
  75.   // Подключаем файл, где находится функция формы создания ноды.
  76.   module_load_include('inc', 'node','node.pages');
  77.   return array(
  78.     '#type' => 'ajax',
  79.     '#commands' => ctools_modal_form_render($form_state, node_add('page')),
  80.   );
  81. }

Остается создать где-нибудь ссылку

  1. <a href="/ajax-create-page" class="use-ajax">Создать страницу</a>

при этом нужно иметь тип материала page. Также для полноценной работы не хватает обработчиков закрытия модального окна после нажатия на кнопку Save, но это уже другая тема.
create page