diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-tabs')
17 files changed, 2188 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-tabs/.bower.json b/catapult/third_party/polymer/components/paper-tabs/.bower.json new file mode 100644 index 00000000..856d1086 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/.bower.json @@ -0,0 +1,54 @@ +{ + "name": "paper-tabs", + "version": "1.8.0", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "Material design tabs", + "private": true, + "main": "paper-tabs.html", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "tabs", + "control" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-tabs.git" + }, + "dependencies": { + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.0", + "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.0", + "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", + "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^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", + "iron-pages": "PolymerElements/iron-pages#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^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-tabs", + "_release": "1.8.0", + "_resolution": { + "type": "version", + "tag": "v1.8.0", + "commit": "0476ca9d9b9a1d4702da4f3405ea2bb2801cfbff" + }, + "_source": "https://github.com/PolymerElements/paper-tabs.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/paper-tabs" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-tabs/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-tabs/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..655302e8 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-tabs/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-tabs/.gitignore b/catapult/third_party/polymer/components/paper-tabs/.gitignore new file mode 100644 index 00000000..fbe05fc9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/catapult/third_party/polymer/components/paper-tabs/.travis.yml b/catapult/third_party/polymer/components/paper-tabs/.travis.yml new file mode 100644 index 00000000..6b98b2c8 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/.travis.yml @@ -0,0 +1,23 @@ +language: node_js +sudo: required +before_script: +- npm install -g bower polylint web-component-tester +- bower install +- polylint +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: +- xvfb-run wct -l chrome +- xvfb-run wct -l firefox +- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi +dist: trusty +env: + global: + - secure: KEzThhoQ3Aq9kSZIuCzyi6MtYbzxB67JSs2t9CebYoXgW49k3q7Uh/KMUHz8RM04hSa7k2gDGf1Spr4jkXpItHn037aW/Bd+95l49my8pSJvHLEQR8KO/b+FSH/Tu+wKXAm4xk4Mp+vESOxIWap1JXHxSJnoa0EqKyYCeKVVkMI= + - secure: dhfUH2Sx4rC089kHVtjggaGRMdEa0UHa9ksC5buMk5XBI2GriRE+D3/1N7tBxg4f2HcVbi1+7jTIRHz+xYvypuXCr/9Bh7zh19KhBjrMdFYPZwy3fK3O9xfrypwpldFq1Q3mFcJ3p5sfqHjKvvWlGf/lffqQY5rVr8UI86Lklac= diff --git a/catapult/third_party/polymer/components/paper-tabs/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-tabs/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/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-tabs/README.md b/catapult/third_party/polymer/components/paper-tabs/README.md new file mode 100644 index 00000000..050979f8 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/README.md @@ -0,0 +1,46 @@ +[](https://travis-ci.org/PolymerElements/paper-tabs) +[](https://beta.webcomponents.org/element/PolymerElements/paper-tabs) + +##<paper-tabs> + +Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) + +`paper-tabs` makes it easy to explore and switch between different views or functional aspects of +an app, or to browse categorized data sets. + +<!--- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="paper-tabs.html"> + <style> + body { + margin: 0; + display: flex; + align-items: flex-end; + height: 80px; + background: #009688; + color: white; + } + paper-tabs { + font-family: 'Roboto', 'Noto', sans-serif; + -webkit-font-smoothing: antialiased; + width: 100%; + text-transform: uppercase; + margin-bottom: 1px; + } + </style> + <next-code-block></next-code-block> + </template> +</custom-element-demo> +``` +--> +```html +<paper-tabs selected="0" scrollable> + <paper-tab>The first tab</paper-tab> + <paper-tab>Tab two</paper-tab> + <paper-tab>The third tab</paper-tab> + <paper-tab>Fourth tab</paper-tab> +</paper-tabs> +``` diff --git a/catapult/third_party/polymer/components/paper-tabs/bower.json b/catapult/third_party/polymer/components/paper-tabs/bower.json new file mode 100644 index 00000000..01ed2846 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/bower.json @@ -0,0 +1,44 @@ +{ + "name": "paper-tabs", + "version": "1.8.0", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "Material design tabs", + "private": true, + "main": "paper-tabs.html", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "tabs", + "control" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-tabs.git" + }, + "dependencies": { + "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.0", + "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.0", + "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", + "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^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", + "iron-pages": "PolymerElements/iron-pages#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^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-tabs/demo/index.html b/catapult/third_party/polymer/components/paper-tabs/demo/index.html new file mode 100644 index 00000000..74e20df7 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/demo/index.html @@ -0,0 +1,338 @@ +<!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> + + <title>paper-tabs demo</title> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../iron-pages/iron-pages.html"> + <link rel="import" href="../../paper-toolbar/paper-toolbar.html"> + <link rel="import" href="../paper-tab.html"> + <link rel="import" href="../paper-tabs.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + #container { + max-width: 600px; + } + + paper-tabs, paper-toolbar { + background-color: var(--paper-blue-900); + color: #fff; + } + </style> + + </head> + <body unresolved> + + <div id="container" class="vertical-section-container centered"> + + <h3>Plain <code>paper-tabs</code>.</h3> + <demo-snippet> + <template> + <paper-tabs selected="0"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3>The <code>no-bar</code> attribute disables the selection bar.</h3> + <demo-snippet> + <template> + <style is="custom-style"> + paper-tabs[no-bar] paper-tab.iron-selected { + color: #ffff8d; + } + </style> + + <paper-tabs id="plain-tabs" selected="0" no-bar> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + The <code>no-slide</code> attribute prevents the selection bar from + animating when the selection changes. + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" no-slide> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + The <code>noink</code> attribute disables the ink ripple animation seen + when the user activates a tab (by clicking, tapping, etc.). + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" noink> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + The <code>scrollable</code> attribute causes the tabs to scroll, rather + than compress, when there is not enough space. Arrow buttons appear when + any of the tabs are not completely visible. + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" scrollable> + <paper-tab>NUMBER ONE ITEM</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>THE THIRD ITEM</paper-tab> + <paper-tab>THE ITEM FOUR</paper-tab> + <paper-tab>FIFTH</paper-tab> + <paper-tab>THE SIXTH TAB</paper-tab> + <paper-tab>NUMBER SEVEN</paper-tab> + <paper-tab>EIGHT</paper-tab> + <paper-tab>NUMBER NINE</paper-tab> + <paper-tab>THE TENTH</paper-tab> + <paper-tab>THE ITEM ELEVEN</paper-tab> + <paper-tab>TWELFTH ITEM</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + The <code>fit-container</code> attribute causes scrollable tabs to + stretch to fit their container if the tabs don't need to scroll. + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" scrollable fit-container> + <paper-tab>NUMBER ONE ITEM</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>THE THIRD ITEM</paper-tab> + </paper-tabs> + <br> + <paper-tabs selected="0" scrollable fit-container style="width: 50%;"> + <paper-tab>NUMBER ONE ITEM</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>THE THIRD ITEM</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + Tab layout is affected by the writing direction of the surrounding area. + </h3> + <demo-snippet> + <template> + <div dir="rtl"> + <paper-tabs selected="0"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + + <paper-tabs selected="0" scrollable> + <paper-tab>NUMBER ONE ITEM</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>THE THIRD ITEM</paper-tab> + <paper-tab>THE ITEM FOUR</paper-tab> + <paper-tab>FIFTH</paper-tab> + <paper-tab>THE SIXTH TAB</paper-tab> + <paper-tab>NUMBER SEVEN</paper-tab> + <paper-tab>EIGHT</paper-tab> + <paper-tab>NUMBER NINE</paper-tab> + <paper-tab>THE TENTH</paper-tab> + <paper-tab>THE ITEM ELEVEN</paper-tab> + <paper-tab>TWELFTH ITEM</paper-tab> + </paper-tabs> + </div> + </template> + </demo-snippet> + + <h3> + Use the <code>align-bottom</code> attribute when your tabs are + positioned below the content they control. The selection bar will be + shown at the top of the tabs. + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" align-bottom> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + Use the <code>link</code> attribute when a <code>paper-tab</code> + contains a link. The link will fill the entire tab. <code>paper-tabs</code> + implements its own tabindexing and keyboard focus patterns so an anchor + placed inside should set <code>tabindex="-1"</code>. + </h3> + <demo-snippet> + <template> + <style is="custom-style"> + paper-tab[link] a { + /* These mixins (from iron-flex-layout) center the link text. */ + @apply(--layout-horizontal); + @apply(--layout-center-center); + color: #fff; + text-decoration: none; + } + </style> + + <paper-tabs selected="0"> + <paper-tab link> + <a href="#item1" tabindex="-1">ITEM ONE</a> + </paper-tab> + <paper-tab link> + <a href="#item2" tabindex="-1">ITEM TWO</a> + </paper-tab> + <paper-tab link> + <a href="#item3" tabindex="-1">ITEM THREE</a> + </paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + Tabs can be used in a <code>paper-toolbar</code>. + </h3> + <demo-snippet> + <template> + <style is="custom-style"> + paper-toolbar { + --paper-toolbar-background: var(--paper-blue-900); + } + + .self-end { + /* This mixin (from iron-flex-layout) aligns the tabs to the + bottom of the toolbar. */ + @apply(--layout-self-end); + } + </style> + + <paper-toolbar class="tall"> + <paper-tabs selected="0" class="bottom self-end" style="width: 300px;"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + </paper-tabs> + </paper-toolbar> + </template> + </demo-snippet> + + <h3> + Use <code>autoselect</code> to enable automatic tab selection. + </h3> + <demo-snippet> + <template> + <paper-tabs selected="0" autoselect> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <h3> + Use <code>autoselect-delay</code> to adjust the delay between the last + keyup event and when the tab is automatically selected (when + <code>autoselect</code> is true). + </h3> + <demo-snippet> + <template> + <h4> + <code>autoselect-delay="0"</code> + </h4> + <paper-tabs selected="0" no-slide autoselect autoselect-delay="0"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + + <h4> + <code>autoselect-delay="1000"</code> + </h4> + <paper-tabs selected="0" autoselect autoselect-delay="1000"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </demo-snippet> + + <!-- + Nested templates are not supported in IE, meaning they can't be used in a + demo-snippet. See Polymer/polymer#2495 for more details. + --> + <!-- + <h3>J. Bound Selection</h3> + <demo-snippet> + <template> + <template is="dom-bind"> + <h2>Current Tab: <span>[[selected]]</span></h2> + <paper-tabs selected="{{selected}}"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </template> + </demo-snippet> + + <h3>K. Controlling content</h3> + <demo-snippet> + <template> + <style is="custom-style"> + iron-pages { + border: 1px solid #ccc; + border-top: none; + padding: 8px; + } + </style> + + <template is="dom-bind"> + <paper-tabs selected="{{selected}}"> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + <iron-pages selected="{{selected}}"> + <div>CONTENT ONE</div> + <div>CONTENT TWO</div> + <div>CONTENT THREE</div> + </iron-pages> + </template> + </template> + </demo-snippet> + --> + + </div> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tabs/hero.svg b/catapult/third_party/polymer/components/paper-tabs/hero.svg new file mode 100755 index 00000000..e29eaf4b --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/hero.svg @@ -0,0 +1,23 @@ +<?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">
+ <path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+ <polygon points="66,64.8 60.6,56.8 55.3,64.8 49.2,55.6 50.8,54.4 55.3,61.2 60.6,53.2 66,61.2 71.3,53.2 77.4,62.4 75.8,63.6
+ 71.3,56.8 "/>
+ <rect x="149" y="58" width="26" height="2"/>
+ <rect x="99" y="58" width="26" height="2"/>
+ <rect x="38" y="72" width="50" height="4"/>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/paper-tabs/index.html b/catapult/third_party/polymer/components/paper-tabs/index.html new file mode 100644 index 00000000..f618702f --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/index.html @@ -0,0 +1,25 @@ +<!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> + + <title>paper-tabs</title> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page sources='["paper-tabs.html", "paper-tab.html"]'></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tabs/paper-tab.html b/catapult/third_party/polymer/components/paper-tabs/paper-tab.html new file mode 100644 index 00000000..b2dd2c05 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/paper-tab.html @@ -0,0 +1,175 @@ +<!-- +@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-behaviors/iron-button-state.html"> +<link rel="import" href="../iron-behaviors/iron-control-state.html"> +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html"> + +<!-- +`paper-tab` is styled to look like a tab. It should be used in conjunction with +`paper-tabs`. + +Example: + + <paper-tabs selected="0"> + <paper-tab>TAB 1</paper-tab> + <paper-tab>TAB 2</paper-tab> + <paper-tab>TAB 3</paper-tab> + </paper-tabs> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-tab-ink` | Ink color | `--paper-yellow-a100` +`--paper-tab` | Mixin applied to the tab | `{}` +`--paper-tab-content` | Mixin applied to the tab content | `{}` +`--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}` + +This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. +In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. + +--> + +<dom-module id="paper-tab"> + <template> + <style> + :host { + @apply(--layout-inline); + @apply(--layout-center); + @apply(--layout-center-justified); + @apply(--layout-flex-auto); + + position: relative; + padding: 0 12px; + overflow: hidden; + cursor: pointer; + vertical-align: middle; + + @apply(--paper-font-common-base); + @apply(--paper-tab); + } + + :host(:focus) { + outline: none; + } + + :host([link]) { + padding: 0; + } + + .tab-content { + height: 100%; + transform: translateZ(0); + -webkit-transform: translateZ(0); + transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); + @apply(--layout-horizontal); + @apply(--layout-center-center); + @apply(--layout-flex-auto); + @apply(--paper-tab-content); + } + + :host(:not(.iron-selected)) > .tab-content { + opacity: 0.8; + + @apply(--paper-tab-content-unselected); + } + + :host(:focus) .tab-content { + opacity: 1; + font-weight: 700; + } + + paper-ripple { + color: var(--paper-tab-ink, --paper-yellow-a100); + } + + .tab-content > ::content > a { + @apply(--layout-flex-auto); + + height: 100%; + } + </style> + + <div class="tab-content"> + <content></content> + </div> + </template> +</dom-module> +<script> +Polymer({ + is: 'paper-tab', + + behaviors: [ + Polymer.IronControlState, + Polymer.IronButtonState, + Polymer.PaperRippleBehavior + ], + + properties: { + + /** + * If true, the tab will forward keyboard clicks (enter/space) to + * the first anchor element found in its descendants + */ + link: { + type: Boolean, + value: false, + reflectToAttribute: true + } + + }, + + hostAttributes: { + role: 'tab' + }, + + listeners: { + down: '_updateNoink', + tap: '_onTap' + }, + + attached: function() { + this._updateNoink(); + }, + + get _parentNoink () { + var parent = Polymer.dom(this).parentNode; + return !!parent && !!parent.noink; + }, + + _updateNoink: function() { + this.noink = !!this.noink || !!this._parentNoink; + }, + + _onTap: function(event) { + if (this.link) { + var anchor = this.queryEffectiveChildren('a'); + + if (!anchor) { + return; + } + + // Don't get stuck in a loop delegating + // the listener from the child anchor + if (event.target === anchor) { + return; + } + + anchor.click(); + } + } + +}); +</script> diff --git a/catapult/third_party/polymer/components/paper-tabs/paper-tabs-icons.html b/catapult/third_party/polymer/components/paper-tabs/paper-tabs-icons.html new file mode 100644 index 00000000..c299046a --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/paper-tabs-icons.html @@ -0,0 +1,18 @@ +<!-- +@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="../iron-iconset-svg/iron-iconset-svg.html"> + +<iron-iconset-svg name="paper-tabs" size="24"> +<svg><defs> +<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></g> +<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></g> +</defs></svg> +</iron-iconset-svg> diff --git a/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html b/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html new file mode 100644 index 00000000..bc504e1a --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/paper-tabs.html @@ -0,0 +1,661 @@ +<!-- +@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-icon/iron-icon.html"> +<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> +<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> +<link rel="import" href="../paper-icon-button/paper-icon-button.html"> +<link rel="import" href="../paper-styles/color.html"> +<link rel="import" href="paper-tabs-icons.html"> +<link rel="import" href="paper-tab.html"> + +<!-- +Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) + +`paper-tabs` makes it easy to explore and switch between different views or functional aspects of +an app, or to browse categorized data sets. + +Use `selected` property to get or set the selected tab. + +Example: + + <paper-tabs selected="0"> + <paper-tab>TAB 1</paper-tab> + <paper-tab>TAB 2</paper-tab> + <paper-tab>TAB 3</paper-tab> + </paper-tabs> + +See <a href="?active=paper-tab">paper-tab</a> for more information about +`paper-tab`. + +A common usage for `paper-tabs` is to use it along with `iron-pages` to switch +between different views. + + <paper-tabs selected="{{selected}}"> + <paper-tab>Tab 1</paper-tab> + <paper-tab>Tab 2</paper-tab> + <paper-tab>Tab 3</paper-tab> + </paper-tabs> + + <iron-pages selected="{{selected}}"> + <div>Page 1</div> + <div>Page 2</div> + <div>Page 3</div> + </iron-pages> + + +To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` +element in `paper-tab` with a `tabindex` of -1. + +Example: + +<pre><code> +<style is="custom-style"> + .link { + @apply(--layout-horizontal); + @apply(--layout-center-center); + } +</style> + +<paper-tabs selected="0"> + <paper-tab link> + <a href="#link1" class="link" tabindex="-1">TAB ONE</a> + </paper-tab> + <paper-tab link> + <a href="#link2" class="link" tabindex="-1">TAB TWO</a> + </paper-tab> + <paper-tab link> + <a href="#link3" class="link" tabindex="-1">TAB THREE</a> + </paper-tab> +</paper-tabs> +</code></pre> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100` +`--paper-tabs-selection-bar` | Mixin applied to the selection bar | `{}` +`--paper-tabs` | Mixin applied to the tabs | `{}` +`--paper-tabs-content` | Mixin applied to the content container of tabs | `{}` +`--paper-tabs-container` | Mixin applied to the layout container of tabs | `{}` + +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="paper-tabs"> + <template> + <style> + :host { + @apply(--layout); + @apply(--layout-center); + + height: 48px; + font-size: 14px; + font-weight: 500; + overflow: hidden; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + + /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + + @apply(--paper-tabs); + } + + :host-context([dir=rtl]) { + @apply(--layout-horizontal-reverse); + } + + #tabsContainer { + position: relative; + height: 100%; + white-space: nowrap; + overflow: hidden; + @apply(--layout-flex-auto); + @apply(--paper-tabs-container); + } + + #tabsContent { + height: 100%; + -moz-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + @apply(--paper-tabs-content); + } + + #tabsContent.scrollable { + position: absolute; + white-space: nowrap; + } + + #tabsContent:not(.scrollable), + #tabsContent.scrollable.fit-container { + @apply(--layout-horizontal); + } + + #tabsContent.scrollable.fit-container { + min-width: 100%; + } + + #tabsContent.scrollable.fit-container > ::content > * { + /* IE - prevent tabs from compressing when they should scroll. */ + -ms-flex: 1 0 auto; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + } + + .hidden { + display: none; + } + + .not-visible { + opacity: 0; + cursor: default; + } + + paper-icon-button { + width: 48px; + height: 48px; + padding: 12px; + margin: 0 4px; + } + + #selectionBar { + position: absolute; + height: 0; + bottom: 0; + left: 0; + right: 0; + border-bottom: 2px solid var(--paper-tabs-selection-bar-color, --paper-yellow-a100); + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: left center; + transform-origin: left center; + transition: -webkit-transform; + transition: transform; + + @apply(--paper-tabs-selection-bar); + } + + #selectionBar.align-bottom { + top: 0; + bottom: auto; + } + + #selectionBar.expand { + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1); + } + + #selectionBar.contract { + transition-duration: 0.18s; + transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); + } + + #tabsContent > ::content > *:not(#selectionBar) { + height: 100%; + } + </style> + + <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> + + <div id="tabsContainer" on-track="_scroll" on-down="_down"> + <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]"> + <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" + on-transitionend="_onBarTransitionEnd"></div> + <content select="*"></content> + </div> + </div> + + <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> + + </template> + + <script> + Polymer({ + is: 'paper-tabs', + + behaviors: [ + Polymer.IronResizableBehavior, + Polymer.IronMenubarBehavior + ], + + properties: { + /** + * If true, ink ripple effect is disabled. When this property is changed, + * all descendant `<paper-tab>` elements have their `noink` property + * changed to the new value as well. + */ + noink: { + type: Boolean, + value: false, + observer: '_noinkChanged' + }, + + /** + * If true, the bottom bar to indicate the selected tab will not be shown. + */ + noBar: { + type: Boolean, + value: false + }, + + /** + * If true, the slide effect for the bottom bar is disabled. + */ + noSlide: { + type: Boolean, + value: false + }, + + /** + * If true, tabs are scrollable and the tab width is based on the label width. + */ + scrollable: { + type: Boolean, + value: false + }, + + /** + * If true, tabs expand to fit their container. This currently only applies when + * scrollable is true. + */ + fitContainer: { + type: Boolean, + value: false + }, + + /** + * If true, dragging on the tabs to scroll is disabled. + */ + disableDrag: { + type: Boolean, + value: false + }, + + /** + * If true, scroll buttons (left/right arrow) will be hidden for scrollable tabs. + */ + hideScrollButtons: { + type: Boolean, + value: false + }, + + /** + * If true, the tabs are aligned to bottom (the selection bar appears at the top). + */ + alignBottom: { + type: Boolean, + value: false + }, + + selectable: { + type: String, + value: 'paper-tab' + }, + + /** + * If true, tabs are automatically selected when focused using the + * keyboard. + */ + autoselect: { + type: Boolean, + value: false + }, + + /** + * The delay (in milliseconds) between when the user stops interacting + * with the tabs through the keyboard and when the focused item is + * automatically selected (if `autoselect` is true). + */ + autoselectDelay: { + type: Number, + value: 0 + }, + + _step: { + type: Number, + value: 10 + }, + + _holdDelay: { + type: Number, + value: 1 + }, + + _leftHidden: { + type: Boolean, + value: false + }, + + _rightHidden: { + type: Boolean, + value: false + }, + + _previousTab: { + type: Object + } + }, + + hostAttributes: { + role: 'tablist' + }, + + listeners: { + 'iron-resize': '_onTabSizingChanged', + 'iron-items-changed': '_onTabSizingChanged', + 'iron-select': '_onIronSelect', + 'iron-deselect': '_onIronDeselect' + }, + + keyBindings: { + 'left:keyup right:keyup': '_onArrowKeyup' + }, + + created: function() { + this._holdJob = null; + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + this._bindDelayedActivationHandler = this._delayedActivationHandler.bind(this); + this.addEventListener('blur', this._onBlurCapture.bind(this), true); + }, + + ready: function() { + this.setScrollDirection('y', this.$.tabsContainer); + }, + + detached: function() { + this._cancelPendingActivation(); + }, + + _noinkChanged: function(noink) { + var childTabs = Polymer.dom(this).querySelectorAll('paper-tab'); + childTabs.forEach(noink ? this._setNoinkAttribute : this._removeNoinkAttribute); + }, + + _setNoinkAttribute: function(element) { + element.setAttribute('noink', ''); + }, + + _removeNoinkAttribute: function(element) { + element.removeAttribute('noink'); + }, + + _computeScrollButtonClass: function(hideThisButton, scrollable, hideScrollButtons) { + if (!scrollable || hideScrollButtons) { + return 'hidden'; + } + + if (hideThisButton) { + return 'not-visible'; + } + + return ''; + }, + + _computeTabsContentClass: function(scrollable, fitContainer) { + return scrollable ? 'scrollable' + (fitContainer ? ' fit-container' : '') : ' fit-container'; + }, + + _computeSelectionBarClass: function(noBar, alignBottom) { + if (noBar) { + return 'hidden'; + } else if (alignBottom) { + return 'align-bottom'; + } + + return ''; + }, + + // TODO(cdata): Add `track` response back in when gesture lands. + + _onTabSizingChanged: function() { + this.debounce('_onTabSizingChanged', function() { + this._scroll(); + this._tabChanged(this.selectedItem); + }, 10); + }, + + _onIronSelect: function(event) { + this._tabChanged(event.detail.item, this._previousTab); + this._previousTab = event.detail.item; + this.cancelDebouncer('tab-changed'); + }, + + _onIronDeselect: function(event) { + this.debounce('tab-changed', function() { + this._tabChanged(null, this._previousTab); + this._previousTab = null; + // See polymer/polymer#1305 + }, 1); + }, + + _activateHandler: function() { + // Cancel item activations scheduled by keyboard events when any other + // action causes an item to be activated (e.g. clicks). + this._cancelPendingActivation(); + + Polymer.IronMenuBehaviorImpl._activateHandler.apply(this, arguments); + }, + + /** + * Activates an item after a delay (in milliseconds). + */ + _scheduleActivation: function(item, delay) { + this._pendingActivationItem = item; + this._pendingActivationTimeout = this.async( + this._bindDelayedActivationHandler, delay); + }, + + /** + * Activates the last item given to `_scheduleActivation`. + */ + _delayedActivationHandler: function() { + var item = this._pendingActivationItem; + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + item.fire(this.activateEvent, null, { + bubbles: true, + cancelable: true + }); + }, + + /** + * Cancels a previously scheduled item activation made with + * `_scheduleActivation`. + */ + _cancelPendingActivation: function() { + if (this._pendingActivationTimeout !== undefined) { + this.cancelAsync(this._pendingActivationTimeout); + this._pendingActivationItem = undefined; + this._pendingActivationTimeout = undefined; + } + }, + + _onArrowKeyup: function(event) { + if (this.autoselect) { + this._scheduleActivation(this.focusedItem, this.autoselectDelay); + } + }, + + _onBlurCapture: function(event) { + // Cancel a scheduled item activation (if any) when that item is + // blurred. + if (event.target === this._pendingActivationItem) { + this._cancelPendingActivation(); + } + }, + + get _tabContainerScrollSize () { + return Math.max( + 0, + this.$.tabsContainer.scrollWidth - + this.$.tabsContainer.offsetWidth + ); + }, + + _scroll: function(e, detail) { + if (!this.scrollable) { + return; + } + + var ddx = (detail && -detail.ddx) || 0; + this._affectScroll(ddx); + }, + + _down: function(e) { + // go one beat async to defeat IronMenuBehavior + // autorefocus-on-no-selection timeout + this.async(function() { + if (this._defaultFocusAsync) { + this.cancelAsync(this._defaultFocusAsync); + this._defaultFocusAsync = null; + } + }, 1); + }, + + _affectScroll: function(dx) { + this.$.tabsContainer.scrollLeft += dx; + + var scrollLeft = this.$.tabsContainer.scrollLeft; + + this._leftHidden = scrollLeft === 0; + this._rightHidden = scrollLeft === this._tabContainerScrollSize; + }, + + _onLeftScrollButtonDown: function() { + this._scrollToLeft(); + this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay); + }, + + _onRightScrollButtonDown: function() { + this._scrollToRight(); + this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay); + }, + + _onScrollButtonUp: function() { + clearInterval(this._holdJob); + this._holdJob = null; + }, + + _scrollToLeft: function() { + this._affectScroll(-this._step); + }, + + _scrollToRight: function() { + this._affectScroll(this._step); + }, + + _tabChanged: function(tab, old) { + if (!tab) { + // Remove the bar without animation. + this.$.selectionBar.classList.remove('expand'); + this.$.selectionBar.classList.remove('contract'); + this._positionBar(0, 0); + return; + } + + var r = this.$.tabsContent.getBoundingClientRect(); + var w = r.width; + var tabRect = tab.getBoundingClientRect(); + var tabOffsetLeft = tabRect.left - r.left; + + this._pos = { + width: this._calcPercent(tabRect.width, w), + left: this._calcPercent(tabOffsetLeft, w) + }; + + if (this.noSlide || old == null) { + // Position the bar without animation. + this.$.selectionBar.classList.remove('expand'); + this.$.selectionBar.classList.remove('contract'); + this._positionBar(this._pos.width, this._pos.left); + return; + } + + var oldRect = old.getBoundingClientRect(); + var oldIndex = this.items.indexOf(old); + var index = this.items.indexOf(tab); + var m = 5; + + // bar animation: expand + this.$.selectionBar.classList.add('expand'); + + var moveRight = oldIndex < index; + var isRTL = this._isRTL; + if (isRTL) { + moveRight = !moveRight; + } + + if (moveRight) { + this._positionBar(this._calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m, + this._left); + } else { + this._positionBar(this._calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m, + this._calcPercent(tabOffsetLeft, w) + m); + } + + if (this.scrollable) { + this._scrollToSelectedIfNeeded(tabRect.width, tabOffsetLeft); + } + }, + + _scrollToSelectedIfNeeded: function(tabWidth, tabOffsetLeft) { + var l = tabOffsetLeft - this.$.tabsContainer.scrollLeft; + if (l < 0) { + this.$.tabsContainer.scrollLeft += l; + } else { + l += (tabWidth - this.$.tabsContainer.offsetWidth); + if (l > 0) { + this.$.tabsContainer.scrollLeft += l; + } + } + }, + + _calcPercent: function(w, w0) { + return 100 * w / w0; + }, + + _positionBar: function(width, left) { + width = width || 0; + left = left || 0; + + this._width = width; + this._left = left; + this.transform( + 'translateX(' + left + '%) scaleX(' + (width / 100) + ')', + this.$.selectionBar); + }, + + _onBarTransitionEnd: function(e) { + var cl = this.$.selectionBar.classList; + // bar animation: expand -> contract + if (cl.contains('expand')) { + cl.remove('expand'); + cl.add('contract'); + this._positionBar(this._pos.width, this._pos.left); + // bar animation done + } else if (cl.contains('contract')) { + cl.remove('contract'); + } + } + }); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-tabs/test/attr-for-selected.html b/catapult/third_party/polymer/components/paper-tabs/test/attr-for-selected.html new file mode 100644 index 00000000..cc1198e6 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/test/attr-for-selected.html @@ -0,0 +1,82 @@ +<!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> + + <title>paper-tabs-attr-for-selected</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + + <link rel="import" href="../paper-tabs.html"> + + </head> + <body> + + <test-fixture id="basic"> + <template> + <paper-tabs attr-for-selected="name" selected="bar"> + <paper-tab name="foo">ITEM FOO</paper-tab> + <paper-tab name="bar">ITEM BAR</paper-tab> + <paper-tab name="zot">ITEM ZOT</paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <script> + + suite('set the selected attribute', function() { + + var tabs; + + setup(function () { + tabs = fixture('basic'); + }); + + test('selected value', function() { + assert.equal(tabs.selected, 'bar'); + }); + + test('selected tab has iron-selected class', function() { + Polymer.dom.flush(); + assert.isTrue(tabs.querySelector('[name=bar]').classList.contains('iron-selected')); + }); + + }); + + suite('select tab via click', function() { + + var tabs, tab; + + setup(function () { + tabs = fixture('basic'); + tab = tabs.querySelector('[name=zot]'); + tab.dispatchEvent(new CustomEvent('click', {bubbles: true})); + }); + + test('selected value', function() { + assert.equal(tabs.selected, 'zot'); + }); + + test('selected tab has iron-selected class', function() { + Polymer.dom.flush(); + assert.isTrue(tab.classList.contains('iron-selected')); + }); + + }); + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tabs/test/basic.html b/catapult/third_party/polymer/components/paper-tabs/test/basic.html new file mode 100644 index 00000000..dd74854d --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/test/basic.html @@ -0,0 +1,394 @@ +<!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> + + <title>paper-tabs-basic</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + + <link rel="import" href="../paper-tabs.html"> + <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html"> + + </head> + <body> + + <test-fixture id="basic"> + <template> + <paper-tabs> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + <paper-tab>ITEM THREE</paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <test-fixture id="HiddenTabs"> + <template> + <paper-tabs hidden> + <paper-tab>ITEM ONE</paper-tab> + <paper-tab>ITEM TWO</paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <script> + + function ensureDocumentHasFocus() { + window.top && window.top.focus(); + } + + function checkSelectionBar(tabs, tab) { + var tabRect = tab.getBoundingClientRect(); + var rect = Polymer.dom(tabs.root).querySelector('#selectionBar').getBoundingClientRect(); + assert.equal(Math.round(tabRect.left), Math.round(rect.left)); + } + + suite('defaults', function() { + + var tabs; + + setup(function () { + tabs = fixture('basic'); + }); + + test('to nothing selected', function() { + assert.equal(tabs.selected, undefined); + }); + + test('no tabs have iron-selected class', function() { + Array.prototype.forEach.call(tabs.querySelectorAll('paper-tab'), function(tab) { + assert.isFalse(tab.classList.contains('iron-selected')); + }); + }); + + test('to false as noink', function() { + assert.equal(tabs.noink, false); + }); + + test('to false as noBar', function() { + assert.equal(tabs.noBar, false); + }); + + test('to false as noSlide', function() { + assert.equal(tabs.noSlide, false); + }); + + test('to false as scrollable', function() { + assert.equal(tabs.scrollable, false); + }); + + test('to false as disableDrag', function() { + assert.equal(tabs.disableDrag, false); + }); + + test('to false as hideScrollButtons', function() { + assert.equal(tabs.hideScrollButtons, false); + }); + + test('to false as alignBottom', function() { + assert.equal(tabs.alignBottom, false); + }); + }); + + suite('hidden tabs', function() { + var tabs; + + setup(function() { + tabs = fixture('HiddenTabs'); + }); + + test('choose the correct bar position once made visible', function() { + tabs.removeAttribute('hidden'); + tabs.selected = 0; + expect(tabs._width).to.be.greaterThan(0); + expect(tabs._left).to.be.equal(0); + }); + }); + + suite('set the selected attribute', function() { + + var tabs, index = 0; + + setup(function () { + tabs = fixture('basic'); + tabs.selected = index; + }); + + test('selected value', function() { + assert.equal(tabs.selected, index); + }); + + test('selected tab has iron-selected class', function() { + var tab = tabs.querySelectorAll('paper-tab')[index]; + assert.isTrue(tab.classList.contains('iron-selected')); + }); + + test('selected tab has selection bar position at the bottom of the tab', function(done) { + setTimeout(function() { + checkSelectionBar(tabs, tabs.querySelectorAll('paper-tab')[index]); + done(); + }, 1000); + }); + + }); + + suite('select tab via click', function() { + + var tabs, index = 1; + var tab; + + setup(function () { + tabs = fixture('basic'); + tab = tabs.querySelectorAll('paper-tab')[index]; + tab.dispatchEvent(new CustomEvent('click', {bubbles: true})); + }); + + test('selected value', function() { + assert.equal(tabs.selected, index); + }); + + test('selected tab has iron-selected class', function() { + var tab = tabs.querySelectorAll('paper-tab')[index]; + assert.isTrue(tab.classList.contains('iron-selected')); + }); + + test('selected tab has selection bar position at the bottom of the tab', function(done) { + setTimeout(function() { + checkSelectionBar(tabs, tabs.querySelectorAll('paper-tab')[index]); + done(); + }, 1000); + }); + + test('pressing enter on tab causes a click', function(done) { + var clickCount = 0; + tab.addEventListener('click', function onTabClick() { + clickCount++; + tab.removeEventListener('click', onTabClick); + + expect(clickCount).to.be.equal(1); + done(); + }); + + MockInteractions.pressEnter(tab); + }); + }); + + suite('noink attribute', function() { + var tabs; + + setup(function () { + tabs = fixture('basic'); + }); + + test('noink attribute propagates to all descendant tabs', function() { + tabs.noink = true; + Array.prototype.slice.apply(tabs.querySelectorAll('paper-tab')).forEach(function(tab) { + assert.isTrue(tab.noink); + }); + + tabs.noink = false; + Array.prototype.slice.apply(tabs.querySelectorAll('paper-tab')).forEach(function(tab) { + assert.isFalse(tab.noink); + }); + }); + }); + + suite('accessibility', function() { + var LEFT = 37; + var RIGHT = 39; + var tabs; + + setup(function () { + tabs = fixture('basic'); + Polymer.dom.flush(); + }); + + test('paper-tabs has role tablist', function() { + assert.equal(tabs.getAttribute('role'), 'tablist'); + }); + + test('paper-tab has role tab', function() { + tabs.items.forEach(function(tab) { + assert.equal(tab.getAttribute('role'), 'tab'); + }); + }); + + test('without autoselect, tabs are not automatically selected', + function(done) { + ensureDocumentHasFocus(); + Polymer.Base.async(function() { + tabs.select(0); + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + done(); + }, 100); + }, 100); + }, 100); + }); + }); + + test('with autoselect, tabs are selected when moved to using arrow ' + + 'keys', function(done) { + ensureDocumentHasFocus(); + Polymer.Base.async(function() { + tabs.autoselect = true; + tabs.select(0); + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + done(); + }, 100); + }, 100); + }, 100); + }); + }); + + test('with autoselect, tabs are selected when moved to using arrow ' + + 'keys (RTL)',function(done) { + ensureDocumentHasFocus(); + Polymer.Base.async(function() { + tabs.setAttribute('dir', 'rtl'); + + tabs.autoselect = true; + tabs.select(0); + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + + MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + done(); + }, 100); + }, 100); + }, 100); + }); + }); + + test('with autoselect-delay zero, tabs are selected with ' + + 'microtask timing after the keyup', function(done) { + ensureDocumentHasFocus(); + Polymer.Base.async(function() { + tabs.autoselect = true; + tabs.autoselectDelay = 0; + tabs.select(0); + + MockInteractions.keyDownOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 1); + + // No keyup between keydown events: the key is being held. + MockInteractions.keyDownOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 2); + + MockInteractions.keyUpOn(tabs.selectedItem, RIGHT); + assert.equal(tabs.selected, 0); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 2); + + MockInteractions.keyDownOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 1); + + MockInteractions.keyUpOn(tabs.selectedItem, LEFT); + assert.equal(tabs.selected, 2); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + done(); + }); + }); + }); + }); + }); + }); + }); + + test('with autoselect-delay positive, tabs are selected with ' + + 'microtask timing after the keyup and delay', function(done) { + ensureDocumentHasFocus(); + Polymer.Base.async(function() { + var DELAY = 100; + + tabs.autoselect = true; + tabs.autoselectDelay = DELAY; + tabs.select(0); + + MockInteractions.keyDownOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 1); + + // No keyup between keydown events: the key is being held. + MockInteractions.keyDownOn(tabs.selectedItem, RIGHT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 0); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 2); + + MockInteractions.keyUpOn(tabs.selectedItem, RIGHT); + assert.equal(tabs.selected, 0); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 2); + + MockInteractions.keyDownOn(tabs.selectedItem, LEFT); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 2); + assert.equal(tabs.items.indexOf(tabs.focusedItem), 1); + + MockInteractions.keyUpOn(tabs.selectedItem, LEFT); + assert.equal(tabs.selected, 2); + Polymer.Base.async(function() { + assert.equal(tabs.selected, 1); + done(); + }, DELAY + 100); + }); + }, DELAY + 100); + }); + }); + }); + }); + }); + + </script> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tabs/test/index.html b/catapult/third_party/polymer/components/paper-tabs/test/index.html new file mode 100644 index 00000000..9b58696b --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/test/index.html @@ -0,0 +1,31 @@ +<!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>Tests</title> + <script src="../../web-component-tester/browser.js"></script> + + </head> + <body> + + <script> + WCT.loadSuites([ + 'basic.html', + 'attr-for-selected.html', + 'links.html', + 'basic.html?dom=shadow', + 'attr-for-selected.html?dom=shadow', + 'links.html?dom=shadow' + ]); + </script> + + + +</body></html> diff --git a/catapult/third_party/polymer/components/paper-tabs/test/links.html b/catapult/third_party/polymer/components/paper-tabs/test/links.html new file mode 100644 index 00000000..5d43e0ca --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tabs/test/links.html @@ -0,0 +1,163 @@ +<!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> + + <title>paper-tabs-links</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + + <link rel="import" href="../paper-tabs.html"> + <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html"> + + </head> + <body> + + <test-fixture id="links"> + <template> + <paper-tabs> + <paper-tab link><a href="#one" tabindex="-1">ONE</a></paper-tab> + <paper-tab link><a href="#two" tabindex="-1">TWO</a></paper-tab> + <paper-tab link><a href="#three" tabindex="-1">THREE</a></paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <test-fixture id="not-links"> + <template> + <paper-tabs> + <paper-tab><a href="#one" tabindex="-1">ONE</a></paper-tab> + <paper-tab><a href="#two" tabindex="-1">TWO</a></paper-tab> + <paper-tab><a href="#three" tabindex="-1">THREE</a></paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <test-fixture id="not-first-child"> + <template> + <paper-tabs> + <paper-tab> + <div> + <a href="#one" tabindex="-1">ONE</a> + </div> + </paper-tab> + <paper-tab> + <div> + <a href="#two" tabindex="-1">TWO</a> + </div> + </paper-tab> + <paper-tab> + <div> + <a href="#three" tabindex="-1">THREE</a> + </div> + </paper-tab> + </paper-tabs> + </template> + </test-fixture> + + <script> + + suite('links', function() { + + suite('has link attribute', function() { + + var tabs; + var tab, anchor; + + setup(function () { + tabs = fixture('links'); + tab = tabs.querySelectorAll('paper-tab')[1]; + anchor = tab.querySelector('a'); + }); + + test('pressing enter on tab causes anchor click', function(done) { + tab.addEventListener('click', function onTabClick(event) { + tab.removeEventListener('click', onTabClick); + + expect(event.target).to.be.equal(anchor); + done(); + }); + + MockInteractions.pressEnter(tab); + }); + + test('pressing space on tab causes anchor click', function(done) { + tab.addEventListener('click', function onTabClick(event) { + tab.removeEventListener('click', onTabClick); + + expect(event.target).to.be.equal(anchor); + done(); + }); + + MockInteractions.pressSpace(tab); + }); + + }); + + suite('does not have link attribute', function() { + + var tabs; + var tab, anchor; + + setup(function () { + tabs = fixture('not-links'); + tab = tabs.querySelectorAll('paper-tab')[1]; + anchor = tab.querySelector('a'); + }); + + test('pressing enter on tab does not cause anchor click', function(done) { + tab.addEventListener('click', function onTabClick(event) { + tab.removeEventListener('click', onTabClick); + + expect(event.target).to.not.equal(anchor); + expect(event.target).to.be.equal(tab); + done(); + }); + + MockInteractions.pressEnter(tab); + }); + + }); + + suite('not first child', function() { + + var tabs; + var tab, anchor; + + setup(function () { + tabs = fixture('links'); + tab = tabs.querySelectorAll('paper-tab')[1]; + anchor = tab.querySelector('a'); + }); + + test('pressing enter on tab causes anchor click', function(done) { + tab.addEventListener('click', function onTabClick(event) { + tab.removeEventListener('click', onTabClick); + + expect(event.target).to.be.equal(anchor); + done(); + }); + + MockInteractions.pressEnter(tab); + }); + + }); + + }); + + </script> + + </body> +</html> |
