Документация
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
Заголовок раздела «jsPanel»Для работы:
window.courseConfig.modules.jsPanel.enable: true
Открыть окно jsPanel
Заголовок раздела «Открыть окно 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 команды
Заголовок раздела «Отправка api команды»window.parent.courseController.audio.api(command, parameter);Вызов предоставляет доступ к инстансу аудиоплеера, а также включает показ плеера в dom при передаче любой команды, кроме destroy.
Информация по api: https://playerjs.com/docs/ru=apicommands
Команда destroy также скроет плеер в dom.
Публичного метода courseController.sendAnswered(...) нет. Логика sendAnswered живёт во внутреннем xapiService и на window.courseController не экспонирована.