Ember-rl-dropdown

Simple dropdown component and mixin for Ember. While it is very straightforward to create toggle functionality in Ember with the if-helper, this dropdown will also close on click-out or when pressing the Escape key.

Demo

Demo available here.

Installation

npm install --save-dev ember-rl-dropdown

This addon does not provide any css for the dropdown, but it should work well with frameworks such as Twitter Bootstrap (see example below).

Usage

<!-- Twitter Bootstrap dropdown menu example -->

{{#rl-dropdown-container class="dropdown"}}
  {{#rl-dropdown-toggle class="btn btn-default"}}
    Toggle <span class="caret"></span>
  {{/rl-dropdown-toggle}}

  {{#rl-dropdown tagName="ul" class="dropdown-menu" closeOnChildClick="a:link"}}
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  {{/rl-dropdown}}
{{/rl-dropdown-container}}

The component tagnames and classes can be altered to work with your favorite framework or your own custom css.

closeOnChildClick may be set to a jQuery selector for child elements that should cause the dropdown to close when clicked. The default behavior is for the dropdown to remain visible when the user interacts with its child elements. Set it to true if any child element should close the dropdown.

propagateClicks may be set to false on the rl-dropdown-toggle component and/or the rl-dropdown component if click events should not propagate up through the DOM from either or both of these components.

The rl-dropdown-container component also passes a boolean block param indicating whether or not the dropdown is expanded, which can be used to e.g. customize the toggle button text based on whether the dropdown is expanded or closed:

{{#rl-dropdown-container as |dropdownExpanded|}}
  {{#rl-dropdown-toggle}}
    {{#if dropdownExpanded}}
      Close
    {{else}}
      Expand
    {{/if}}
  {{/rl-dropdown-toggle}}

  {{#rl-dropdown}}
    ...
  {{/rl-dropdown}}
{{/rl-dropdown-container}}

It is also possible to bind actions to the onOpen and onClose attributes on the rl-dropdown-container component:

{{#rl-dropdown-container onOpen=(action "myOnOpenHandler") onClose=(action "myOnCloseHandler")}}
  ...
{{/rl-dropdown-container}}

The onOpen action will be called when the dropdown is opened; the onClose action will be called when the dropdown is closed.

Mixin

When integrating dropdown functionality in your own components, you may prefer to use the mixin instead of using the dropdown components. Be sure to add the rl-dropdown-toggle class to your dropdown toggle element, and to add the rl-dropdown class to your dropdown element. You can send toggleDropdown, closeDropdown and openDropdown events to toggle, close or open the dropdown.

// app/components/user-controls.js
import Ember from 'ember';
import DropdownComponentMixin from 'ember-rl-dropdown/mixins/rl-dropdown-component';

export default Ember.Component.extend(DropdownComponentMixin, {
  // Some additional custom behaviour
});

<!-- app/templates/components/user-controls.hbs -->

<!-- Be sure to add the rl-dropdown-toggle class to your dropdown toggle element -->
<button class="rl-dropdown-toggle" {{action "toggleDropdown"}}>User controls</button>

{{#if dropdownExpanded}}
  <!-- Be sure to add the rl-dropdown class to your dropdown element -->
  <div class="user-controls-dropdown rl-dropdown">
    ...
    <a class="close-btn" {{action "closeDropdown"}}>Close</a>
  </div>
{{/if}}

Ember-rl-dropdown change log

0.10.0

Adds disabled attribute to rl-dropdown-toggle. disabled may be set to true to disable the toggle button:

{{#rl-dropdown-container}}
  {{#rl-dropdown-toggle disabled=true}}
    Toggle
  {{/rl-dropdown-toggle}}

  {{#rl-dropdown}}
    ...
  {{/rl-dropdown}}
{{/rl-dropdown-container}}

0.9.0

Dropdown now closes when elements outside the dropdown receive focus. Fixes complicated bug in Firefox (see Pull Request

18, thanks @tomasznapieralski!).

0.8.0

Thanks to @hakubo, it is now possible to bind actions to the onOpen and onClose attributes on the rl-dropdown-container component:

{{#rl-dropdown-container onOpen=(action "myOnOpenHandler") onClose=(action "myOnCloseHandler")}}
  ...
{{/rl-dropdown-container}}

The onOpen action will be called when the dropdown is opened; the onClose action will be called when the dropdown is closed.

0.7.0

A block param was added to the rl-dropdown-container component indicating whether or not the dropdown is expanded, which can be used to e.g. customize the toggle button text based on whether the dropdown is expanded or closed:

{{#rl-dropdown-container as |dropdownExpanded|}}
  {{#rl-dropdown-toggle}}
    {{#if dropdownExpanded}}
      Close
    {{else}}
      Expand
    {{/if}}
  {{/rl-dropdown-toggle}}

  {{#rl-dropdown}}
    ...
  {{/rl-dropdown}}
{{/rl-dropdown-container}}

0.6.0

Fixes bug with the propagateClicks attribute so now clicks indeed propagate by default.

The rl-dropdown-container component now gets a dropdown-expanded class when the dropdown is expanded.

0.5.0

Previously click propagation on the rl-dropdown-toggle and rl-dropdown components was prevented by default. As of this version they are not prevented by default. The propagateClicks attribute must now be set to false on either or both of these components if you wish to prevent click event propagation on either or both.

0.4.0

Dropdowns should now close on touch-start on mobile.

0.3.0

Dropdowns should now close when pressing the Escape key. This can be disabled by setting closeOnEscape to false.

The clickoutEventNamespace option has been renamed to closingEventsNamespace.

0.2.0

Upgraded to ember-cli 0.2.x.

0.1.0

Added type='button' to dropdown toggles with button tags, to prevent IE from treating it like a submit button when this is not intended.