Home | History | Annotate | Download | only in paper-shadow 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      8 -->
      9 
     10 <!--
     11 
     12 `paper-shadow` is a container that renders two shadows on top of each other to
     13 create the effect of a lifted piece of paper.
     14 
     15 Example:
     16 
     17     <paper-shadow z="1">
     18       ... card content ...
     19     </paper-shadow>
     20 
     21 @group Paper Elements
     22 @class paper-shadow
     23 -->
     24 
     25 <link href="../polymer/polymer.html" rel="import">
     26 
     27 <link href="paper-shadow.css" rel="stylesheet" shim-shadowdom>
     28 
     29 <polymer-element name="paper-shadow">
     30 
     31 <template>
     32 
     33   <div id="shadow-bottom" fit animated?="[[animated]]" class="paper-shadow-bottom-z-[[z]]"></div>
     34   <div id="shadow-top" fit animated?="[[animated]]" class="paper-shadow-top-z-[[z]]"></div>
     35 
     36   <content></content>
     37 
     38 </template>
     39 
     40 <script>
     41   Polymer({
     42 
     43     publish: {
     44 
     45       /**
     46        * The z-depth of this shadow, from 0-5. Setting this property
     47        * after element creation has no effect. Use `setZ()` instead.
     48        *
     49        * @attribute z
     50        * @type number
     51        * @default 1
     52        */
     53       z: 1,
     54 
     55       /**
     56        * Set this to true to animate the shadow when setting a new
     57        * `z` value.
     58        *
     59        * @attribute animated
     60        * @type boolean
     61        * @default false
     62        */
     63       animated: false
     64 
     65     },
     66 
     67     /**
     68      * Set the z-depth of the shadow. This should be used after element
     69      * creation instead of setting the z property directly.
     70      *
     71      * @method setZ
     72      * @param {Number} newZ
     73      */
     74     setZ: function(newZ) {
     75       if (this.z !== newZ) {
     76         this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
     77         this.$['shadow-bottom'].classList.add('paper-shadow-bottom-z-' + newZ);
     78         this.$['shadow-top'].classList.remove('paper-shadow-top-z-' + this.z);
     79         this.$['shadow-top'].classList.add('paper-shadow-top-z-' + newZ);
     80         this.z = newZ;
     81       }
     82     }
     83 
     84   });
     85 </script>
     86 </polymer-element>
     87