Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group. - презентация

1

2 Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group

3 #ahah в Drupal6 // В конструкторе формы $form['country'] = array( '#type' => 'select', '#title' => t('Country'), '#options' => get_countries(), '#ahah' => array( 'path' => 'ahah/get-sities-list', 'wrapper' => 'sities', ), );

4 Недостатки #ahah в D6 Необходимость реализовывать menu callback Необходимость работы с кешем формы Сложность изменения Drupal.settings Сложность добавления js/css-файлов Изменение одной области страницы в результате ahah-запроса

5 #ajax в D7 Элементу изменяющему '#ajax' => array( 'callback' => 'sities_ajax_callback', 'wrapper' => 'sities', ), Элементу изменяемому '#prefix' => ' ', '#suffix' => ' ' Callback-функция function sities_ajax_callback($form, $form_state) { return $form['sity']; }

6 ajax-сабмит формы #prefix/#suffix для всей формы Callback-функция возвращает всю форму graceful degradation

7 Мультистеповые формы Хранение текущего шага и данных предыдущих шагов в $form_state['storage'] В конструкторе формы switch/case для вывода нужного шага В submit-е формы: сохранение данных текущего шага $step++ $form_state['rebuild'] = TRUE

8 Ajax-комманды function test_ajax_callback($form, $form_state) { $commands = array( ajax_command_replace('#wrapper', drupal_render($form)), ajax_command_invoke('.selected', 'hide'), ); return array( '#type' => 'ajax', '#commands' => $commands); }

9 Ajax submit for any form (asaf) Позволяет сохранять любую форму через ajax Вызывает хуки hook_asaf_form_ajax_commands_alter и hook_asaf_form_FORM_ID_ajax_commands_alter для измениния списка ajax-комманд. Добавляет комманды: обновить страницу ( asaf_ajax_command_reload ) перейти по урлу ( asaf_ajax_command_redirect )

10 Popup Для «временного» или «быстрого» контента, которому не нужен постоянный урл fancybox вместо overlay 2 режима: inline iframe

11 inline popup Для контента уже присутсвующего на странице Реализуется переносом ветки DOM-объектов внутрь popup-а, а потом назад, для обеспечения работоспособности навешенных js-обработчиков

12 iframe popup Iframe для изоляции js/css родителя и popup-а Get-параметр для определения режима popup Отключение рендеринга регионов $list = &drupal_static('list_themes', array()); global $theme; unset($list[$theme]->info['regions'][$region]);

13 Интеграция popup-ов и форм Внутри popup-ов все формы сабмитятся ajax-ом (модуль asaf) Дополнительные ajax-комманды: обновить popup/родителя перейти по урлу в popup-е/родителе закрыть popup Управление коммандами из аттрибутов ссылки (destination и битовая маска режима) Contact us

14