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 /** 17 * `Polymer.PaperRippleBehavior` dynamically implements a ripple 18 * when the element has focus via pointer or keyboard. 19 * 20 * NOTE: This behavior is intended to be used in conjunction with and after 21 * `Polymer.IronButtonState` and `Polymer.IronControlState`. 22 * 23 * @polymerBehavior Polymer.PaperRippleBehavior 24 */ 25 Polymer.PaperRippleBehavior = { 26 27 properties: { 28 /** 29 * If true, the element will not produce a ripple effect when interacted 30 * with via the pointer. 31 */ 32 noink: { 33 type: Boolean, 34 observer: '_noinkChanged' 35 }, 36 37 /** 38 * @type {Element|undefined} 39 */ 40 _rippleContainer: { 41 type: Object, 42 } 43 }, 44 45 /** 46 * Ensures a `<paper-ripple>` element is available when the element is 47 * focused. 48 */ 49 _buttonStateChanged: function() { 50 if (this.focused) { 51 this.ensureRipple(); 52 } 53 }, 54 55 /** 56 * In addition to the functionality provided in `IronButtonState`, ensures 57 * a ripple effect is created when the element is in a `pressed` state. 58 */ 59 _downHandler: function(event) { 60 Polymer.IronButtonStateImpl._downHandler.call(this, event); 61 if (this.pressed) { 62 this.ensureRipple(event); 63 } 64 }, 65 66 /** 67 * Ensures this element contains a ripple effect. For startup efficiency 68 * the ripple effect is dynamically on demand when needed. 69 * @param {!Event=} optTriggeringEvent (optional) event that triggered the 70 * ripple. 71 */ 72 ensureRipple: function(optTriggeringEvent) { 73 if (!this.hasRipple()) { 74 this._ripple = this._createRipple(); 75 this._ripple.noink = this.noink; 76 var rippleContainer = this._rippleContainer || this.root; 77 if (rippleContainer) { 78 Polymer.dom(rippleContainer).appendChild(this._ripple); 79 } 80 if (optTriggeringEvent) { 81 // Check if the event happened inside of the ripple container 82 // Fall back to host instead of the root because distributed text 83 // nodes are not valid event targets 84 var domContainer = Polymer.dom(this._rippleContainer || this); 85 var target = Polymer.dom(optTriggeringEvent).rootTarget; 86 if (domContainer.deepContains( /** @type {Node} */(target))) { 87 this._ripple.uiDownAction(optTriggeringEvent); 88 } 89 } 90 } 91 }, 92 93 /** 94 * Returns the `<paper-ripple>` element used by this element to create 95 * ripple effects. The element's ripple is created on demand, when 96 * necessary, and calling this method will force the 97 * ripple to be created. 98 */ 99 getRipple: function() { 100 this.ensureRipple(); 101 return this._ripple; 102 }, 103 104 /** 105 * Returns true if this element currently contains a ripple effect. 106 * @return {boolean} 107 */ 108 hasRipple: function() { 109 return Boolean(this._ripple); 110 }, 111 112 /** 113 * Create the element's ripple effect via creating a `<paper-ripple>`. 114 * Override this method to customize the ripple element. 115 * @return {!PaperRippleElement} Returns a `<paper-ripple>` element. 116 */ 117 _createRipple: function() { 118 return /** @type {!PaperRippleElement} */ ( 119 document.createElement('paper-ripple')); 120 }, 121 122 _noinkChanged: function(noink) { 123 if (this.hasRipple()) { 124 this._ripple.noink = noink; 125 } 126 } 127 128 }; 129 130</script> 131