Feature request :) noPropagateClicks #216

utilmind · 2019-08-12T17:39:31Z

Hello! I have added a new option in my fork, noPropagateClicks. This option prevent passing the clicks events to other event listeners, when the alert is displayed.

This has solved my problem, which was following...

My customer's website has some legacy code for the "side windows". Those windows listening for the click events of <body> and hiding itself on each click outside the window.
I must prevent them from hiding when the alert is displayed. However, unfortunately, I can't use isOpen() method to test whether the alert box is displayed. After any click on the alert's OK button or dimmer, isOpen() will return false. The side windows catching that click, recognizing it as "outside" click and hiding itself (which is wrong).

So it looks like the only solution to not pass the clicks to other listeners outside of an alert -- is to prevent their propagation.

And It would be really cool if you can add noPropagateClicks or similar option to the canonical version of AlertifyJS.

Thank you!

utilmind · 2019-08-13T11:44:26Z

Here is final fork, which displaying what could be updated:
utilmind@4ad0d46#diff-c00d4b32a9368e7ede27747e63502911

There is no "preventDefault's", only stopPropagation, so all links displayed in alerts still working.

MohammadYounes · 2019-08-19T19:44:42Z

Thanks for the details. However, I believe adding the below line after creating the root element is enough?

elements.root.onclick = function(e){e.stopPropagation()}

utilmind · 2019-08-19T21:30:05Z

No, unfortunately this will not work. Because the legacy code also listens for all clicks of the root element. It's also "closable by dimmer".

Let's imagine that page uses 2 libraries for modal windows. Both libraries can display popup windows, "closable by dimmer". But I would like to give an AlertifyJS higher priority for the "dimmer area", and allow Alertify alerts over another non-alertify modal windows.

MohammadYounes · 2019-08-19T21:42:51Z

The dimmer is placed inside the root element and it's always added at the end of the document (which ensures being on top of elements having the same z-index).

Because the legacy code also listens for all clicks of the root element.

How would the legacy code listen to the click events of AlertifyJS root element ? Can you provide an online sample ?

utilmind · 2019-08-19T21:46:17Z

There is following code which uses jQuery:

$("body").on("click", function(a) { // click anywhere
         $(side_window).hide(); // hide window on any click outside of it
 });

And in fact, that window being hidden on any click, inside or outside AlertifyJS alert box, if the "clicks propagation" not disabled.

utilmind · 2019-08-19T21:59:01Z

Yes, I was wrong when I called it "dimmer". It just listens to all clicks over document.body. I see that Alertify really adding another separate elements as "dimmer". However any "propagated" clicks closing the side windows.

MohammadYounes · 2019-08-19T22:00:05Z

This won’t catch the clicks on the Dialog or the Dimmer if AlertifyJS root element stops event propagation.

Try adding this after creating the root element.

elements.root.onclick = function(e){e.stopPropagation()}

MohammadYounes · 2019-08-19T22:06:50Z

@utilmind no worries!

utilmind · 2019-08-20T18:22:37Z

Hello! I have added suggested code after creating of elements.root into https://palmbeachcuisine.com/js/alertify.test.js:

                elements.root = document.createElement('div');
                if (instance.get('noPropagateClicks') === true)
                  elements.root.onclick = function(e){e.stopPropagation()}

However it doesn't works as expected. It still propagate event on OK button, or on Enter keypress.

Here is the page which reproduces the problem:
https://palmbeachcuisine.com/rs-test.html#BistroJupiter
The side window contains "Redeem" field. Just enter some invalid email address, like "test@test" to see the Alertify box. Side window really keeping opened on clicks inside the Alertify box, but unfortunately closes after clicking OK.

Here is how it should work:
https://palmbeachcuisine.com/restaurant-specials.html#BistroJupiter
To reproduce -- also type any invalid email in Redeem box, like "test@test" to see an Alertify. This Alertify with my suggested noPropagateClicks option works well.

MohammadYounes · 2019-08-20T19:16:14Z

@utilmind When debugging through your updated version instance.get('noPropagateClicks') returns undefined as the default hasn't been set yet.

utilmind · 2019-08-20T21:45:56Z

Yes, really :) Anyway I still prefer to have configurable noPropagateClicks. Who knows, maybe I will want to hook all clicks in one of my future project.

In any case the following code works well at https://palmbeachcuisine.com/rs-test.html#BistroJupiter:

                elements.root = document.createElement('div');
                if (defaults.noPropagateClicks === true)
                  elements.root.onclick = function(e){e.stopPropagation()}

Thank you for suggestion! I hope you can make this improvement canonical :)

MohammadYounes · 2019-09-28T16:00:13Z

v1.12.0 introduces two new global hooks (preinit and postinit), you can use them to wire your own click event, stopping propagation at root element.

alertify.defaults.hooks.postinit = function(instance){
  instance.elements.root.onclick = function(e){e.stopPropagation()}
}

MohammadYounes closed this as completed Sep 28, 2019

utilmind mentioned this issue Nov 20, 2019

stopPropagation on ESC keypress #223

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature request :) noPropagateClicks #216

Feature request :) noPropagateClicks #216

utilmind commented Aug 12, 2019 •

edited

utilmind commented Aug 13, 2019 •

edited

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 19, 2019 •

edited

utilmind commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 20, 2019

MohammadYounes commented Aug 20, 2019

utilmind commented Aug 20, 2019 •

edited

MohammadYounes commented Sep 28, 2019

Feature request :) noPropagateClicks #216

Feature request :) noPropagateClicks #216

Comments

utilmind commented Aug 12, 2019 • edited

utilmind commented Aug 13, 2019 • edited

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 19, 2019 • edited

utilmind commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

MohammadYounes commented Aug 19, 2019

utilmind commented Aug 20, 2019

MohammadYounes commented Aug 20, 2019

utilmind commented Aug 20, 2019 • edited

MohammadYounes commented Sep 28, 2019

utilmind commented Aug 12, 2019 •

edited

utilmind commented Aug 13, 2019 •

edited

utilmind commented Aug 19, 2019 •

edited

utilmind commented Aug 20, 2019 •

edited