Home | History | Annotate | Download | only in paper-spinner 
      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 
     13 <script>
     14 
     15   /** @polymerBehavior */
     16   Polymer.PaperSpinnerBehavior = {
     17 
     18     listeners: {
     19       'animationend': '__reset',
     20       'webkitAnimationEnd': '__reset'
     21     },
     22 
     23     properties: {
     24       /**
     25        * Displays the spinner.
     26        */
     27       active: {
     28         type: Boolean,
     29         value: false,
     30         reflectToAttribute: true,
     31         observer: '__activeChanged'
     32       },
     33 
     34       /**
     35        * Alternative text content for accessibility support.
     36        * If alt is present, it will add an aria-label whose content matches alt when active.
     37        * If alt is not present, it will default to 'loading' as the alt value.
     38        */
     39       alt: {
     40         type: String,
     41         value: 'loading',
     42         observer: '__altChanged'
     43       },
     44 
     45       __coolingDown: {
     46         type: Boolean,
     47         value: false
     48       }
     49     },
     50 
     51     __computeContainerClasses: function(active, coolingDown) {
     52       return [
     53         active || coolingDown ? 'active' : '',
     54         coolingDown ? 'cooldown' : ''
     55       ].join(' ');
     56     },
     57 
     58     __activeChanged: function(active, old) {
     59       this.__setAriaHidden(!active);
     60       this.__coolingDown = !active && old;
     61     },
     62 
     63     __altChanged: function(alt) {
     64       // user-provided `aria-label` takes precedence over prototype default
     65       if (alt === this.getPropertyInfo('alt').value) {
     66         this.alt = this.getAttribute('aria-label') || alt;
     67       } else {
     68         this.__setAriaHidden(alt==='');
     69         this.setAttribute('aria-label', alt);
     70       }
     71     },
     72 
     73     __setAriaHidden: function(hidden) {
     74       var attr = 'aria-hidden';
     75       if (hidden) {
     76         this.setAttribute(attr, 'true');
     77       } else {
     78         this.removeAttribute(attr);
     79       }
     80     },
     81 
     82     __reset: function() {
     83       this.active = false;
     84       this.__coolingDown = false;
     85     }
     86   };
     87 </script>
     88