display

Base

Базовый класс, наследующийся от BaseWidgetPart.js

class Base extends BaseWidgetPart {  
    update(){}  
}

Единственное что должна сделать часть display - это определить какие фреймы отображаются, а какие нет в методе update

Default

Дефолтная display часть всегда используется в редакторе, и во фронтенде. Информация о том, какие фреймы показать, а какие скрыть определяется на основе метода WidgetBase::isActiveFrame(frameId), а точнее свойства WidgetBase::activeFrames

На странице неактивным фреймам добавляется display:none , а у активных убирается.

В редакторе, при выборе элемента в боковой панели, к нему происходит плавный переход. Чтобы переход не был сломан вместо скрытия с помощью display:none используется уменьшение элемента до нуля и восстановление нормальных значений при показе

Swiper

Если подключен swiper, то display часть становится оберткой над swiper каруселью. В плагине реализована поддержка двух swiper анимаций - это Fade и Slide под которые добавлены свои классы обработчики

SwiperController

Дефолтный класс для работы со swiper.js. В нем происходит инициализация карусели вместе с инициализацией виджета. Так же всем фреймам-слайдам устанавливается aria-hidden атрибут для правильной работы функции checkVisibilityInContainer

Fade

Стандартная Fade анимация без изменений

Slide

Это анимация swiper'а по умолчанию, но для нее потребовались доработки. При переходе от одного слайда к другому показываются промежуточные слайды (при переходе от 1 к 5 промелькнут 2,3 и 4 слайды) - это не подходит для курсов, так в промежуточных слайдах будет находиться контент, который должен оставаться полностью скрытым от пользователя.

Для скрытия промежуточных слайдов без полной переработки логики swiper используются функции на хуках:

• beforeTransitionStart - прячет промежуточные слайды и добавляет отступы на их место, чтобы анимация перехода сработала корректно
• slideChangeTransitionEnd - восстанавливает стандартное состояние карусели

Также к этим хукам привязана логика еще двух моментов

• методы prepareAnimation и animate для правильного срабатывания анимации контента с помощью библиотеки animate.css
• метод updateParentSwipersAutoHeight - вызывает updateAutoHeight метод текущего слайдера у всех родительских если такие найдутся. Без ручного вызова автовысота подхватывается неверно. Так же функция updateAutoHeight вызывается в setInterval пока происходит анимация перехода между слайдами - это также нужно для правильной работы автоматического подсчета высоты слайдов