Skip to content

GitLab

T
tangled
Commit 853f5432 authored by michaelpg's avatar michaelpg Committed by Commit bot
Browse files
Options

Update paper-toggle-button to 0.5.4 

The latest <paper-toggle-button> matches the Material Design spec. The
MD-Settings page will make use of this button in a follow-up CL.

Since paper-toggle-button isn't currently used in Chromium there shouldn't
be any side effects for this change.

R=rsadam@chromium.org

Review URL: https://codereview.chromium.org/899383002

Cr-Commit-Position: refs/heads/master@{#315078}
parent a9ac53f0
Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 192 deletions
third_party/polymer/README.chromium
View file @ 853f5432
Name: Polymer Name: Polymer
Short Name: polymer Short Name: polymer
URL: http://www.polymer-project.org URL: http://www.polymer-project.org
Version: 0.5.2 Version: 0.5.2-4
Revision: (See components/<component>/.bower.json) Revision: (See components/<component>/.bower.json)
License: BSD License: BSD
License File: LICENSE.polymer License File: LICENSE.polymer
......
third_party/polymer/bower.json
View file @ 853f5432
...@@ -63,6 +63,6 @@ ...@@ -63,6 +63,6 @@
"paper-spinner": "Polymer/paper-spinner#0.5.2", "paper-spinner": "Polymer/paper-spinner#0.5.2",
"paper-tabs": "Polymer/paper-tabs#0.5.2", "paper-tabs": "Polymer/paper-tabs#0.5.2",
"paper-toast": "Polymer/paper-toast#0.5.2", "paper-toast": "Polymer/paper-toast#0.5.2",
"paper-toggle-button": "Polymer/paper-toggle-button#0.5.2" "paper-toggle-button": "Polymer/paper-toggle-button#0.5.4"
} }
} }
third_party/polymer/components-chromium/paper-toggle-button/.bower.json
View file @ 853f5432
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
"name": "paper-toggle-button", "name": "paper-toggle-button",
"private": true, "private": true,
"dependencies": { "dependencies": {
"font-roboto": "Polymer/font-roboto#^0.5.0", "font-roboto": "Polymer/font-roboto#^0.5",
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0" "paper-radio-button": "Polymer/paper-radio-button#^0.5"
}, },
"version": "0.5.2", "version": "0.5.4",
"homepage": "https://github.com/Polymer/paper-toggle-button", "homepage": "https://github.com/Polymer/paper-toggle-button",
"_release": "0.5.2", "_release": "0.5.4",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "0.5.2", "tag": "0.5.4",
"commit": "3fd4732c10180252a54d0199a4c15fafd220523a" "commit": "b4cc158803ac87b1571f8c07c0d862ec89b10786"
}, },
"_source": "git://github.com/Polymer/paper-toggle-button.git", "_source": "git://github.com/Polymer/paper-toggle-button.git",
"_target": "0.5.2", "_target": "0.5.4",
"_originalSource": "Polymer/paper-toggle-button" "_originalSource": "Polymer/paper-toggle-button"
} }
\ No newline at end of file
third_party/polymer/components-chromium/paper-toggle-button/bower.json
View file @ 853f5432
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
"name": "paper-toggle-button", "name": "paper-toggle-button",
"private": true, "private": true,
"dependencies": { "dependencies": {
"font-roboto": "Polymer/font-roboto#^0.5.0", "font-roboto": "Polymer/font-roboto#^0.5",
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0" "paper-radio-button": "Polymer/paper-radio-button#^0.5"
}, },
"version": "0.5.2" "version": "0.5.4"
} }
\ No newline at end of file
third_party/polymer/components-chromium/paper-toggle-button/demo.html
View file @ 853f5432
...@@ -27,10 +27,6 @@ ...@@ -27,10 +27,6 @@
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0; margin: 0;
padding: 24px; padding: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
...@@ -38,17 +34,25 @@ ...@@ -38,17 +34,25 @@
section { section {
width: 200px; width: 200px;
} }
paper-toggle-button.blue::shadow paper-radio-button::shadow #ink[checked] { paper-toggle-button.bluetooth::shadow [checked] .toggle-ink {
color: #4285f4; color: #4285f4;
} }
paper-toggle-button.blue::shadow paper-radio-button::shadow #onRadio { paper-toggle-button.bluetooth::shadow [checked] .toggle {
background-color: #4285f4; background-color: #4285f4;
} }
paper-toggle-button.blue::shadow #toggleBar[checked] { paper-toggle-button.fun::shadow .toggle-ink {
background-color: #4285f4; color: #009688;
}
paper-toggle-button.fun::shadow .toggle-bar {
background-color: #5677fc;
}
paper-toggle-button.fun::shadow .toggle-button {
background-color: #9c27b0;
} }
</style> </style>
...@@ -68,7 +72,23 @@ ...@@ -68,7 +72,23 @@
<div center horizontal layout> <div center horizontal layout>
<div flex>Bluetooth</div> <div flex>Bluetooth</div>
<paper-toggle-button class="blue"></paper-toggle-button> <paper-toggle-button class="bluetooth"></paper-toggle-button>
</div>
<br>
<br>
<div center horizontal layout>
<div flex>Custom Colors</div>
<paper-toggle-button class="fun"></paper-toggle-button>
</div>
<br>
<br>
<div center horizontal layout>
<div flex>Disabled</div>
<paper-toggle-button disabled></paper-toggle-button>
</div> </div>
</section> </section>
......
third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js
View file @ 853f5432
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
* @default false * @default false
*/ */
checked: false, checked: false,
/** /**
* If true, the toggle button is disabled. A disabled toggle button cannot * If true, the toggle button is disabled. A disabled toggle button cannot
* be tapped or dragged to change the checked state. * be tapped or dragged to change the checked state.
...@@ -33,23 +33,55 @@ ...@@ -33,23 +33,55 @@
*/ */
disabled: 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) { trackStart: function(e) {
this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth; if (this.disabled) {
return;
}
this._w = this.$.toggleBar.offsetWidth / 2;
e.preventTap(); e.preventTap();
}, },
trackx: function(e) { trackx: function(e) {
this._x = Math.min(this._w, this._x = Math.min(this._w,
Math.max(0, this.checked ? this._w + e.dx : e.dx)); Math.max(0, this.checked ? this._w + e.dx : e.dx));
this.$.toggleRadio.classList.add('dragging'); this.$.toggleButton.classList.add('dragging');
var s = this.$.toggleRadio.style; var s = this.$.toggleButton.style;
s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)'; s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
}, },
trackEnd: function() { trackEnd: function() {
var s = this.$.toggleRadio.style; var s = this.$.toggleButton.style;
s.transform = s.webkitTransform = ''; s.transform = s.webkitTransform = '';
this.$.toggleRadio.classList.remove('dragging'); this.$.toggleButton.classList.remove('dragging');
var old = this.checked; var old = this.checked;
this.checked = Math.abs(this._x) > this._w / 2; this.checked = Math.abs(this._x) > this._w / 2;
if (this.checked !== old) { if (this.checked !== old) {
...@@ -60,15 +92,6 @@ ...@@ -60,15 +92,6 @@
checkedChanged: function() { checkedChanged: function() {
this.setAttribute('aria-pressed', Boolean(this.checked)); this.setAttribute('aria-pressed', Boolean(this.checked));
this.fire('core-change'); this.fire('core-change');
},
changeAction: function(e) {
e.stopPropagation();
this.fire('change');
},
stopPropagation: function(e) {
e.stopPropagation();
} }
}); });
......
third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
View file @ 853f5432
...@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN ...@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
outline: none; outline: none;
} }
#toggleContainer { /* Class selectors can be overridden by users. */
position: relative;
width: 64px; .toggle-bar {
height: 16px; background-color: #000000;
} }
#toggleBar { .toggle-button {
position: absolute; background-color: #f1f1f1;
top: 8px;
left: 16px;
height: 1px;
width: 32px;
background-color: #5a5a5a;
pointer-events: none;
} }
#toggleBar[checked] { [checked] .toggle {
background-color: #0f9d58; background-color: #0f9d58;
} }
#toggleContainer[checked] #checkedBar { .toggle-ink {
width: 100%; color: #bbb;
}
[checked] .toggle-ink {
color: #0f9d58;
}
/* ID selectors should not be overriden by users. */
#toggleContainer {
position: relative;
width: 36px;
height: 14px;
}
#toggleContainer[disabled] {
opacity: 0.3;
pointer-events: none;
} }
#toggleRadio { #toggleBar {
position: absolute; position: absolute;
left: 0; height: 100%;
padding: 8px 48px 8px 0; width: 100%;
margin: -8px -48px -8px 0; border-radius: 8px;
transition: -webkit-transform linear .08s; pointer-events: none;
transition: transform linear .08s; opacity: 0.26;
transition: background-color linear .08s;
} }
#toggleRadio[checked] { [checked] #toggleBar {
-webkit-transform: translate(48px, 0); opacity: 0.5;
transform: translate(48px, 0);
padding: 8px 0 8px 48px;
margin: -8px 0 -8px -48px;
} }
#toggleRadio.dragging { #toggleButton {
position: absolute;
top: -3px;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
transition: -webkit-transform linear .08s, background-color linear .08s;
transition: transform linear .08s, background-color linear .08s;
}
#toggleButton.dragging {
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
} }
/* disabled state */ [checked] #toggleButton {
#toggleContainer[disabled] { -webkit-transform: translate(16px, 0);
opacity: 0.3; transform: translate(16px, 0);
}
#ink {
position: absolute;
top: -14px;
left: -14px;
width: 48px;
height: 48px;
pointer-events: none; pointer-events: none;
} }
third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html
View file @ 853f5432
...@@ -15,61 +15,64 @@ Example: ...@@ -15,61 +15,64 @@ Example:
Styling 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 {
color: #4285f4; background-color: #9c27b0;
} }
To change the ink color:
To change the radio checked color: paper-toggle-button::shadow .toggle-ink {
color: #009688;
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] { To change the checked toggle color:
paper-toggle-button::shadow [checked] .toggle {
background-color: #4285f4; background-color: #4285f4;
} }
To change the ink color for unchecked state:
paper-toggle-button::shadow paper-radio-button::shadow #ink { To change the checked ink color:
color: #b5b5b5;
} paper-toggle-button::shadow [checked] .toggle-ink {
color: #4285f4;
To change the radio unchecked color:
paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
border-color: #b5b5b5;
} }
To change the bar color for unchecked state: To change the toggle bar and toggle button colors separately:
paper-toggle-button::shadow #toggleBar { paper-toggle-button::shadow .toggle-bar {
background-color: red; background-color: #5677fc;
}
paper-toggle-button::shadow .toggle-button {
background-color: #9c27b0;
} }
@group Paper Elements @group Paper Elements
@element paper-toggle-button @element paper-toggle-button
@homepage github.io @homepage github.io
--><html><head><link rel="import" href="../paper-radio-button/paper-radio-button.html"> --><html><head><link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
</head><body><polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0" assetpath=""> </head><body><polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0" assetpath="">
<template> <template>
<link rel="stylesheet" href="paper-toggle-button.css"> <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="toggleBar" checked?="{{checked}}"></div> <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
<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> </div>
</template> </template>
</polymer-element> </polymer-element>
<script src="paper-toggle-button-extracted.js"></script></body></html> <script charset="utf-8" src="paper-toggle-button-extracted.js"></script></body></html>
\ No newline at end of file \ No newline at end of file
third_party/polymer/components/paper-toggle-button/.bower.json
View file @ 853f5432
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
"name": "paper-toggle-button", "name": "paper-toggle-button",
"private": true, "private": true,
"dependencies": { "dependencies": {
"font-roboto": "Polymer/font-roboto#^0.5.0", "font-roboto": "Polymer/font-roboto#^0.5",
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0" "paper-radio-button": "Polymer/paper-radio-button#^0.5"
}, },
"version": "0.5.2", "version": "0.5.4",
"homepage": "https://github.com/Polymer/paper-toggle-button", "homepage": "https://github.com/Polymer/paper-toggle-button",
"_release": "0.5.2", "_release": "0.5.4",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "0.5.2", "tag": "0.5.4",
"commit": "3fd4732c10180252a54d0199a4c15fafd220523a" "commit": "b4cc158803ac87b1571f8c07c0d862ec89b10786"
}, },
"_source": "git://github.com/Polymer/paper-toggle-button.git", "_source": "git://github.com/Polymer/paper-toggle-button.git",
"_target": "0.5.2", "_target": "0.5.4",
"_originalSource": "Polymer/paper-toggle-button" "_originalSource": "Polymer/paper-toggle-button"
} }
\ No newline at end of file
third_party/polymer/components/paper-toggle-button/bower.json
View file @ 853f5432
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
"name": "paper-toggle-button", "name": "paper-toggle-button",
"private": true, "private": true,
"dependencies": { "dependencies": {
"font-roboto": "Polymer/font-roboto#^0.5.0", "font-roboto": "Polymer/font-roboto#^0.5",
"paper-radio-button": "Polymer/paper-radio-button#^0.5.0" "paper-radio-button": "Polymer/paper-radio-button#^0.5"
}, },
"version": "0.5.2" "version": "0.5.4"
} }
\ No newline at end of file
third_party/polymer/components/paper-toggle-button/demo.html
View file @ 853f5432
...@@ -27,10 +27,6 @@ ...@@ -27,10 +27,6 @@
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0; margin: 0;
padding: 24px; padding: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
...@@ -38,17 +34,25 @@ ...@@ -38,17 +34,25 @@
section { section {
width: 200px; width: 200px;
} }
paper-toggle-button.blue::shadow paper-radio-button::shadow #ink[checked] { paper-toggle-button.bluetooth::shadow [checked] .toggle-ink {
color: #4285f4; color: #4285f4;
} }
paper-toggle-button.blue::shadow paper-radio-button::shadow #onRadio { paper-toggle-button.bluetooth::shadow [checked] .toggle {
background-color: #4285f4; background-color: #4285f4;
} }
paper-toggle-button.blue::shadow #toggleBar[checked] { paper-toggle-button.fun::shadow .toggle-ink {
background-color: #4285f4; color: #009688;
}
paper-toggle-button.fun::shadow .toggle-bar {
background-color: #5677fc;
}
paper-toggle-button.fun::shadow .toggle-button {
background-color: #9c27b0;
} }
</style> </style>
...@@ -68,7 +72,23 @@ ...@@ -68,7 +72,23 @@
<div center horizontal layout> <div center horizontal layout>
<div flex>Bluetooth</div> <div flex>Bluetooth</div>
<paper-toggle-button class="blue"></paper-toggle-button> <paper-toggle-button class="bluetooth"></paper-toggle-button>
</div>
<br>
<br>
<div center horizontal layout>
<div flex>Custom Colors</div>
<paper-toggle-button class="fun"></paper-toggle-button>
</div>
<br>
<br>
<div center horizontal layout>
<div flex>Disabled</div>
<paper-toggle-button disabled></paper-toggle-button>
</div> </div>
</section> </section>
......
third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
View file @ 853f5432
...@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN ...@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
outline: none; outline: none;
} }
#toggleContainer { /* Class selectors can be overridden by users. */
position: relative;
width: 64px; .toggle-bar {
height: 16px; background-color: #000000;
} }
#toggleBar { .toggle-button {
position: absolute; background-color: #f1f1f1;
top: 8px;
left: 16px;
height: 1px;
width: 32px;
background-color: #5a5a5a;
pointer-events: none;
} }
#toggleBar[checked] { [checked] .toggle {
background-color: #0f9d58; background-color: #0f9d58;
} }
#toggleContainer[checked] #checkedBar { .toggle-ink {
width: 100%; color: #bbb;
}
[checked] .toggle-ink {
color: #0f9d58;
}
/* ID selectors should not be overriden by users. */
#toggleContainer {
position: relative;
width: 36px;
height: 14px;
}
#toggleContainer[disabled] {
opacity: 0.3;
pointer-events: none;
} }
#toggleRadio { #toggleBar {
position: absolute; position: absolute;
left: 0; height: 100%;
padding: 8px 48px 8px 0; width: 100%;
margin: -8px -48px -8px 0; border-radius: 8px;
transition: -webkit-transform linear .08s; pointer-events: none;
transition: transform linear .08s; opacity: 0.26;
transition: background-color linear .08s;
} }
#toggleRadio[checked] { [checked] #toggleBar {
-webkit-transform: translate(48px, 0); opacity: 0.5;
transform: translate(48px, 0);
padding: 8px 0 8px 48px;
margin: -8px 0 -8px -48px;
} }
#toggleRadio.dragging { #toggleButton {
position: absolute;
top: -3px;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
transition: -webkit-transform linear .08s, background-color linear .08s;
transition: transform linear .08s, background-color linear .08s;
}
#toggleButton.dragging {
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
} }
/* disabled state */ [checked] #toggleButton {
#toggleContainer[disabled] { -webkit-transform: translate(16px, 0);
opacity: 0.3; transform: translate(16px, 0);
}
#ink {
position: absolute;
top: -14px;
left: -14px;
width: 48px;
height: 48px;
pointer-events: none; pointer-events: none;
} }
third_party/polymer/components/paper-toggle-button/paper-toggle-button.html
View file @ 853f5432
...@@ -17,40 +17,38 @@ Example: ...@@ -17,40 +17,38 @@ Example:
Styling 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 {
color: #4285f4; background-color: #9c27b0;
} }
To change the ink color:
To change the radio checked color: paper-toggle-button::shadow .toggle-ink {
color: #009688;
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] { To change the checked toggle color:
paper-toggle-button::shadow [checked] .toggle {
background-color: #4285f4; background-color: #4285f4;
} }
To change the ink color for unchecked state:
paper-toggle-button::shadow paper-radio-button::shadow #ink { To change the checked ink color:
color: #b5b5b5;
} paper-toggle-button::shadow [checked] .toggle-ink {
color: #4285f4;
To change the radio unchecked color:
paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
border-color: #b5b5b5;
} }
To change the bar color for unchecked state: To change the toggle bar and toggle button colors separately:
paper-toggle-button::shadow #toggleBar { paper-toggle-button::shadow .toggle-bar {
background-color: red; background-color: #5677fc;
}
paper-toggle-button::shadow .toggle-button {
background-color: #9c27b0;
} }
@group Paper Elements @group Paper Elements
...@@ -59,19 +57,23 @@ To change the bar color for unchecked state: ...@@ -59,19 +57,23 @@ To change the bar color for unchecked state:
--> -->
<link rel="import" href="../paper-radio-button/paper-radio-button.html"> <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"> <polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
<template> <template>
<link rel="stylesheet" href="paper-toggle-button.css"> <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="toggleBar" checked?="{{checked}}"></div> <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
<paper-radio-button id="toggleRadio" toggles checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}" <div id="toggleBar" class="toggle toggle-bar"></div>
on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
<div id="toggleButton" class="toggle toggle-button">
<paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
</div>
</div> </div>
</template> </template>
...@@ -99,7 +101,7 @@ To change the bar color for unchecked state: ...@@ -99,7 +101,7 @@ To change the bar color for unchecked state:
* @default false * @default false
*/ */
checked: false, checked: false,
/** /**
* If true, the toggle button is disabled. A disabled toggle button cannot * If true, the toggle button is disabled. A disabled toggle button cannot
* be tapped or dragged to change the checked state. * be tapped or dragged to change the checked state.
...@@ -110,23 +112,55 @@ To change the bar color for unchecked state: ...@@ -110,23 +112,55 @@ To change the bar color for unchecked state:
*/ */
disabled: 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) { trackStart: function(e) {
this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth; if (this.disabled) {
return;
}
this._w = this.$.toggleBar.offsetWidth / 2;
e.preventTap(); e.preventTap();
}, },
trackx: function(e) { trackx: function(e) {
this._x = Math.min(this._w, this._x = Math.min(this._w,
Math.max(0, this.checked ? this._w + e.dx : e.dx)); Math.max(0, this.checked ? this._w + e.dx : e.dx));
this.$.toggleRadio.classList.add('dragging'); this.$.toggleButton.classList.add('dragging');
var s = this.$.toggleRadio.style; var s = this.$.toggleButton.style;
s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)'; s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
}, },
trackEnd: function() { trackEnd: function() {
var s = this.$.toggleRadio.style; var s = this.$.toggleButton.style;
s.transform = s.webkitTransform = ''; s.transform = s.webkitTransform = '';
this.$.toggleRadio.classList.remove('dragging'); this.$.toggleButton.classList.remove('dragging');
var old = this.checked; var old = this.checked;
this.checked = Math.abs(this._x) > this._w / 2; this.checked = Math.abs(this._x) > this._w / 2;
if (this.checked !== old) { if (this.checked !== old) {
...@@ -137,15 +171,6 @@ To change the bar color for unchecked state: ...@@ -137,15 +171,6 @@ To change the bar color for unchecked state:
checkedChanged: function() { checkedChanged: function() {
this.setAttribute('aria-pressed', Boolean(this.checked)); this.setAttribute('aria-pressed', Boolean(this.checked));
this.fire('core-change'); this.fire('core-change');
},
changeAction: function(e) {
e.stopPropagation();
this.fire('change');
},
stopPropagation: function(e) {
e.stopPropagation();
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment