9

I basically want to write the following code in ES6 fashion.

 listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
 },

I have tried using a property like the following but the _onNeonAnimationFinish callback is never fired.

class MyElement {
    get behaviors() {
        return [Polymer.NeonAnimationRunnerBehavior];
    }

    beforeRegister() {
        this.is = 'my-element';
        this.properties = {
            name: {
                type: String
            }
        };

        this.listeners = {
            'neon-animation-finish': '_onNeonAnimationFinish'
        };
    }

So what is the correct way?

5
  • I have no idea if this works or not, but have you tried doing it like the behaviours and defining a get listeners() { return {'...':'...}}
    – akc42
    Commented Dec 2, 2015 at 0:31
  • 1
    I tried that too but same result. :(
    – Jessica
    Commented Dec 2, 2015 at 5:03
  • I would have done that too... Commented Dec 2, 2015 at 21:23
  • DId you register your element with Polymer? This (polymer-project.org/1.0/articles/es6.html) article shows it, and since in his example StockTicker is passed to the Polymer constructor - thats what makes me think that a get listeners() function which returns {'neon-animation-finish':'_onNeonAnimationFinish'} should do it.
    – akc42
    Commented Dec 3, 2015 at 11:09
  • 1
    I have figured out a way of getting this particular example to work. The problem is not that the listeners aren't getting added or fired, try adding a tap event handler, it works fine. The problem is with the attributes specified in the NeonAnimationRunnerBehavior, specifically the property _animationMeta meta isn't present on the instance of the element. You should get the error Uncaught TypeError: Cannot read property 'byKey' of undefined in your console when you run the method playAnimation on the instance. Can you confirm if there is indeed such an error in console?.
    – Ajinkya
    Commented Dec 5, 2015 at 14:18

1 Answer 1

2

Following element code should work. Look at the comments in the code for explanation.

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="bower_components/neon-animation/animations/scale-down-animation.html">

<dom-module id="my-animatable">

  <style>
    :host {
      display: inline-block;
      border-radius: 50%;
      width: 300px;
      height: 300px;
      background: orange;
    }
  </style>

  <template>
    <content></content>
  </template>

</dom-module>

<script>
  (function() {
    'use strict';

    var behaviors = Symbol('behaviors');

    class MyAnimatable {
      get behaviors() {
        if (!this[behaviors]) {
          this[behaviors] = [Polymer.NeonAnimationRunnerBehavior];
        }

        return this[behaviors];
      }

      //this setter is key to solving this bug. The `NeonAnimationRunnerBehavior`
      //is an array with two behaviors in it. Polymer allows a
      //behavior to be an array or an object, because of this it flattens
      //nested behaviors into a single array containing only objects and
      //sets it on the prototype, since your implementation didn't have a
      //setter the flattened behavior was lost!.
      set behaviors(value) {
        this[behaviors] = value;
      }

      beforeRegister() {
        this.is = 'my-animatable';

        this.properties = {
          animationConfig: {
            type: Object,
            value: function() {
              return {
                name: 'scale-down-animation',
                node: this
              }
            }
          }
        };

        this.listeners = {
          'neon-animation-finish': '_onNeonAnimationFinish'
        };
      }

      animate() {
        this.playAnimation();
      }

      _onNeonAnimationFinish() {
        alert('_onNeonAnimationFinish');
      }
    }

    Polymer(MyAnimatable);
  })();
</script>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.