Comindware UI-Core API

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

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.