Графическая шапка

Графическая шапка реализована в классе Headers/graphic:Header.

Раскладка графической шапки состоит из следующих контентных областей:

Верхняя часть

Шаблон верхней части шапки устанавливается в опции headerContentTemplate. В шаблоне можно установить, к примеру, дополнительную текстовую информацию.

В примере ниже установим шаблон с текстовой информацией:

<!-- WML -->
<Headers.graphic:Header
    mode="{{ _mode }}">
    <ws:headerContentTemplate>
        <div class="engine-demo-GraphicHeader__addInfo">
            <div class="engine-demo-GraphicHeader__activity">
                <span class="engine-demo-GraphicHeader__activityMarket controls-icon_size-s icon-PhoneGetAutomatically"></span>
                <span class="engine-demo-GraphicHeader__activityStatus">Работаю</span>
                <span class="engine-demo-GraphicHeader__activityIcon controls-icon_size-m icon-statusSleeps"></span>
            </div>
        </div>
    </ws:headerContentTemplate>
</Headers.graphic:Header>

Тулбар

Шаблон тулбара устанавливается в опции toolbarContentTemplate. Шаблон для тулбара шапки может использоваться, к примеру, для расположения панели с командами для работы с шапкой (редактирование контента, стилей) и кнопки закрытия диалогового окна.

В примере ниже установим шаблон с кнопкой, открывающей дополнительные команды по настройке шапки:

<!-- WML -->
<Headers.graphic:Header
    mode="{{ _mode }}">
    <ws:toolbarContentTemplate>
        <div class="engine-demo-GraphicHeader__toolbar">
            <Controls.dropdown:Button
                tooltip="{[Дополнительные команды]}"
                viewMode="ghost"
                showHeader="{{ false }}"
                iconSize="m"
                icon="icon-SettingsNew"
                iconStyle="secondary"
                buttonStyle="secondary"
                source="{{ _toolbarSource }}"
                keyProperty="id"
                displayProperty="title"
                on:menuItemActivate="_menuItemActivateHandler()"
                contrastBackground="{{ true }}" />
        </div>
        <Controls.popupTemplate:CloseButton attr:title="Закрыть" transparent="{{ false }}"/>
    </ws:toolbarContentTemplate>
</Headers.graphic:Header>

Центральная часть

Шаблон центральной части шапки устанавливается в опции bodyContentTemplate.

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

<!-- WML -->
<Headers.graphic:Header
   mode="{{ _mode }}">
   <ws:bodyContentTemplate>
     <Headers.graphic:ContentPanel
         bind:mainText="_mainText"
         additionalText="Программа ускоренного курса"
         tabItems="{{_tabItems}}"
         bind:tabSelectedKey="_tabSelectedKey"
         logoSrc="{{_logo}}">
     </Headers.graphic:ContentPanel>
   </ws:bodyContentTemplate>
</Headers.graphic:Header>

Визуальное представление шапки

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

Режим отображения

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

  • view – режим просмотра;
  • edit – режим редактирования контента;
  • editStyle – режим редактирования стилей;
  • editAll - объединенный режим редактирования.
<!-- WML -->
<Headers.graphic:Header
    mode="editStyle"
    normalHeight="{{ 160 }}"
    compactHeight="{{ _compactHeight }}"/>

Фон шапки

Опция background позволяет установить фоновое изображение или сплошной цвет шапки в формате HEX. Также опция позволяет установить несколько фоновых изображений, которые будут отображены с помощью карусели.

<!-- WML -->
<Headers.graphic:Header
    mode="editStyle"
    normalHeight="{{ 160 }}"
    compactHeight="{{ _compactHeight }}"
    background="{{ _background }}"
    dominantColor="45, 34, 81"/>

Если задаётся фоновое изображение - необходимо установить dominantColor.

Фоновая подложка

Контрол "Графическая шапка" поддерживает настройку фоновой подложки, которая состоит из трех слоев. <UINewDesign.components.AutodocDemoComponent.DemoComponent require="Engine-demo/Headers/Layout/Background/Index" index="{{3}}" isWasaby="{{true}}" />

Слой с изображением или сплошным цветом

Контрол поддерживает два типа фоновой подложки: сплошной цвет в формате HEX и ссылку на изображение. За установку сплошного цвета отвечает опция background, которая представляет из себя объект вида:

{
    type: 'image' | 'color',
    value: URL | HEX
}

Слой яркости

Яркость фоновой подложки настраивается опцией brightness, значение которой должно быть установлено в пределах от -1 до 1.

В примере ниже в качестве фоновой подложки установим изображение с минимальной яркостью:

// TypeScript
...
protected _beforeMount(): void {
    this._backgroundImage = {
        type: 'image',
        value: 'https://somedirectory/someimage.png'
    };
}
...
<!-- WML -->
<Headers.graphic:Header
    brightness="{{ -1 }}"
    background="{{ _backgroundImage }}" />

Слой градиента

Градиент над фоновым изображением отображается по умолчанию, его можно отключить отключить с помощью опции showGradient.

В примере ниже отключим градиент над фоновым изображением:

// TypeScript
...
protected _beforeMount(): void {
    this._backgroundImage = {
        type: 'image',
        value: 'https://somedirectory/someimage.png'
    };
}
...
<!-- WML -->
<Headers.graphic:Header
    showGradient="{{false}}"
    background="{{ _backgroundImage }}" />

Тема дзен

По умолчанию в графической шапке включена тема дзен. Для отключения темы передайте в опцию zenEnabled значение false.

Настройка редактирования стилей

В контроле графической шапки реализовано оповещение следующих событий:

  • commitEditStyle — происходит при применения изменений в режиме редактирования стилей. При событии доступен объект, содержащий актуальные значения фона, яркости фона, цвета градиента фона и цвета текста;
  • resetEditStyle — происходит при сбросе изменений в режиме редактирования стилей. При событии доступен объект, содержащий актуальные значения фона, яркости фона, цвета градиента фона и цвета текста;
  • gradientChanged — происходит при изменении градиента фонового изображения.

В примере ниже описана логика работы с событиями графической шапки:

<!-- WML -->
<Headers.graphic:Header
    background="{{ _background }}"
    brightness="{{ _brightness }}"
    fontColor="{{ _fontColor }}"
    on:commitEditStyle="_commitEditStyleHandler()"
    on:resetEditStyle="_resetEditStyleHandler()" 
    on:gradientChanged="_gradientChangedHandler()" />
...
protected _commitEditStyleHandler(e: Event, editStyleData: IEditStyle): void {
    this._background = editStyleData.background;
    this._brightness = editStyleData.brightness;
    this._fontColor = editStyleData.fontColor;
}

protected _resetEditStyleHandler(e: Event, editStyleData: IEditStyle): void {
    this._background = editStyleData.background;
    this._brightness = editStyleData.brightness;
    this._fontColor = editStyleData.fontColor;
}

protected _gradientChangedHandler(e: Event, gradient: string): void {
    this._gradient = gradient;
}
...

Выбор изображения для фоновой подложки

Контрол позволяет выбрать изображение для фоновой подложки через панель редактирования стилей, которая отображается при установленной опции mode, равной editStyle.

Выбрать изображение можно при клике на кнопку "Фон". Откроется выпадающий список с пунктом "Изображение", подпункты которого настраиваются на прикладной стороне.

Подпункты можно установить с помощью опции imageSelectorItems, объект для которой нужно сформировать с помощью прикладной библиотеки для работы с файлами DOCVIEW3/FileAttach. Библиотека FileAttach предоставляет источник данных для Controls/dropdown, реализующий функционал кнопки "Прикепить" — загрузку и прикрепление файлов из различных источников.

У библиотеки есть метод getMenuItems(), который вернет список элементов с полями id, title.

Опция imageSelectorItems представляет из себя объект со следующими полями:

  • id — идентификатор элемента;
  • title — заголовок элемента;
  • icon — иконка элемента;
  • itemTemplate — шаблон элемента;
  • menuItemActivate — функция-обработчик клика по элементу.

В примере ниже установим подпункты для выбора изображения с использованием DOCVIEW3/fileAttach. Пример прикладного кода формирования опции imageSelectorItems:

import {
    FileAttach,
    FileSystem,
    SbisBuffer,
    MobileDevice,
    Collection
} from 'DOCVIEW3/fileAttach';
...

protected _beforeMount(): void {
    const attach = new FileAttach({
        multiselect: false
    })
    .useSource(FileSystem, { opener: this, parent: this, useNativeWindow: true })
    .useSource(SbisBuffer, { opener: this, links: false })
    .useSource(MobileDevice, { opener: this })
    .useSource(Collection, { opener: this })
    .useUploader('DOCVIEW3/Uploader/SbisDisk', 'temp');

    this._imageSelectorItems = attach.getMenuItems();

    this._imageSelectorItems.forEach((item) => {
        item.menuItemActivate = this._getAttachItemdId.bind(this);
    });
}

private _getAttachItemdId(selectedItem: Model): void {
    this._backgroundId = selectedItem.get('id');
}
<!-- WML -->
<Headers.graphic:Header
    imageSelectorItems="{{ _imageSelectorItems }}" />