Skip to main content

WidgetBase.js

Класс assets\src\js\components\WidgetBase.js - это основа всех elearning виджетов. Вот пример регистрации HorizontalFrameset виджета:

class SberHorizontalFrameSet extends WidgetBase {  
    constructor(settings) {  
        super(settings, new HorizontalDirection, new FrameSet);  
    }  
}  
  
document.addEventListener('alpine:init', () => {  
    Alpine.data('sberHorizontalFrameSet', (settings) => new SberHorizontalFrameSet(settings))  
    Alpine.bind('sberHorizontalFrameSet', () => widgetActions)  
})

Настройки​

В каждый виджет передаются настройки из редактора Elementor, они сохраняются в свойстве settings. Ниже рассмотрены общие настройки, так же есть отдельные настройки для Frameset и QuestionBank.

  • isEditor - true если виджет запущен в редакторе, false если на сайте
  • pageId - id текущей страницы
  • postType - тип записи. Курс поддерживает типы page и modal
  • scrollToFrame - true нужно включить скролл до фрейма, false - поведение по умолчанию
  • addSwiper - true нужно включить swiper карусель, false - поведение по умолчанию

Конструктор​

С помощью композиции классов уточняется поведение виджета. Композиция реализована с помощью di классов в конструкторе, принимаются классы components/widget_parts/type/Base.js и components/widget_parts/direction/Base.js а дочерний класс от components/widget_parts/display/Base.js выбирается автоматически на основе настройки swiper. Далее все эти классы будут называться "частями"

Init​

Init функция вызывается Alpine.js для инициализации виджета. Регистрация происходит для каждого виджета отдельно, по общему шаблону

Alpine.data('widget_type', (settings) => new WidgetType(settings))

Таким образом все HTML элементы с атрибутом [x-data="widget_type"] будут инициализированы как Alpine виджеты.

При инициализации elearning виджета происходит настройка начальных значений, начального внешнего вида и инициализация всех частей

Данный метод также принимает параметр resetFrames=false, если передать true на его место. то прогресс виджета будет полностью сброшен

Остальные методы​

Оставшиеся методы WidgetBase класса используются в частях, и при обработке событий

События​

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

Alpine.bind('widget_type', (settings) => {/*attributes*/})

Таким образом все HTML элементы с атрибутом [x-bind="widget_type"] получат указанные атрибуты, среди которых и будут обработчики событий. Подробнее об этом способе в документации bind Alpine.js

@frameGo.window​

Данное событие вызывается на window и предназначено для управления виджетами. При обработке данного события вызывается метод WidgetBase.go для перехода виджета к запрошенному фрейму. Так же все родительские виджеты меняют активный фрейм, чтобы требуемый был показан на странице.

Для упрощения создания этого события добавлена глобальная функция controlElearningWidget

@frameGo.prevent.stop​

Делает то же самое, что и предыдущее событие, но тригерится не на window, а на html элементе виджета и на нем же останавливается благодаря модификаторам prevent и stop

@framesReInit.window​

Вызов повторной инициализации виджета. Так же данное событие можно вызвать из функции controlElearningWidget

@framesReInit.prevent.stop​

Повторная инициализация определенного виджета. Вызывается только из предыдущего события для инициализации вложенных виджетов

@framesSaveData​

Триггер для сохранения данных виджета в курс

@framesMax​

Триггер для обработки окончания фреймов во вложенном elearning виджете. В таком случае в родительском виджете должен быть совершен переход к следующему фрейму

@framesMin​

Триггер для отслеживания минимального числа фреймов в elearning виджете, аналогично framesMax, но для начальных границ.

@message.window​

Данное событие вызывается каждый раз, когда в курсе обновляются данные, подробнее Обновления данных в оболочке курса. В обработчике данного события происходит отслеживание активной страницы курса и учет прогресса если в курсе открыта страница с виджетом