ui: on-outside modifier (#12206)

ui/packages/consul-ui/app/modifiers/on-outside.js

@@ -0,0 +1,45 @@
+import Modifier from 'ember-modifier';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class OnOutsideModifier extends Modifier {
+  @service('dom') dom;
+
+  constructor() {
+    super(...arguments);
+    this.doc = this.dom.document();
+  }
+  async connect(params, options) {
+    await new Promise(resolve => setTimeout(resolve, 0));
+    try {
+      this.doc.addEventListener(params[0], this.listen);
+    } catch (e) {
+      // continue
+    }
+  }
+
+  @action
+  listen(e) {
+    if (this.dom.isOutside(this.element, e.target)) {
+      const dispatch = typeof this.params[1] === 'function' ? this.params[1] : _ => {};
+      dispatch.apply(this.element, [e]);
+    }
+  }
+
+  disconnect() {
+    this.doc.removeEventListener('click', this.listen);
+  }
+
+  didReceiveArguments() {
+    this.params = this.args.positional;
+    this.options = this.args.named;
+  }
+
+  didInstall() {
+    this.connect(this.args.positional, this.args.named);
+  }
+
+  willRemove() {
+    this.disconnect();
+  }
+}

ui/packages/consul-ui/app/modifiers/on-outside.mdx

@@ -0,0 +1,22 @@
+# on-outside
+
+`{{on-outside 'click' (fn @callback}}` works similarly to `{{on }}` but allows
+you to attach handlers that is specifically not the currently modified
+element.
+
+```hbs preview-template
+<button
+  {{on-outside 'click' (set this 'clicked' 'outside clicked')}}
+  {{on 'click' (set this 'clicked' 'inside clicked')}}
+  style="background: red;width: 100px;height: 100px;"
+>
+  {{or this.clicked "click me or outside of me"}}
+</button>
+```
+
+## Positional Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `event` | `string` |  | Name of the event to listen for |
+| `handler` | `function` |  | Function to handle the event |