Настройка плеера фреймов

Плеер фреймов - компонент, который строит указанный ему фрейм в режиме просмотра(runtime). В режиме просмотра невозможно изменять конфигурации отображаемых виджетов.

Конфигурация плеера

Чтобы добавить плеер на страницу, необходимо:

1. Добавить контрол SiteEditorBase/player:View в шаблон своего контрола.
2. Определить опции:
   • widgets — фрейм(набор отображаемых виджетов).
   • decorators — набор декораторов, применяемых к каждому виджету.
   • widgetsData — набор данных для виджетов.

Настройка отображаемого фрейма

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

Опция widgets — фрейм, который представляет из себя массив виджетов, каждый из элементов которого представляет собой объект со следующими полями:

1. id — уникальный идентификатор, который выдается виджету при добавлении.
2. widgetType — идентификатор виджета.
3. props — значения свойств виджета. Могут содержаться только те свойства, которые описаны в propTypes виджета.

Пример:

<!-- WML -->
<SiteEditorBase.player:View 
    widgets="{{_widgets}}"
/>

// TypeScript

protected _widgets = [{
    id: '6714adb4-84c9-11ec-a8a3-0242ac155555',
    widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120002',
    props: {
        widgets: [{
            id: '6714adb4-84c9-11ec-a8a3-0242ac15558',
            widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
            props: {
                mask: 'nn-nn-nn'
            }
        }, {
            id: '6714adb4-84c9-11ec-a8a3-0242ac11234',
            widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
            props: {
                mask: 'n(nnn) nn-nn-nn'
            }
        }]
    }
}, {
    id: '6714adb4-84c9-11ec-a8a3-0242ac186423',
    widgetType: 'a9cbadb4-84c9-11ec-a8a3-0242ac120003',
    props: {
        mask: 'n(nnn) nn-nn-nn'
    }
}];

Настройка декораторов

Опция decorators — массив декораторов, в которые будут обернуты виджеты. Каждый декоратор представляет собой объект со следующими опциями:

1. templateName — путь до шаблона декоратора.
2. props — опции, которые будут переданы в конструктор декоратора.

В декоратор будет передана контентая опция content, которую декоратор обязан вставить в своем шаблоне. Пример настройки:

<!-- WML -->
<SiteEditorBase.player:View
    decorators="{{_decorators}}"
/>

// TypeScript

protected _decorators = [{
    templateName: 'Path/To/Decorator',
    props: {
       someProp: 'someValue'
    }
}];

// Decorator.wml

<div class="decorator">
  <ws:partial template="{{_options.content}}"/>
</div>

// Decorator.less

.decorator {
  border: 1px solid #ccc;
}

Настройка widgetsData

Опция widgetsData — набор данных для виджетов, для получения которых необходимо использовать метод loadDataAndDeps, содержащийся в SiteEditorBase/Loader. В результате вызова данного метода возвращается объект, в котором идентификатору виджета соответствует результат загрузки данных. Подробнее об использовании loadDataAndDeps можно прочитать здесь.