update polymer components
This commit is contained in:
Luke Pulverenti
parent
0320ad7256
commit
3c08769c6c
29 changed files with 961 additions and 844 deletions
|
|
@ -10197,6 +10197,10 @@ CSS properties | Action
|
|||
if (!this._fitInfo.positionedBy.horizontally) {
|
||||
this.style.left = '0px';
|
||||
}
|
||||
if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.horizontally) {
|
||||
// need position:fixed to properly size the element
|
||||
this.style.position = 'fixed';
|
||||
}
|
||||
// need border-box for margin/padding
|
||||
this.sizingTarget.style.boxSizing = 'border-box';
|
||||
// constrain the width and height if not already set
|
||||
|
|
@ -11558,6 +11562,8 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
|
||||
/**
|
||||
* Returns the currently selected item.
|
||||
*
|
||||
* @type {?Object}
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
|
|
@ -11598,11 +11604,21 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* The list of items from which a selection can be made.
|
||||
*/
|
||||
items: {
|
||||
type: Array,
|
||||
readOnly: true,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The set of excluded elements where the key is the `localName`
|
||||
* of the element that will be ignored from the item list.
|
||||
*
|
||||
* @type {object}
|
||||
* @default {template: 1}
|
||||
*/
|
||||
_excludedLocalNames: {
|
||||
|
|
@ -11622,15 +11638,12 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.bind(this);
|
||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||
// TODO(cdata): When polymer/polymer#2535 lands, we do not need to do this
|
||||
// book keeping anymore:
|
||||
this.__listeningForActivate = false;
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._observer = this._observeItems(this);
|
||||
this._contentObserver = this._observeContent(this);
|
||||
if (!this.selectedItem && this.selected) {
|
||||
this._updateItems();
|
||||
if (!this._shouldUpdateSelection) {
|
||||
this._updateSelected(this.attrForSelected,this.selected)
|
||||
}
|
||||
this._addListener(this.activateEvent);
|
||||
|
|
@ -11638,25 +11651,11 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
|
||||
detached: function() {
|
||||
if (this._observer) {
|
||||
this._observer.disconnect();
|
||||
}
|
||||
if (this._contentObserver) {
|
||||
this._contentObserver.disconnect();
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
}
|
||||
this._removeListener(this.activateEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns an array of selectable items.
|
||||
*
|
||||
* @property items
|
||||
* @type Array
|
||||
*/
|
||||
get items() {
|
||||
var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
|
||||
return Array.prototype.filter.call(nodes, this._bindFilterItem);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the index of the given item.
|
||||
*
|
||||
|
|
@ -11699,18 +11698,16 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
this.selected = this._indexToValue(index);
|
||||
},
|
||||
|
||||
_addListener: function(eventName) {
|
||||
if (!this.isAttached || this.__listeningForActivate) {
|
||||
return;
|
||||
}
|
||||
get _shouldUpdateSelection() {
|
||||
return this.selected != null;
|
||||
},
|
||||
|
||||
this.__listeningForActivate = true;
|
||||
_addListener: function(eventName) {
|
||||
this.listen(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_removeListener: function(eventName) {
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
this.__listeningForActivate = false;
|
||||
},
|
||||
|
||||
_activateEventChanged: function(eventName, old) {
|
||||
|
|
@ -11718,6 +11715,12 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
this._addListener(eventName);
|
||||
},
|
||||
|
||||
_updateItems: function() {
|
||||
var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
|
||||
nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
|
||||
this._setItems(nodes);
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
this._selectSelected(this.selected);
|
||||
},
|
||||
|
|
@ -11776,18 +11779,9 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
this._setSelectedItem(this._selection.get());
|
||||
},
|
||||
|
||||
// observe content changes under the given node.
|
||||
_observeContent: function(node) {
|
||||
var content = node.querySelector('content');
|
||||
if (content && content.parentElement === node) {
|
||||
return this._observeItems(node.domHost);
|
||||
}
|
||||
},
|
||||
|
||||
// observe items change under the given node.
|
||||
_observeItems: function(node) {
|
||||
// TODO(cdata): Update this when we get distributed children changed.
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
return Polymer.dom(node).observeNodes(function(mutations) {
|
||||
// Let other interested parties know about the change so that
|
||||
// we don't have to recreate mutation observers everywher.
|
||||
this.fire('iron-items-changed', mutations, {
|
||||
|
|
@ -11795,15 +11789,12 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
cancelable: false
|
||||
});
|
||||
|
||||
if (this.selected != null) {
|
||||
this._updateItems();
|
||||
|
||||
if (this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
}.bind(this));
|
||||
observer.observe(node, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
return observer;
|
||||
},
|
||||
|
||||
_activateHandler: function(e) {
|
||||
|
|
@ -11902,6 +11893,15 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
type: String,
|
||||
observer: 'queryChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the query attribute is assumed to be a complete media query
|
||||
* string rather than a single media feature.
|
||||
*/
|
||||
full: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* @type {function(MediaQueryList)}
|
||||
|
|
@ -11947,7 +11947,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
if (!query) {
|
||||
return;
|
||||
}
|
||||
if (query[0] !== '(') {
|
||||
if (!this.full && query[0] !== '(') {
|
||||
query = '(' + query + ')';
|
||||
}
|
||||
this._mq = window.matchMedia(query);
|
||||
|
|
@ -12023,6 +12023,11 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
this._selection.multi = multi;
|
||||
},
|
||||
|
||||
get _shouldUpdateSelection() {
|
||||
return this.selected != null ||
|
||||
(this.selectedValues != null && this.selectedValues.length);
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
if (this.multi) {
|
||||
this._selectMulti(this.selectedValues);
|
||||
|
|
@ -14897,343 +14902,336 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
|
||||
})();
|
||||
</script>
|
||||
<dom-module id="paper-spinner" assetpath="bower_components/paper-spinner/">
|
||||
|
||||
<style>
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
|
||||
*/
|
||||
/**************************/
|
||||
/* STYLES FOR THE SPINNER */
|
||||
/**************************/
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
height: 28px; /* CONTAINERWIDTH */
|
||||
}
|
||||
|
||||
#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 {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
||||
}
|
||||
|
||||
.layer-4 {
|
||||
border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
|
||||
}
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
.active .spinner-layer.layer-1 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-2 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-3 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-4 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK: Even though the intention is to have the current .spinner-layer at
|
||||
* `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
||||
* to do proper subpixel rendering for the elements being animated. This is
|
||||
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
||||
*
|
||||
* - https://github.com/Polymer/paper-spinner/issues/9
|
||||
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
||||
*/
|
||||
@-webkit-keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*
|
||||
* Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
|
||||
* but still does on Safari and IE.
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.circle-clipper .circle {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-width: 3px; /* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.circle-clipper.left .circle {
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
|
||||
.circle-clipper.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from { -webkit-transform: rotate(130deg); }
|
||||
50% { -webkit-transform: rotate(-5deg); }
|
||||
to { -webkit-transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from { -webkit-transform: rotate(-130deg); }
|
||||
50% { -webkit-transform: rotate(5deg); }
|
||||
to { -webkit-transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<dom-module id="paper-spinner-styles" assetpath="bower_components/paper-spinner/">
|
||||
<template>
|
||||
<style>
|
||||
/*
|
||||
/**************************/
|
||||
/* STYLES FOR THE SPINNER */
|
||||
/**************************/
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
height: 28px; /* CONTAINERWIDTH */
|
||||
}
|
||||
|
||||
#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 {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
||||
}
|
||||
|
||||
.layer-4 {
|
||||
border-color: var(--paper-spinner-layer-4-color, --google-green-500);
|
||||
}
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
.active .spinner-layer.layer-1 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-2 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-3 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-4 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK: Even though the intention is to have the current .spinner-layer at
|
||||
* `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
||||
* to do proper subpixel rendering for the elements being animated. This is
|
||||
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
||||
*
|
||||
* - https://github.com/Polymer/paper-spinner/issues/9
|
||||
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
||||
*/
|
||||
@-webkit-keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*
|
||||
* Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
|
||||
* but still does on Safari and IE.
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.circle-clipper .circle {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-width: 3px; /* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.circle-clipper.left .circle {
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
|
||||
.circle-clipper.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from { -webkit-transform: rotate(130deg); }
|
||||
50% { -webkit-transform: rotate(-5deg); }
|
||||
to { -webkit-transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from { -webkit-transform: rotate(-130deg); }
|
||||
50% { -webkit-transform: rotate(5deg); }
|
||||
to { -webkit-transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
<dom-module id="paper-spinner" assetpath="bower_components/paper-spinner/">
|
||||
<template>
|
||||
<style include="paper-spinner-styles"></style>
|
||||
|
||||
<div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]">
|
||||
<div class="spinner-layer layer-1">
|
||||
|
|
@ -15276,13 +15274,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-spinner',
|
||||
|
||||
listeners: {
|
||||
|
|
@ -15291,7 +15286,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
|
|
@ -15334,7 +15328,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, coolingDown) {
|
||||
|
|
@ -15346,9 +15339,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
_activeChanged: function(active, old) {
|
||||
this._setAriaHidden(!active);
|
||||
if (!active && old) {
|
||||
this._coolingDown = true;
|
||||
}
|
||||
this._coolingDown = !active && old;
|
||||
},
|
||||
|
||||
_altChanged: function(alt) {
|
||||
|
|
@ -15374,11 +15365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
<dom-module id="iron-icon" assetpath="bower_components/iron-icon/">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue