search

googlearchive / paper-tabs

A tabs à la Material Design
22 stars 21 forks source link

Eventing Difference in Atom-Shell #9

Closed bengfarrell closed 10 years ago

bengfarrell commented 10 years ago

Not sure why the difference, but if I do the following:

               <paper-tab id="play_tab" on-click="{{onTabClick}}">Play</paper-tab>
                <paper-tab id="library_tab" on-click="{{onTabClick}}">Library</paper-tab>
                <paper-tab id="sources_tab" on-click="{{onTabClick}}">Sources</paper-tab>
                <paper-tab id="tasks_tab" on-click="{{onTabClick}}">Tasks</paper-tab>

With the following Javascript to grab the event: onTabClick: function(event) { // note that parentElement is necessary for Atom-Shell, but is not used for web (dunno why) this.fire('tabclick', {id: event.toElement.parentElement.id}); },

The toElement.id is the correct paper-tab id (ex: play_tab) using a normal browser (I use Chrome).

However, with Atom-Shell, the toElement.id is referencing inside the shadow dom, and comes through as tabContainer.

So, with Atom-Shell, I must use toElement.parentElement.id, whereas in a browser, I use toElement.id.

Be nice not to have to worry about this difference, however this could easily be a Atom-Shell bug I suppose!

dfreedm commented 10 years ago

I'm guessing the difference is due to a ShadowDOM polyfill difference, as toElement and fromElement are weird IE only things, and are not handled by the polyfill. I suspect atom-shell has a recent enough chrome to use the native ShadowDOM.

Instead, replace event.toElement with event.currentTarget, and event.fromElement with event.relatedTarget.

bengfarrell commented 10 years ago

Thanks! Kinda dumb on my part. Lots of new concepts to learn with Polymer and I didn't remember that toElement and fromElement were IE related. I chalked them up as possible Polymer properties that get carried over with a click event. Of course you're right to use currentTarget for my situation