Перейти к основному содержимому

WidgetTriggers

Класс основывается на BaseTrigger и добавляет ему возможность вставки js кода триггеров в атрибуты виджетов. Триггеры работают с помощью обработки событий из Alpine.js

schedule_before_render и schedule_after_render​

Данные методы запускают рендер Alpine атрибутов для обработки триггеров. После генерации атрибутов, они добавляются в html виджета перед data-id атрибутом, который есть у всех Elementor виджетов. Генерация работает с помощью метода generate_attribute

generate_attribute( Element_Base $element_base ): string​

Метод получает настройки триггеров из виджета. Для каждого заданного триггера происходит последовательно несколько действий:

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

function get_event( string $event, Element_Base $element_base ): string​

Функция преобразует имя триггера из настроек виджета в обработчик события Alpine.js самостоятельно, либо с помощью вызова вспомогательной функции:

'widget_click' => '@click',  
'click_outside_the_widget' => '@click.outside',  
'widget_hover' => '@mouseenter',  
'hover_outside_the_widget' => '@mouseleave',  
'frame_opened' => '@frameopened' . $widget_id . '.window',  
'frame_passed' => '@framepassed' . $widget_id . '.window',  
'question_opened' => '@questionopened' . $widget_id . '.window',  
'form_saved' => sprintf(  
   '@elementorformsaved%s.window',  
   $element_base->get_settings_for_display( 'form_id' ) ?: $widget_id  
),  
'question_passed' => '@questionpassed' . $widget_id . '.window',  
'quiz_passed' => QuizPassed::get_trigger( $widget_id, static::SLUG, $trigger_data ),  
'widget_passed' => 'widget_passed',  
'media_finished' => '@mediafinished' . $widget_id . '.window',  
'viewport' => 'viewport',  
default => throw new Exception( 'Unknown event' )

Список с краткими комментариями:

  1. '@click' — дефолтное Alpine.js/DOM событие, клик по виджету.
  2. '@click.outside' — дефолтное Alpine.js событие, клик вне виджета.
  3. '@mouseenter' — дефолтное Alpine.js/DOM событие, курсор наведен на виджет.
  4. '@mouseleave' — дефолтное Alpine.js/DOM событие, курсор ушел с виджета.
  5. '@frameopened{ID}.window' — кастомное, открыт фрейм во фреймсете с этим ID.
  6. '@framepassed{ID}.window' — кастомное, фрейм с этим ID во фреймсете пройден (завершен).
  7. '@questionopened{ID}.window' — кастомное, открыт вопрос с этим ID в банке вопросов .
  8. '@elementorformsaved{ID}.window' — кастомное, сохранена форма Elementor с этим ID.
  9. '@questionpassed{ID}.window' — кастомное, вопрос с этим ID в бfmediaанке вопросов пройден.
  10. QuizPassed::get_trigger() — кастомное, одно из трех событий в зависимости от настроек quizpassedsuccessfully{ID}, quizpassedunsuccessfully{ID}, quizpassed{ID}.
  11. 'widget_passed' — кастомное, виджет пройден. При рендере генерируется js код обрабатывающий виджеты типов quiz, media, forms, на основе js функции eventsWidgetPassed
  12. '@mediafinished{ID}.window' — кастомное, проигрывание медиа закончено для этого ID.
  13. 'viewport' — кастомное, элемент появился во viewport (видим на экране). Событие устанавливается с помощью js функции observeElementVisibility