Диалог настройки виджета

SiteEditorBase/widget:Panel - это интерфейсный контрол, предназначенный для настройки виджетов конструктора сайтов.

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

Открытие диалога настройки виджета

Для открытия диалогового окна используется контрол SiteEditorBase/WidgetOpener. Процесс очень схожий с открытием стековой панели или диалогового окна с помощью соответствующих опенеров. Все, что нужно:

1. Создать экземпляр WidgetOpener;
2. Воспользоваться методом open, передав конфигурацию виджета.

Конфигурация метода open состоит из следующих опций:

1. opener - Логический инициатор открытия всплывающего окна (контрол);
2. width - Ширина диалогового окна;
3. eventHandlers - Функции обратного вызова на события всплывающего окна, такие как: onResult, onOpen и onClose, см. документацию;
4. widgetOptions - Опции SiteEditorBase/widget:Panel. Их мы рассмотрим подробнее далее по статье.

<!-- WML -->
<Controls.buttons:Button
    name="button"
    caption="Open Widget"
    on:click="_openWidget()"
/>

// TypeScript
import {WidgetOpener} from 'SiteEditorBase/WidgetOpener';
...

const WIDGET_PANEL_WIDTH = 300;

export default class WidgetDemo extends Control<...> {
    ...
    protected _widgetOpener: WidgetOpener;
    protected _children: {
        button: Button
    };

    protected _openWidget(): void {
        const config = {
            opener: this._children.button,
            width: WIDGET_PANEL_WIDTH,
            eventHandlers: {
                onResult: ({editingObject}) => {
                    // Получаем результирующий editingObject
                }
                // Также можно настроить обработчики onClose и onOpen
            },
            widgetOptions: {...}
        };

        if (!this._widgetOpener) {
            this._widgetOpener = new WidgetOpener();
        }

        this._widgetOpener.open(config);
    }
}

Один экземпляр WidgetOpener работает только с 1 окном. Если единовременно необходимо открывать несколько окон, следует создать дополнительные экземпляры.

Конфигурация редактора виджета (widgetOptions)

Процесс конфигурации widgetOptions будет очень знаком тем, кто работал с контролом Controls/propertyGrid:PropertyGrid.

Заголовок диалога настройки виджета

Чтобы задать заголовок диалогу настройки виджета, передеаём строку в опцию headingCaption

Конфигурация свойств и значений PropertyGrid

Для конфигурации свойств PropertyGrid служит опция source. В неё необходимо передать список свойств IProperty. Для конфигурации значений заданных в source свойств служит опция editingObject.

Более подробнее об опциях source и editingObject можно прочитать в документации PropertyGrid.

Функции обратного вызова на операции управления слоями

С помощью опции layerMoveCallback можно настроить обработчик для операций управления слоями. На вход в обработчик приходит идентификатор действия со слоем типа TLayerMovement. На выход ничего не требуется.

Данная опция не обязательна. Если её не указать, операции управления слоями не будут отображены в редакторе виджета.

Кастомный контрол в шапке диалога найстроки виджета

Чтобы поместить кастомный контрол в шапке диалога настройки виджета, передаём шаблон или имя контрола в опцию headerContentTemplate.

Передача опций в кастомный контрол

Передать опции кастомному контролу, заданному через headerContentTemplate, можно с помощью опции headerContentTemplateOptions.

Пример

// TypeScript
import {TLayerMovement, IPanel} from 'SiteEditorBase/widget';
...

export default class WidgetDemo extends Control<...> {
    ...
    protected _widgetOptions: IPanel = {
        headingCaption: 'Заголовок виджета',
        layerMoveCallback: (layerMovement: TLayerMovement) => {
            if (layerMovement === 'Up') {
                // Обрабатываем нажатие "Слой вверх"
            } else {
                // layerMovement === 'Down'
                // Обрабатываем нажатие "Слой вниз"
            }
        },
        source: [
            {
                name: 'count',
                caption: 'Кол-во столов',
                editorOptions: {
                    integersLength: 2,
                    precision: 0,
                    onlyPositive: true
                },
                type: 'number'
            }, {
                name: 'title',
                caption: 'Название стола',
                editorOptions: {
                    fontColorStyle: 'secondary',
                    fontWeight: 'bold',
                    fontSize: 'xl'
                }
            }, {
                group: 'ШРИФТ',
                name: 'font',
                caption: 'Семейство шрифтов'
            }, {
                group: 'ШРИФТ',
                name: 'size',
                caption: 'Размер шрифта'
            }
        ],
        editingObject: {
            count: 1,
            title: 'Стол для постоянных гостей',
            font: new Enum({
                dictionary: fonts,
                index: 0
            }),
            size: new Enum({
                dictionary: sizes,
                index: 1
            })
        }
    };
}

Получившийся результат:

Результат без передачи опции layerMoveCallback:

Результат с использованием опций headerContentTemplate и headerContentTemplateOptions:

Валидация

Для настройки валидации свойств PropertyGrid в опции source для свойств, которые нужно валидировать, необходимо указать:

1. validators - Массив валидирующих функций;
2. validateTemplateName - Контрол, регулирующий валидацию своего контента (строкой).

Нет необходимости использовать HOC Controls.validate:Controller, так как SiteEditorBase/widget:Panel уже его содержит.

// TypeScript
import {IProperty} from 'Controls/propertyGrid';
import {isRequired} from 'Controls/validate';
...

const validators = [isRequired];

export default class WidgetDemo extends Control<...> {
    ...
    protected _source: IProperty[] = [
        {
            name: 'count',
            caption: 'Кол-во столов',
            editorOptions: {
                integersLength: 2,
                precision: 0,
                onlyPositive: true
            },
            type: 'number',
            validateTemplateName: 'Controls/validate:InputContainer',
            validators
        }, {
            name: 'title',
            caption: 'Название стола',
            editorOptions: {
                fontColorStyle: 'secondary',
                fontWeight: 'bold',
                fontSize: 'xl'
            },
            validateTemplateName: 'Controls/validate:InputContainer',
            validators
        }
    ];
}