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

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