Commit c3cc49af7bfcaa4c47e343a4b49804a62356b5fd
Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS
Showing
24 changed files
with
883 additions
and
589 deletions
bower_components/paper-spinner/.bower.json
100755 → 100644
1 | { | 1 | { |
2 | "name": "paper-spinner", | 2 | "name": "paper-spinner", |
3 | - "version": "1.0.2", | 3 | + "version": "1.2.0", |
4 | "description": "A material design spinner", | 4 | "description": "A material design spinner", |
5 | "authors": [ | 5 | "authors": [ |
6 | "The Polymer Authors" | 6 | "The Polymer Authors" |
@@ -22,21 +22,27 @@ | @@ -22,21 +22,27 @@ | ||
22 | "dependencies": { | 22 | "dependencies": { |
23 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", | 23 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", |
24 | "paper-styles": "PolymerElements/paper-styles#^1.0.0", | 24 | "paper-styles": "PolymerElements/paper-styles#^1.0.0", |
25 | - "polymer": "Polymer/polymer#^1.0.0" | 25 | + "polymer": "Polymer/polymer#^1.1.0" |
26 | }, | 26 | }, |
27 | "devDependencies": { | 27 | "devDependencies": { |
28 | - "web-component-tester": "*", | ||
29 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | 28 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", |
29 | + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
30 | "test-fixture": "PolymerElements/test-fixture#^1.0.0", | 30 | "test-fixture": "PolymerElements/test-fixture#^1.0.0", |
31 | + "web-component-tester": "^4.0.0", | ||
31 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" | 32 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" |
32 | }, | 33 | }, |
33 | - "_release": "1.0.2", | 34 | + "main": [ |
35 | + "paper-spinner.html", | ||
36 | + "paper-spinner-lite.html" | ||
37 | + ], | ||
38 | + "_release": "1.2.0", | ||
34 | "_resolution": { | 39 | "_resolution": { |
35 | "type": "version", | 40 | "type": "version", |
36 | - "tag": "v1.0.2", | ||
37 | - "commit": "18bda194750ace719102d54c17ae1c6ce4a6793e" | 41 | + "tag": "v1.2.0", |
42 | + "commit": "66dc50a940aa9a3a067137defe1712aa85de6f35" | ||
38 | }, | 43 | }, |
39 | - "_source": "git://github.com/PolymerElements/paper-spinner.git", | ||
40 | - "_target": "^1.0.0", | ||
41 | - "_originalSource": "PolymerElements/paper-spinner" | 44 | + "_source": "https://github.com/PolymerElements/paper-spinner.git", |
45 | + "_target": "~1.2.0", | ||
46 | + "_originalSource": "paper-spinner", | ||
47 | + "_direct": true | ||
42 | } | 48 | } |
43 | \ No newline at end of file | 49 | \ No newline at end of file |
bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md
0 → 100644
1 | +<!-- Instructions: https://github.com/PolymerElements/paper-spinner/CONTRIBUTING.md#filing-issues --> | ||
2 | +### Description | ||
3 | +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> | ||
4 | + | ||
5 | +### Expected outcome | ||
6 | + | ||
7 | +<!-- Example: The page stays the same color. --> | ||
8 | + | ||
9 | +### Actual outcome | ||
10 | + | ||
11 | +<!-- Example: The page turns pink. --> | ||
12 | + | ||
13 | +### Live Demo | ||
14 | +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> | ||
15 | + | ||
16 | +### Steps to reproduce | ||
17 | + | ||
18 | +<!-- Example | ||
19 | +1. Put a `paper-foo` element in the page. | ||
20 | +2. Open the page in a web browser. | ||
21 | +3. Click the `paper-foo` element. | ||
22 | +--> | ||
23 | + | ||
24 | +### Browsers Affected | ||
25 | +<!-- Check all that apply --> | ||
26 | +- [ ] Chrome | ||
27 | +- [ ] Firefox | ||
28 | +- [ ] Safari 9 | ||
29 | +- [ ] Safari 8 | ||
30 | +- [ ] Safari 7 | ||
31 | +- [ ] Edge | ||
32 | +- [ ] IE 11 | ||
33 | +- [ ] IE 10 |
bower_components/paper-spinner/.gitignore
100755 → 100644
bower_components/paper-spinner/.travis.yml
0 → 100644
1 | +language: node_js | ||
2 | +sudo: required | ||
3 | +before_script: | ||
4 | + - npm install -g bower polylint web-component-tester | ||
5 | + - bower install | ||
6 | + - polylint | ||
7 | +env: | ||
8 | + global: | ||
9 | + - secure: dpHtK5BMl68o/D6cQO9VsQWBPVuTrFPC56NT6kBLbiQtmxG2E2FD8dN4cHuEWafZopwYSsLLmEIIK77FMaonTSmzos5EixIQyqGxWTyNTpthg0Jenzc+6vZEs3h+3LDodFjdZSu8FgKyxU8SFLLGjAsSy8aegUNBszy7/SY8FAM= | ||
10 | + - secure: EASvFsWb/njjh3DOLD5Oz3nw4QPl4aIhDAIhU2qelb2UCp8Q/KGniU7VjNoQ7OSN05jh2ooz8Pu3cAhLmrWumJn2atXEXvRPKtT/+1Ciy3xFcvgmqM0RHB+7qSSOUwgvPW9bwdzVxxMjAW7Oqb7w3nVn9/mEv2sMPNSv7iEbiUI= | ||
11 | +node_js: stable | ||
12 | +addons: | ||
13 | + firefox: latest | ||
14 | + apt: | ||
15 | + sources: | ||
16 | + - google-chrome | ||
17 | + packages: | ||
18 | + - google-chrome-stable | ||
19 | + sauce_connect: true | ||
20 | +script: | ||
21 | + - xvfb-run wct | ||
22 | + - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi" | ||
23 | +dist: trusty |
bower_components/paper-spinner/CONTRIBUTING.md
0 → 100644
1 | +<!-- | ||
2 | +This file is autogenerated based on | ||
3 | +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md | ||
4 | + | ||
5 | +If you edit that file, it will get updated everywhere else. | ||
6 | +If you edit this file, your changes will get overridden :) | ||
7 | + | ||
8 | +You can however override the jsbin link with one that's customized to this | ||
9 | +specific element: | ||
10 | + | ||
11 | +jsbin=https://jsbin.com/cagaye/edit?html,output | ||
12 | +--> | ||
13 | + | ||
14 | +# Polymer Elements | ||
15 | +## Guide for Contributors | ||
16 | + | ||
17 | +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: | ||
18 | + | ||
19 | +### Filing Issues | ||
20 | + | ||
21 | +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: | ||
22 | + | ||
23 | + 1. **Who will use the feature?** _“As someone filling out a form…”_ | ||
24 | + 2. **When will they use the feature?** _“When I enter an invalid value…”_ | ||
25 | + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ | ||
26 | + | ||
27 | +**If you are filing an issue to report a bug**, please provide: | ||
28 | + | ||
29 | + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: | ||
30 | + | ||
31 | + ```markdown | ||
32 | + The `paper-foo` element causes the page to turn pink when clicked. | ||
33 | + | ||
34 | + ## Expected outcome | ||
35 | + | ||
36 | + The page stays the same color. | ||
37 | + | ||
38 | + ## Actual outcome | ||
39 | + | ||
40 | + The page turns pink. | ||
41 | + | ||
42 | + ## Steps to reproduce | ||
43 | + | ||
44 | + 1. Put a `paper-foo` element in the page. | ||
45 | + 2. Open the page in a web browser. | ||
46 | + 3. Click the `paper-foo` element. | ||
47 | + ``` | ||
48 | + | ||
49 | + 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). | ||
50 | + | ||
51 | + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. | ||
52 | + | ||
53 | +### Submitting Pull Requests | ||
54 | + | ||
55 | +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. | ||
56 | + | ||
57 | +When submitting pull requests, please provide: | ||
58 | + | ||
59 | + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: | ||
60 | + | ||
61 | + ```markdown | ||
62 | + (For a single issue) | ||
63 | + Fixes #20 | ||
64 | + | ||
65 | + (For multiple issues) | ||
66 | + Fixes #32, fixes #40 | ||
67 | + ``` | ||
68 | + | ||
69 | + 2. **A succinct description of the design** used to fix any related issues. For example: | ||
70 | + | ||
71 | + ```markdown | ||
72 | + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. | ||
73 | + ``` | ||
74 | + | ||
75 | + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. | ||
76 | + | ||
77 | +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! |
bower_components/paper-spinner/README.md
100755 → 100644
1 | -paper-spinner | ||
2 | -============= | ||
3 | 1 | ||
4 | -Element providing material design circular spinner. | 2 | +<!--- |
5 | 3 | ||
6 | -##### Example | 4 | +This README is automatically generated from the comments in these files: |
5 | +paper-spinner-behavior.html paper-spinner-lite.html paper-spinner.html | ||
6 | + | ||
7 | +Edit those files, and our readme bot will duplicate them over here! | ||
8 | +Edit this file, and the bot will squash your changes :) | ||
9 | + | ||
10 | +The bot does some handling of markdown. Please file a bug if it does the wrong | ||
11 | +thing! https://github.com/PolymerLabs/tedium/issues | ||
12 | + | ||
13 | +--> | ||
14 | + | ||
15 | +[![Build status](https://travis-ci.org/PolymerElements/paper-spinner.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-spinner) | ||
16 | + | ||
17 | +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-spinner)_ | ||
18 | + | ||
19 | + | ||
20 | +##<paper-spinner> | ||
21 | + | ||
22 | +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) | ||
23 | + | ||
24 | +Element providing a multiple color material design circular spinner. | ||
7 | 25 | ||
8 | ```html | 26 | ```html |
9 | <paper-spinner active></paper-spinner> | 27 | <paper-spinner active></paper-spinner> |
10 | ``` | 28 | ``` |
11 | 29 | ||
12 | The default spinner cycles between four layers of colors; by default they are | 30 | The default spinner cycles between four layers of colors; by default they are |
13 | -blue, red, yellow and green. It can be customized so that it uses one color only | ||
14 | -by setting all the layer colors to the same value. | 31 | +blue, red, yellow and green. It can be customized to cycle between four different |
32 | +colors. Use <paper-spinner-lite> for single color spinners. | ||
33 | + | ||
34 | +### Accessibility | ||
35 | + | ||
36 | +Alt attribute should be set to provide adequate context for accessibility. If not provided, | ||
37 | +it defaults to 'loading'. | ||
38 | +Empty alt can be provided to mark the element as decorative if alternative content is provided | ||
39 | +in another form (e.g. a text block following the spinner). | ||
40 | + | ||
41 | +```html | ||
42 | +<paper-spinner alt="Loading contacts list" active></paper-spinner> | ||
43 | +``` | ||
44 | + | ||
45 | +### Styling | ||
46 | + | ||
47 | +The following custom properties and mixins are available for styling: | ||
48 | + | ||
49 | +| Custom property | Description | Default | | ||
50 | +| --- | --- | --- | | ||
51 | +| `--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500` | | ||
52 | +| `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500` | | ||
53 | +| `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500` | | ||
54 | +| `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500` | | ||
55 | +| `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | | ||
56 | + | ||
15 | 57 | ||
16 | -##### Example | 58 | + |
59 | +##<paper-spinner-lite> | ||
60 | + | ||
61 | +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) | ||
62 | + | ||
63 | +Element providing a single color material design circular spinner. | ||
17 | 64 | ||
18 | ```html | 65 | ```html |
19 | -<style is="custom-style"> | ||
20 | - paper-spinner .rainbow { | ||
21 | - --paper-spinner-layer-1-color: yellow; | ||
22 | - --paper-spinner-layer-2-color: red; | ||
23 | - --paper-spinner-layer-3-color: blue; | ||
24 | - --paper-spinner-layer-4-color: green; | ||
25 | - } | ||
26 | - | ||
27 | - paper-spinner .red { | ||
28 | - --paper-spinner-layer-1-color: red; | ||
29 | - --paper-spinner-layer-2-color: red; | ||
30 | - --paper-spinner-layer-3-color: red; | ||
31 | - --paper-spinner-layer-4-color: red; | ||
32 | - } | ||
33 | -</style> | 66 | +<paper-spinner-lite active></paper-spinner-lite> |
34 | ``` | 67 | ``` |
35 | 68 | ||
69 | +The default spinner is blue. It can be customized to be a different color. | ||
70 | + | ||
71 | +### Accessibility | ||
72 | + | ||
36 | Alt attribute should be set to provide adequate context for accessibility. If not provided, | 73 | Alt attribute should be set to provide adequate context for accessibility. If not provided, |
37 | it defaults to 'loading'. | 74 | it defaults to 'loading'. |
38 | Empty alt can be provided to mark the element as decorative if alternative content is provided | 75 | Empty alt can be provided to mark the element as decorative if alternative content is provided |
39 | in another form (e.g. a text block following the spinner). | 76 | in another form (e.g. a text block following the spinner). |
40 | 77 | ||
41 | -##### Example | ||
42 | - | ||
43 | ```html | 78 | ```html |
44 | -<paper-spinner alt="Loading contacts list" active></paper-spinner> | 79 | +<paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite> |
45 | ``` | 80 | ``` |
81 | + | ||
82 | +### Styling | ||
83 | + | ||
84 | +The following custom properties and mixins are available for styling: | ||
85 | + | ||
86 | +| Custom property | Description | Default | | ||
87 | +| --- | --- | --- | | ||
88 | +| `--paper-spinner-color` | Color of the spinner | `--google-blue-500` | | ||
89 | +| `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | | ||
90 | + | ||
91 | + | ||
92 | + | ||
93 | +<!-- No docs for Polymer.PaperSpinnerBehavior found. --> |
bower_components/paper-spinner/bower.json
100755 → 100644
1 | { | 1 | { |
2 | "name": "paper-spinner", | 2 | "name": "paper-spinner", |
3 | - "version": "1.0.2", | 3 | + "version": "1.2.0", |
4 | "description": "A material design spinner", | 4 | "description": "A material design spinner", |
5 | "authors": [ | 5 | "authors": [ |
6 | "The Polymer Authors" | 6 | "The Polymer Authors" |
@@ -22,12 +22,17 @@ | @@ -22,12 +22,17 @@ | ||
22 | "dependencies": { | 22 | "dependencies": { |
23 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", | 23 | "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", |
24 | "paper-styles": "PolymerElements/paper-styles#^1.0.0", | 24 | "paper-styles": "PolymerElements/paper-styles#^1.0.0", |
25 | - "polymer": "Polymer/polymer#^1.0.0" | 25 | + "polymer": "Polymer/polymer#^1.1.0" |
26 | }, | 26 | }, |
27 | "devDependencies": { | 27 | "devDependencies": { |
28 | - "web-component-tester": "*", | ||
29 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", | 28 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", |
29 | + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", | ||
30 | "test-fixture": "PolymerElements/test-fixture#^1.0.0", | 30 | "test-fixture": "PolymerElements/test-fixture#^1.0.0", |
31 | + "web-component-tester": "^4.0.0", | ||
31 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" | 32 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" |
32 | - } | 33 | + }, |
34 | + "main": [ | ||
35 | + "paper-spinner.html", | ||
36 | + "paper-spinner-lite.html" | ||
37 | + ] | ||
33 | } | 38 | } |
bower_components/paper-spinner/demo/index.html
100755 → 100644
@@ -9,89 +9,89 @@ Code distributed by Google as part of the polymer project is also | @@ -9,89 +9,89 @@ Code distributed by Google as part of the polymer project is also | ||
9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
10 | --> | 10 | --> |
11 | <html lang="en"> | 11 | <html lang="en"> |
12 | - | ||
13 | <head> | 12 | <head> |
14 | - <meta charset="UTF-8"> | ||
15 | <title>paper-spinner demo</title> | 13 | <title>paper-spinner demo</title> |
16 | - <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | ||
17 | - <link rel="import" href="../../paper-styles/demo-pages.html"> | ||
18 | - <link rel="import" href="../paper-spinner.html"> | ||
19 | - | ||
20 | - <style is="custom-style"> | ||
21 | - .horizontal-section { | ||
22 | - width: 100px; | ||
23 | - } | ||
24 | 14 | ||
25 | - paper-spinner, button { | ||
26 | - display: block; | ||
27 | - margin-bottom: 24px; | ||
28 | - margin-left: auto; | ||
29 | - margin-right: auto; | ||
30 | - } | 15 | + <meta charset="UTF-8"> |
16 | + <meta name="apple-mobile-web-app-capable" content="yes"> | ||
17 | + <meta name="mobile-web-app-capable" content="yes"> | ||
18 | + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> | ||
31 | 19 | ||
32 | - paper-spinner.blue { | ||
33 | - --paper-spinner-layer-1-color: var(--paper-light-blue-500); | ||
34 | - --paper-spinner-layer-2-color: var(--paper-light-blue-500); | ||
35 | - --paper-spinner-layer-3-color: var(--paper-light-blue-500); | ||
36 | - --paper-spinner-layer-4-color: var(--paper-light-blue-500); | ||
37 | - } | 20 | + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
38 | 21 | ||
39 | - paper-spinner.red { | ||
40 | - --paper-spinner-layer-1-color: var(--paper-red-500); | ||
41 | - --paper-spinner-layer-2-color: var(--paper-red-500); | ||
42 | - --paper-spinner-layer-3-color: var(--paper-red-500); | ||
43 | - --paper-spinner-layer-4-color: var(--paper-red-500); | ||
44 | - } | 22 | + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> |
23 | + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> | ||
24 | + <link rel="import" href="../../paper-styles/color.html"> | ||
25 | + <link rel="import" href="../paper-spinner-lite.html"> | ||
26 | + <link rel="import" href="../paper-spinner.html"> | ||
45 | 27 | ||
46 | - paper-spinner.orange { | ||
47 | - --paper-spinner-layer-1-color: var(--paper-orange-500); | ||
48 | - --paper-spinner-layer-2-color: var(--paper-orange-500); | ||
49 | - --paper-spinner-layer-3-color: var(--paper-orange-500); | ||
50 | - --paper-spinner-layer-4-color: var(--paper-orange-500); | 28 | + <style is="custom-style" include="demo-pages-shared-styles"> |
29 | + .vertical-section-container { | ||
30 | + max-width: 550px; | ||
51 | } | 31 | } |
52 | 32 | ||
53 | - paper-spinner.green { | ||
54 | - --paper-spinner-layer-1-color: var(--paper-green-500); | ||
55 | - --paper-spinner-layer-2-color: var(--paper-green-500); | ||
56 | - --paper-spinner-layer-3-color: var(--paper-green-500); | ||
57 | - --paper-spinner-layer-4-color: var(--paper-green-500); | 33 | + paper-spinner, paper-spinner-lite { |
34 | + margin-right: 24px; | ||
58 | } | 35 | } |
59 | </style> | 36 | </style> |
60 | </head> | 37 | </head> |
61 | - | ||
62 | <body unresolved> | 38 | <body unresolved> |
63 | - <div class="horizontal-section-container"> | ||
64 | - <div> | ||
65 | - <h4>Default</h4> | ||
66 | - <div class="horizontal-section"> | ||
67 | - <paper-spinner></paper-spinner> | ||
68 | - <paper-spinner active></paper-spinner> | 39 | + <div class="vertical-section-container centered"> |
40 | + <h3>Spinners can be deactivated or activated</h3> | ||
41 | + <demo-snippet class="centered-demo"> | ||
42 | + <template> | ||
69 | <paper-spinner></paper-spinner> | 43 | <paper-spinner></paper-spinner> |
70 | <paper-spinner active></paper-spinner> | 44 | <paper-spinner active></paper-spinner> |
71 | - <button onclick="toggle(event)">Toggle</button> | ||
72 | - </div> | ||
73 | - </div> | ||
74 | 45 | ||
75 | - <div> | ||
76 | - <h4>Color</h4> | ||
77 | - <div class="horizontal-section"> | ||
78 | - <paper-spinner class="blue" active></paper-spinner> | ||
79 | - <paper-spinner class="red" active></paper-spinner> | ||
80 | - <paper-spinner class="orange" active></paper-spinner> | ||
81 | - <paper-spinner class="green" active></paper-spinner> | 46 | + <paper-spinner-lite></paper-spinner-lite> |
47 | + <paper-spinner-lite active></paper-spinner-lite> | ||
48 | + | ||
82 | <button onclick="toggle(event)">Toggle</button> | 49 | <button onclick="toggle(event)">Toggle</button> |
83 | - </div> | ||
84 | - </div> | 50 | + </template> |
51 | + </demo-snippet> | ||
52 | + | ||
53 | + <h3>Spinners can be styled using custom properties</h3> | ||
54 | + <demo-snippet class="centered-demo"> | ||
55 | + <template> | ||
56 | + <style is="custom-style"> | ||
57 | + paper-spinner.multi { | ||
58 | + --paper-spinner-layer-1-color: var(--paper-purple-500); | ||
59 | + --paper-spinner-layer-2-color: var(--paper-cyan-500); | ||
60 | + --paper-spinner-layer-3-color: var(--paper-blue-grey-500); | ||
61 | + --paper-spinner-layer-4-color: var(--paper-amber-500); | ||
62 | + } | ||
63 | + paper-spinner-lite.orange { | ||
64 | + --paper-spinner-color: var(--google-yellow-500); | ||
65 | + } | ||
66 | + paper-spinner-lite.green { | ||
67 | + --paper-spinner-color: var(--google-green-500); | ||
68 | + } | ||
69 | + paper-spinner-lite.thin { | ||
70 | + --paper-spinner-stroke-width: 1px; | ||
71 | + } | ||
72 | + paper-spinner-lite.thick { | ||
73 | + --paper-spinner-stroke-width: 6px; | ||
74 | + } | ||
75 | + </style> | ||
76 | + | ||
77 | + <paper-spinner class="multi" active></paper-spinner> | ||
78 | + | ||
79 | + <paper-spinner-lite class="orange" active></paper-spinner-lite> | ||
80 | + <paper-spinner-lite class="green" active></paper-spinner-lite> | ||
81 | + | ||
82 | + <paper-spinner-lite class="thin" active></paper-spinner-lite> | ||
83 | + <paper-spinner-lite class="thick" active></paper-spinner-lite> | ||
84 | + </template> | ||
85 | + </demo-snippet> | ||
85 | </div> | 86 | </div> |
86 | 87 | ||
87 | <script> | 88 | <script> |
88 | function toggle(event) { | 89 | function toggle(event) { |
89 | - var spinners = event.target.parentElement.querySelectorAll('paper-spinner'); | 90 | + var spinners = event.target.parentElement.querySelectorAll('paper-spinner, paper-spinner-lite'); |
90 | Array.prototype.forEach.call(spinners, function(spinner) { | 91 | Array.prototype.forEach.call(spinners, function(spinner) { |
91 | spinner.active = !spinner.active; | 92 | spinner.active = !spinner.active; |
92 | }); | 93 | }); |
93 | }; | 94 | }; |
94 | </script> | 95 | </script> |
95 | </body> | 96 | </body> |
96 | - | ||
97 | </html> | 97 | </html> |
bower_components/paper-spinner/index.html
100755 → 100644
bower_components/paper-spinner/paper-spinner-behavior.html
0 → 100644
1 | +<!-- | ||
2 | +@license | ||
3 | +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
4 | +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
5 | +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
6 | +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
7 | +Code distributed by Google as part of the polymer project is also | ||
8 | +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
9 | +--> | ||
10 | + | ||
11 | +<link rel="import" href="../polymer/polymer.html"> | ||
12 | + | ||
13 | +<script> | ||
14 | + | ||
15 | + /** @polymerBehavior */ | ||
16 | + Polymer.PaperSpinnerBehavior = { | ||
17 | + | ||
18 | + listeners: { | ||
19 | + 'animationend': '__reset', | ||
20 | + 'webkitAnimationEnd': '__reset' | ||
21 | + }, | ||
22 | + | ||
23 | + properties: { | ||
24 | + /** | ||
25 | + * Displays the spinner. | ||
26 | + */ | ||
27 | + active: { | ||
28 | + type: Boolean, | ||
29 | + value: false, | ||
30 | + reflectToAttribute: true, | ||
31 | + observer: '__activeChanged' | ||
32 | + }, | ||
33 | + | ||
34 | + /** | ||
35 | + * Alternative text content for accessibility support. | ||
36 | + * If alt is present, it will add an aria-label whose content matches alt when active. | ||
37 | + * If alt is not present, it will default to 'loading' as the alt value. | ||
38 | + */ | ||
39 | + alt: { | ||
40 | + type: String, | ||
41 | + value: 'loading', | ||
42 | + observer: '__altChanged' | ||
43 | + }, | ||
44 | + | ||
45 | + __coolingDown: { | ||
46 | + type: Boolean, | ||
47 | + value: false | ||
48 | + } | ||
49 | + }, | ||
50 | + | ||
51 | + __computeContainerClasses: function(active, coolingDown) { | ||
52 | + return [ | ||
53 | + active || coolingDown ? 'active' : '', | ||
54 | + coolingDown ? 'cooldown' : '' | ||
55 | + ].join(' '); | ||
56 | + }, | ||
57 | + | ||
58 | + __activeChanged: function(active, old) { | ||
59 | + this.__setAriaHidden(!active); | ||
60 | + this.__coolingDown = !active && old; | ||
61 | + }, | ||
62 | + | ||
63 | + __altChanged: function(alt) { | ||
64 | + // user-provided `aria-label` takes precedence over prototype default | ||
65 | + if (alt === this.getPropertyInfo('alt').value) { | ||
66 | + this.alt = this.getAttribute('aria-label') || alt; | ||
67 | + } else { | ||
68 | + this.__setAriaHidden(alt===''); | ||
69 | + this.setAttribute('aria-label', alt); | ||
70 | + } | ||
71 | + }, | ||
72 | + | ||
73 | + __setAriaHidden: function(hidden) { | ||
74 | + var attr = 'aria-hidden'; | ||
75 | + if (hidden) { | ||
76 | + this.setAttribute(attr, 'true'); | ||
77 | + } else { | ||
78 | + this.removeAttribute(attr); | ||
79 | + } | ||
80 | + }, | ||
81 | + | ||
82 | + __reset: function() { | ||
83 | + this.active = false; | ||
84 | + this.__coolingDown = false; | ||
85 | + } | ||
86 | + }; | ||
87 | +</script> |
bower_components/paper-spinner/paper-spinner-lite.html
0 → 100644
1 | +<!-- | ||
2 | +@license | ||
3 | +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
4 | +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
5 | +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
6 | +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
7 | +Code distributed by Google as part of the polymer project is also | ||
8 | +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
9 | +--> | ||
10 | + | ||
11 | +<link rel="import" href="../polymer/polymer.html"> | ||
12 | +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | ||
13 | +<link rel="import" href="../paper-styles/color.html"> | ||
14 | +<link rel="import" href="paper-spinner-behavior.html"> | ||
15 | +<link rel="import" href="paper-spinner-styles.html"> | ||
16 | + | ||
17 | +<!-- | ||
18 | +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) | ||
19 | + | ||
20 | +Element providing a single color material design circular spinner. | ||
21 | + | ||
22 | + <paper-spinner-lite active></paper-spinner-lite> | ||
23 | + | ||
24 | +The default spinner is blue. It can be customized to be a different color. | ||
25 | + | ||
26 | +### Accessibility | ||
27 | + | ||
28 | +Alt attribute should be set to provide adequate context for accessibility. If not provided, | ||
29 | +it defaults to 'loading'. | ||
30 | +Empty alt can be provided to mark the element as decorative if alternative content is provided | ||
31 | +in another form (e.g. a text block following the spinner). | ||
32 | + | ||
33 | + <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite> | ||
34 | + | ||
35 | +### Styling | ||
36 | + | ||
37 | +The following custom properties and mixins are available for styling: | ||
38 | + | ||
39 | +Custom property | Description | Default | ||
40 | +----------------|-------------|---------- | ||
41 | +`--paper-spinner-color` | Color of the spinner | `--google-blue-500` | ||
42 | +`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | ||
43 | + | ||
44 | +@group Paper Elements | ||
45 | +@element paper-spinner-lite | ||
46 | +@hero hero.svg | ||
47 | +@demo demo/index.html | ||
48 | +--> | ||
49 | + | ||
50 | +<dom-module id="paper-spinner-lite"> | ||
51 | + <template strip-whitespace> | ||
52 | + <style include="paper-spinner-styles"></style> | ||
53 | + | ||
54 | + <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]"> | ||
55 | + <div class="spinner-layer"> | ||
56 | + <div class="circle-clipper left"></div> | ||
57 | + <div class="circle-clipper right"></div> | ||
58 | + </div> | ||
59 | + </div> | ||
60 | + </template> | ||
61 | + | ||
62 | + <script> | ||
63 | + Polymer({ | ||
64 | + is: 'paper-spinner-lite', | ||
65 | + | ||
66 | + behaviors: [ | ||
67 | + Polymer.PaperSpinnerBehavior | ||
68 | + ] | ||
69 | + }); | ||
70 | + </script> | ||
71 | +</dom-module> |
bower_components/paper-spinner/paper-spinner-styles.html
0 → 100644
1 | +<!-- | ||
2 | +@license | ||
3 | +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
4 | +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
5 | +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
6 | +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
7 | +Code distributed by Google as part of the polymer project is also | ||
8 | +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
9 | +--> | ||
10 | + | ||
11 | +<dom-module id="paper-spinner-styles"> | ||
12 | + <template> | ||
13 | + <style> | ||
14 | + /* | ||
15 | + /**************************/ | ||
16 | + /* STYLES FOR THE SPINNER */ | ||
17 | + /**************************/ | ||
18 | + | ||
19 | + /* | ||
20 | + * Constants: | ||
21 | + * ARCSIZE = 270 degrees (amount of circle the arc takes up) | ||
22 | + * ARCTIME = 1333ms (time it takes to expand and contract arc) | ||
23 | + * ARCSTARTROT = 216 degrees (how much the start location of the arc | ||
24 | + * should rotate each time, 216 gives us a | ||
25 | + * 5 pointed star shape (it's 360/5 * 3). | ||
26 | + * For a 7 pointed star, we might do | ||
27 | + * 360/7 * 3 = 154.286) | ||
28 | + * SHRINK_TIME = 400ms | ||
29 | + */ | ||
30 | + | ||
31 | + :host { | ||
32 | + display: inline-block; | ||
33 | + position: relative; | ||
34 | + width: 28px; | ||
35 | + height: 28px; | ||
36 | + | ||
37 | + /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ | ||
38 | + --paper-spinner-container-rotation-duration: 1568ms; | ||
39 | + | ||
40 | + /* ARCTIME */ | ||
41 | + --paper-spinner-expand-contract-duration: 1333ms; | ||
42 | + | ||
43 | + /* 4 * ARCTIME */ | ||
44 | + --paper-spinner-full-cycle-duration: 5332ms; | ||
45 | + | ||
46 | + /* SHRINK_TIME */ | ||
47 | + --paper-spinner-cooldown-duration: 400ms; | ||
48 | + } | ||
49 | + | ||
50 | + #spinnerContainer { | ||
51 | + width: 100%; | ||
52 | + height: 100%; | ||
53 | + | ||
54 | + /* The spinner does not have any contents that would have to be | ||
55 | + * flipped if the direction changes. Always use ltr so that the | ||
56 | + * style works out correctly in both cases. */ | ||
57 | + direction: ltr; | ||
58 | + } | ||
59 | + | ||
60 | + #spinnerContainer.active { | ||
61 | + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; | ||
62 | + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite; | ||
63 | + } | ||
64 | + | ||
65 | + @-webkit-keyframes container-rotate { | ||
66 | + to { -webkit-transform: rotate(360deg) } | ||
67 | + } | ||
68 | + | ||
69 | + @keyframes container-rotate { | ||
70 | + to { transform: rotate(360deg) } | ||
71 | + } | ||
72 | + | ||
73 | + .spinner-layer { | ||
74 | + position: absolute; | ||
75 | + width: 100%; | ||
76 | + height: 100%; | ||
77 | + opacity: 0; | ||
78 | + white-space: nowrap; | ||
79 | + border-color: var(--paper-spinner-color, --google-blue-500); | ||
80 | + } | ||
81 | + | ||
82 | + .layer-1 { | ||
83 | + border-color: var(--paper-spinner-layer-1-color, --google-blue-500); | ||
84 | + } | ||
85 | + | ||
86 | + .layer-2 { | ||
87 | + border-color: var(--paper-spinner-layer-2-color, --google-red-500); | ||
88 | + } | ||
89 | + | ||
90 | + .layer-3 { | ||
91 | + border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); | ||
92 | + } | ||
93 | + | ||
94 | + .layer-4 { | ||
95 | + border-color: var(--paper-spinner-layer-4-color, --google-green-500); | ||
96 | + } | ||
97 | + | ||
98 | + /** | ||
99 | + * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): | ||
100 | + * | ||
101 | + * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't | ||
102 | + * guarantee that the animation will start _exactly_ after that value. So we avoid using | ||
103 | + * animation-delay and instead set custom keyframes for each color (as layer-2undant as it | ||
104 | + * seems). | ||
105 | + */ | ||
106 | + .active .spinner-layer { | ||
107 | + -webkit-animation-name: fill-unfill-rotate; | ||
108 | + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); | ||
109 | + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | ||
110 | + -webkit-animation-iteration-count: infinite; | ||
111 | + animation-name: fill-unfill-rotate; | ||
112 | + animation-duration: var(--paper-spinner-full-cycle-duration); | ||
113 | + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | ||
114 | + animation-iteration-count: infinite; | ||
115 | + opacity: 1; | ||
116 | + } | ||
117 | + | ||
118 | + .active .spinner-layer.layer-1 { | ||
119 | + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; | ||
120 | + animation-name: fill-unfill-rotate, layer-1-fade-in-out; | ||
121 | + } | ||
122 | + | ||
123 | + .active .spinner-layer.layer-2 { | ||
124 | + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; | ||
125 | + animation-name: fill-unfill-rotate, layer-2-fade-in-out; | ||
126 | + } | ||
127 | + | ||
128 | + .active .spinner-layer.layer-3 { | ||
129 | + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; | ||
130 | + animation-name: fill-unfill-rotate, layer-3-fade-in-out; | ||
131 | + } | ||
132 | + | ||
133 | + .active .spinner-layer.layer-4 { | ||
134 | + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; | ||
135 | + animation-name: fill-unfill-rotate, layer-4-fade-in-out; | ||
136 | + } | ||
137 | + | ||
138 | + @-webkit-keyframes fill-unfill-rotate { | ||
139 | + 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ | ||
140 | + 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ | ||
141 | + 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ | ||
142 | + 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ | ||
143 | + 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ | ||
144 | + 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ | ||
145 | + 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ | ||
146 | + to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ | ||
147 | + } | ||
148 | + | ||
149 | + @keyframes fill-unfill-rotate { | ||
150 | + 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ | ||
151 | + 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ | ||
152 | + 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ | ||
153 | + 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ | ||
154 | + 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ | ||
155 | + 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ | ||
156 | + 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ | ||
157 | + to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ | ||
158 | + } | ||
159 | + | ||
160 | + @-webkit-keyframes layer-1-fade-in-out { | ||
161 | + 0% { opacity: 1 } | ||
162 | + 25% { opacity: 1 } | ||
163 | + 26% { opacity: 0 } | ||
164 | + 89% { opacity: 0 } | ||
165 | + 90% { opacity: 1 } | ||
166 | + to { opacity: 1 } | ||
167 | + } | ||
168 | + | ||
169 | + @keyframes layer-1-fade-in-out { | ||
170 | + 0% { opacity: 1 } | ||
171 | + 25% { opacity: 1 } | ||
172 | + 26% { opacity: 0 } | ||
173 | + 89% { opacity: 0 } | ||
174 | + 90% { opacity: 1 } | ||
175 | + to { opacity: 1 } | ||
176 | + } | ||
177 | + | ||
178 | + @-webkit-keyframes layer-2-fade-in-out { | ||
179 | + 0% { opacity: 0 } | ||
180 | + 15% { opacity: 0 } | ||
181 | + 25% { opacity: 1 } | ||
182 | + 50% { opacity: 1 } | ||
183 | + 51% { opacity: 0 } | ||
184 | + to { opacity: 0 } | ||
185 | + } | ||
186 | + | ||
187 | + @keyframes layer-2-fade-in-out { | ||
188 | + 0% { opacity: 0 } | ||
189 | + 15% { opacity: 0 } | ||
190 | + 25% { opacity: 1 } | ||
191 | + 50% { opacity: 1 } | ||
192 | + 51% { opacity: 0 } | ||
193 | + to { opacity: 0 } | ||
194 | + } | ||
195 | + | ||
196 | + @-webkit-keyframes layer-3-fade-in-out { | ||
197 | + 0% { opacity: 0 } | ||
198 | + 40% { opacity: 0 } | ||
199 | + 50% { opacity: 1 } | ||
200 | + 75% { opacity: 1 } | ||
201 | + 76% { opacity: 0 } | ||
202 | + to { opacity: 0 } | ||
203 | + } | ||
204 | + | ||
205 | + @keyframes layer-3-fade-in-out { | ||
206 | + 0% { opacity: 0 } | ||
207 | + 40% { opacity: 0 } | ||
208 | + 50% { opacity: 1 } | ||
209 | + 75% { opacity: 1 } | ||
210 | + 76% { opacity: 0 } | ||
211 | + to { opacity: 0 } | ||
212 | + } | ||
213 | + | ||
214 | + @-webkit-keyframes layer-4-fade-in-out { | ||
215 | + 0% { opacity: 0 } | ||
216 | + 65% { opacity: 0 } | ||
217 | + 75% { opacity: 1 } | ||
218 | + 90% { opacity: 1 } | ||
219 | + to { opacity: 0 } | ||
220 | + } | ||
221 | + | ||
222 | + @keyframes layer-4-fade-in-out { | ||
223 | + 0% { opacity: 0 } | ||
224 | + 65% { opacity: 0 } | ||
225 | + 75% { opacity: 1 } | ||
226 | + 90% { opacity: 1 } | ||
227 | + to { opacity: 0 } | ||
228 | + } | ||
229 | + | ||
230 | + .circle-clipper { | ||
231 | + display: inline-block; | ||
232 | + position: relative; | ||
233 | + width: 50%; | ||
234 | + height: 100%; | ||
235 | + overflow: hidden; | ||
236 | + border-color: inherit; | ||
237 | + } | ||
238 | + | ||
239 | + /** | ||
240 | + * Patch the gap that appear between the two adjacent div.circle-clipper while the | ||
241 | + * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). | ||
242 | + */ | ||
243 | + .spinner-layer::after { | ||
244 | + left: 45%; | ||
245 | + width: 10%; | ||
246 | + border-top-style: solid; | ||
247 | + } | ||
248 | + | ||
249 | + .spinner-layer::after, | ||
250 | + .circle-clipper::after { | ||
251 | + content: ''; | ||
252 | + box-sizing: border-box; | ||
253 | + position: absolute; | ||
254 | + top: 0; | ||
255 | + border-width: var(--paper-spinner-stroke-width, 3px); | ||
256 | + border-color: inherit; | ||
257 | + border-radius: 50%; | ||
258 | + } | ||
259 | + | ||
260 | + .circle-clipper::after { | ||
261 | + bottom: 0; | ||
262 | + width: 200%; | ||
263 | + border-style: solid; | ||
264 | + border-bottom-color: transparent !important; | ||
265 | + } | ||
266 | + | ||
267 | + .circle-clipper.left::after { | ||
268 | + left: 0; | ||
269 | + border-right-color: transparent !important; | ||
270 | + -webkit-transform: rotate(129deg); | ||
271 | + transform: rotate(129deg); | ||
272 | + } | ||
273 | + | ||
274 | + .circle-clipper.right::after { | ||
275 | + left: -100%; | ||
276 | + border-left-color: transparent !important; | ||
277 | + -webkit-transform: rotate(-129deg); | ||
278 | + transform: rotate(-129deg); | ||
279 | + } | ||
280 | + | ||
281 | + .active .gap-patch::after, | ||
282 | + .active .circle-clipper::after { | ||
283 | + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); | ||
284 | + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | ||
285 | + -webkit-animation-iteration-count: infinite; | ||
286 | + animation-duration: var(--paper-spinner-expand-contract-duration); | ||
287 | + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | ||
288 | + animation-iteration-count: infinite; | ||
289 | + } | ||
290 | + | ||
291 | + .active .circle-clipper.left::after { | ||
292 | + -webkit-animation-name: left-spin; | ||
293 | + animation-name: left-spin; | ||
294 | + } | ||
295 | + | ||
296 | + .active .circle-clipper.right::after { | ||
297 | + -webkit-animation-name: right-spin; | ||
298 | + animation-name: right-spin; | ||
299 | + } | ||
300 | + | ||
301 | + @-webkit-keyframes left-spin { | ||
302 | + 0% { -webkit-transform: rotate(130deg) } | ||
303 | + 50% { -webkit-transform: rotate(-5deg) } | ||
304 | + to { -webkit-transform: rotate(130deg) } | ||
305 | + } | ||
306 | + | ||
307 | + @keyframes left-spin { | ||
308 | + 0% { transform: rotate(130deg) } | ||
309 | + 50% { transform: rotate(-5deg) } | ||
310 | + to { transform: rotate(130deg) } | ||
311 | + } | ||
312 | + | ||
313 | + @-webkit-keyframes right-spin { | ||
314 | + 0% { -webkit-transform: rotate(-130deg) } | ||
315 | + 50% { -webkit-transform: rotate(5deg) } | ||
316 | + to { -webkit-transform: rotate(-130deg) } | ||
317 | + } | ||
318 | + | ||
319 | + @keyframes right-spin { | ||
320 | + 0% { transform: rotate(-130deg) } | ||
321 | + 50% { transform: rotate(5deg) } | ||
322 | + to { transform: rotate(-130deg) } | ||
323 | + } | ||
324 | + | ||
325 | + #spinnerContainer.cooldown { | ||
326 | + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); | ||
327 | + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1); | ||
328 | + } | ||
329 | + | ||
330 | + @-webkit-keyframes fade-out { | ||
331 | + 0% { opacity: 1 } | ||
332 | + to { opacity: 0 } | ||
333 | + } | ||
334 | + | ||
335 | + @keyframes fade-out { | ||
336 | + 0% { opacity: 1 } | ||
337 | + to { opacity: 0 } | ||
338 | + } | ||
339 | + </style> | ||
340 | + </template> | ||
341 | +</dom-module> |
bower_components/paper-spinner/paper-spinner.css deleted
1 | -/** | ||
2 | -@license | ||
3 | -Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
4 | -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
5 | -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
6 | -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
7 | -Code distributed by Google as part of the polymer project is also | ||
8 | -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
9 | - | ||
10 | -*/ | ||
11 | -/**************************/ | ||
12 | -/* STYLES FOR THE SPINNER */ | ||
13 | -/**************************/ | ||
14 | - | ||
15 | -/* | ||
16 | - * Constants: | ||
17 | - * STROKEWIDTH = 3px | ||
18 | - * ARCSIZE = 270 degrees (amount of circle the arc takes up) | ||
19 | - * ARCTIME = 1333ms (time it takes to expand and contract arc) | ||
20 | - * ARCSTARTROT = 216 degrees (how much the start location of the arc | ||
21 | - * should rotate each time, 216 gives us a | ||
22 | - * 5 pointed star shape (it's 360/5 * 3). | ||
23 | - * For a 7 pointed star, we might do | ||
24 | - * 360/7 * 3 = 154.286) | ||
25 | - * CONTAINERWIDTH = 28px | ||
26 | - * SHRINK_TIME = 400ms | ||
27 | - */ | ||
28 | - | ||
29 | -:host { | ||
30 | - display: inline-block; | ||
31 | - position: relative; | ||
32 | - width: 28px; /* CONTAINERWIDTH */ | ||
33 | - height: 28px; /* CONTAINERWIDTH */ | ||
34 | -} | ||
35 | - | ||
36 | -#spinnerContainer { | ||
37 | - width: 100%; | ||
38 | - height: 100%; | ||
39 | - | ||
40 | - /* The spinner does not have any contents that would have to be | ||
41 | - * flipped if the direction changes. Always use ltr so that the | ||
42 | - * style works out correctly in both cases. */ | ||
43 | - direction: ltr; | ||
44 | -} | ||
45 | - | ||
46 | -#spinnerContainer.active { | ||
47 | - /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ | ||
48 | - -webkit-animation: container-rotate 1568ms linear infinite; | ||
49 | - animation: container-rotate 1568ms linear infinite; | ||
50 | -} | ||
51 | - | ||
52 | -@-webkit-keyframes container-rotate { | ||
53 | - to { -webkit-transform: rotate(360deg) } | ||
54 | -} | ||
55 | - | ||
56 | -@keyframes container-rotate { | ||
57 | - to { transform: rotate(360deg) } | ||
58 | -} | ||
59 | - | ||
60 | -.spinner-layer { | ||
61 | - position: absolute; | ||
62 | - width: 100%; | ||
63 | - height: 100%; | ||
64 | - opacity: 0; | ||
65 | -} | ||
66 | - | ||
67 | -.layer-1 { | ||
68 | - border-color: var(--paper-spinner-layer-1-color, --google-blue-500); | ||
69 | -} | ||
70 | - | ||
71 | -.layer-2 { | ||
72 | - border-color: var(--paper-spinner-layer-2-color, --google-red-500); | ||
73 | -} | ||
74 | - | ||
75 | -.layer-3 { | ||
76 | - border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); | ||
77 | -} | ||
78 | - | ||
79 | -.layer-4 { | ||
80 | - border-color: var(--paper-spinner-layer-4-color, --google-blue-500); | ||
81 | -} | ||
82 | - | ||
83 | -/** | ||
84 | - * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): | ||
85 | - * | ||
86 | - * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't | ||
87 | - * guarantee that the animation will start _exactly_ after that value. So we avoid using | ||
88 | - * animation-delay and instead set custom keyframes for each color (as layer-2undant as it | ||
89 | - * seems). | ||
90 | - * | ||
91 | - * We write out each animation in full (instead of separating animation-name, | ||
92 | - * animation-duration, etc.) because under the polyfill, Safari does not recognize those | ||
93 | - * specific properties properly, treats them as -webkit-animation, and overrides the | ||
94 | - * other animation rules. See https://github.com/Polymer/platform/issues/53. | ||
95 | - */ | ||
96 | -.active .spinner-layer.layer-1 { | ||
97 | - /* durations: 4 * ARCTIME */ | ||
98 | - -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; | ||
99 | - 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; | ||
100 | -} | ||
101 | - | ||
102 | -.active .spinner-layer.layer-2 { | ||
103 | - /* durations: 4 * ARCTIME */ | ||
104 | - -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; | ||
105 | - 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; | ||
106 | -} | ||
107 | - | ||
108 | -.active .spinner-layer.layer-3 { | ||
109 | - /* durations: 4 * ARCTIME */ | ||
110 | - -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; | ||
111 | - 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; | ||
112 | -} | ||
113 | - | ||
114 | -.active .spinner-layer.layer-4 { | ||
115 | - /* durations: 4 * ARCTIME */ | ||
116 | - -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; | ||
117 | - 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; | ||
118 | -} | ||
119 | - | ||
120 | -@-webkit-keyframes fill-unfill-rotate { | ||
121 | - 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ | ||
122 | - 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ | ||
123 | - 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ | ||
124 | - 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ | ||
125 | - 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ | ||
126 | - 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ | ||
127 | - 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ | ||
128 | - to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ | ||
129 | -} | ||
130 | - | ||
131 | -@keyframes fill-unfill-rotate { | ||
132 | - 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ | ||
133 | - 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ | ||
134 | - 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ | ||
135 | - 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ | ||
136 | - 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ | ||
137 | - 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ | ||
138 | - 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ | ||
139 | - to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ | ||
140 | -} | ||
141 | - | ||
142 | -/** | ||
143 | - * HACK: Even though the intention is to have the current .spinner-layer at | ||
144 | - * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome | ||
145 | - * to do proper subpixel rendering for the elements being animated. This is | ||
146 | - * especially visible in Chrome 39 on Ubuntu 14.04. See: | ||
147 | - * | ||
148 | - * - https://github.com/Polymer/paper-spinner/issues/9 | ||
149 | - * - https://code.google.com/p/chromium/issues/detail?id=436255 | ||
150 | - */ | ||
151 | -@-webkit-keyframes layer-1-fade-in-out { | ||
152 | - from { opacity: 0.99; } | ||
153 | - 25% { opacity: 0.99; } | ||
154 | - 26% { opacity: 0; } | ||
155 | - 89% { opacity: 0; } | ||
156 | - 90% { opacity: 0.99; } | ||
157 | - 100% { opacity: 0.99; } | ||
158 | -} | ||
159 | - | ||
160 | -@keyframes layer-1-fade-in-out { | ||
161 | - from { opacity: 0.99; } | ||
162 | - 25% { opacity: 0.99; } | ||
163 | - 26% { opacity: 0; } | ||
164 | - 89% { opacity: 0; } | ||
165 | - 90% { opacity: 0.99; } | ||
166 | - 100% { opacity: 0.99; } | ||
167 | -} | ||
168 | - | ||
169 | -@-webkit-keyframes layer-2-fade-in-out { | ||
170 | - from { opacity: 0; } | ||
171 | - 15% { opacity: 0; } | ||
172 | - 25% { opacity: 0.99; } | ||
173 | - 50% { opacity: 0.99; } | ||
174 | - 51% { opacity: 0; } | ||
175 | -} | ||
176 | - | ||
177 | -@keyframes layer-2-fade-in-out { | ||
178 | - from { opacity: 0; } | ||
179 | - 15% { opacity: 0; } | ||
180 | - 25% { opacity: 0.99; } | ||
181 | - 50% { opacity: 0.99; } | ||
182 | - 51% { opacity: 0; } | ||
183 | -} | ||
184 | - | ||
185 | -@-webkit-keyframes layer-3-fade-in-out { | ||
186 | - from { opacity: 0; } | ||
187 | - 40% { opacity: 0; } | ||
188 | - 50% { opacity: 0.99; } | ||
189 | - 75% { opacity: 0.99; } | ||
190 | - 76% { opacity: 0; } | ||
191 | -} | ||
192 | - | ||
193 | -@keyframes layer-3-fade-in-out { | ||
194 | - from { opacity: 0; } | ||
195 | - 40% { opacity: 0; } | ||
196 | - 50% { opacity: 0.99; } | ||
197 | - 75% { opacity: 0.99; } | ||
198 | - 76% { opacity: 0; } | ||
199 | -} | ||
200 | - | ||
201 | -@-webkit-keyframes layer-4-fade-in-out { | ||
202 | - from { opacity: 0; } | ||
203 | - 65% { opacity: 0; } | ||
204 | - 75% { opacity: 0.99; } | ||
205 | - 90% { opacity: 0.99; } | ||
206 | - 100% { opacity: 0; } | ||
207 | -} | ||
208 | - | ||
209 | -@keyframes layer-4-fade-in-out { | ||
210 | - from { opacity: 0; } | ||
211 | - 65% { opacity: 0; } | ||
212 | - 75% { opacity: 0.99; } | ||
213 | - 90% { opacity: 0.99; } | ||
214 | - 100% { opacity: 0; } | ||
215 | -} | ||
216 | - | ||
217 | -/** | ||
218 | - * Patch the gap that appear between the two adjacent div.circle-clipper while the | ||
219 | - * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). | ||
220 | - * | ||
221 | - * Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99, | ||
222 | - * but still does on Safari and IE. | ||
223 | - */ | ||
224 | -.gap-patch { | ||
225 | - position: absolute; | ||
226 | - box-sizing: border-box; | ||
227 | - top: 0; | ||
228 | - left: 45%; | ||
229 | - width: 10%; | ||
230 | - height: 100%; | ||
231 | - overflow: hidden; | ||
232 | - border-color: inherit; | ||
233 | -} | ||
234 | - | ||
235 | -.gap-patch .circle { | ||
236 | - width: 1000%; | ||
237 | - left: -450%; | ||
238 | -} | ||
239 | - | ||
240 | -.circle-clipper { | ||
241 | - display: inline-block; | ||
242 | - position: relative; | ||
243 | - width: 50%; | ||
244 | - height: 100%; | ||
245 | - overflow: hidden; | ||
246 | - border-color: inherit; | ||
247 | -} | ||
248 | - | ||
249 | -.circle-clipper .circle { | ||
250 | - width: 200%; | ||
251 | -} | ||
252 | - | ||
253 | -.circle { | ||
254 | - box-sizing: border-box; | ||
255 | - height: 100%; | ||
256 | - border-width: 3px; /* STROKEWIDTH */ | ||
257 | - border-style: solid; | ||
258 | - border-color: inherit; | ||
259 | - border-bottom-color: transparent !important; | ||
260 | - border-radius: 50%; | ||
261 | - -webkit-animation: none; | ||
262 | - animation: none; | ||
263 | - | ||
264 | - @apply(--layout-fit); | ||
265 | -} | ||
266 | - | ||
267 | -.circle-clipper.left .circle { | ||
268 | - border-right-color: transparent !important; | ||
269 | - -webkit-transform: rotate(129deg); | ||
270 | - transform: rotate(129deg); | ||
271 | -} | ||
272 | - | ||
273 | -.circle-clipper.right .circle { | ||
274 | - left: -100%; | ||
275 | - border-left-color: transparent !important; | ||
276 | - -webkit-transform: rotate(-129deg); | ||
277 | - transform: rotate(-129deg); | ||
278 | -} | ||
279 | - | ||
280 | -.active .circle-clipper.left .circle { | ||
281 | - /* duration: ARCTIME */ | ||
282 | - -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | ||
283 | - animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | ||
284 | -} | ||
285 | - | ||
286 | -.active .circle-clipper.right .circle { | ||
287 | - /* duration: ARCTIME */ | ||
288 | - -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | ||
289 | - animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | ||
290 | -} | ||
291 | - | ||
292 | -@-webkit-keyframes left-spin { | ||
293 | - from { -webkit-transform: rotate(130deg); } | ||
294 | - 50% { -webkit-transform: rotate(-5deg); } | ||
295 | - to { -webkit-transform: rotate(130deg); } | ||
296 | -} | ||
297 | - | ||
298 | -@keyframes left-spin { | ||
299 | - from { transform: rotate(130deg); } | ||
300 | - 50% { transform: rotate(-5deg); } | ||
301 | - to { transform: rotate(130deg); } | ||
302 | -} | ||
303 | - | ||
304 | -@-webkit-keyframes right-spin { | ||
305 | - from { -webkit-transform: rotate(-130deg); } | ||
306 | - 50% { -webkit-transform: rotate(5deg); } | ||
307 | - to { -webkit-transform: rotate(-130deg); } | ||
308 | -} | ||
309 | - | ||
310 | -@keyframes right-spin { | ||
311 | - from { transform: rotate(-130deg); } | ||
312 | - 50% { transform: rotate(5deg); } | ||
313 | - to { transform: rotate(-130deg); } | ||
314 | -} | ||
315 | - | ||
316 | -#spinnerContainer.cooldown { | ||
317 | - /* duration: SHRINK_TIME */ | ||
318 | - -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); | ||
319 | - animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); | ||
320 | -} | ||
321 | - | ||
322 | -@-webkit-keyframes fade-out { | ||
323 | - from { opacity: 0.99; } | ||
324 | - to { opacity: 0; } | ||
325 | -} | ||
326 | - | ||
327 | -@keyframes fade-out { | ||
328 | - from { opacity: 0.99; } | ||
329 | - to { opacity: 0; } | ||
330 | -} |
bower_components/paper-spinner/paper-spinner.html
100755 → 100644
@@ -9,17 +9,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | @@ -9,17 +9,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
9 | --> | 9 | --> |
10 | 10 | ||
11 | <link rel="import" href="../polymer/polymer.html"> | 11 | <link rel="import" href="../polymer/polymer.html"> |
12 | -<link rel="import" href="../paper-styles/color.html"> | ||
13 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> | 12 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
13 | +<link rel="import" href="../paper-styles/color.html"> | ||
14 | +<link rel="import" href="paper-spinner-behavior.html"> | ||
15 | +<link rel="import" href="paper-spinner-styles.html"> | ||
14 | 16 | ||
15 | <!-- | 17 | <!-- |
16 | -Element providing material design circular spinner. | 18 | +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) |
19 | + | ||
20 | +Element providing a multiple color material design circular spinner. | ||
17 | 21 | ||
18 | <paper-spinner active></paper-spinner> | 22 | <paper-spinner active></paper-spinner> |
19 | 23 | ||
20 | The default spinner cycles between four layers of colors; by default they are | 24 | The default spinner cycles between four layers of colors; by default they are |
21 | -blue, red, yellow and green. It can be customized so that it uses one color only | ||
22 | -by setting all the layer colors to the same value. | 25 | +blue, red, yellow and green. It can be customized to cycle between four different |
26 | +colors. Use <paper-spinner-lite> for single color spinners. | ||
23 | 27 | ||
24 | ### Accessibility | 28 | ### Accessibility |
25 | 29 | ||
@@ -40,6 +44,7 @@ Custom property | Description | Default | @@ -40,6 +44,7 @@ Custom property | Description | Default | ||
40 | `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500` | 44 | `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500` |
41 | `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500` | 45 | `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500` |
42 | `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500` | 46 | `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500` |
47 | +`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px | ||
43 | 48 | ||
44 | @group Paper Elements | 49 | @group Paper Elements |
45 | @element paper-spinner | 50 | @element paper-spinner |
@@ -48,153 +53,39 @@ Custom property | Description | Default | @@ -48,153 +53,39 @@ Custom property | Description | Default | ||
48 | --> | 53 | --> |
49 | 54 | ||
50 | <dom-module id="paper-spinner"> | 55 | <dom-module id="paper-spinner"> |
56 | + <template strip-whitespace> | ||
57 | + <style include="paper-spinner-styles"></style> | ||
51 | 58 | ||
52 | - <link rel="import" type="css" href="paper-spinner.css"> | ||
53 | - | ||
54 | - <template> | ||
55 | - | ||
56 | - <div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]"> | 59 | + <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]"> |
57 | <div class="spinner-layer layer-1"> | 60 | <div class="spinner-layer layer-1"> |
58 | - <div class="circle-clipper left"> | ||
59 | - <div class="circle"></div> | ||
60 | - </div><div class="gap-patch"> | ||
61 | - <div class="circle"></div> | ||
62 | - </div><div class="circle-clipper right"> | ||
63 | - <div class="circle"></div> | ||
64 | - </div> | 61 | + <div class="circle-clipper left"></div> |
62 | + <div class="circle-clipper right"></div> | ||
65 | </div> | 63 | </div> |
66 | 64 | ||
67 | <div class="spinner-layer layer-2"> | 65 | <div class="spinner-layer layer-2"> |
68 | - <div class="circle-clipper left"> | ||
69 | - <div class="circle"></div> | ||
70 | - </div><div class="gap-patch"> | ||
71 | - <div class="circle"></div> | ||
72 | - </div><div class="circle-clipper right"> | ||
73 | - <div class="circle"></div> | ||
74 | - </div> | 66 | + <div class="circle-clipper left"></div> |
67 | + <div class="circle-clipper right"></div> | ||
75 | </div> | 68 | </div> |
76 | 69 | ||
77 | <div class="spinner-layer layer-3"> | 70 | <div class="spinner-layer layer-3"> |
78 | - <div class="circle-clipper left"> | ||
79 | - <div class="circle"></div> | ||
80 | - </div><div class="gap-patch"> | ||
81 | - <div class="circle"></div> | ||
82 | - </div><div class="circle-clipper right"> | ||
83 | - <div class="circle"></div> | ||
84 | - </div> | 71 | + <div class="circle-clipper left"></div> |
72 | + <div class="circle-clipper right"></div> | ||
85 | </div> | 73 | </div> |
86 | 74 | ||
87 | <div class="spinner-layer layer-4"> | 75 | <div class="spinner-layer layer-4"> |
88 | - <div class="circle-clipper left"> | ||
89 | - <div class="circle"></div> | ||
90 | - </div><div class="gap-patch"> | ||
91 | - <div class="circle"></div> | ||
92 | - </div><div class="circle-clipper right"> | ||
93 | - <div class="circle"></div> | ||
94 | - </div> | 76 | + <div class="circle-clipper left"></div> |
77 | + <div class="circle-clipper right"></div> | ||
95 | </div> | 78 | </div> |
96 | </div> | 79 | </div> |
97 | - | ||
98 | </template> | 80 | </template> |
99 | 81 | ||
100 | <script> | 82 | <script> |
101 | - | ||
102 | Polymer({ | 83 | Polymer({ |
103 | - | ||
104 | is: 'paper-spinner', | 84 | is: 'paper-spinner', |
105 | 85 | ||
106 | - listeners: { | ||
107 | - 'animationend': 'reset', | ||
108 | - 'webkitAnimationEnd': 'reset' | ||
109 | - }, | ||
110 | - | ||
111 | - properties: { | ||
112 | - | ||
113 | - /** | ||
114 | - * Displays the spinner. | ||
115 | - * | ||
116 | - * @attribute active | ||
117 | - * @type boolean | ||
118 | - * @default false | ||
119 | - */ | ||
120 | - active: { | ||
121 | - type: Boolean, | ||
122 | - value: false, | ||
123 | - reflectToAttribute: true, | ||
124 | - observer: '_activeChanged' | ||
125 | - }, | ||
126 | - | ||
127 | - /** | ||
128 | - * Alternative text content for accessibility support. | ||
129 | - * If alt is present, it will add an aria-label whose content matches alt when active. | ||
130 | - * If alt is not present, it will default to 'loading' as the alt value. | ||
131 | - * | ||
132 | - * @attribute alt | ||
133 | - * @type string | ||
134 | - * @default 'loading' | ||
135 | - */ | ||
136 | - alt: { | ||
137 | - type: String, | ||
138 | - value: 'loading', | ||
139 | - observer: '_altChanged' | ||
140 | - }, | ||
141 | - | ||
142 | - /** | ||
143 | - * True when the spinner is going from active to inactive. This is represented by a fade | ||
144 | - * to 0% opacity to the user. | ||
145 | - */ | ||
146 | - _coolingDown: { | ||
147 | - type: Boolean, | ||
148 | - value: false | ||
149 | - }, | ||
150 | - | ||
151 | - _spinnerContainerClassName: { | ||
152 | - type: String, | ||
153 | - computed: '_computeSpinnerContainerClassName(active, _coolingDown)' | ||
154 | - } | ||
155 | - | ||
156 | - }, | ||
157 | - | ||
158 | - _computeSpinnerContainerClassName: function(active, coolingDown) { | ||
159 | - return [ | ||
160 | - active || coolingDown ? 'active' : '', | ||
161 | - coolingDown ? 'cooldown' : '' | ||
162 | - ].join(' '); | ||
163 | - }, | ||
164 | - | ||
165 | - _activeChanged: function(active, old) { | ||
166 | - this._setAriaHidden(!active); | ||
167 | - if (!active && old) { | ||
168 | - this._coolingDown = true; | ||
169 | - } | ||
170 | - }, | ||
171 | - | ||
172 | - _altChanged: function(alt) { | ||
173 | - // user-provided `aria-label` takes precedence over prototype default | ||
174 | - if (alt === this.getPropertyInfo('alt').value) { | ||
175 | - this.alt = this.getAttribute('aria-label') || alt; | ||
176 | - } else { | ||
177 | - this._setAriaHidden(alt===''); | ||
178 | - this.setAttribute('aria-label', alt); | ||
179 | - } | ||
180 | - }, | ||
181 | - | ||
182 | - _setAriaHidden: function(hidden) { | ||
183 | - var attr = 'aria-hidden'; | ||
184 | - if (hidden) { | ||
185 | - this.setAttribute(attr, 'true'); | ||
186 | - } else { | ||
187 | - this.removeAttribute(attr); | ||
188 | - } | ||
189 | - }, | ||
190 | - | ||
191 | - reset: function() { | ||
192 | - this.active = false; | ||
193 | - this._coolingDown = false; | ||
194 | - } | ||
195 | - | 86 | + behaviors: [ |
87 | + Polymer.PaperSpinnerBehavior | ||
88 | + ] | ||
196 | }); | 89 | }); |
197 | - | ||
198 | </script> | 90 | </script> |
199 | - | ||
200 | </dom-module> | 91 | </dom-module> |
bower_components/paper-spinner/test/index.html
100755 → 100644
1 | -<!doctype html> | ||
2 | -<!-- | 1 | +<!DOCTYPE html><!-- |
3 | @license | 2 | @license |
4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
@@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | @@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
8 | Code distributed by Google as part of the polymer project is also | 7 | Code distributed by Google as part of the polymer project is also |
9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
10 | ---> | ||
11 | -<html> | ||
12 | - <head> | 9 | +--><html><head> |
13 | 10 | ||
14 | <title>paper-spinner tests</title> | 11 | <title>paper-spinner tests</title> |
15 | 12 | ||
@@ -23,12 +20,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | @@ -23,12 +20,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
23 | <body> | 20 | <body> |
24 | 21 | ||
25 | <script> | 22 | <script> |
26 | - | ||
27 | WCT.loadSuites([ | 23 | WCT.loadSuites([ |
28 | - 'paper-spinner.html' | 24 | + 'paper-spinner.html', |
25 | + 'paper-spinner.html?dom=shadow' | ||
29 | ]); | 26 | ]); |
30 | - | ||
31 | </script> | 27 | </script> |
32 | 28 | ||
33 | - </body> | ||
34 | -</html> | 29 | + |
30 | + | ||
31 | +</body></html> |
bower_components/paper-spinner/test/paper-spinner.html
100755 → 100644
@@ -31,6 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | @@ -31,6 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
31 | </template> | 31 | </template> |
32 | </test-fixture> | 32 | </test-fixture> |
33 | 33 | ||
34 | + <test-fixture id="ActivePaperSpinner"> | ||
35 | + <template> | ||
36 | + <paper-spinner active></paper-spinner> | ||
37 | + </template> | ||
38 | + </test-fixture> | ||
39 | + | ||
34 | <script> | 40 | <script> |
35 | 'use strict'; | 41 | 'use strict'; |
36 | 42 | ||
@@ -38,9 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | @@ -38,9 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
38 | 44 | ||
39 | suite('an accessible paper spinner', function() { | 45 | suite('an accessible paper spinner', function() { |
40 | var spinner; | 46 | var spinner; |
47 | + var activeSpinner; | ||
41 | 48 | ||
42 | setup(function() { | 49 | setup(function() { |
43 | spinner = fixture('PaperSpinner'); | 50 | spinner = fixture('PaperSpinner'); |
51 | + activeSpinner = fixture('ActivePaperSpinner'); | ||
44 | }); | 52 | }); |
45 | 53 | ||
46 | test('adds an ARIA label when `alt` is supplied', function() { | 54 | test('adds an ARIA label when `alt` is supplied', function() { |
@@ -54,6 +62,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | @@ -54,6 +62,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN | ||
54 | spinner.active = false; | 62 | spinner.active = false; |
55 | expect(spinner.getAttribute('aria-hidden')).to.be.eql('true'); | 63 | expect(spinner.getAttribute('aria-hidden')).to.be.eql('true'); |
56 | }); | 64 | }); |
65 | + | ||
66 | + test('toggle during cooldown', function(done) { | ||
67 | + activeSpinner.active = false; | ||
68 | + | ||
69 | + // Set active to true before cooldown animation completes. | ||
70 | + setTimeout(function() { | ||
71 | + activeSpinner.active = true; | ||
72 | + | ||
73 | + // Wait for cooldown animation to complete. | ||
74 | + setTimeout(function() { | ||
75 | + expect(activeSpinner.active).to.equal(true); | ||
76 | + done(); | ||
77 | + }, 500); | ||
78 | + }, 100); | ||
79 | + }); | ||
57 | }); | 80 | }); |
58 | 81 | ||
59 | }); | 82 | }); |
controllets/providers-utility-controllet/generic.js
1 | function generic_Provider () {} | 1 | function generic_Provider () {} |
2 | 2 | ||
3 | generic_Provider.prototype.selectData = function(data) { | 3 | generic_Provider.prototype.selectData = function(data) { |
4 | - return data; | 4 | + |
5 | + if(data instanceof Array) | ||
6 | + return data; | ||
7 | + if(_isGEOJSON(data)) | ||
8 | + return [{"GEOJSON" : data}]; | ||
9 | + if(data instanceof Object) | ||
10 | + return [{"JSON" : data}]; | ||
5 | }; | 11 | }; |
6 | 12 | ||
7 | generic_Provider.prototype.addLimit = function(url) { | 13 | generic_Provider.prototype.addLimit = function(url) { |
8 | return url; | 14 | return url; |
15 | +}; | ||
16 | + | ||
17 | +function _isGEOJSON (data) { | ||
18 | + var dt = new DataTypeConverter(); | ||
19 | + return (dt.inferDataSubTypeOfValue(data) && dt.inferDataSubTypeOfValue(data).name == DataTypeConverter.SUBTYPES.GEOJSON.name); | ||
9 | }; | 20 | }; |
10 | \ No newline at end of file | 21 | \ No newline at end of file |
controllets/providers-utility-controllet/providers-utility-controllet.html
1 | <link rel="import" href="../../bower_components/polymer/polymer.html" /> | 1 | <link rel="import" href="../../bower_components/polymer/polymer.html" /> |
2 | 2 | ||
3 | +<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script> | ||
4 | + | ||
3 | <script src="ckan.js"></script> | 5 | <script src="ckan.js"></script> |
4 | <script src="openDataSoft.js"></script> | 6 | <script src="openDataSoft.js"></script> |
5 | <script src="generic.js"></script> | 7 | <script src="generic.js"></script> |
datalets/base-datalet/base-datalet.html
@@ -31,6 +31,9 @@ | @@ -31,6 +31,9 @@ | ||
31 | 31 | ||
32 | <link rel="import" href="../../bower_components/polymer/polymer.html"> | 32 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
33 | 33 | ||
34 | +<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html"> | ||
35 | +<link rel="import" href="../../bower_components/paper-spinner/paper-spinner-lite.html"> | ||
36 | + | ||
34 | <!-- | 37 | <!-- |
35 | The `base-datalet` is the base component that includes datalet footer (with information about dataset domain and ROUTE-TO-PA project). | 38 | The `base-datalet` is the base component that includes datalet footer (with information about dataset domain and ROUTE-TO-PA project). |
36 | Base datalet includes polymer.html and the BaseDataletBehaviors javascript file that define the datalet workcycle and the datalet base properties : dataUrl, fields and data. | 39 | Base datalet includes polymer.html and the BaseDataletBehaviors javascript file that define the datalet workcycle and the datalet base properties : dataUrl, fields and data. |
@@ -54,7 +57,20 @@ Example : | @@ -54,7 +57,20 @@ Example : | ||
54 | 57 | ||
55 | <dom-module id="base-datalet"> | 58 | <dom-module id="base-datalet"> |
56 | <template> | 59 | <template> |
57 | - <style> | 60 | + |
61 | + <style is="custom-style"> | ||
62 | + paper-spinner { | ||
63 | + height: 64px; | ||
64 | + width: 64px; | ||
65 | + | ||
66 | + --paper-spinner-stroke-width: 8px; | ||
67 | + | ||
68 | + --paper-spinner-layer-1-color: #2196F3; | ||
69 | + --paper-spinner-layer-2-color: #F44336;; | ||
70 | + --paper-spinner-layer-3-color: #FFEB3B;; | ||
71 | + --paper-spinner-layer-4-color: #4CAF50;; | ||
72 | + } | ||
73 | + | ||
58 | a { | 74 | a { |
59 | color: #00BCD4; | 75 | color: #00BCD4; |
60 | text-decoration: none; | 76 | text-decoration: none; |
@@ -83,10 +99,9 @@ Example : | @@ -83,10 +99,9 @@ Example : | ||
83 | height: 32px; | 99 | height: 32px; |
84 | width: 32px; | 100 | width: 32px; |
85 | } | 101 | } |
86 | - #base_datalet_spin { | ||
87 | - height: 64px; | 102 | + #base_datalet_spinner { |
88 | width: 100%; | 103 | width: 100%; |
89 | - margin-top: 64px; | 104 | + padding: 168px calc(50% - 32px); |
90 | } | 105 | } |
91 | 106 | ||
92 | #base_datalet_source_link{ | 107 | #base_datalet_source_link{ |
@@ -101,7 +116,8 @@ Example : | @@ -101,7 +116,8 @@ Example : | ||
101 | font-style: italic; | 116 | font-style: italic; |
102 | color: #727272; | 117 | color: #727272; |
103 | } | 118 | } |
104 | -/*EXPORT*/ | 119 | + |
120 | + /*EXPORT*/ | ||
105 | .export | 121 | .export |
106 | { | 122 | { |
107 | position: absolute; | 123 | position: absolute; |
@@ -127,31 +143,24 @@ Example : | @@ -127,31 +143,24 @@ Example : | ||
127 | display: none; | 143 | display: none; |
128 | } | 144 | } |
129 | 145 | ||
130 | - .highcharts-contextmenu-container | ||
131 | - { | ||
132 | - /*background: rgb(255, 255, 255);*/ | ||
133 | - /*background-color: #E0E0E0;*/ | ||
134 | - } | ||
135 | - | ||
136 | .highcharts-contextmenu-container div | 146 | .highcharts-contextmenu-container div |
137 | { | 147 | { |
138 | cursor: pointer; | 148 | cursor: pointer; |
139 | padding: 0px 4px; | 149 | padding: 0px 4px; |
140 | - /*color: rgb(48, 48, 48);*/ | ||
141 | font-size: 11px; | 150 | font-size: 11px; |
142 | line-height: 15px; | 151 | line-height: 15px; |
143 | - /*background: none;*/ | ||
144 | } | 152 | } |
145 | 153 | ||
146 | .highcharts-contextmenu-container div:hover | 154 | .highcharts-contextmenu-container div:hover |
147 | { | 155 | { |
148 | background: #00BCD4; | 156 | background: #00BCD4; |
149 | } | 157 | } |
150 | -/*EXPORT*/ | 158 | + /*EXPORT*/ |
159 | + | ||
151 | </style> | 160 | </style> |
152 | 161 | ||
153 | - <div id="base_datalet_imgWaitDatalet"> | ||
154 | - <img id="base_datalet_spin" src="static/images/spin.svg"> | 162 | + <div id="base_datalet_spinner"> |
163 | + <paper-spinner id="datalet_spinner" active></paper-spinner> | ||
155 | </div> | 164 | </div> |
156 | 165 | ||
157 | <div id="base_datalet_container"> | 166 | <div id="base_datalet_container"> |
@@ -255,7 +264,8 @@ Example : | @@ -255,7 +264,8 @@ Example : | ||
255 | // }, | 264 | // }, |
256 | 265 | ||
257 | removeLoader: function() { | 266 | removeLoader: function() { |
258 | - this.$.base_datalet_imgWaitDatalet.style.display = "none"; | 267 | + this.$.base_datalet_spinner.style.display = "none"; |
268 | + this.$.datalet_spinner.active = false; | ||
259 | }, | 269 | }, |
260 | 270 | ||
261 | hideFooter: function() { | 271 | hideFooter: function() { |
datalets/base-datalet/static/images/more_horiz_grey600_36x36.png deleted
250 Bytes
datalets/base-datalet/static/images/more_horiz_white_36x36.png deleted
243 Bytes
datalets/base-datalet/static/images/more_vert_white_32x32.png deleted
218 Bytes
datalets/base-datalet/static/images/spin.svg deleted
1 | -<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-spin"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="translate(50 50)"><g transform="rotate(0) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(45) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.12s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(90) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.25s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(135) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.37s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(180) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.5s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(225) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.62s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(270) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.75s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(315) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.87s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g></g></svg> | ||
2 | \ No newline at end of file | 0 | \ No newline at end of file |
datalets/treemap-datalet/treemap-datalet.html
@@ -60,7 +60,7 @@ Example: | @@ -60,7 +60,7 @@ Example: | ||
60 | :host ::content #treemap_placeholder { | 60 | :host ::content #treemap_placeholder { |
61 | width: 100%; | 61 | width: 100%; |
62 | height: 70%; | 62 | height: 70%; |
63 | - /*min-height: 500px;*/ | 63 | + min-height: 400px; |
64 | background: #bbb; | 64 | background: #bbb; |
65 | /*position: relative;*/ | 65 | /*position: relative;*/ |
66 | } | 66 | } |