update components

This commit is contained in:
Luke Pulverenti 2015-07-13 17:26:11 -04:00
parent 697257670c
commit 02ae9ec81e
123 changed files with 13600 additions and 531 deletions

View file

@ -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"
}

View file

@ -1,6 +1,6 @@
{
"name": "paper-spinner",
"version": "1.0.1",
"version": "1.0.2",
"description": "A material design spinner",
"authors": [
"The Polymer Authors"

View file

@ -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>

View file

@ -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 {

View file

@ -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>