Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Removing superfluous page loads, or a few more words about popups and ajax

2,259 views

Published on

  • Be the first to comment

  • Be the first to like this

Removing superfluous page loads, or a few more words about popups and ajax

  1. 1. Боремся с «лишними» переходами на сайте, или еще пара слов о попапах и аяксах Талдыкин Егор Ardas Group
  2. 2. #ahah в Drupal6 <ul><li>// В конструкторе формы </li></ul><ul><li>$form['country'] = array( </li></ul><ul><li>'#type' => 'select', </li></ul><ul><li>'#title' => t('Country'), </li></ul><ul><li>'#options' => get_countries(), </li></ul><ul><li>'#ahah' => array( </li></ul><ul><li>'path' => 'ahah/get-sities-list', </li></ul><ul><li>'wrapper' => 'sities', </li></ul><ul><li>), </li></ul><ul><li>); </li></ul>
  3. 3. Недос татки #ahah в D6 <ul><li>Нео бходимость реализовы вать menu callback </li></ul><ul><li>Необходимость работы с кешем формы </li></ul><ul><li>Сложность изменения Drupal.settings </li></ul><ul><li>Сложность добавления js/css-файлов </li></ul><ul><li>Изменение одной области страницы в результате ahah-запроса </li></ul>
  4. 4. #ajax в D7 <ul><li>Элементу изменяющему </li></ul><ul><li>'#ajax' => array( </li></ul><ul><li>'callback' => 'sities_ajax_callback', </li></ul><ul><li>'wrapper' => 'sities', </li></ul><ul><li>), </li></ul><ul><li>Элементу изменяемому </li></ul><ul><li>'#prefix' => '<div id=&quot;sities&quot;>', </li></ul><ul><li>'#suffix' => '</div>' </li></ul><ul><li>Callback-функция </li></ul><ul><li>function sities_ajax_callback($form, $form_state) { </li></ul><ul><li>return $form['sity']; </li></ul><ul><li>} </li></ul>
  5. 5. ajax-сабмит формы <ul><li>#prefix/#suffix для всей формы </li></ul><ul><li>Callback-функция возвращает всю форму </li></ul><ul><li>graceful degradation </li></ul>
  6. 6. Мультистеповые формы <ul><li>Хранение текущего шага и данных предыдущих шагов в $form_state['storage'] </li></ul><ul><li>В конструкторе формы switch/case для вывода нужного шага </li></ul><ul><li>В submit-е формы: </li></ul><ul><ul><li>сохранение данных текущего шага </li></ul></ul><ul><ul><li>$step++ </li></ul></ul><ul><ul><li>$form_state['rebuild'] = TRUE </li></ul></ul>
  7. 7. Ajax-комманды <ul><li>function test_ajax_callback($form, $form_state) { </li></ul><ul><li>$commands = array( </li></ul><ul><li>ajax_command_replace('#wrapper', drupal_render($form)), </li></ul><ul><li>ajax_command_invoke('.selected', 'hide'), </li></ul><ul><li>); </li></ul><ul><li>return array( </li></ul><ul><li>'#type' => 'ajax', </li></ul><ul><li>'#commands' => $commands); </li></ul><ul><li>} </li></ul>
  8. 8. Ajax submit for any form (asaf) <ul><li>Позволяет сохранять любую форму через ajax </li></ul><ul><li>Вызывает хуки hook_asaf_form_ajax_commands_alter и hook_asaf_form_FORM_ID_ajax_commands_alter для измениния списка ajax-комманд. </li></ul><ul><li>Добавляет комманды: </li></ul><ul><ul><li>обновить страницу ( asaf_ajax_command_reload ) </li></ul></ul><ul><ul><li>перейти по урлу ( asaf_ajax_command_redirect ) </li></ul></ul>
  9. 9. Popup <ul><li>Для «временного» или «быстрого» контента, которому не нужен постоянный урл </li></ul><ul><li>fancybox вместо overlay </li></ul><ul><li>2 режима: </li></ul><ul><ul><li>inline </li></ul></ul><ul><ul><li>iframe </li></ul></ul>
  10. 10. inline popup <ul><li>Для контента уже присутсвующего на странице </li></ul><ul><li>Реализуется переносом ветки DOM-объектов внутрь popup-а, а потом назад, для обеспечения работоспособности навешенных js-обработчиков </li></ul>
  11. 11. iframe popup <ul><li>Iframe для изоляции js/css родителя и popup-а </li></ul><ul><li>Get-параметр для определения режима popup </li></ul><ul><li>Отключение рендеринга регионов </li></ul><ul><li>$list = &drupal_static('list_themes', array()); </li></ul><ul><li>global $theme; </li></ul><ul><li>unset($list[$theme]->info['regions'][$region]); </li></ul>
  12. 12. Интеграция popup-ов и форм <ul><li>Внутри popup-ов все формы сабмитятся ajax-ом (модуль asaf) </li></ul><ul><li>Дополнительные ajax-комманды: </li></ul><ul><ul><li>обновить popup/родителя </li></ul></ul><ul><ul><li>перейти по урлу в popup-е/родителе </li></ul></ul><ul><ul><li>закрыть popup </li></ul></ul><ul><li>Управление коммандами из аттрибутов ссылки (destination и битовая маска режима) </li></ul><ul><li><a href=&quot;/feedback&quot; class=&quot;popup-link&quot; data-popup-mode=&quot;4&quot; data-popup-destination=&quot;feedback/thanks&quot;>Contact us</a> </li></ul>

×