Added Polymer 0.5.4

polymer_0.5.4/bower_components/paper-toggle-button/paper-toggle-button.html

 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <!--
 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
 by tapping or by dragging the swtich.
 
 Example:
 
     <paper-toggle-button></paper-toggle-button>
 
 Styling toggle button:
 
-To change the ink color for checked state:
+To change the toggle color:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
+    paper-toggle-button::shadow .toggle {
+      background-color: #9c27b0;
+    }
+
+To change the ink color:
+    
+    paper-toggle-button::shadow .toggle-ink {
+      color: #009688;
+    }
+
+To change the checked toggle color:
+
+    paper-toggle-button::shadow [checked] .toggle {
+      background-color: #4285f4;
+    }
+
+To change the checked ink color:
+
+    paper-toggle-button::shadow [checked] .toggle-ink {
       color: #4285f4;
     }
-    
-To change the radio checked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
-      background-color: #4285f4;
-    }
-    
-To change the bar color for checked state:
 
-    paper-toggle-button::shadow #toggleBar[checked] {
-      background-color: #4285f4;
-    }
-    
-To change the ink color for unchecked state:
+To change the toggle bar and toggle button colors separately:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink {
-      color: #b5b5b5;
-    }
-    
-To change the radio unchecked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
-      border-color: #b5b5b5;
+    paper-toggle-button::shadow .toggle-bar {
+      background-color: #5677fc;
     }
 
-To change the bar color for unchecked state:
-
-    paper-toggle-button::shadow #toggleBar {
-      background-color: red;
+    paper-toggle-button::shadow .toggle-button {
+      background-color: #9c27b0;
     }
 
 @group Paper Elements
 @element paper-toggle-button
 @homepage github.io
 -->
 
 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
 <polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
 <template>
 
   <link rel="stylesheet" href="paper-toggle-button.css">
 
-  <div id="toggleContainer" disabled?="{{disabled}}">
+  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
+
+  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
   
-    <div id="toggleBar" checked?="{{checked}}"></div>
-  
-    <paper-radio-button id="toggleRadio" toggles checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}"
-        on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
-    
+    <div id="toggleBar" class="toggle toggle-bar"></div>
+
+    <div id="toggleButton" class="toggle toggle-button">
+      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
+    </div>
+
   </div>
 
 </template>
 <script>
 
   Polymer('paper-toggle-button', {
     
     /**
      * Fired when the checked state changes due to user interaction.
      *
      * @event change
      */
      
     /**
      * Fired when the checked state changes.
      *
      * @event core-change
      */
 
     /**
      * Gets or sets the state, `true` is checked and `false` is unchecked.
      *
      * @attribute checked
      * @type boolean
      * @default false
      */
     checked: false,
-    
+
     /**
      * If true, the toggle button is disabled.  A disabled toggle button cannot
      * be tapped or dragged to change the checked state.
      *
      * @attribute disabled
      * @type boolean
      * @default false
      */
     disabled: false,
 
+    eventDelegates: {
+      down: 'downAction',
+      up: 'upAction',
+      tap: 'tap',
+      trackstart: 'trackStart',
+      trackx: 'trackx',
+      trackend: 'trackEnd'
+    },
+
+    downAction: function(e) {
+      var rect = this.$.ink.getBoundingClientRect();
+      this.$.ink.downAction({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      });
+    },
+
+    upAction: function(e) {
+      this.$.ink.upAction();
+    },
+
+    tap: function() {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.fire('change');
+    },
+
     trackStart: function(e) {
-      this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth;
+      if (this.disabled) {
+        return;
+      }
+      this._w = this.$.toggleBar.offsetWidth / 2;
       e.preventTap();
     },
 
     trackx: function(e) {
       this._x = Math.min(this._w, 
           Math.max(0, this.checked ? this._w + e.dx : e.dx));
-      this.$.toggleRadio.classList.add('dragging');
-      var s =  this.$.toggleRadio.style;
+      this.$.toggleButton.classList.add('dragging');
+      var s =  this.$.toggleButton.style;
       s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
     },
 
     trackEnd: function() {
-      var s =  this.$.toggleRadio.style;
+      var s =  this.$.toggleButton.style;
       s.transform = s.webkitTransform = '';
-      this.$.toggleRadio.classList.remove('dragging');
+      this.$.toggleButton.classList.remove('dragging');
       var old = this.checked;
       this.checked = Math.abs(this._x) > this._w / 2;
       if (this.checked !== old) {
         this.fire('change');
       }
     },
     
     checkedChanged: function() {
       this.setAttribute('aria-pressed', Boolean(this.checked));
       this.fire('core-change');
-    },
-    
-    changeAction: function(e) {
-      e.stopPropagation();
-      this.fire('change');
-    },
-    
-    stopPropagation: function(e) {
-      e.stopPropagation();
     }
 
   });
 
 </script>
 </polymer-element>