Absolutely, I'll post an update here as soon as I finalize the implementation.
This is for the widget library within Spark IDE, by the way, so it's already public: https://github.com/dart-lang/spark. On Thursday, February 27, 2014 11:02:58 PM UTC-8, Scott Miles wrote: > > >> 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]<javascript:> > > 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] <javascript:>. >> 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/9b4862ae-05bd-43cb-960a-755397aff697%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
