diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-progress')
13 files changed, 962 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-progress/.bower.json b/catapult/third_party/polymer/components/paper-progress/.bower.json new file mode 100644 index 00000000..cfdd43f5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/.bower.json @@ -0,0 +1,43 @@ +{ + "name": "paper-progress", + "version": "1.0.12", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "A material design progress bar", + "authors": "The Polymer Authors", + "keywords": [ + "web-components", + "polymer", + "progress", + "loading" + ], + "main": "paper-progress.html", + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-progress.git" + }, + "dependencies": { + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "paper-button": "PolymerElements/paper-button#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "ignore": [], + "homepage": "https://github.com/PolymerElements/paper-progress", + "_release": "1.0.12", + "_resolution": { + "type": "version", + "tag": "v1.0.12", + "commit": "15b3f289c6dfe365846d5d312ac89f61fefcb1ee" + }, + "_source": "https://github.com/PolymerElements/paper-progress.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/paper-progress" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-progress/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-progress/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..09b5a1e5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-progress/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/paper-progress/.gitignore b/catapult/third_party/polymer/components/paper-progress/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/paper-progress/.travis.yml b/catapult/third_party/polymer/components/paper-progress/.travis.yml new file mode 100644 index 00000000..e69c63ca --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: >- + H1BFM+lOHi3yosJV4VpeDHO/N33EeAeQqKbWMAiGfbjMmVUa2Y9gQzpIONMtO09KMTZMw0dlE3GYNLnc44JXlnSvmp34Fh8KpxOz4BxlbIj2aw/M99FWxRAJYpV+BWWKhwwuFq6DctATljcdfvYyHxpjCAFjTIMCCAHtdVrowlxMlivu/BSlBlZ4HR0OfHr7l8PAC1hSieWr5Rpk0PMcQ6B0nEhSTRgGdxEwADnkOL3Sx966vNv3qxwIML29UrZ3mFdfrgnfwdNZTivjDaRhY4tUu7bw5vP8c4PeVR7lalhVBse5J4xKo7Xw80To+bm/0Hyo4ZgZPzEbq0EAIszRnwRo/d4YiFGkyIgFHJ8a/v2h3BWxW+9W51nKsQcFijitu2pMhKC9ankRxL23TK0rtYff6hj/bCwtfy/965PzZgiAeBgcQUZ25+unOc11VAyIEGUZeLAqzulMOn2LAcvSrVEVGpb90whvVxfG3T8hkFbIrPtD3TWrtvt4ul/25pe+eLNET2DUTqrPFfizthyaGFfavykA6PPGI58AFD2EnFmaD9eJC/eCP34FAZec8G2yMbXOYxg6B40Z1ezHo8j7jzbekEJBsHVegpart9YSxQwx5b95SsqlPbyhdLLHIZIzT9dSfbS/l0YFUYbejeMM5koi1qdqXVCdCMpbwS61WA8= + - secure: >- + KZek5eiBlb80rC3C0pgb39C4mWskrGJdxV0Xp9WBAnJQkXN4fvKgB5QOIGVV8yP/aM824zv/nj1Z61MWcjKw5kYJBon0Hw4Qemk7KJh7kde5bhg+3dWcdfv8Hhz9wuVGxqmZ01N8LWat+dRzEqY5ZawFQ+P2M/FXxxwKKsH3GKpjgjN2G8u7nadD2p4hDIBmVVGK0dqDZDOg+YZ+jEdGyWTbjeVOnktvb6dDfcKm52VIpcgAvqa8CCFFwTE3lFrHK4UdiqxFW2YcIB1lgJADJ1B2wAjL0cuf97uu8jaCpCGMeQXz5/XH5SxLA8ah/6GV7C37+WlEPeyallUUbSn05m/xYVFEMvrw/04bFQUyiwt9/rdqA8OLNOUwIEk9hMWC3LkooE2LTLs4l1OKN2x9OuTGPTU2f4LrH4z32zSChxjI/4fqCFwDJs6MBfQFIlpV1e6F1YOvPLPOtBLLTVK1n1KeXeY9HSvk+f5lxRwS4VFZ1oG6+a/l+MoB2HMUmhEn0Wa+KS2qk5Yfea/UIlvi8IuA7zsXoeYkBuwIT7VJVdU0Oebfkam4jWR6qYs/QQF/MchzungKchhwyhsSzQvCuaHJhdA6D1L0oqkXRpPouJwkcvGu9z+wf+zPfh3h065Trg7tC4DYHnXRSTF0ocO3H+EfImRSP5jsgPz0gMl4iI0= +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +dist: trusty diff --git a/catapult/third_party/polymer/components/paper-progress/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-progress/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +If you edit this file, your changes will get overridden :) + +You can however override the jsbin link with one that's customized to this +specific element: + +jsbin=https://jsbin.com/cagaye/edit?html,output +--> + +# Polymer Elements +## Guide for Contributors + +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: + +### Filing Issues + +**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: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 3. Click the `paper-foo` element. + ``` + + 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). + + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. + +### Submitting Pull Requests + +**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. + +When submitting pull requests, please provide: + + 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: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 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. + +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! diff --git a/catapult/third_party/polymer/components/paper-progress/README.md b/catapult/third_party/polymer/components/paper-progress/README.md new file mode 100644 index 00000000..f2278de0 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/README.md @@ -0,0 +1,49 @@ +[](https://travis-ci.org/PolymerElements/paper-progress) + +##<paper-progress> + +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) + +<!--- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../paper-styles/color.html"> + <link rel="import" href="paper-progress.html"> + <style is="custom-style"> + paper-progress { + display: block; + width: 100%; + margin: 20px 0; + } + paper-progress.slow { + --paper-progress-indeterminate-cycle-duration: 5s; + } + paper-progress.blue { + --paper-progress-active-color: var(--paper-light-blue-500); + --paper-progress-secondary-color: var(--paper-light-blue-100); + } + paper-progress.red { + --paper-progress-active-color: var(--paper-red-500); + --paper-progress-secondary-color: var(--paper-red-100); + } + </style> + <next-code-block></next-code-block> + </template> +</custom-element-demo> +``` +--> +```html +<paper-progress indeterminate class="blue"></paper-progress> +<paper-progress indeterminate class="slow red"></paper-progress> +<paper-progress value="40" secondary-progress="80"></paper-progress> +``` + +The progress bars are for situations where the percentage completed can be +determined. They give users a quick sense of how much longer an operation +will take. + +There is also a secondary progress which is useful for displaying intermediate +progress, such as the buffer level during a streaming playback progress bar. + diff --git a/catapult/third_party/polymer/components/paper-progress/bower.json b/catapult/third_party/polymer/components/paper-progress/bower.json new file mode 100644 index 00000000..f488a191 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/bower.json @@ -0,0 +1,33 @@ +{ + "name": "paper-progress", + "version": "1.0.12", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "A material design progress bar", + "authors": "The Polymer Authors", + "keywords": [ + "web-components", + "polymer", + "progress", + "loading" + ], + "main": "paper-progress.html", + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-progress.git" + }, + "dependencies": { + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-range-behavior": "PolymerElements/iron-range-behavior#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "paper-button": "PolymerElements/paper-button#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "ignore": [] +} diff --git a/catapult/third_party/polymer/components/paper-progress/demo/index.html b/catapult/third_party/polymer/components/paper-progress/demo/index.html new file mode 100644 index 00000000..6f7b02b1 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/demo/index.html @@ -0,0 +1,127 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<!doctype html> +<html> +<head> + <title>paper-progress demo</title> + + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../../paper-styles/color.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../paper-progress.html"> + <link rel="import" href="../../paper-button/paper-button.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + paper-progress { + display: block; + width: 100%; + margin: 20px 0; + } + paper-button { + display: inline-block; + padding: 5px; + } + </style> + +</head> +<body unresolved> + <div class="vertical-section-container centered"> + <h3>paper-progress can be imperatively controlled</h3> + <demo-snippet class="centered-demo"> + <template> + <p>Once started, loops 5 times before stopping. + <!-- View the source code to see the contents of startProgress() --> + <paper-button raised onclick="startProgress();" id="start">Start</paper-button> + </p> + <paper-progress id="progress"></paper-progress> + </template> + </demo-snippet> + + <h3>paper-progress can be indeterminate with a custom duration</h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + paper-progress.slow { + --paper-progress-indeterminate-cycle-duration: 20s; + } + </style> + <paper-progress indeterminate></paper-progress> + <paper-progress indeterminate class="slow"></paper-progress> + </template> + </demo-snippet> + + <h3>It can be styled using custom properties</h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + paper-progress.blue { + --paper-progress-active-color: var(--paper-light-blue-500); + --paper-progress-secondary-color: var(--paper-light-blue-100); + } + + paper-progress.red { + --paper-progress-active-color: var(--paper-red-500); + --paper-progress-secondary-color: var(--paper-red-100); + } + + paper-progress.green { + --paper-progress-active-color: var(--paper-light-green-500); + --paper-progress-secondary-color: var(--paper-light-green-100); + } + </style> + <paper-progress value="800" min="100" max="1000" class="red"></paper-progress> + <paper-progress value="60" class="green"></paper-progress> + <paper-progress value="40" secondary-progress="80" class="blue"></paper-progress> + </template> + </demo-snippet> + </div> + + <script> + var progress, button; + var repeat, maxRepeat = 5, animating = false; + + function nextProgress() { + animating = true; + if (progress.value < progress.max) { + progress.value += (progress.step || 1); + } else { + if (++repeat >= maxRepeat) { + animating = false; + button.disabled = false; + return; + } + progress.value = progress.min; + } + requestAnimationFrame(nextProgress); + } + + function startProgress() { + repeat = 0; + progress.value = progress.min; + button.disabled = true; + if (!animating) { + nextProgress(); + } + } + + window.addEventListener('WebComponentsReady', function() { + progress = document.querySelector('paper-progress'); + button = document.querySelector('paper-button'); + }); + + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-progress/hero.svg b/catapult/third_party/polymer/components/paper-progress/hero.svg new file mode 100755 index 00000000..0f569e62 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/hero.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+ <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+ <rect x="57" y="59" width="20" height="2"/>
+ <rect x="38" y="59" width="11" height="2"/>
+ <rect x="84" y="59" width="40" height="2"/>
+ <rect x="133" y="59" width="54" height="2"/>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/paper-progress/index.html b/catapult/third_party/polymer/components/paper-progress/index.html new file mode 100644 index 00000000..225e3dd9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/index.html @@ -0,0 +1,28 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>paper-progress</title> + + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-progress/paper-progress.html b/catapult/third_party/polymer/components/paper-progress/paper-progress.html new file mode 100644 index 00000000..f0334b42 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/paper-progress.html @@ -0,0 +1,354 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../polymer/polymer.html"> +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> +<link rel="import" href="../paper-styles/color.html"> + +<!-- +Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html) + +The progress bars are for situations where the percentage completed can be +determined. They give users a quick sense of how much longer an operation +will take. + +Example: + + <paper-progress value="10"></paper-progress> + +There is also a secondary progress which is useful for displaying intermediate +progress, such as the buffer level during a streaming playback progress bar. + +Example: + + <paper-progress value="10" secondary-progress="30"></paper-progress> + +### Styling progress bar: + +To change the active progress bar color: + + paper-progress { + --paper-progress-active-color: #e91e63; + } + +To change the secondary progress bar color: + + paper-progress { + --paper-progress-secondary-color: #f8bbd0; + } + +To change the progress bar background color: + + paper-progress { + --paper-progress-container-color: #64ffda; + } + +Add the class `transiting` to a paper-progress to animate the progress bar when +the value changed. You can also customize the transition: + + paper-progress { + --paper-progress-transition-duration: 0.08s; + --paper-progress-transition-timing-function: ease; + --paper-progress-transition-transition-delay: 0s; + } + +To change the duration of the indeterminate cycle: + + paper-progress { + --paper-progress-indeterminate-cycle-duration: 2s; + } + +The following mixins are available for styling: + +Custom property | Description | Default +-------------------------------------------------|---------------------------------------------|-------------- +`--paper-progress-container` | Mixin applied to container | `{}` +`--paper-progress-transition-duration` | Duration of the transition | `0.008s` +`--paper-progress-transition-timing-function` | The timing function for the transition | `ease` +`--paper-progress-transition-delay` | delay for the transition | `0s` +`--paper-progress-container-color` | Color of the container | `--google-grey-300` +`--paper-progress-active-color` | The color of the active bar | `--google-green-500` +`--paper-progress-secondary-color` | The color of the secondary bar | `--google-green-100` +`--paper-progress-disabled-active-color` | The color of the active bar if disabled | `--google-grey-500` +`--paper-progress-disabled-secondary-color` | The color of the secondary bar if disabled | `--google-grey-300` +`--paper-progress-height` | The height of the progress bar | `4px` +`--paper-progress-indeterminate-cycle-duration` | Duration of an indeterminate cycle | `2s` + +@group Paper Elements +@element paper-progress +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="paper-progress"> + <template> + <style> + :host { + display: block; + width: 200px; + position: relative; + overflow: hidden; + } + + :host([hidden]) { + display: none !important; + } + + #progressContainer { + @apply(--paper-progress-container); + position: relative; + } + + #progressContainer, + /* the stripe for the indeterminate animation*/ + .indeterminate::after { + height: var(--paper-progress-height, 4px); + } + + #primaryProgress, + #secondaryProgress, + .indeterminate::after { + @apply(--layout-fit); + } + + #progressContainer, + .indeterminate::after { + background: var(--paper-progress-container-color, --google-grey-300); + } + + :host(.transiting) #primaryProgress, + :host(.transiting) #secondaryProgress { + -webkit-transition-property: -webkit-transform; + transition-property: transform; + + /* Duration */ + -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s); + transition-duration: var(--paper-progress-transition-duration, 0.08s); + + /* Timing function */ + -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease); + transition-timing-function: var(--paper-progress-transition-timing-function, ease); + + /* Delay */ + -webkit-transition-delay: var(--paper-progress-transition-delay, 0s); + transition-delay: var(--paper-progress-transition-delay, 0s); + } + + #primaryProgress, + #secondaryProgress { + @apply(--layout-fit); + -webkit-transform-origin: left center; + transform-origin: left center; + -webkit-transform: scaleX(0); + transform: scaleX(0); + will-change: transform; + } + + #primaryProgress { + background: var(--paper-progress-active-color, --google-green-500); + } + + #secondaryProgress { + background: var(--paper-progress-secondary-color, --google-green-100); + } + + :host([disabled]) #primaryProgress { + background: var(--paper-progress-disabled-active-color, --google-grey-500); + } + + :host([disabled]) #secondaryProgress { + background: var(--paper-progress-disabled-secondary-color, --google-grey-300); + } + + :host(:not([disabled])) #primaryProgress.indeterminate { + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + } + + :host(:not([disabled])) #primaryProgress.indeterminate::after { + content: ""; + -webkit-transform-origin: center center; + transform-origin: center center; + + -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite; + } + + @-webkit-keyframes indeterminate-bar { + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + } + 50% { + -webkit-transform: scaleX(1) translateX(0%); + } + 75% { + -webkit-transform: scaleX(1) translateX(0%); + -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91); + } + 100% { + -webkit-transform: scaleX(0) translateX(0%); + } + } + + @-webkit-keyframes indeterminate-splitter { + 0% { + -webkit-transform: scaleX(.75) translateX(-125%); + } + 30% { + -webkit-transform: scaleX(.75) translateX(-125%); + -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8); + } + 90% { + -webkit-transform: scaleX(.75) translateX(125%); + } + 100% { + -webkit-transform: scaleX(.75) translateX(125%); + } + } + + @keyframes indeterminate-bar { + 0% { + transform: scaleX(1) translateX(-100%); + } + 50% { + transform: scaleX(1) translateX(0%); + } + 75% { + transform: scaleX(1) translateX(0%); + animation-timing-function: cubic-bezier(.28,.62,.37,.91); + } + 100% { + transform: scaleX(0) translateX(0%); + } + } + + @keyframes indeterminate-splitter { + 0% { + transform: scaleX(.75) translateX(-125%); + } + 30% { + transform: scaleX(.75) translateX(-125%); + animation-timing-function: cubic-bezier(.42,0,.6,.8); + } + 90% { + transform: scaleX(.75) translateX(125%); + } + 100% { + transform: scaleX(.75) translateX(125%); + } + } + </style> + + <div id="progressContainer"> + <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div> + <div id="primaryProgress"></div> + </div> + </template> +</dom-module> + +<script> + Polymer({ + is: 'paper-progress', + + behaviors: [ + Polymer.IronRangeBehavior + ], + + properties: { + /** + * The number that represents the current secondary progress. + */ + secondaryProgress: { + type: Number, + value: 0 + }, + + /** + * The secondary ratio + */ + secondaryRatio: { + type: Number, + value: 0, + readOnly: true + }, + + /** + * Use an indeterminate progress indicator. + */ + indeterminate: { + type: Boolean, + value: false, + observer: '_toggleIndeterminate' + }, + + /** + * True if the progress is disabled. + */ + disabled: { + type: Boolean, + value: false, + reflectToAttribute: true, + observer: '_disabledChanged' + } + }, + + observers: [ + '_progressChanged(secondaryProgress, value, min, max)' + ], + + hostAttributes: { + role: 'progressbar' + }, + + _toggleIndeterminate: function(indeterminate) { + // If we use attribute/class binding, the animation sometimes doesn't translate properly + // on Safari 7.1. So instead, we toggle the class here in the update method. + this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress); + }, + + _transformProgress: function(progress, ratio) { + var transform = 'scaleX(' + (ratio / 100) + ')'; + progress.style.transform = progress.style.webkitTransform = transform; + }, + + _mainRatioChanged: function(ratio) { + this._transformProgress(this.$.primaryProgress, ratio); + }, + + _progressChanged: function(secondaryProgress, value, min, max) { + secondaryProgress = this._clampValue(secondaryProgress); + value = this._clampValue(value); + + var secondaryRatio = this._calcRatio(secondaryProgress) * 100; + var mainRatio = this._calcRatio(value) * 100; + + this._setSecondaryRatio(secondaryRatio); + this._transformProgress(this.$.secondaryProgress, secondaryRatio); + this._transformProgress(this.$.primaryProgress, mainRatio); + + this.secondaryProgress = secondaryProgress; + + this.setAttribute('aria-valuenow', value); + this.setAttribute('aria-valuemin', min); + this.setAttribute('aria-valuemax', max); + }, + + _disabledChanged: function(disabled) { + this.setAttribute('aria-disabled', disabled ? 'true' : 'false'); + }, + + _hideSecondaryProgress: function(secondaryRatio) { + return secondaryRatio === 0; + } + }); +</script> diff --git a/catapult/third_party/polymer/components/paper-progress/test/basic.html b/catapult/third_party/polymer/components/paper-progress/test/basic.html new file mode 100644 index 00000000..73547501 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/test/basic.html @@ -0,0 +1,148 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + <meta charset="UTF-8"> + <title>paper-progress test</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + <script src="../../test-fixture/test-fixture-mocha.js"></script> + + <link rel="import" href="../paper-progress.html"> + <link rel="import" href="../../test-fixture/test-fixture.html"> +</head> +<body> + + + <test-fixture id="trivialProgress"> + <template> + <paper-progress></paper-progress> + </template> + </test-fixture> + + <test-fixture id="transitingProgress"> + <template> + <paper-progress class="transiting"></paper-progress> + </template> + </test-fixture> + + <script> + suite('basic features', function() { + var progress; + + setup(function() { + progress = fixture('trivialProgress'); + }); + + test('check default', function() { + assert.equal(progress.min, 0); + assert.equal(progress.max, 100); + assert.equal(progress.value, 0); + }); + + test('set value', function(done) { + progress.value = 50; + asyncPlatformFlush(function() { + assert.equal(progress.value, 50); + // test clamp value + progress.value = 60.1; + asyncPlatformFlush(function() { + assert.equal(progress.value, 60); + done(); + }); + }); + }); + + test('set max', function(done) { + progress.max = 10; + progress.value = 11; + asyncPlatformFlush(function() { + assert.equal(progress.value, progress.max); + done(); + }); + }); + + test('test ratio', function(done) { + progress.max = 10; + progress.value = 5; + asyncPlatformFlush(function() { + assert.equal(progress.ratio, 50); + done(); + }); + }); + + test('test secondary ratio', function(done) { + progress.max = 10; + progress.secondaryProgress = 5; + asyncPlatformFlush(function() { + assert.equal(progress.secondaryRatio, 50); + done(); + }); + }); + + test('set min', function(done) { + progress.min = 10 + progress.max = 50; + progress.value = 30; + asyncPlatformFlush(function() { + assert.equal(progress.ratio, 50); + progress.value = 0; + asyncPlatformFlush(function() { + assert.equal(progress.value, progress.min); + done(); + }); + }); + }); + + test('set step', function(done) { + progress.min = 0; + progress.max = 10; + progress.value = 5.1; + asyncPlatformFlush(function() { + assert.equal(progress.value, 5); + progress.step = 0.1; + progress.value = 5.1; + asyncPlatformFlush(function() { + assert.equal(progress.value, 5.1); + done(); + }); + }); + }); + }); + + suite('transiting class', function() { + var progress; + + setup(function() { + progress = fixture('transitingProgress'); + }); + + test('progress bars', function() { + var stylesForPrimaryProgress = window.getComputedStyle(progress.$.primaryProgress); + var stylesForSecondaryProgress = window.getComputedStyle(progress.$.secondaryProgress); + var transitionProp = stylesForPrimaryProgress['transition-property']; + + assert.isTrue(transitionProp === 'transform' || transitionProp === '-webkit-transform'); + assert.equal(stylesForPrimaryProgress['transition-duration'], '0.08s'); + + transitionProp = stylesForSecondaryProgress['transition-property']; + + assert.isTrue(transitionProp === 'transform' || transitionProp === '-webkit-transform'); + assert.equal(stylesForSecondaryProgress['transition-duration'], '0.08s'); + }); + }); + + </script> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-progress/test/index.html b/catapult/third_party/polymer/components/paper-progress/test/index.html new file mode 100644 index 00000000..b66f1def --- /dev/null +++ b/catapult/third_party/polymer/components/paper-progress/test/index.html @@ -0,0 +1,24 @@ +<!DOCTYPE html><!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--><html><head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>Tests</title> + <script src="../../web-component-tester/browser.js"></script> +</head> +<body> + <script> + WCT.loadSuites([ + 'basic.html', + 'basic.html?dom=shadow' + ]); + </script> + + +</body></html> |
