paper-ripple mouseDown event handler downAction Ov

Question

Polymer 1.1

In paper ripple source code they have the mouseDown event handler:

  /** @param {Event=} event */
  downAction: function(event) {
    var xCenter = this.containerMetrics.width / 2;
    var yCenter = this.containerMetrics.height / 2;

In documentation it states:

paper-ripple listens to "mousedown" and "mouseup" events so it would display ripple effect when touches on it. You can also defeat the default behavior and manually route the down and up actions to the ripple element

However, in my custom element I am not able to override this handler:

        <paper-ripple
          fit
          id="ripple"
          initial-opacity="0.95"
          opacity-decay-velocity="0.98">
        </paper-ripple>
      </section>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-page",
     ...
      downAction: function(e) {
        console.log('sssssssssssssssssssssssss');
      },
      upAction: function(e) {
        this.$.ripple.upAction();
      }

When I induce the action of paper ripple by clicking on my element, I do not get any console output.

How do I override the default downAction handler for mouseDown that paper-ripple listens for as documented in paper-ripple doc?

Answer 1

Most likely documentation assumes that one should add a listener, like

listeners: {
    'up' : 'upAction',
    'down' : 'downAction',
}

you still can override the methods, but that's probably not how ripple element was supposed to be used:

ready: function(){
   this.ripplesDownAction = this.$.ripple.downAction.bind(this.$.ripple);
   this.$.ripple.downAction = this.downAction.bind(this);
},

downAction: function(e) {
    console.log('sssssssssssssssssssssssss');
    this.ripplesDownAction();
}