Ember Outside Click

Outside click component for Ember. Clean and simple.

See the demo.

Install

$ ember install ember-outside-click

Use

Block form

{{#outside-click onOutsideClick=(action 'hide')}}
  <a href="#" onclick={{action 'toggle'}}>Dropdown</a>

  {{#if open}}
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  {{/if}}
{{/outside-click}}

Subclass

See the demo code.

Excluding classes

To exclude classes from the outside click behaviour, add the excludedClasses property to the component.

{{#outside-click excludedClasses=(array 'excluded-class' 'special-toolbar')}}
  ...
{{/outside-click}}

See the demo code to exclude classes via subclassing.

Test

As explained by @runspired, jQuery events are somewhat inconsistent. So ember-outside-click uses native DOM methods instead.

If you find yourself having trouble with jQuery's trigger, you should make and call a triggerMouseEvent test helper.

// tests/helpers/trigger-mouse-event.js
export default function triggerMouseEvent(node, eventType) {
  const event = document.createEvent('MouseEvents')
  event.initEvent(eventType, true, true)
  node.dispatchEvent(event)
}

// tests/integration/components/drop-down/component-test.js
test('click outside', function(assert) {
  const el = this.$()[0]
  triggerMouseEvent(el, 'mousedown')
  triggerMouseEvent(el, 'mouseup')
  assert.ok(clickedOutside)
})

---

GitHub @nucleartide  ·  Twitter @nucleartide