1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10 11<link rel="import" href="../polymer/polymer.html"> 12<link rel="import" href="../paper-ripple/paper-ripple.html"> 13 14<script> 15 /** 16 * `Polymer.PaperRippleBehavior` dynamically implements a ripple 17 * when the element has focus via pointer or keyboard. 18 * 19 * NOTE: This behavior is intended to be used in conjunction with and after 20 * `Polymer.IronButtonState` and `Polymer.IronControlState`. 21 * 22 * @polymerBehavior Polymer.PaperRippleBehavior 23 */ 24 Polymer.PaperRippleBehavior = { 25 properties: { 26 /** 27 * If true, the element will not produce a ripple effect when interacted 28 * with via the pointer. 29 */ 30 noink: { 31 type: Boolean, 32 observer: '_noinkChanged' 33 }, 34 35 /** 36 * @type {Element|undefined} 37 */ 38 _rippleContainer: { 39 type: Object, 40 } 41 }, 42 43 /** 44 * Ensures a `<paper-ripple>` element is available when the element is 45 * focused. 46 */ 47 _buttonStateChanged: function() { 48 if (this.focused) { 49 this.ensureRipple(); 50 } 51 }, 52 53 /** 54 * In addition to the functionality provided in `IronButtonState`, ensures 55 * a ripple effect is created when the element is in a `pressed` state. 56 */ 57 _downHandler: function(event) { 58 Polymer.IronButtonStateImpl._downHandler.call(this, event); 59 if (this.pressed) { 60 this.ensureRipple(event); 61 } 62 }, 63 64 /** 65 * Ensures this element contains a ripple effect. For startup efficiency 66 * the ripple effect is dynamically on demand when needed. 67 * @param {!Event=} optTriggeringEvent (optional) event that triggered the 68 * ripple. 69 */ 70 ensureRipple: function(optTriggeringEvent) { 71 if (!this.hasRipple()) { 72 this._ripple = this._createRipple(); 73 this._ripple.noink = this.noink; 74 var rippleContainer = this._rippleContainer || this.root; 75 if (rippleContainer) { 76 Polymer.dom(rippleContainer).appendChild(this._ripple); 77 } 78 if (optTriggeringEvent) { 79 // Check if the event happened inside of the ripple container 80 // Fall back to host instead of the root because distributed text 81 // nodes are not valid event targets 82 var domContainer = Polymer.dom(this._rippleContainer || this); 83 var target = Polymer.dom(optTriggeringEvent).rootTarget; 84 if (domContainer.deepContains( /** @type {Node} */(target))) { 85 this._ripple.uiDownAction(optTriggeringEvent); 86 } 87 } 88 } 89 }, 90 91 /** 92 * Returns the `<paper-ripple>` element used by this element to create 93 * ripple effects. The element's ripple is created on demand, when 94 * necessary, and calling this method will force the 95 * ripple to be created. 96 */ 97 getRipple: function() { 98 this.ensureRipple(); 99 return this._ripple; 100 }, 101 102 /** 103 * Returns true if this element currently contains a ripple effect. 104 * @return {boolean} 105 */ 106 hasRipple: function() { 107 return Boolean(this._ripple); 108 }, 109 110 /** 111 * Create the element's ripple effect via creating a `<paper-ripple>`. 112 * Override this method to customize the ripple element. 113 * @return {!PaperRippleElement} Returns a `<paper-ripple>` element. 114 */ 115 _createRipple: function() { 116 return /** @type {!PaperRippleElement} */ ( 117 document.createElement('paper-ripple')); 118 }, 119 120 _noinkChanged: function(noink) { 121 if (this.hasRipple()) { 122 this._ripple.noink = noink; 123 } 124 } 125 }; 126</script> 127