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(); } }