Оглавление

Оглавление – компонент, позволяющий удобно взаимодействовать с оглавлением документа или любыми другими частями приложения (быстро ознакомиться с содержанием, переключиться на интересующий раздел).

Конфигурация

Для добавления оглавления на страницу, необходимо выполнить следующие действия:

1. Добавить контрол TOC.View в шаблон разрабатываемого вами контрола;
2. Определить обязательные опции:
   1. headings – для отображения самих заголовков оглавления;
   2. selectedKey – активный заголовок оглавления;
   3. onSelect – коллбек смены активного заголовка;
   4. pinned – для определения начального состояния панели оглавления (закрепленное/ незакрепленное);
   5. onPin – коллбек смены состояния панели (с закрепленного на незакрепленное и наоборот);
   6. expanded – состояние развернутости всех заголовков оглавления;
   7. onExpand – коллбек смены состояния развернутости всех узлов оглавления;
3. Для поддержания адаптивного варианта надо будет добавить опцию viewMode в значении 'mobile';
4. Если необходимо ограничить высоту незакрепленного меню воспользуйтесь опцией maxHeightMenu.

Настройка заголовков

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

1. id - уникальный идентификатор заголовка.
2. level - уровень заголовка.
3. text - отображаемый текст(название) заголовка

Для работы оглавления требуется как минимум 2 заголовка.

Пример настройки:

<!-- WML -->
<TOC.View
    headings="{{ _headingList }}"/>

// TypeScript
protected _headingList = [{
        id: 'c7bf8557-cdaa-4b31-8177-d96e2c09842d',
        text: 'Заголовок 1 уровня',
        level: 1
    },
    {
        id: '94a5f68d-584d-41d8-aca5-3743d0644fdd',
        text: 'Заголовок 2 уровня',
        level: 2
    },
    {
        id: '6d38cd6b-fcaa-4830-a224-506f83347e6a',
        text: 'Еще один заголовок 2 уровня',
        level: 2
    },
    {
        id: '6d38cd6b-fcaa-4830-a224-506f83347e6a2',
        text: 'Заголовок 3 уровня',
        level: 3
    }];

Настройка активного заголовка

Опция selectedKey - определяет текущий активный заголовок в оглавлении.

Опция onSelect - коллбек смены активного заголовка.

Пример настройки:

<!-- WML -->
<TOC.View
    selectedKey="{{ _selectedKey }}"
    onSelect="{{ _onSelect }}"

// TypeScript
// Задаем активный заголовк(id заголовка)
protected _selectedKey = 'c7bf8557-cdaa-4b31-8177-d96e2c09842d';

// Обновляем активный заголовок при клике по оглавлению
protected _onSelect = (value) => {
    this._selectedKey = value;
    //можно выполнять еще какие-то действия, например подскролл к нужному заголовку внутри документа 
}

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

Оглавление может находится в двух состояних. Закрепленное и незакрепленное.

Опция pinned определяет состояние оглавления. Значении true соответствует закрепленному оглавлению, false - не закрепленному.

Опция onPin - коллбек смены состояния оглавления с закрепленного на незакрепленное и наоборот.

Пример настройки:

<!-- WML -->
<TOC.View
    pinned="{{ _pinned }}"
    onPin="{{ _onPin }}"

// TypeScript
// Устанавливаем начальное значение закреплности оглавления
//false - незакрепленное
//true - закрепленное
protected _pinned = false;

// Меняем состояние закрепленности оглавления
protected _onPin  = () => {
    this._pinned = !this._pinned
}

В результате получим оглавление в незакрепленном состоянии:

Настройка состояния развернутости заголовков

Опция expanded определяет в каком состоянии находятся заголовки оглавления. Значение true соответствует развернутым заголовкам, false - развернут активный заголовое и его родители.

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

Пример настройки:

<!-- WML -->
<TOC.View
    expanded="{{ _expanded }}"
    onExpand="{{ _onExpand }}"

// TypeScript
// Начальное состояние развернутости узлов
protected _expanded = true;

// Меняем состояние развернутости узлов
protected _onExpand = () => {
    this._expanded = !this._expanded;
}

В результате получим оглавление в котором развернуты все загловки:

Настройка адаптивного отображения

Опция viewMode - определяет режим отображения оглавления. 'mobile' - мобильный, 'default' - стандартный

Помимо опции необходимо добавить в нужное место документа контрол TOC.MobileButton

<!-- WML -->
<TOC.View viewMode="{{ _viewMode }}"/>
<!-- контрол кнопки вызова оглавления в мобильном отображении -->
<TOC.MobileButton />

// TypeScript
// Состояние отвечающие за включение адаптивного режима
protected _viewMode = 'mobile';

В результате получим кнопку вызова оглавления:

Настройка высоты незакрепленного меню

Опция maxHeightMenu - передается строкой в которой указывается желаемое значение.

Пример настройки:

<!-- WML -->
<TOC.View
    maxHeightMenu="350px"

В результате получим: