diff --git a/README.md b/README.md index 9ec924b..4a97773 100644 --- a/README.md +++ b/README.md @@ -306,6 +306,29 @@ By default, the modal will close when you click outside the modal. If you want t } ``` +## Preventing closing the modal on Escape or on click away based on the modal state + +When a modal is closed on Escape or click away, `closingModalOnEscape` and `closingModalOnClickAway` are issued. Handle these events to prevent closing a modal based on its state, for example, if there are uncommitted changes. + +For example, if a modal has a `isDirty` property, it could have the following handler: + +``` +@script + +@endscript +``` + ## Skipping previous modals In some cases you might want to skip previous modals. For example: 1. Team overview modal diff --git a/resources/js/modal.js b/resources/js/modal.js index e2fc6d1..29a00f0 100644 --- a/resources/js/modal.js +++ b/resources/js/modal.js @@ -16,6 +16,10 @@ window.LivewireUIModal = () => { return; } + if (!this.closingModal('closingModalOnEscape')) { + return; + } + let force = this.getActiveComponentModalAttribute('closeOnEscapeIsForceful') === true; this.closeModal(force); }, @@ -24,8 +28,24 @@ window.LivewireUIModal = () => { return; } + if (!this.closingModal('closingModalOnClickAway')) { + return; + } + this.closeModal(true); }, + closingModal(eventName) { + const componentName = this.$wire.get('components')[this.activeComponent].name; + + var params = { + id: this.activeComponent, + closing: true, + }; + + Livewire.dispatchTo(componentName, eventName, params); + + return params.closing; + }, closeModal(force = false, skipPreviousModals = 0, destroySkipped = false) { if(this.show === false) { return;