update components
This commit is contained in:
parent
697257670c
commit
02ae9ec81e
123 changed files with 13600 additions and 531 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-spinner",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "A material design spinner",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -30,14 +30,13 @@
|
|||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.1",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "5e2b7412922259c9eed1805d69abb18e433efaad"
|
||||
"tag": "v1.0.2",
|
||||
"commit": "18bda194750ace719102d54c17ae1c6ce4a6793e"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-spinner.git",
|
||||
"_target": "~1.0.1",
|
||||
"_originalSource": "PolymerElements/paper-spinner",
|
||||
"_direct": true
|
||||
"_originalSource": "PolymerElements/paper-spinner"
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-spinner",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "A material design spinner",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
@ -14,7 +14,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<meta charset="UTF-8">
|
||||
<title>paper-spinner demo</title>
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../paper-spinner.html">
|
||||
|
||||
|
@ -60,14 +59,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="horizontal center-justified layout">
|
||||
<body unresolved>
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Default</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-spinner></paper-spinner>
|
||||
<paper-spinner active></paper-spinner>
|
||||
<paper-spinner active></paper-spinner>
|
||||
<paper-spinner active></paper-spinner>
|
||||
<paper-spinner></paper-spinner>
|
||||
<paper-spinner active></paper-spinner>
|
||||
<button onclick="toggle(event)">Toggle</button>
|
||||
</div>
|
||||
|
|
|
@ -26,7 +26,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
|
@ -36,6 +36,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
#spinnerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* The spinner does not have any contents that would have to be
|
||||
* flipped if the direction changes. Always use ltr so that the
|
||||
* style works out correctly in both cases. */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#spinnerContainer.active {
|
||||
|
|
|
@ -99,123 +99,101 @@ Custom property | Description | Default
|
|||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
Polymer({
|
||||
|
||||
'use strict';
|
||||
is: 'paper-spinner',
|
||||
|
||||
function classNames(obj) {
|
||||
var classNames = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classNames.push(key);
|
||||
}
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_activeChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
type: String,
|
||||
value: 'loading',
|
||||
observer: '_altChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
return classNames.join(' ');
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, coolingDown) {
|
||||
return [
|
||||
active || coolingDown ? 'active' : '',
|
||||
coolingDown ? 'cooldown' : ''
|
||||
].join(' ');
|
||||
},
|
||||
|
||||
_activeChanged: function(active, old) {
|
||||
this._setAriaHidden(!active);
|
||||
if (!active && old) {
|
||||
this._coolingDown = true;
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function(alt) {
|
||||
// user-provided `aria-label` takes precedence over prototype default
|
||||
if (alt === this.getPropertyInfo('alt').value) {
|
||||
this.alt = this.getAttribute('aria-label') || alt;
|
||||
} else {
|
||||
this._setAriaHidden(alt==='');
|
||||
this.setAttribute('aria-label', alt);
|
||||
}
|
||||
},
|
||||
|
||||
_setAriaHidden: function(hidden) {
|
||||
var attr = 'aria-hidden';
|
||||
if (hidden) {
|
||||
this.setAttribute(attr, 'true');
|
||||
} else {
|
||||
this.removeAttribute(attr);
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-spinner',
|
||||
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
observer: '_activeChanged',
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
observer: '_altChanged',
|
||||
type: String,
|
||||
value: 'loading'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, _coolingDown) {
|
||||
return classNames({
|
||||
active: active || _coolingDown,
|
||||
cooldown: _coolingDown
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Allow user-provided `aria-label` take preference to any other text alternative.
|
||||
if (this.hasAttribute('aria-label')) {
|
||||
this.alt = this.getAttribute('aria-label');
|
||||
} else {
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
}
|
||||
|
||||
if (!this.active) {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_activeChanged: function() {
|
||||
if (this.active) {
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this._coolingDown = true;
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function() {
|
||||
if (this.alt === '') {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-hidden');
|
||||
}
|
||||
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue