>> a general-purpose overlay element Nice. Will this something you can share or publish?
Having best-of-breed, custom-element solutions for hard problems powerfully confirms Polymer's mission. On Thu, Feb 27, 2014 at 8:59 PM, Sergey Shevchenko <[email protected]>wrote: > I think this is exactly what I need, thanks! > > The actual solution to deal with all permutations of modal, auto-close and > none of them is going to be a combination of pointer-events:none, the > capture handler, and probably a backdrop div after all, but > pointer-events:none was the missing piece. > > > On Monday, February 24, 2014 12:47:59 PM UTC-8, Eric Bidelman wrote: > >> Could you just set `pointer-events:none` in the capture handler? That >> blocks events and :hover. >> >> http://jsbin.com/mafatihu/2/edit >> >> >> On Thu, Feb 20, 2014 at 1:40 PM, Sergey Shevchenko <[email protected]>wrote: >> >>> Hi all, >>> >>> This is not strictly Polymer-related, but I've encountered this in the >>> context of writing a Polymer element, and I thought that I could use the >>> expertise here. >>> >>> I'm writing a general-purpose overlay element that can auto-close on an >>> outside click and also can be modal (both features are configurable via >>> attributes). For auto-close, I'm attaching a capture phase on-click handler >>> to document; the handler stops event propagation and thus blocks the event >>> from reaching the original target: >>> >>> >>> // For all events to intercept/block: >>> document.addEventListener(event, handler, true); >>> >>> function handler(e) { >>> if (!isPointInOverlay(e.client)) { >>> if (modal) { >>> e.stopPropagation(); >>> e.preventDefault(); >>> } >>> if (autoClose) { >>> closeOverlay(); >>> } >>> } >>> } >>> >>> With this, I've been able to successfully block click, >>> mousedown/up/enter/leave/over/out, contextmenu, and everything else I >>> needed in order to effectively disable the rest of the UI, except one >>> thing: the :hover style still gets applied to the elements which have it >>> defined. Is there a DOM event to intercept in order to prevent that? As >>> mentioned, blocking mouseenter/leave/over/out doesn't seem to affect :hover. >>> >>> I could probably use the standard technique of placing a transparent >>> blocking <div> over the entire UI, but since I already need a capture >>> handler for auto-closing, I thought I could reuse that. >>> >>> Thanks, >>> --Sergey >>> >>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> >>> To view this discussion on the web visit https://groups.google.com/d/ >>> msgid/polymer-dev/241b9355-9f0e-41cd-8b20-3b015a6d638e% >>> 40googlegroups.com. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/1bbfd796-98e3-457e-8f4b-1a9cab034484%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/1bbfd796-98e3-457e-8f4b-1a9cab034484%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/groups/opt_out. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLYBG3iiFnqZzWWqwfki0bJkpemaKBFzmSbgwoQw8AdYkg%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
