WP2 Wrapper
WP2 Wrapper или Оболочка - это js приложение для управление курсами. Найти исходники можно здесь (доступ по инвайтам). Собранный вариант входит в состав плагина Sber Static Builder. Последнюю актуальную версию документации WP2 Wrapper можно найти внизу этого документа
В WordPress настройки оболочки (стили, меню, загрузка, доп. контент, постобработка, переводы) редактируются в Внешний вид → Плеер курса. Значения синхронизируются с ACF options Static Builder и применяются при сборке пакета; live-превью кастомайзера обновляет layout/меню/переводы без применения CSS/JS-сниппетов постобработки к HTML страниц.
Оболочка выполняет несколько важных для курса функций:
- Отображе ние страниц курса - каждая страница находится в изолированной среде с помощью iframe тега, но может передавать данные в общий Store при помощи вызова
window.parent.courseController.data...(см. документацию WP2 Wrapper) - Сохранение данных курса между сессиями - данные курса сохраняются даже после закрытия страницы курса. В самом простом варианте это реализовано с помощью сохранения в local storage. В elearning виджетах для упрощенной работы с данными оболочки добавлен класс CourseControllerData.js
- Управление модальными окнами, панелями (jsPanel), медиа контентом (Player.js), сброс прогресса курса и другие моменты, с которыми можно ознакомиться ниже
По умолчанию в WordPress сайте courseController не добавляется на странице, его можно получить только на странице в сборке Static Builder плагина. Так как все страницы курса находятся в iframe элементах, а courseController в главном окне, то для получения courseController'а нужно обратиться к родительскому окну с помощью window.parent
Обновление данных
При каждом обновлении данных в WP2 Wrapper у всех страниц курса тригерится событие message, которое можно отловить с помощью window.addEventListener("message", () => {}). Это событие можно отлавливать вручную либо автоматически получать обновленные данные с помощью store.js
Документация
config.settings
| Поле | Значение | Описание |
|---|---|---|
debounceSaveDataMs | 30000 | Число в миллисекундах, ограничивающее частоту сохранение прогресса. Значение по умолчанию 30000. Отсрочка сбрасывается если сохранение происходит немедленно, например при: завершении курса, достижении страницей 100%, сохранении данных, открытии новой страницы. |
preloaderMinimumDisplayTimeMs | 1000 | Минимальное время показа прелоадера при загрузке курса или загрузке любой из страниц |
useDefaultPreloader | false | При false прелоадер берется из svg файла: ./static/load.svg. При true включается вшитый в курс прелоадер. |
autoPreloadNextPage | true | Автоматическая подгрузка следующей страницы |
autoCompleteCourse | true | Автоматически завершить курс когда все страницы достигли 100% |
pageAnimation.type | horizontalSlide | Анимация переключения между страницами. Для выключения анимации использовать "none" |
banBrowsers | true | Отключает запуск курса в IE и Safari |
pageProgressType | percent | Значения: percent / check. Способ отслеживания прогресса страниц |
translations.enable | true | Включить мультиязычность |
translations.showChangeLanguageButtons | true | Отображать кнопку смены языка в тулбаре |
translations.defaultLanguage | ru | Язык, используемый при старте курса |
translations.languages | object | Объект с доступными языками вида {"ru": "Русский"} |
Настройки макета
config.modules.layout
| Поле | Значение | Описание |
|---|---|---|
enableMenu | true/false | Включить отображение бокового меню |
enableMenuResizing | true/false | Включить возможность изменения ширины меню за бок на экранах больше 576 пикселей ширины |
enableToolbar | true/false | Включить отображение верхн ей панели |
enableProgress | true/false | Включить отображение полосы прогресса в верхней панели |
enableBottomBar | true/false | Включить отображение нижней панели |
navigation | "free"/"restricted" | Навигация между страницами. Free - обучаемый может перейти на любую страницу. Restricted - следующая страница заблокирована, пока не пройдена предыдущая. |
useSectionsInMenu | true/false | Включить отображение секций в меню |
showLogo | true/false | Показать логотип в меню |
Данные
Сохранение данных
window.parent.courseController.data.set({id, value, immediate});
| Параметр | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | Ключ по которому сохранить данные |
value | string number object | Да | Данные для сохранения |
immediate | boolean | Нет | Сохранить данные на сервер немедленно. По умолчанию установлено в false. |
Получение данных
window.parent.courseController.data.get({id, selector});
| Параметр | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да, если не передан selector | Ключ по которому лежат данные |
selector | function | Да, если не передан id | Функция селектор, возвращающая нужное значение: (state) => state.some.deep.data |
window.parent.courseController.data.getAll();
Получение данных через подписку на переменную
window.parent.courseController.data.subscribe({id, pageId});
| Параметр | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | Ключ по которому лежат данные |
pageId | string | Да | Страница для которой происходит подписка на переменную |
После подписки на страницу будет приходить postMessage с event.data.type === "data.update", а в event.data.payload - переменная |
Страницы
Сообщение "Страница загружена"
window.parent.courseController.page.ready({id});
Каждая страница обязательно должна вызывать этот метод когда страница готова для показа пользователю (все ресурсы загружены, необходимые данные получены итп).
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы |
Загрузить страницу
window.parent.courseController.page.load({id});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы, которую надо добавить на загрузку |
Открыть страницу
window.parent.courseController.page.open({id, anchor});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы, которая будет открыта |
anchor | string | Нет | Якорная ссылка в формате #anchor |
Открыть следующую/предыдущую страницу
window.parent.courseController.page.next();
window.parent.courseController.page.previous();
Сохранить прогресс страницы
window.parent.courseController.page.progress.set({id, percent});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы |
percent | number | Да | Число от 0 до 100 |
Сохранение происходит если новое значение прогресса больше, чем уже сохраненное.
Получить прогресс страницы
window.parent.courseController.page.progress.get({id});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы |
Возвращаемое зна чение
Число от 0 до 100
Открыть конкретную страницу курса при запуске курса
Работает только в local. Scorm и xApi не поддерживаются. Для открытия передать в URL курса передать параметр pageId с id открываемой страницы. Например: https://my-awesome-course.ru/?pageId=pageId2
Курс
Завершение курса
window.parent.courseController.course.complete();
Перезапуск курса с начала
window.parent.courseController.course.restart();
Закрыть курс
window.parent.courseController.course.close();
Установить язык курса
window.parent.courseController.course.language({code});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
code | string | Да | Код языка (Ключ языка в конфиге курса в объекте translations.languages) |
Боковые модальные окна
Событие "Страница бокового модального окна загружена"
window.parent.courseController.modal.ready({id});
Каждая боковая модалка обязательно должна вызывать этот метод когда модалка готова для показа пользователю (все ресурсы загружены, необходимые данные получены итп).
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id модальной страницы, которая будет открыта. Страница должна находиться в конфиге. |
Открыть боковое модальное окно
window.parent.courseController.modal.open({id, index, isResizable, width, backgroundColor});
| Поле | Тип | Обязательно | Значение по умолчанию | Описание |
|---|---|---|---|---|
id | string | Да | id модальной страницы, которая будет открыта | |
index | number | Нет | 100 | Порядковый индекс. Отсчет индекса идет справа налево. Если индекс больше количества открытых страниц - новая страница открывается в конце. Если индекс равен индексу одной из открытых страниц - страница по этому индексу будет заменена на новую. |
isResizable | boolean | Нет | true | Может ли пользователь менять ширину страницы перетаскиванием за бок |
width | string | Нет | 50% | Ширина открываемой страницы. Может быть в % или в px |
backgroundColor | string | Нет | #ffffff | Заливка контейнера модалки |
Настройки модальных окон
window.parent.courseController.modal.params({maxWidth, blockMainContent, hideOnBlockClick, blur, backgroundColor});
| Поле | Тип | Обязательно | Значение по умолчанию | Описание |
|---|---|---|---|---|
maxWidth | number | Нет | 90 | Число от 1 до 100, максимальная ширина контейнера со всеми модалками в процентах от ширины страницы |
blockMainContent | boolean | Нет | false | Заблокировать ли основной контент курса, если модалки открыты |
hideOnBlockClick | boolean | Нет | false | Закрывать ли модалки по нажатию на блокировщик основного контента |
blur | number | Нет | 0 | Число от 0 от 10. Размытие блокировщика основного контента |
backgroundColor | string | Нет | #00000032 | Заливка блокировщика основного контента |
Закрыть боковое модальное окно
window.parent.courseController.modal.close({id});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id модальной страницы, которая будет закрыта. |
Закрыть все боковые модальные окна
window.parent.courseController.modal.closeAll();
Сохранить прогресс модалки
window.parent.courseController.modal.progress.set({id, percent});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id модалки |
percent | number | Да | Число от 0 до 100 |
Сохранение происходит если новое значение прогресса больше, чем уже сохраненное.
Получить прогресс модалки
window.parent.courseController.modal.progress.get({id});
| Поле | Тип | Обязательно | Описание |
|---|---|---|---|
id | string | Да | id страницы |
Возвращаемое значение
Число от 0 до 100
jsPanel
Для работы:
window.courseConfig.modules.jsPanel.enable: true
Открыть окно jsPanel
window.parent.courseController.jsPanel.open({src, title, id, width, height});
| Поле | Тип | Обязательно | Значение по умолчанию | Описание |
|---|---|---|---|---|
src | string | Да, если не установлено id | src страницы для открытия | |
id | string | Да, если не установлено src | id jsPanel для открытия | |
title | string | Да | Заголовок страницы | |
width | string | Нет | 450px | Ширина |
height | string | Нет | 300px | Высота |
Аудио
Отправка api команды
window.parent.courseController.audio.api(command, parameter);
Вызов предоставляет доступ к инстансу аудиоплеера, а также включает показ плеера в dom при передаче любой команды, кроме destroy.
Информация по api: https://playerjs.com/docs/ru=apicommands
Команда destroy также скроет плеер в dom.
xApi
Публичного метода courseController.sendAnswered(...) нет. Логика sendAnswered живёт во внутреннем xapiService и на window.courseController не экспонирована.