Polymer Paper Ripple

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 change

Solution 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-panelclass="fit"><paper-toolbarclass="toolbar"><paper-icon-buttonicon="menu"paper-drawer-toggle></paper-icon-button><divflexclass="indent title">Heading</div><paper-rippleid="ripple"center></paper-ripple></paper-toolbar><div><paper-buttonclass="def background-blue"raisedon-mousedown="_onMousedown"on-mouseup="_onMouseup">Go blue</paper-button><paper-buttonclass="def background-red"raisedon-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.

Solution 2:

I'm not entirely sure what you're trying to do here, but Polymer takes care of most of the heavy lifting for you. If you just want to style the color of the ripple effect, the docs suggest using the selector:

#my-button::shadow paper-ripple {
  color: blue;
}

If you want to more permanently change the color of the button, something like the toggles attribute might help. (Google's demo is here)

html:

<paper-button toggles>button text</paper-button>

css:

#my-button[active] {
  background-color: red;
} 

although if you'd want to keep it that color you'd have to set up the button to ignore further click events so it kept its active attribute.