Home | History | Annotate | Download | only in paper-behaviors 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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