Контейнер конструктора сайтов

SiteEditorBase/container:View представляет собой раскладку для конструктора сайтов, состоящую из шапки, основного содержимого и боковой панели.

Демо-пример можно найти в документации к контролу.

Настройка шапки

Шапка состоит из следующих компонентов:

1. Заголовок;
2. Табы для переключения между десктопной и мобильной версией основного содержимого;
3. Тулбар, содержащий кнопки сохранения настроек, изменения масштаба, истории и отмены/возврата последнего действия.

Заголовок шапки

Для задания заголовка необходимо передать опцию 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>

В результате получаем следующее: