diff --git a/package.json b/package.json index 032c61c..a42b6d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-dialog", - "version": "1.0.5", + "version": "1.1.0", "description": "", "main": "tp-dialog.js", "scripts": { diff --git a/tp-dialog.js b/tp-dialog.js index cebbd4d..e9d0b76 100644 --- a/tp-dialog.js +++ b/tp-dialog.js @@ -67,6 +67,8 @@ class TpDialog extends EventHelpers(LitElement) { open: { type: Boolean, reflect: true }, showClose: { type: Boolean }, icon: { type: Object }, + closeOnEsc: { type: Boolean }, + closeOnOutsideClick: { type: Boolean }, }; } @@ -78,6 +80,11 @@ class TpDialog extends EventHelpers(LitElement) { return this.shadowRoot.querySelector('dialog'); } + constructor() { + super(); + this._handleEscKey = this._handleEscKey.bind(this); + } + connectedCallback() { super.connectedCallback(); this.listen(this, 'click', '_onDialogClick'); @@ -88,16 +95,32 @@ class TpDialog extends EventHelpers(LitElement) { super.disconnectedCallback(); this.unlisten(this, 'click', '_onDialogClick'); this.unlisten(this, 'dialog-close', 'close'); + + if (this.closeOnEsc) { + document.removeEventListener('keydown', this._handleEscKey); + } } show() { this.dialog.show(); this.open = true; + + if (this.closeOnEsc) { + document.addEventListener('keydown', this._handleEscKey, { once: true }); + } } showModal() { this.dialog.showModal(); this.open = true; + + if (this.closeOnEsc) { + document.addEventListener('keydown', this._handleEscKey, { once: true }); + } + + if (this.closeOnOutsideClick) { + this.addEventListener('click', this._handleOutsideClick, { once: true }); + } } close() { @@ -106,6 +129,15 @@ class TpDialog extends EventHelpers(LitElement) { } _onDialogClick(event) { + if (this.closeOnOutsideClick) { + const path = event.composedPath(); + if (!path.includes(this.dialog)) { + this.close(); + event.stopPropagation(); + return; + } + } + var rootTarget = event.composedPath()[0]; var target = closest(rootTarget, '[dialog-dismiss]', true) || closest(rootTarget, '[dialog-confirm]', true); while (target && target !== this) { @@ -127,6 +159,12 @@ class TpDialog extends EventHelpers(LitElement) { target = target.parentNode; } } + + _handleEscKey(event) { + if (event.key === 'Escape' && this.closeOnEsc) { + this.close(); + } + } } window.customElements.define('tp-dialog', TpDialog);