CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11073

Getting Child Element From Polymer.dom(event)

What is the best way to grab a hold of the element paper-ripple to attach a event listener for the animation end event? This element will be in a dom repeat. I tried getting children from Polymer.dom(event).localTarget; but had no success. The on-tap needs to stay in the parent. 

    <div on-tap="goToSingleListing" data-listingID="[[url.listing_id]]">
     <paper-ripple></paper-ripple>


  ...

  goToSingleListing: function(event) {
    var el = Polymer.dom(event).localTarget;
    var firstChildElementName = Polymer.dom(el).firstChild;

     ...
    firstChildElementName.addEventListener('transitionend', ()=> {
      page(url);
    });

Upvotes: 1

Views: 129

Answers (1)

tony19
tony19

Reputation: 138696

Instead of trying to get a reference to the <paper-ripple> from your tap event handler, you could use an annotated event listener directly on the <paper-ripple> for its transitionend event.

// dom-module template
<template is="dom-repeat" items="[[items]]">
  <div on-tap="...">
    <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
  </div>
</template>

// dom-module script
Polymer({
  ...
  _onItemTransitionEnd: function(e) {
    ...
  }
}


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onItemTap: function(e) {
      console.log('tap', e.model.index);
    },
    _onItemTransitionEnd: function(e) {
      console.log('transitionend', e.model.index);
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-ripple/paper-ripple.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="[1,2,3,4]">
        <div on-tap="_onItemTap">
          <h2>Item [[item]]</h2>
          <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
        </div>
      </template>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 1

Related Questions