WebCompDev / COMPONENTS

Commit 25201c03867bf5bcadd43f942691c0580871a3d6

Authored by Renato De Donato
1 parent ff028a33

spinner, geojsonPure

Inline Side-by-side
Showing 23 changed files with 883 additions and 259 deletions
bower_components/paper-spinner/.bower.json 100755 → 100644
  View file @25201c0
1 1 {
2 2 "name": "paper-spinner",
3   - "version": "1.0.2",
  3 + "version": "1.2.0",
4 4 "description": "A material design spinner",
5 5 "authors": [
6 6 "The Polymer Authors"
... ... @@ -22,21 +22,27 @@
22 22 "dependencies": {
23 23 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
24 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 27 "devDependencies": {
28   - "web-component-tester": "*",
29 28 "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  29 + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
30 30 "test-fixture": "PolymerElements/test-fixture#^1.0.0",
  31 + "web-component-tester": "^4.0.0",
31 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 39 "_resolution": {
35 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 49 \ No newline at end of file
... ...
bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md 0 → 100644
  View file @25201c0
  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
  View file @25201c0
bower_components/paper-spinner/.travis.yml 0 → 100644
  View file @25201c0
  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
  View file @25201c0
  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
  View file @25201c0
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 +##&lt;paper-spinner&gt;
  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 26 ```html
9 27 <paper-spinner active></paper-spinner>
10 28 ```
11 29  
12 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 +##&lt;paper-spinner-lite&gt;
  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 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 73 Alt attribute should be set to provide adequate context for accessibility. If not provided,
37 74 it defaults to 'loading'.
38 75 Empty alt can be provided to mark the element as decorative if alternative content is provided
39 76 in another form (e.g. a text block following the spinner).
40 77  
41   -##### Example
42   -
43 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
  View file @25201c0
1 1 {
2 2 "name": "paper-spinner",
3   - "version": "1.0.2",
  3 + "version": "1.2.0",
4 4 "description": "A material design spinner",
5 5 "authors": [
6 6 "The Polymer Authors"
... ... @@ -22,12 +22,17 @@
22 22 "dependencies": {
23 23 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
24 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 27 "devDependencies": {
28   - "web-component-tester": "*",
29 28 "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  29 + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
30 30 "test-fixture": "PolymerElements/test-fixture#^1.0.0",
  31 + "web-component-tester": "^4.0.0",
31 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
  View file @25201c0
... ... @@ -9,89 +9,89 @@ Code distributed by Google as part of the polymer project is also
9 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 10 -->
11 11 <html lang="en">
12   -
13 12 <head>
14   - <meta charset="UTF-8">
15 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 36 </style>
60 37 </head>
61   -
62 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 43 <paper-spinner></paper-spinner>
70 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 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 86 </div>
86 87  
87 88 <script>
88 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 91 Array.prototype.forEach.call(spinners, function(spinner) {
91 92 spinner.active = !spinner.active;
92 93 });
93 94 };
94 95 </script>
95 96 </body>
96   -
97 97 </html>
... ...
bower_components/paper-spinner/index.html 100755 → 100644
  View file @25201c0
bower_components/paper-spinner/paper-spinner-behavior.html 0 → 100644
  View file @25201c0
  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
  View file @25201c0
  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
  View file @25201c0
  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.html 100755 → 100644
  View file @25201c0
... ... @@ -9,17 +9,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
9 9 -->
10 10  
11 11 <link rel="import" href="../polymer/polymer.html">
12   -<link rel="import" href="../paper-styles/color.html">
13 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 22 <paper-spinner active></paper-spinner>
19 23  
20 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 28 ### Accessibility
25 29  
... ... @@ -40,6 +44,7 @@ Custom property | Description | Default
40 44 `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
41 45 `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
42 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 49 @group Paper Elements
45 50 @element paper-spinner
... ... @@ -48,153 +53,39 @@ Custom property | Description | Default
48 53 -->
49 54  
50 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 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 63 </div>
66 64  
67 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 68 </div>
76 69  
77 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 73 </div>
86 74  
87 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 78 </div>
96 79 </div>
97   -
98 80 </template>
99 81  
100 82 <script>
101   -
102 83 Polymer({
103   -
104 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 90 </script>
199   -
200 91 </dom-module>
... ...
bower_components/paper-spinner/test/index.html 100755 → 100644
  View file @25201c0
1   -<!doctype html>
2   -<!--
  1 +<!DOCTYPE html><!--
3 2 @license
4 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 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 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8 7 Code distributed by Google as part of the polymer project is also
9 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 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 20 <body>
24 21  
25 22 <script>
26   -
27 23 WCT.loadSuites([
28   - 'paper-spinner.html'
  24 + 'paper-spinner.html',
  25 + 'paper-spinner.html?dom=shadow'
29 26 ]);
30   -
31 27 </script>
32 28  
33   - </body>
34   -</html>
  29 +
  30 +
  31 +</body></html>
... ...
bower_components/paper-spinner/test/paper-spinner.html 100755 → 100644
  View file @25201c0
... ... @@ -31,6 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
31 31 </template>
32 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 40 <script>
35 41 'use strict';
36 42  
... ... @@ -38,9 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 44  
39 45 suite('an accessible paper spinner', function() {
40 46 var spinner;
  47 + var activeSpinner;
41 48  
42 49 setup(function() {
43 50 spinner = fixture('PaperSpinner');
  51 + activeSpinner = fixture('ActivePaperSpinner');
44 52 });
45 53  
46 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 62 spinner.active = false;
55 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
  View file @25201c0
1 1 function generic_Provider () {}
2 2  
3 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 13 generic_Provider.prototype.addLimit = function(url) {
8 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 21 \ No newline at end of file
... ...
controllets/providers-utility-controllet/providers-utility-controllet.html
  View file @25201c0
1 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 5 <script src="ckan.js"></script>
4 6 <script src="openDataSoft.js"></script>
5 7 <script src="generic.js"></script>
... ...
datalets/base-datalet/base-datalet.html
  View file @25201c0
... ... @@ -31,6 +31,9 @@
31 31  
32 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 38 The `base-datalet` is the base component that includes datalet footer (with information about dataset domain and ROUTE-TO-PA project).
36 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 57  
55 58 <dom-module id="base-datalet">
56 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 74 a {
59 75 color: #00BCD4;
60 76 text-decoration: none;
... ... @@ -83,10 +99,9 @@ Example :
83 99 height: 32px;
84 100 width: 32px;
85 101 }
86   - #base_datalet_spin {
87   - height: 64px;
  102 + #base_datalet_spinner {
88 103 width: 100%;
89   - margin-top: 64px;
  104 + padding: 168px calc(50% - 32px);
90 105 }
91 106  
92 107 #base_datalet_source_link{
... ... @@ -101,7 +116,8 @@ Example :
101 116 font-style: italic;
102 117 color: #727272;
103 118 }
104   -/*EXPORT*/
  119 +
  120 + /*EXPORT*/
105 121 .export
106 122 {
107 123 position: absolute;
... ... @@ -127,31 +143,24 @@ Example :
127 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 146 .highcharts-contextmenu-container div
137 147 {
138 148 cursor: pointer;
139 149 padding: 0px 4px;
140   - /*color: rgb(48, 48, 48);*/
141 150 font-size: 11px;
142 151 line-height: 15px;
143   - /*background: none;*/
144 152 }
145 153  
146 154 .highcharts-contextmenu-container div:hover
147 155 {
148 156 background: #00BCD4;
149 157 }
150   -/*EXPORT*/
  158 + /*EXPORT*/
  159 +
151 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 164 </div>
156 165  
157 166 <div id="base_datalet_container">
... ... @@ -255,7 +264,8 @@ Example :
255 264 // },
256 265  
257 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 271 hideFooter: function() {
... ...
datalets/base-datalet/static/images/more_horiz_grey600_36x36.png deleted
View file @ff028a3

250 Bytes
datalets/base-datalet/static/images/more_horiz_white_36x36.png deleted
View file @ff028a3

243 Bytes
datalets/base-datalet/static/images/more_vert_white_32x32.png deleted
View file @ff028a3

218 Bytes
datalets/base-datalet/static/images/spin.svg deleted
View file @ff028a3
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 0 \ No newline at end of file
datalets/treemap-datalet/treemap-datalet.html
  View file @25201c0
... ... @@ -60,7 +60,7 @@ Example:
60 60 :host ::content #treemap_placeholder {
61 61 width: 100%;
62 62 height: 70%;
63   - /*min-height: 500px;*/
  63 + min-height: 400px;
64 64 background: #bbb;
65 65 /*position: relative;*/
66 66 }
... ...