Контейнер конструктора сайтов
SiteEditorBase/container:View представляет собой раскладку для конструктора сайтов, состоящую из шапки, основного содержимого и боковой панели.
Демо-пример можно найти в документации к контролу.
Настройка шапки
Шапка состоит из следующих компонентов:
- Заголовок;
- Табы для переключения между десктопной и мобильной версией основного содержимого;
- Тулбар, содержащий кнопки сохранения настроек, изменения масштаба, истории и отмены/возврата последнего действия.
Заголовок шапки
Для задания заголовка необходимо передать опцию title.
Масштаб
Для настройки масштаба необходимо передать опцию scale. Опция принимает числовые значения от 80 до 150 с шагом в 10, значение по умолчанию - 100.
<!-- WML -->
<SiteEditorBase.container:View scale="{{_scale}}" on:scaleChanged="_scaleChangedHandler()"/>
// TypeScript
const SIZES = {
'2xs': 80,
'xs': 90,
's': 100,
'm': 110,
'l': 120,
'xl': 130,
'2xl': 140,
'3xl': 150
};
export default class MySiteEditorContainer extends Control<...> {
...
protected _scale: number = 100;
protected _size: string = 's';
protected _scaleChangedHandler(event: Event, scale: number): void {
this._size = Object.keys(SIZES).find((size) => SIZES[size] === scale);
}
}
Кнопки "Шаг назад" и "Шаг вперед"
Для настройки кнопок "Шаг назад" и "Шаг вперед" необходимо сконфигурировать опции redoCallback и undoCallback. Если какая-то из опций не передана то соответствующая кнопка будет находится в режиме readOnly. Рассмотрим простейший пример настройки истории, позволяющей делать 1 шаг назад или вперед.
<!-- WML -->
<SiteEditorBase.container:View
redoCallback="{{_count === 1 ? null : _redoCallback}}"
undoCallback="{{_count === 0 ? null : _undoCallback}}"
/>
// TypeScript
export default class MySiteEditorContainer extends Control<...> {
...
protected _count: number = 1;
protected _redoCallback = (): void => {
this._count = this._count + 1;
}
protected _undoCallback = (): void => {
this._count = this._count - 1;
}
}
Кнопка "История"
Для настройки кнопки "История" необходимо передать опцию historyCallback, обратный вызов которой последует при клике на кнопку.
<!-- WML -->
<SiteEditorBase.container:View historyCallback={{_historyCallback}}/>
// TypeScript
export default class MySiteEditorContainer extends Control<...> {
...
protected _historyCallback: Function = () => {
// open popup or do something
}
}
Кнопка "Сохранить"
Для настройки кнопки "Сохранить" необходимо передать опцию saveCallback, обратный вызов которой последует при клике на кнопку.
<!-- WML -->
<SiteEditorBase.container:View saveCallback={{_saveCallback}}/>
// TypeScript
export default class MySiteEditorContainer extends Control<...> {
...
protected _saveCallback: Function = () => {
// save
}
}
Настройка основного содержимого
Содержимое состоит из пользовательских шаблонов для декстопа и мобильной версии. Всё, что необходимо для его конфигурации - передать опции desktopContent и mobilePhoneContent соответственно.
Пример:
<!-- WML -->
<SiteEditorBase.container:View>
<ws:desktopContent>
<ws:partial template="Path/To/Template" optionExample="Опция"/>
</ws:desktopContent>
<ws:mobilePhoneContent>
<ws:partial template="Path/To/Template" optionExample="Опция"/>
</ws:mobilePhoneContent>
</SiteEditorBase.container:View>
Настройка боковой панели
Содержимое боковой панели состоит из стилизованных блоков и конфигурируется пользовательским шаблоном. Для настройки блоков боковой панели необходимо использовать контрол SiteEditorBase/container:SidebarBlockTemplate, который имеет следующие опции:
- title - заголовок блока;
- titleFloat - определяет обтекаемость заголовка;
- content - контента блока.
Рассмотрим пример конфигурации боковой панели.
<!-- WML -->
<ws:template name="sidebarContent">
<SiteEditorBase.container:SidebarBlockTemplate title="Темы" titleFloat="true">
<ws:content>
<div class="ws-flexbox ws-justify-content-end"
style="height: 60px; padding-top: 4px;">
Right content
</div>
<div>
Bottom content
</div>
</ws:content>
</SiteEditorBase.container:SidebarBlockTemplate>
<SiteEditorBase.container:SidebarBlockTemplate title="Места для заказа">
<ws:content>
<div>Sidebar content</div>
</ws:content>
</SiteEditorBase.container:SidebarBlockTemplate>
<SiteEditorBase.container:SidebarBlockTemplate title="Декор">
<ws:content>
<div>Sidebar content</div>
</ws:content>
</SiteEditorBase.container:SidebarBlockTemplate>
</ws:template>
<SiteEditorBase.container:View>
<ws:sidebarContent>
<ws:partial template="sidebarContent"/>
</ws:sidebarContent>
</SiteEditorBase.container:View>
В результате получаем следующее: