Polymer paper ripple

Question

I am trying to change the color of an element when a button is pressed. I want a paper ripple effect to be triggered in that element when the button is pressed and the color changes.

How am I supposed to do that?

Target element:

<paper-toolbar class="abc">
    <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
    <div flex class="indent title">Heading</div>
</paper-toolbar>                

Trigger element:

<paper-button class="def background-blue"></paper-button>
<paper-button class="def background-red"></paper-button>

Javascript:

$(".def").click(function(){
    $(".abc").css("background-color", $(this).css("background-color"));
});

Answer 1

Instead of manipulating styles directly on the paper-toolbar, a more element approach is to add a paper-ripple element next to your paper-toolbar and manually call downAction/upAction when mousedown/mouseup is invoked on your paper-buttons.

<paper-header-panel class="fit">
    <paper-toolbar class="toolbar">
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div flex class="indent title">Heading</div>

        <paper-ripple id="ripple" center></paper-ripple>
    </paper-toolbar> 

    <div>
        <paper-button class="def background-blue"raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go blue</paper-button>
        <paper-button class="def background-red" raised on-mousedown="_onMousedown" on-mouseup="_onMouseup">Go red</paper-button>
    </div>
</paper-header-panel>

Note that the background color of paper-ripple is color.

_assignColor: function(e) {
     var button = Polymer.dom(e).localTarget;
     var ripple = this.$.ripple;

     $(ripple).css("color", $(button).css("background-color"));  

     // or without jQuery
     //var buttonStyle = getComputedStyle(button, null);
     //ripple.style.color = buttonStyle.backgroundColor;        
},

 _onMousedown: function (e) {
    this._assignColor(e);

     this.$.ripple.downAction({x: e.x, y: e.y});
 },

 _onMouseup: function (e) {
     this._assignColor(e);

     this.$.ripple.upAction();
 }   

Have a look at this plunker.