# Class: PopoutView

## core.dropdown.views. PopoutView

Составная View. Используется для отображения выпадающей панели. Важное отличие от DropdownView: панель отрисовывается в виде бабла, в открытом виде к кнопке от бабла идет треугольник (как в комиксах).

- Button View - используется для отображения кнопки, по нажатии на которую всплывает панель.
- Panel View - используется при отображении выпадающей панели.

Ширина панели не зависит от ширины кнопки и определяется CSS View панели. Высота панели определяется CSS View панели и опцией `height`. Позиция панели регулируется опциями `popoutFlow` и `direction`.
Возможные эвенты:

- `'before:open' (popoutView)` - эвент возникает перед открытием панели.
- `'open' (popoutView)` - эвент возникает после открытия панели.
- `'before:close' (popoutView)` - эвент возникает перед закрытием панели.
- `'close' (popoutView, ...)` - эвент возникает после закрытия панели. При программном закрытии через метод close, переданные в нее параметры передаются в это событие.
- `'button:*'` - все эвенты buttonView прокидываются в PopoutView с префиксом 'button:'.
- `'panel:*'` - все эвенты panelView прокидываются в PopoutView с префиксом 'panel:'.

#### new PopoutView(options)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `options` | Object | Объект опций. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `buttonView` | Marionette.View |  |  | View для отображение кнопки.
  `buttonViewOptions` | Object | function | <optional> |  | Опции, передаваемые в buttonView при создании.
  `panelView` | Marionette.View |  |  | View для отображение панели. Создается заново при каждом открытии панели.
  `panelViewOptions` | Object | function | <optional> |  | Опции, передаваемые в panelView при создании.
  `autoOpen` | Boolean | <optional> | true | Открывать панель автоматически при клике на buttonView.
  `customAnchor` | Boolean | <optional> | false | Использовать кастомный якорь для привязки треугольника бабла. Переданная в buttonView View обязана реализовывать
  `direction` | String | <optional> | 'down' | Направление открытие панели. Варианты: `'up'`, `'down'`.
  `fade` | Boolean | <optional> | false | Затемнять ли остальную часть экрана при открытии панели.
  `height` | String | <optional> | 'auto' | Способ определения высоты панели. `'auto'` - определяется через CSS панели. `'bottom'` - всегда привязана к нижней части экрана
  `popoutFlow` | String | <optional> | 'left' | Определяет позицию панели по горизонтали. `'left'` - левая сторона панели привязана к левой стороне кнопки. Панель растет направо. `'right'` - правая сторона панели привязана к правой стороне кнопки. Панель растет налево.
  `renderAfterClose` | Boolean | <optional> | true | Автоматически вызывать render у buttonView при закрытии панели.

  Source:
    - dropdown/views/PopoutView.js, line 63

### Extends

- Marionette.LayoutView

### Members

#### buttonView

  Экземпляр button View, если View отрендерена. Иначе null.

  Source:
    - dropdown/views/PopoutView.js, line 141

#### panelView

  Экземпляр panel View, если панель открыта. Иначе null. Пересоздается при каждом открытии панели (!).

  Source:
    - dropdown/views/PopoutView.js, line 146

### Methods

#### close(arguments)

  Закрыть выпадающую панель.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `arguments` | * | <repeatable> | Агрументы, которые будут переданы в эвент `'close'`

  Source:
    - dropdown/views/PopoutView.js, line 308

#### open()

  Открыть выпадающую панель.

  Source:
    - dropdown/views/PopoutView.js, line 244