# Class: PopoutView

## module:core.dropdown.views. PopoutView

Composite View that may be to display a dropdown panel as a speech bubble. Unlike DropdownView, the panel is displayed in speech bubble and has a triangle like in comics. A dropdown view contains button and panel regions that can be fully customizable by the properties `buttonView` and `panelView`.

- Button View is used for displaying a button. Click on that button trigger a panel to open.
- Panel View is used to display a panel that drops down.

Panel width is fully determined by its layout and the `popoutFlow` option. Panel height is determined by its layout and the `height` option. A place where the panel appears depends on the `direction` and `popoutFlow` options.
Possible events:

- `'before:open' (popoutView)` - fires before the panel has opened.
- `'open' (popoutView)` - fires after the panel has opened.
- `'before:close' (popoutView)` - fires before the panel has closed.
- `'close' (popoutView, ...)` - fires after the panel has closed. If the panel was closed via `close(...)` method, the arguments of this method are transferred into this event.
- `'button:\*'` - all events the buttonView triggers are repeated by this view with 'button:' prefix.
- `'panel:\*'` - all events the panelView triggers are repeated by this view with 'panel:' prefix.

#### new PopoutView(options)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `options` | Object | Options object. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `buttonView` | Marionette.View |  |  | View class for displaying the button.
  `buttonViewOptions` | Object | function | <optional> |  | Options passed into the view on its creation.
  `panelView` | Marionette.View |  |  | View class for displaying the panel. The view is created every time the panel is triggered to open.
  `panelViewOptions` | Object | function | <optional> |  | Options passed into the view on its creation.
  `autoOpen` | Boolean | <optional> | true | Whether click on the button should trigger the panel to open.
  `customAnchor` | Boolean | <optional> | false | Whether to attach the speech bubble triangle (anchor) to a custom element in `buttonView`. The View passed into the `buttonView` option must implement
  `direction` | String | <optional> | 'down' | Opening direction. Can be either: `'up'`, `'down'`.
  `fade` | Boolean | <optional> | false | Whether to dim the background when the panel is open.
  `height` | String | <optional> | 'auto' | A way of determining the panel height. `'auto'` - is determined by panel's layout only. `'bottom'` - the bottom border is fixed to the bottom of the window.
  `popoutFlow` | String | <optional> | 'left' | Panel's horizontal position. `'left'` - The left border of the panel is attached to the left border of the button. The panel grows to the right. `'right'` - The right border of the panel is attached to the right border of the button. The panel grows to the left.
  `renderAfterClose` | Boolean | <optional> | true | Whether to trigger button render when the panel has closed.

### Extends

- Marionette.LayoutView

### Members

#### buttonView

  Contains an instance of `options.buttonView` if the popout is rendered, `null` otherwise.

#### panelView

  Contains an instance of `options.panelView` if the popout is open, `null` otherwise. The view is created every time (!) the panel is triggered to open.

### Methods

#### close(arguments)

  Closes the dropdown panel.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `arguments` | * | <repeatable> | Arguments transferred into the `'close'` event.

#### open()

  Opens the dropdown panel.

#### Search results