From b08266b71292a3f95589b64142cd3a1e42f054ce Mon Sep 17 00:00:00 2001 From: BinaryUnit Date: Thu, 6 Apr 2023 19:30:22 +0100 Subject: [PATCH] allowPropagation option --- README.md | 1 + src/toastify-es.js | 10 ++++++++-- src/toastify.js | 6 +++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1936395..53949d9 100644 --- a/README.md +++ b/README.md @@ -154,6 +154,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom. | escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true | | style | object | Use the HTML DOM Style properties to add any style directly to toast | | | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" | +| allowPropagation | boolean | allow events inside the modal to propagate when destination is undefined | false | | oldestFirst | boolean | Set the order in which toasts are stacked in page | true | > Deprecated properties: `backgroundColor` - use `style.background` option instead diff --git a/src/toastify-es.js b/src/toastify-es.js index 784cf59..18971d8 100644 --- a/src/toastify-es.js +++ b/src/toastify-es.js @@ -26,7 +26,8 @@ * @property {Function} onClick - Invoked when the toast is clicked * @property {Object} offset - Ability to add some offset to axis * @property {boolean} escapeMarkup - Toggle the default behavior of escaping HTML markup - * @property {string} ariaLive - Use the HTML DOM style property to add styles to toast + * @property {string} ariaLive - Announce the toast to screen readers + * @property {boolean} allowPropagation - Allow events inside the modal to propagate when destination is undefined * @property {Object} style - Use the HTML DOM style property to add styles to toast */ @@ -54,6 +55,7 @@ class Toastify { offset: { x: 0, y: 0 }, escapeMarkup: true, ariaLive: "polite", + allowPropagation: false, style: { background: "" }, }; @@ -162,7 +164,9 @@ class Toastify { * @param {Function} [options.onClick] - Invoked when the toast is clicked * @param {Object} [options.offset] - Ability to add some offset to axis * @param {boolean} [options.escapeMarkup=true] - Toggle the default behavior of escaping HTML markup + * @property {boolean} allowPropagation - Allow events inside the modal to propagate when destination is undefined * @param {string} [options.ariaLive] - Announce the toast to screen readers + * * @param {Object} [options.style] - Use the HTML DOM style property to add styles to toast * @private */ @@ -319,7 +323,9 @@ class Toastify { divElement.addEventListener( "click", (event) => { - event.stopPropagation(); + if (!this.options.allowPropagation) { + event.stopPropagation(); + } this.options.onClick(); } ); diff --git a/src/toastify.js b/src/toastify.js index 5d9659c..5b0fa5d 100644 --- a/src/toastify.js +++ b/src/toastify.js @@ -44,6 +44,7 @@ offset: {x: 0, y: 0}, escapeMarkup: true, ariaLive: 'polite', + allowPropagation: false, style: {background: ''} }; @@ -85,6 +86,7 @@ this.options.offset = options.offset || Toastify.defaults.offset; // toast offset this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup; this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive; + this.options.allowPropagation = options.allowPropagation !== undefined ? options.allowPropagation : Toastify.defaults.allowPropagation; this.options.style = options.style || Toastify.defaults.style; if(options.backgroundColor) { this.options.style.background = options.backgroundColor; @@ -241,7 +243,9 @@ divElement.addEventListener( "click", function(event) { - event.stopPropagation(); + if (!this.options.allowPropagation) { + event.stopPropagation(); + } this.options.onClick(); }.bind(this) );