remove unneeded components

This commit is contained in:
Luke Pulverenti 2016-06-21 12:55:08 -04:00
parent 61b625bbdb
commit 2d822ccb6f
61 changed files with 4 additions and 5173 deletions

View file

@ -1,41 +0,0 @@
{
"name": "iron-media-query",
"version": "1.0.8",
"description": "Lets you bind to a CSS media query",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"media"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-media-query"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-media-query",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "iron-media-query.html",
"_release": "1.0.8",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "3f916be171af7a3e03eb019acdfea71055d3c744"
},
"_source": "git://github.com/PolymerElements/iron-media-query.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-media-query"
}

View file

@ -1 +0,0 @@
bower_components

View file

@ -1,22 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
env:
global:
- secure: My9uxlkp4fZwSHKqo1RUv4yBhNl46XfbaiOsOStqJdI9l7hBfudSl7V2OZeLuV2pEDJC1z1ZqVU6C/K0/iTf7i66cd9g0iH5N+1qex8p2AcuP1evPWbwLw8moHH+M5E14MMXD8sPX4KauS8azmgRm61pppD5ZgKfCaeGZg7Tczs=
- secure: LgnZP4BNGBkTZhf8Vr7r9LdrOwq2/58TqqYkFFloEGBRT6HmumNSRwNbIwOh1U9jSTVkqjC2rn4G27u4XlEIs+QTD2PVSSEKy7Vbn0KxSNCvCGaOB1ZaxWTwZa7nkg09ZFRCHGh+WIbuV+BxyzsjOqlN82GSzFNSb3rxhqDM6dU=
node_js: 4
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"

View file

@ -1,72 +0,0 @@
<!--
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 :)
-->
# 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 users 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: [http://jsbin.com/cagaye](http://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 using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, #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 dont be afraid to ask us if you need help with that!

View file

@ -1,32 +0,0 @@
{
"name": "iron-media-query",
"version": "1.0.8",
"description": "Lets you bind to a CSS media query",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"media"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-media-query"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-media-query",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "iron-media-query.html"
}

View file

@ -1,93 +0,0 @@
<!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>iron-media-query demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../iron-media-query.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h1>&lt;iron-media-query&gt;</h1>
<template is="dom-bind">
<style>
.item {
margin: 8px;
border: 1px solid #ddd;
}
.item .title {
font-weight: bold;
font-size: 1.2em;
background-color: #eee;
padding: 8px;
}
.item[wide-layout] .title {
float: left;
margin: 0 8px 4px 0;
font-size: 1.4em;
}
.item .description {
padding: 8px;
}
.item::after {
content: '';
display: block;
clear: both;
}
</style>
<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
<iron-media-query full query="print" query-matches="{{print}}"></iron-media-query>
<div class="item" wide-layout$="{{wide}}">
<div class="title">Resize the window</div>
<div class="description">
<template is="dom-if" if="{{!wide}}">
The viewport is less than 600px wide, so the items' titles will
not float.
</template>
<template is="dom-if" if="{{wide}}">
The viewport is at least 600px, so the items' titles will float
to the left.
</template>
Here's another sentence; it's not very long.
</div>
</div>
<div class="item" wide-layout$="{{wide}}">
<div class="title"><code>print</code> example</div>
<div class="description">
<a href="http://polymer-project.org">
This link's destination is visible when this page is printed.
</a>
<template is="dom-if" if="{{print}}">
(http://polymer-project.org)
</template>
This is another sentence which is meant to help fill this box.
</div>
</div>
</template>
</div>
</body>
</html>

View file

@ -1,29 +0,0 @@
<?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="M173,99H91V41h82V99z M93,97h78V43H93V97z"/>
<path d="M77,89H51V42h26V89z M53,87h22V44H53V87z"/>
<rect x="52" y="56" width="24" height="2"/>
<rect x="92" y="58" width="80" height="2"/>
<path d="M65.3,42h-2c0-10,8.7-18.7,18.7-18.7v2C73,25.3,65.3,33,65.3,42z"/>
<path d="M105.3,42h-2c0-9-7.3-16.7-16.3-16.7v-2C97,23.3,105.3,32,105.3,42z"/>
<circle cx="84.3" cy="24.3" r="4"/>
<circle cx="69.3" cy="80.3" r="4"/>
<circle cx="160.3" cy="59.3" r="4"/>
<path d="M49,41v49c0,1.1,0.9,2,2,2h26c1.1,0,2-0.9,2-2V41c0-1.1-0.9-2-2-2H51C49.9,39,49,39.9,49,41z M76,88H52V43h24V88z"/>
<path d="M88.9,40.7v59c0,1.1,0.9,2,2,2h82c1.1,0,2-0.9,2-2v-59c0-1.1-0.9-2-2-2h-82C89.8,38.7,88.9,39.6,88.9,40.7z M172,98H93V42
h79V98z"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1,29 +0,0 @@
<!doctype html>
<!--
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>iron-media-query</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -1,121 +0,0 @@
<!--
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">
<!--
`iron-media-query` can be used to data bind to a CSS media query.
The `query` property is a bare CSS media query.
The `query-matches` property is a boolean representing whether the page matches that media query.
Example:
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
@group Iron Elements
@demo demo/index.html
@hero hero.svg
@element iron-media-query
-->
<script>
Polymer({
is: 'iron-media-query',
properties: {
/**
* The Boolean return value of the media query.
*/
queryMatches: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* The CSS media query to evaluate.
*/
query: {
type: String,
observer: 'queryChanged'
},
/**
* If true, the query attribute is assumed to be a complete media query
* string rather than a single media feature.
*/
full: {
type: Boolean,
value: false
},
/**
* @type {function(MediaQueryList)}
*/
_boundMQHandler: {
value: function() {
return this.queryHandler.bind(this);
}
},
/**
* @type {MediaQueryList}
*/
_mq: {
value: null
}
},
attached: function() {
this.style.display = 'none';
this.queryChanged();
},
detached: function() {
this._remove();
},
_add: function() {
if (this._mq) {
this._mq.addListener(this._boundMQHandler);
}
},
_remove: function() {
if (this._mq) {
this._mq.removeListener(this._boundMQHandler);
}
this._mq = null;
},
queryChanged: function() {
this._remove();
var query = this.query;
if (!query) {
return;
}
if (!this.full && query[0] !== '(') {
query = '(' + query + ')';
}
this._mq = window.matchMedia(query);
this._add();
this.queryHandler(this._mq);
},
queryHandler: function(mq) {
this._setQueryMatches(mq.matches);
}
});
</script>

View file

@ -1,118 +0,0 @@
<!doctype html>
<!--
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>iron-media-query-basic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-media-query.html">
</head>
<body>
<test-fixture id="basic">
<template>
<iron-media-query></iron-media-query>
</template>
</test-fixture>
<script>
suite('basic', function() {
var mq;
suite('set query with different values', function() {
setup(function () {
mq = fixture('basic');
});
test('small min-width value', function() {
mq.query = '(min-width: 1px)';
assert.equal(mq.queryMatches, true);
});
test('large min-width value', function() {
mq.query = '(min-width: 10000px)';
assert.equal(mq.queryMatches, false);
});
test('small max-width value', function() {
mq.query = '(max-width: 1px)';
assert.equal(mq.queryMatches, false);
});
test('large max-width value', function() {
mq.query = '(max-width: 10000px)';
assert.equal(mq.queryMatches, true);
});
test('automatically wrap with parens', function() {
mq.query = 'min-width: 1px';
assert.equal(mq.queryMatches, true);
});
suite('`full` attribute', function() {
test('media features without wrapping parentheses no longer match', function() {
mq.full = true;
mq.query = 'min-width: 1px';
assert.equal(mq.queryMatches, false);
});
test('media queries with both types and features match', function() {
mq.full = true;
mq.query = 'all and (min-width: 1px)';
assert.equal(mq.queryMatches, true);
});
});
suite('query does not activate on empty string or null', function() {
test('empty string', function() {
mq.query = '';
assert.notOk(mq._mq);
});
test('null', function() {
mq.query = null;
assert.notOk(mq._mq);
});
});
test('media query destroys on detach', function() {
mq.query = '(max-width: 800px)';
mq.parentNode.removeChild(mq);
Polymer.dom.flush();
assert.notOk(mq._mq);
});
test('media query re-enables on attach', function() {
mq.query = '(max-width: 800px)';
var parent = mq.parentNode;
parent.removeChild(mq);
Polymer.dom.flush();
parent.appendChild(mq);
Polymer.dom.flush();
assert.ok(mq._mq);
});
});
});
</script>
</body>
</html>

View file

@ -1,26 +0,0 @@
<!DOCTYPE html><!--
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',
'basic.html?dom=shadow'
]);
</script>
</body></html>

View file

@ -1,39 +0,0 @@
{
"name": "iron-range-behavior",
"version": "1.0.5",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for something with a minimum and maximum value",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior"
],
"main": "iron-range-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-range-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-input": "PolymerElements/iron-input#^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/iron-range-behavior",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "645ffc6b39ae4fb0efd23b97016a9c4aac777978"
},
"_source": "git://github.com/PolymerElements/iron-range-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-range-behavior"
}

View file

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/iron-range-behavior/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

View file

@ -1 +0,0 @@
bower_components

View file

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: IsCzwFlF0UR02RUnxyo+Gk4cdZMLDOVdy3X0qE7JCe3Lo/SJXjULrJMUZmHrKV9yQTu8bke5lhJdMe/8kuO7chLekQv4AF5bR2m3x7Kg4oJGQJE30WpBWXz6XSYuwnmOINmaNqNZKil692W28LFr97N2+TxEbE64lTd5cGcgJDI=
- secure: TmQz2J5KMg/5dOi/7VDMWIxLoHjC5K7yCQAQOkcrq9M8PTBQE2wlCVe4wb6EqfiAofBv5e4heO9B3F0EOWWp2Sasa9ZQIcs0Lg/1SU6wv5Vt9XCONu/ZLI9oqG3SJ8pMMhcexMxmygX0wsytuI6LOI3sMMpOek2cdae1ntPT9IE=
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
dist: trusty

View file

@ -1,77 +0,0 @@
<!--
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 users 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 dont be afraid to ask us if you need help with that!

View file

@ -1,29 +0,0 @@
{
"name": "iron-range-behavior",
"version": "1.0.5",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for something with a minimum and maximum value",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior"
],
"main": "iron-range-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-range-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": []
}

View file

@ -1,79 +0,0 @@
<!--
@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>iron-range-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-range-behavior.html">
<link rel="import" href="../../iron-input/iron-input.html">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body unresolved>
<dom-module id="x-progressbar">
<style>
:host {
display: block;
height: 40px;
background-color: #555;
border-radius: 4px;
padding: 8px;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.progress {
background-color: #999;
height: 100%;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.progress-value {
padding: 0 8px;
font-size: 18px;
color: #fff;
}
</style>
<template>
<div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}">
<div class="progress-value"><span>{{ratio}}</span>%</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-progressbar',
behaviors: [Polymer.IronRangeBehavior],
_computeStyle: function(ratio) {
return 'width: ' + ratio + '%;';
}
});
});
</script>
<x-progressbar min="0" max="200" value="120"></x-progressbar>
</body>
</html>

View file

@ -1,24 +0,0 @@
<!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">
<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>

View file

@ -1,121 +0,0 @@
<!--
@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">
<script>
/**
* `iron-range-behavior` provides the behavior for something with a minimum to maximum range.
*
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronRangeBehavior = {
properties: {
/**
* The number that represents the current value.
*/
value: {
type: Number,
value: 0,
notify: true,
reflectToAttribute: true
},
/**
* The number that indicates the minimum value of the range.
*/
min: {
type: Number,
value: 0,
notify: true
},
/**
* The number that indicates the maximum value of the range.
*/
max: {
type: Number,
value: 100,
notify: true
},
/**
* Specifies the value granularity of the range's value.
*/
step: {
type: Number,
value: 1,
notify: true
},
/**
* Returns the ratio of the value.
*/
ratio: {
type: Number,
value: 0,
readOnly: true,
notify: true
},
},
observers: [
'_update(value, min, max, step)'
],
_calcRatio: function(value) {
return (this._clampValue(value) - this.min) / (this.max - this.min);
},
_clampValue: function(value) {
return Math.min(this.max, Math.max(this.min, this._calcStep(value)));
},
_calcStep: function(value) {
// polymer/issues/2493
value = parseFloat(value);
if (!this.step) {
return value;
}
var numSteps = Math.round((value - this.min) / this.step);
if (this.step < 1) {
/**
* For small values of this.step, if we calculate the step using
* `Math.round(value / step) * step` we may hit a precision point issue
* eg. 0.1 * 0.2 = 0.020000000000000004
* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
*
* as a work around we can divide by the reciprocal of `step`
*/
return numSteps / (1 / this.step) + this.min;
} else {
return numSteps * this.step + this.min;
}
},
_validateValue: function() {
var v = this._clampValue(this.value);
this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
return this.value !== v;
},
_update: function() {
this._validateValue();
this._setRatio(this._calcRatio(this.value) * 100);
}
};
</script>

View file

@ -1,180 +0,0 @@
<!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>iron-range-behavior</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="x-progressbar.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="trivialRange">
<template>
<x-progressbar></x-progressbar>
</template>
</test-fixture>
<script>
suite('<x-progressbar>', function() {
var range;
setup(function() {
range = fixture('trivialRange');
});
test('check default', function() {
assert.equal(range.min, 0);
assert.equal(range.max, 100);
assert.equal(range.value, 0);
});
test('set value', function(done) {
range.value = 50;
flush(function() {
assert.equal(range.value, 50);
// test clamp value
range.value = 60.1;
flush(function() {
assert.equal(range.value, 60);
done();
});
});
});
test('set max', function(done) {
range.max = 10;
range.value = 11;
flush(function() {
assert.equal(range.value, range.max);
done();
});
});
test('test ratio', function(done) {
range.max = 10;
range.value = 5;
flush(function() {
assert.equal(range.ratio, 50);
done();
});
});
test('set min', function(done) {
range.min = 10
range.max = 50;
range.value = 30;
flush(function() {
assert.equal(range.ratio, 50);
range.value = 0;
flush(function() {
assert.equal(range.value, range.min);
done();
});
});
});
test('set step', function(done) {
range.min = 0;
range.max = 10;
range.value = 5.1;
flush(function() {
assert.equal(range.value, 5);
range.step = 0.1;
range.value = 5.1;
flush(function() {
assert.equal(range.value, 5.1);
done();
});
});
});
test('set large step', function(done) {
// PolymerElements/paper-slider#135
range.min = 0;
range.max = 2625;
range.step = 875;
range.value = 875;
flush(function() {
assert.equal(range.value, 875);
done();
});
});
test('set step with min', function(done) {
range.min = -0.9;
range.max = 1.1;
range.step = 0.5;
range.value = -0.5;
flush(function() {
assert.equal(range.value, -0.4);
range.value = 0.7;
flush(function() {
assert.equal(range.value, 0.6);
done();
});
});
});
test('odd values', function(done) {
range.min = 1;
range.max = 7;
range.step = 2;
range.value = 3;
flush(function() {
assert.equal(range.value, 3);
range.value += range.step;
assert.equal(range.value, 5);
range.value += range.step;
assert.equal(range.value, 7);
done();
});
});
test('negative values should round up', function(done) {
range.min = -10;
range.max = 10;
range.step = 0.1;
range.value = -8.4252;
flush(function() {
assert.equal(range.value, -8.4);
done();
});
});
test('positive values should round up', function(done) {
range.min = 10;
range.max = 100;
range.step = 0.25;
range.value = 19.34567;
flush(function() {
assert.equal(range.value, 19.25);
done();
});
});
});
</script>
</body>
</html>

View file

@ -1,24 +0,0 @@
<!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>

View file

@ -1,19 +0,0 @@
<!--
@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-range-behavior.html">
<script>
Polymer({
is: 'x-progressbar',
behaviors: [Polymer.IronRangeBehavior]
});
</script>

View file

@ -1,47 +0,0 @@
{
"name": "paper-drawer-panel",
"version": "1.0.9",
"description": "A responsive drawer panel",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"drawer",
"responsive",
"layout"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-drawer-panel.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-drawer-panel",
"dependencies": {
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "paper-drawer-panel.html",
"ignore": [],
"_release": "1.0.9",
"_resolution": {
"type": "version",
"tag": "v1.0.9",
"commit": "d0f2c801380397e5d4334b273a2fef63099d4a2f"
},
"_source": "git://github.com/PolymerElements/paper-drawer-panel.git",
"_target": "~1.0.2",
"_originalSource": "PolymerElements/paper-drawer-panel"
}

View file

@ -1 +0,0 @@
bower_components/

View file

@ -1,25 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: PLe0gvvFLKijrgyroIeymIP14SikK6RobNUOqHyUiLDCh9S2/vSBJUp8U5TYkVmpxMr+rcKXpfIhYt/bne97bARTnMjRQUa+rlraek6EPXyFILDsyaTosYD7rmY2f8ViiW+CM3eUA+ym0P8tvYONdTx+CEdO7S6esotfq3LHrLw=
- secure: U4i/ZSfd87xQ+0YZCKxk3knQQk23V/2IxtSrvY42OnaGi10uz04Cad5XMuBcB1kCyRkAP/e9flQyp4iLaDpG+edm2fxJNPqXepWjtMr0rVFr2LoQ7dPAQCFkzO25dSiO+Wj4ffDO//hwgF5Xl/BXnyRBfSEjURZXr4EP+NjoMWU=
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,77 +0,0 @@
<!--
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 users 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 dont be afraid to ask us if you need help with that!

View file

@ -1,38 +0,0 @@
{
"name": "paper-drawer-panel",
"version": "1.0.9",
"description": "A responsive drawer panel",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"drawer",
"responsive",
"layout"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-drawer-panel.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-drawer-panel",
"dependencies": {
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "paper-drawer-panel.html",
"ignore": []
}

View file

@ -1,97 +0,0 @@
<!doctype html>
<!--
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-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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/demo-pages.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../paper-drawer-panel.html">
<style is="custom-style">
#paperDrawerPanel [main] {
text-align: center;
background-color: var(--google-grey-100);
}
#paperDrawerPanel [drawer] {
border-right: 1px solid var(--google-grey-300);
}
#paperDrawerPanel[right-drawer] [drawer] {
border-left: 1px solid var(--google-grey-300);
}
paper-button {
color: white;
margin: 10px;
background-color: var(--google-blue-700);
white-space: nowrap;
}
button {
display: block;
line-height: 40px;
background-color: transparent;
border: none;
font-size: 14px;
margin: 20px;
}
</style>
</head>
<body unresolved>
<paper-drawer-panel id="paperDrawerPanel" force-narrow>
<div drawer>
<button tabindex="0">Options</button>
<button tabindex="0">Settings</button>
<button tabindex="0" paper-drawer-toggle>Close drawer</button>
</div>
<div main>
<div>
<paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>
</div>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
<script>
(function(global) {
'use strict';
var DRAWER_ATTR = 'right-drawer';
var pdp = document.getElementById('paperDrawerPanel');
global.flipDrawer = function() {
if (pdp.hasAttribute(DRAWER_ATTR)) {
pdp.removeAttribute(DRAWER_ATTR);
} else {
pdp.setAttribute(DRAWER_ATTR, '');
}
}
}(this));
</script>
</body>
</html>

View file

@ -1,21 +0,0 @@
<?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="M175,102H61V24h114V102z M63,100h110V26H63V100z"/>
<path d="M91,102H61V24h30V102z M63,100h26V26H63V100z"/>
<circle cx="123" cy="63" r="4"/>
<rect x="90" y="62" width="33" height="2"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

Before

Width:  |  Height:  |  Size: 828 B

View file

@ -1,29 +0,0 @@
<!doctype html>
<!--
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>paper-drawer-panel</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -1,850 +0,0 @@
<!--
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-media-query/iron-media-query.html">
<link rel="import" href="../iron-selector/iron-selector.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<!--
Material design: [Navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html)
`paper-drawer-panel` contains a drawer panel and a main panel. The drawer
and the main panel are side-by-side with drawer on the left. When the browser
window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
changes to narrow layout. In narrow layout, the drawer will be stacked on top
of the main panel. The drawer will slide in/out to hide/reveal the main
panel.
Use the attribute `drawer` to indicate that the element is the drawer panel and
`main` to indicate that the element is the main panel.
Example:
<paper-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</paper-drawer-panel>
The drawer and the main panels are not scrollable. You can set CSS overflow
property on the elements to make them scrollable or use `paper-header-panel`.
Example:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar></paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar></paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
An element that should toggle the drawer will automatically do so if it's
given the `paper-drawer-toggle` attribute. Also this element will automatically
be hidden in wide layout.
Example:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
To position the drawer to the right, add `right-drawer` attribute.
<paper-drawer-panel right-drawer>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</paper-drawer-panel>
### Styling
To change the main container:
paper-drawer-panel {
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
To change the drawer container when it's in the left side:
paper-drawer-panel {
--paper-drawer-panel-left-drawer-container: {
background-color: white;
};
}
To change the drawer container when it's in the right side:
paper-drawer-panel {
--paper-drawer-panel-right-drawer-container: {
background-color: white;
};
}
To customize the scrim:
paper-drawer-panel {
--paper-drawer-panel-scrim: {
background-color: red;
};
}
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1
`--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {}
`--paper-drawer-panel-left-drawer-container` | Mixin applied to container when it's in the left side | {}
`--paper-drawer-panel-main-container` | Mixin applied to main container | {}
`--paper-drawer-panel-right-drawer-container` | Mixin applied to container when it's in the right side | {}
`--paper-drawer-panel-scrim` | Mixin applied to scrim | {}
@group Paper elements
@element paper-drawer-panel
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-drawer-panel">
<template>
<style>
:host {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
iron-selector > #drawer {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: white;
-moz-box-sizing: border-box;
box-sizing: border-box;
@apply(--paper-drawer-panel-drawer-container);
}
.transition > #drawer {
transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
}
.left-drawer > #drawer {
@apply(--paper-drawer-panel-left-drawer-container);
}
.right-drawer > #drawer {
left: auto;
right: 0;
@apply(--paper-drawer-panel-right-drawer-container);
}
iron-selector > #main {
position: absolute;
top: 0;
right: 0;
bottom: 0;
@apply(--paper-drawer-panel-main-container);
}
.transition > #main {
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
}
.right-drawer > #main {
left: 0;
}
.right-drawer.transition > #main {
transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
}
#main > ::content > [main] {
height: 100%;
}
#drawer > ::content > [drawer] {
height: 100%;
}
#scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
visibility: hidden;
opacity: 0;
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
background-color: rgba(0, 0, 0, 0.3);
@apply(--paper-drawer-panel-scrim);
}
.narrow-layout > #drawer {
will-change: transform;
}
.narrow-layout > #drawer.iron-selected {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}
.right-drawer.narrow-layout > #drawer.iron-selected {
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
}
.narrow-layout > #drawer > ::content > [drawer] {
border: 0;
}
.left-drawer.narrow-layout > #drawer:not(.iron-selected) {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.right-drawer.narrow-layout > #drawer:not(.iron-selected) {
left: auto;
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.left-drawer.dragging > #drawer:not(.iron-selected),
.left-drawer.peeking > #drawer:not(.iron-selected),
.right-drawer.dragging > #drawer:not(.iron-selected),
.right-drawer.peeking > #drawer:not(.iron-selected) {
visibility: visible;
}
.narrow-layout > #main {
padding: 0;
}
.right-drawer.narrow-layout > #main {
left: 0;
right: 0;
}
.narrow-layout > #main:not(.iron-selected) > #scrim,
.dragging > #main > #scrim {
visibility: visible;
opacity: var(--paper-drawer-panel-scrim-opacity, 1);
}
.narrow-layout > #main > * {
margin: 0;
min-height: 100%;
left: 0;
right: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
iron-selector:not(.narrow-layout) ::content [paper-drawer-toggle] {
display: none;
}
</style>
<iron-media-query
id="mq"
on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
</iron-media-query>
<iron-selector
attr-for-selected="id"
class$="[[_computeIronSelectorClass(narrow, _transition, dragging, rightDrawer, peeking)]]"
activate-event=""
selected="[[selected]]">
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
<content select="[main]"></content>
<div id="scrim" on-tap="closeDrawer"></div>
</div>
<div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
<content id="drawerContent" select="[drawer]"></content>
</div>
</iron-selector>
</template>
<script>
(function() {
'use strict';
// this would be the only `paper-drawer-panel` in
// the whole app that can be in `dragging` state
var sharedPanel = null;
function classNames(obj) {
var classes = [];
for (var key in obj) {
if (obj.hasOwnProperty(key) && obj[key]) {
classes.push(key);
}
}
return classes.join(' ');
}
Polymer({
is: 'paper-drawer-panel',
behaviors: [Polymer.IronResizableBehavior],
/**
* Fired when the narrow layout changes.
*
* @event paper-responsive-change {{narrow: boolean}} detail -
* narrow: true if the panel is in narrow layout.
*/
/**
* Fired when the a panel is selected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is selected.
*
* @event iron-select {{item: Object}} detail -
* item: The panel that the event refers to.
*/
/**
* Fired when a panel is deselected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is deselected.
*
* @event iron-deselect {{item: Object}} detail -
* item: The panel that the event refers to.
*/
properties: {
/**
* The panel to be selected when `paper-drawer-panel` changes to narrow
* layout.
*/
defaultSelected: {
type: String,
value: 'main'
},
/**
* If true, swipe from the edge is disabled.
*/
disableEdgeSwipe: {
type: Boolean,
value: false
},
/**
* If true, swipe to open/close the drawer is disabled.
*/
disableSwipe: {
type: Boolean,
value: false
},
/**
* Whether the user is dragging the drawer interactively.
*/
dragging: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Width of the drawer panel.
*/
drawerWidth: {
type: String,
value: '256px'
},
/**
* How many pixels on the side of the screen are sensitive to edge
* swipes and peek.
*/
edgeSwipeSensitivity: {
type: Number,
value: 30
},
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},
/**
* Whether the browser has support for the transform CSS property.
*/
hasTransform: {
type: Boolean,
value: function() {
return 'transform' in this.style;
}
},
/**
* Whether the browser has support for the will-change CSS property.
*/
hasWillChange: {
type: Boolean,
value: function() {
return 'willChange' in this.style;
}
},
/**
* Returns true if the panel is in narrow layout. This is useful if you
* need to show/hide elements based on the layout.
*/
narrow: {
reflectToAttribute: true,
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Whether the drawer is peeking out from the edge.
*/
peeking: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Max-width when the panel changes to narrow layout.
*/
responsiveWidth: {
type: String,
value: '600px'
},
/**
* If true, position the drawer to the right.
*/
rightDrawer: {
type: Boolean,
value: false
},
/**
* The panel that is being selected. `drawer` for the drawer panel and
* `main` for the main panel.
*
* @type {string|null}
*/
selected: {
reflectToAttribute: true,
notify: true,
type: String,
value: null
},
/**
* The attribute on elements that should toggle the drawer on tap, also elements will
* automatically be hidden in wide layout.
*/
drawerToggleAttribute: {
type: String,
value: 'paper-drawer-toggle'
},
/**
* The CSS selector for the element that should receive focus when the drawer is open.
* By default, when the drawer opens, it focuses the first tabbable element. That is,
* the first element that can receive focus.
*
* To disable this behavior, you can set `drawerFocusSelector` to `null` or an empty string.
*
*/
drawerFocusSelector: {
type: String,
value:
'a[href]:not([tabindex="-1"]),'+
'area[href]:not([tabindex="-1"]),'+
'input:not([disabled]):not([tabindex="-1"]),'+
'select:not([disabled]):not([tabindex="-1"]),'+
'textarea:not([disabled]):not([tabindex="-1"]),'+
'button:not([disabled]):not([tabindex="-1"]),'+
'iframe:not([tabindex="-1"]),'+
'[tabindex]:not([tabindex="-1"]),'+
'[contentEditable=true]:not([tabindex="-1"])'
},
/**
* Whether the transition is enabled.
*/
_transition: {
type: Boolean,
value: false
},
},
listeners: {
tap: '_onTap',
track: '_onTrack',
down: '_downHandler',
up: '_upHandler',
transitionend: '_onTransitionEnd'
},
observers: [
'_forceNarrowChanged(forceNarrow, defaultSelected)',
'_toggleFocusListener(selected)'
],
ready: function() {
// Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready.
this._transition = true;
this._boundFocusListener = this._didFocus.bind(this);
},
/**
* Toggles the panel open and closed.
*
* @method togglePanel
*/
togglePanel: function() {
if (this._isMainSelected()) {
this.openDrawer();
} else {
this.closeDrawer();
}
},
/**
* Opens the drawer.
*
* @method openDrawer
*/
openDrawer: function() {
this.selected = 'drawer';
},
/**
* Closes the drawer.
*
* @method closeDrawer
*/
closeDrawer: function() {
this.selected = 'main';
},
_onTransitionEnd: function (e) {
var target = Polymer.dom(e).localTarget;
if (target !== this) {
// ignore events coming from the light dom
return;
}
if (e.propertyName === 'left' || e.propertyName === 'right') {
this.notifyResize();
}
if (e.propertyName === 'transform' && this.selected === 'drawer') {
//var focusedChild = this._getAutoFocusedNode();
//focusedChild && focusedChild.focus();
}
},
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
return classNames({
dragging: dragging,
'narrow-layout': narrow,
'right-drawer': rightDrawer,
'left-drawer': !rightDrawer,
transition: transition,
peeking: peeking
});
},
_computeDrawerStyle: function(drawerWidth) {
return 'width:' + drawerWidth + ';';
},
_computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
var style = '';
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
}
return style;
},
_computeMediaQuery: function(forceNarrow, responsiveWidth) {
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
},
_computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
return !narrow || disableEdgeSwipe;
},
_onTrack: function(event) {
if (sharedPanel && this !== sharedPanel) {
return;
}
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd(event);
break;
}
},
_responsiveChange: function(narrow) {
this._setNarrow(narrow);
this.selected = this.narrow ? this.defaultSelected : null;
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow});
},
_onQueryMatchesChanged: function(event) {
this._responsiveChange(event.detail.value);
},
_forceNarrowChanged: function() {
// set the narrow mode only if we reached the `responsiveWidth`
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
},
_swipeAllowed: function() {
return this.narrow && !this.disableSwipe;
},
_isMainSelected: function() {
return this.selected === 'main';
},
_startEdgePeek: function() {
this.width = this.$.drawer.offsetWidth;
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
this._setPeeking(true);
},
_stopEdgePeek: function() {
if (this.peeking) {
this._setPeeking(false);
this._moveDrawer(null);
}
},
_downHandler: function(event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel
sharedPanel = this;
}
},
_upHandler: function() {
this._stopEdgePeek();
// release the panel
sharedPanel = null;
},
_onTap: function(event) {
var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute);
if (isTargetToggleElement) {
this.togglePanel();
}
},
_isEdgeTouch: function(event) {
var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ?
x >= this.offsetWidth - this.edgeSwipeSensitivity :
x <= this.edgeSwipeSensitivity);
},
_trackStart: function(event) {
if (this._swipeAllowed()) {
sharedPanel = this;
this._setDragging(true);
if (this._isMainSelected()) {
this._setDragging(this.peeking || this._isEdgeTouch(event));
}
if (this.dragging) {
this.width = this.$.drawer.offsetWidth;
this._transition = false;
}
}
},
_translateXForDeltaX: function(deltaX) {
var isMain = this._isMainSelected();
if (this.rightDrawer) {
return Math.max(0, isMain ? this.width + deltaX : deltaX);
} else {
return Math.min(0, isMain ? deltaX - this.width : deltaX);
}
},
_trackX: function(event) {
if (this.dragging) {
var dx = event.detail.dx;
if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
// Ignore trackx until we move past the edge peek.
return;
}
this._setPeeking(false);
}
var dy = event.detail.dy;
var absDy = Math.abs(dy);
if (absDy >= 70) {
// Ignore trackx until we move past the edge peek.
return;
}
this._moveDrawer(this._translateXForDeltaX(dx));
}
},
_trackEnd: function(event) {
if (this.dragging) {
var xDirection = event.detail.dx > 0;
this._setDragging(false);
this._transition = true;
sharedPanel = null;
this._moveDrawer(null);
var dx = event.detail.dx;
var dy = event.detail.dy;
var absDy = Math.abs(dy);
if (this.rightDrawer) {
this[xDirection ? 'closeDrawer' : 'openDrawer']();
} else {
this[xDirection || dx > -80 || absDy >= 70 ? 'openDrawer' : 'closeDrawer']();
}
}
},
_transformForTranslateX: function(translateX) {
if (translateX === null) {
return '';
}
return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
'translate3d(' + translateX + 'px, 0, 0)';
},
_moveDrawer: function(translateX) {
this.transform(this._transformForTranslateX(translateX), this.$.drawer);
},
_getDrawerContent: function() {
return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];
},
_getAutoFocusedNode: function() {
var drawerContent = this._getDrawerContent();
return this.drawerFocusSelector ?
Polymer.dom(drawerContent).querySelector(this.drawerFocusSelector) || drawerContent : null;
},
_toggleFocusListener: function(selected) {
if (selected === 'drawer') {
this.addEventListener('focus', this._boundFocusListener, true);
} else {
this.removeEventListener('focus', this._boundFocusListener, true);
}
},
_didFocus: function(event) {
var autoFocusedNode = this._getAutoFocusedNode();
if (!autoFocusedNode) {
return;
}
var path = Polymer.dom(event).path;
var focusedChild = path[0];
var drawerContent = this._getDrawerContent();
var focusedChildCameFromDrawer = path.indexOf(drawerContent) !== -1;
if (!focusedChildCameFromDrawer) {
event.stopPropagation();
//autoFocusedNode.focus();
}
},
_isDrawerClosed: function(narrow, selected) {
return !narrow || selected !== 'drawer';
}
});
}());
</script>
</dom-module>

View file

@ -1,130 +0,0 @@
<!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-drawer-panel tests</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>
<link rel="import" href="../paper-drawer-panel.html">
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
</head>
<style>
body {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
</style>
<body>
<test-fixture id="drawer">
<template>
<paper-drawer-panel force-narrow>
<div drawer>
<input id="innerLink1" tabindex="0" value="inside drawer 1">
<input id="innerLink2" tabindex="0" value="inside drawer 2">
</div>
<div main>
<input id="outerLink" tabindex="0" value="outside drawer">
</div>
</paper-drawer-panel>
</template>
</test-fixture>
<test-fixture id="nestedDrawer">
<template>
<paper-drawer-panel force-narrow>
<div drawer>
<input id="innerLink1" tabindex="0" value="inside drawer 1">
</div>
<paper-drawer-panel id="drawer2" main force-narrow>
<div drawer>
<input id="innerLink2" tabindex="0" value="inside drawer 2">
</div>
<div main>
<input id="outerLink" tabindex="0" value="outside drawer">
</div>
</paper-drawer-panel>
</paper-drawer-panel>
</template>
</test-fixture>
<script>
function ensureDocumentHasFocus() {
window.top && window.top.focus();
}
suite('focus', function() {
var drawer, innerLink, outerLink;
setup(function() {
drawer = fixture('drawer');
innerLink = drawer.querySelector('#innerLink1');
outerLink = drawer.querySelector('#outerLink');
ensureDocumentHasFocus();
});
test('should not focus content in drawer if the drawer is closed', function(done) {
Polymer.Base.async(function() {
expect(Polymer.dom(document).activeElement).to.not.be.equal(innerLink);
done();
}, 1);
MockInteractions.focus(innerLink);
});
});
suite('nested drawers', function() {
var drawer1, drawer2, innerLink1, innerLink2;
setup(function() {
drawer1 = fixture('nestedDrawer');
drawer2 = drawer1.querySelector('#drawer2');
innerLink1 = drawer1.querySelector('#innerLink1');
innerLink2 = drawer1.querySelector('#innerLink2');
ensureDocumentHasFocus();
});
test('should not cause stack overflow', function(done) {
var count = 0;
var spy = sinon.spy();
drawer1.openDrawer();
drawer2.openDrawer();
document.addEventListener('focus', spy, true);
MockInteractions.focus(innerLink1);
MockInteractions.focus(innerLink2);
Polymer.Base.async(function() {
if (spy.callCount > 10) {
throw new Error('stack overflow');
}
done();
}, 100);
});
});
</script>
</body>
</html>

View file

@ -1,30 +0,0 @@
<!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>paper-drawer-panel tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'positioning.html',
'small-devices.html',
'focus.html',
'positioning.html?dom=shadow',
'small-devices.html?dom=shadow',
'focus.html?dom=shadow'
]);
</script>
</body>
</html>

View file

@ -1,93 +0,0 @@
<!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-drawer-panel tests</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>
<link rel="import" href="../paper-drawer-panel.html">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<test-fixture id="left-drawer">
<template>
<paper-drawer-panel>
<div drawer></div>
<div main></div>
</paper-drawer-panel>
</template>
</test-fixture>
<test-fixture id="right-drawer">
<template>
<paper-drawer-panel right-drawer>
<div drawer></div>
<div main></div>
</paper-drawer-panel>
</template>
</test-fixture>
<script>
suite('positioning', function() {
test('drawer is positioned correctly', function(done) {
var f, drawer, main;
f = fixture('left-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
Polymer.Base.async(function() {
var drawerStyle = window.getComputedStyle(drawer);
expect(drawerStyle.left).to.be.equal('0px');
try {
expect(drawerStyle.right).to.be.equal('auto');
} catch(e) {
// Firefox
expect(drawerStyle.right).to.be.equal(f.offsetWidth - drawer.offsetWidth + 'px');
}
done();
});
});
test('right-drawer is positioned correctly', function(done) {
var f, drawer, main;
f = fixture('right-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
Polymer.Base.async(function() {
var drawerStyle = window.getComputedStyle(drawer);
expect(drawerStyle.right).to.be.equal('0px');
try {
expect(drawerStyle.left).to.be.equal('auto');
} catch(e) {
// Firefox
expect(drawerStyle.left).to.be.equal(f.offsetWidth - drawer.offsetWidth + 'px');
}
done();
});
});
});
</script>
</body>
</html>

View file

@ -1,138 +0,0 @@
<!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-drawer-panel tests</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>
<link rel="import" href="../paper-drawer-panel.html">
</head>
<style>
body {
margin: 0;
padding: 0;
}
.notransition,
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
</style>
<body>
<test-fixture id="left-drawer">
<template>
<paper-drawer-panel class="notransition">
<div drawer></div>
<div main></div>
</paper-drawer-panel>
</template>
</test-fixture>
<test-fixture id="right-drawer">
<template>
<paper-drawer-panel right-drawer class="notransition">
<div drawer></div>
<div main></div>
</paper-drawer-panel>
</template>
</test-fixture>
<script>
suite('on small devices', function() {
test('drawer is hidden by default', function(done) {
var f, panel, drawer, main;
f = fixture('left-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
f.set('forceNarrow', true);
f._forceNarrowChanged();
Polymer.Base.async(function() {
var drawerBoundingRect = drawer.getBoundingClientRect();
var mainStyle = window.getComputedStyle(main);
expect(f._isMainSelected()).to.be.equal(true);
expect(drawerBoundingRect.left).to.be.equal(-256);
expect(drawerBoundingRect.width).to.be.equal(256);
done();
});
});
test('right-drawer is hidden by default', function(done) {
var f, panel, drawer, main;
f = fixture('right-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
f.set('forceNarrow', true);
f._forceNarrowChanged();
Polymer.Base.async(function() {
var drawerBoundingRect = drawer.getBoundingClientRect();
var mainStyle = window.getComputedStyle(main);
expect(drawerBoundingRect.right).to.be.equal(f.offsetWidth + 256);
expect(drawerBoundingRect.width).to.be.equal(256);
done();
});
});
test('drawer can be opened', function(done) {
var f, panel, drawer, main;
f = fixture('left-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
f.set('forceNarrow', true);
f._forceNarrowChanged();
f.openDrawer();
Polymer.Base.async(function() {
var drawerBoundingRect = drawer.getBoundingClientRect();
var mainStyle = window.getComputedStyle(main);
expect(f.selected).to.be.equal('drawer');
expect(f._isMainSelected()).to.be.equal(false);
expect(drawerBoundingRect.left).to.be.equal(0);
expect(drawerBoundingRect.width).to.be.equal(256);
done();
});
});
test('right-drawer can be closed', function(done) {
var f, panel, drawer, main;
f = fixture('right-drawer');
drawer = f.$$('#drawer');
main = f.$$('#main');
f.set('forceNarrow', true);
f._forceNarrowChanged();
f.openDrawer();
Polymer.Base.async(function() {
var drawerBoundingRect = drawer.getBoundingClientRect();
var mainStyle = window.getComputedStyle(main);
expect(drawerBoundingRect.right).to.be.equal(f.offsetWidth);
expect(drawerBoundingRect.width).to.be.equal(256);
done();
});
});
});
</script>
</body>
</html>

View file

@ -54,7 +54,8 @@
"tag": "v1.1.11", "tag": "v1.1.11",
"commit": "8cfe5c5bf8c2e40d243443d046a94b6fe371983c" "commit": "8cfe5c5bf8c2e40d243443d046a94b6fe371983c"
}, },
"_source": "git://github.com/polymerelements/paper-input.git", "_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.9", "_target": "^1.1.11",
"_originalSource": "polymerelements/paper-input" "_originalSource": "PolymerElements/paper-input",
"_direct": true
} }

View file

@ -1,42 +0,0 @@
{
"name": "paper-progress",
"version": "1.0.9",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design progress bar",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"progress"
],
"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.9",
"_resolution": {
"type": "version",
"tag": "v1.0.9",
"commit": "389e717d2e600bb44c6cb1537ee12b203b55fca1"
},
"_source": "git://github.com/PolymerElements/paper-progress.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-progress"
}

View file

@ -1 +0,0 @@
bower_components

View file

@ -1,25 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: fmp2kJysxTcVsouaQfEkPCJYPzbsuGCeq5RqvttDaYdue92n5912OR/WI476PPGpX2owvxq97saVX9CqXweVtgrmdhONsrGy31eULpW0vUonuhbjkKU87E0aAmHu478uuJnc4hU7oN7wuNEtqWmpFG+oqMqHKwUyAWLk+V4XY0nseuFYQLX52qfglD+CqipQsoe84nIM0JxQxpDw1njYZbKQzZVttyLQVv13Ahh+5v75EqqwggoD2mgU1xQIH1GarbnZpmE9BL4ETbaJwJ7Fon/Pxsrs1Zs9hEStJCwo5aTiyPJibRQBCk9Cj+PJY3TkqfE3zIwhbW1/aSCIuUg5egsh6Of6clqrDE2wWPyIURUBFcE3UXsqBEXh56K9WQh+KNIgJYoQ/tzhD2VlgQhM89geTKZc6ysSTWcukv9tw9h9gaG2gD1e+uRQ/rMyt6vlh2DNI/J8oAv1WifZwuUKRkwm7SUBP55sukFryJIQEXEMqjT0WVbjTWP+2VNiHFPo7wGdVZ8X7y4bwA7lmnlC4AnNd8L6BE0tStZUBAKv3LhzRvd+DrRvaiSPdFhGBbAiMzytKGgxfD7nhMntV7GREjfQCB/hch5anePK7Cuw58kF8PiZX9aVk8Se3VP0+rdUkzVgWTW5THhdpw2nnuIyK5QDtL4/L3l/oJhl9Jbmak4=
- secure: WzzECDnm17AwL4VDbMJD0E1cdi11p2YLahJRPi/+GZ9BFNIV3I2WZFc5l0WEiGDMB4igx5DdXHzDFk7HF2z2qRpf2skhWDTd/Ie5+exZlY9/D/tED8dJepGtV40UTuWr+vHsDJeNkXteYNpNU7ZHfNbXl14/x25ccaLYSX5yRNLBRMn9KToRNBhXA0YH/Q9AnWNKGFWb0YBfjSRywSvVuVRQr/tL43JUCTEEwjdGHVTUlvWPE5XHDs6yqjJlTI70GVvQb5WPZdQJugiolG9Z66ZRWEEuawJgzTCdlaKwBQX0UAXLdfUsQKwrcxvLnDibMHVG6hNOBw4Un73YL0klD7nKoPlhCiDHtPWoNUCvpNGxPWozw2KC50YX4MZSFKAWCkIA4/oiIhMvSUOWcrOpfHZNpJNNBCFHvv6JS5PwEiNlqM2BjqfS4Vy/03Fy0h6CyNX8o5wDAjZvJKCyZQHGy4tFWNPpyZ6SbwsnzH+bjqXSDURI6hCUNiujlIRzUT95H8rIega1mWT8sffvb4qK72iXAqf7hoQbi1Ldhjq/b0iO0PRdpjX5vusLN797KxPNrxDZc9LoaIgVMAFD5AJmwF/DilvwsW6sI4o5cpAw58/g1wpB7iX0YFWXNzXv/hZh2o4gW81Y2afM//gIgCFSitRO10bOqw+pEcGCnLrz/BQ=
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -1,77 +0,0 @@
<!--
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 users 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 dont be afraid to ask us if you need help with that!

View file

@ -1,32 +0,0 @@
{
"name": "paper-progress",
"version": "1.0.9",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design progress bar",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"progress"
],
"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": []
}

View file

@ -1,122 +0,0 @@
<!--
@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</h3>
<demo-snippet class="centered-demo">
<template>
<paper-progress indeterminate></paper-progress>
<paper-progress indeterminate value="800" min="100" max="1000"></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, animationFrame;
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;
}
var animationFrame = 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>

View file

@ -1,21 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 813 B

View file

@ -1,28 +0,0 @@
<!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>

View file

@ -1,341 +0,0 @@
<!--
@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;
}
The following mixins are available for styling:
Custom property | Description | Default
----------------------------------------------|---------------------------------------------|--------------
`--paper-progress-container-color` | Mixin applied to container | `--google-grey-300`
`--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-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`
@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;
}
#progressContainer {
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 2s linear infinite;
animation: indeterminate-bar 2s linear infinite;
}
:host(:not([disabled])) #primaryProgress.indeterminate::after {
content: "";
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation: indeterminate-splitter 2s linear infinite;
animation: indeterminate-splitter 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>

View file

@ -1,148 +0,0 @@
<!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>

View file

@ -1,24 +0,0 @@
<!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>

View file

@ -1,48 +0,0 @@
{
"name": "paper-slider",
"version": "1.0.11",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"slider",
"control"
],
"main": "paper-slider.html",
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-slider.git"
},
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/paper-slider",
"_release": "1.0.11",
"_resolution": {
"type": "version",
"tag": "v1.0.11",
"commit": "855e3ed20d12b4545175317536adca7897928537"
},
"_source": "git://github.com/PolymerElements/paper-slider.git",
"_target": "~1.0.3",
"_originalSource": "PolymerElements/paper-slider"
}

View file

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/paper-slider/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

View file

@ -1 +0,0 @@
bower_components

View file

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: W9pv3wK5AyI038GpPZpFo5yii72up1pTHM9yu8TI4th6Q/TiUQCa8GbjAMhUcbMDl3Y4i50WjckykSox+c506Zs5Pe5vDCaKpHT/iOHYqjIaQEDGGvvKWxSTJr82HY2taNhkH7seksg7oKq8dL7DCBLyKJUl03hGmRqZABjIw9fWjSNUb9PVdlZass5nJaqw954t76GYBWcQ71fntm8uCnSrQoviHEprvfwZMNnK0mhd79VmBohl83jpFU8FaYEWLc5IFY29u7McLxgynZBggwhGSrvdDrOYG4jtn26RNx4mNCcJGxejzadvf4K6H2S45SGnsCIjJRJbl8MV+ni18VqC/BuCF2J4k8QqSRtWi2mSq/l9DOgIiwViPRjPRxoK+a+/6qA7pQ1aMXBWWF4FjngvgoZHcY2J5FptbRltDtalrUSbUVmmKNoWwaJa4Sb5OopJdr0herGds946qzQKW1FLqkcDTtF6c4fZqK12WVEIXZLXiP9sV9+dBJDXT4oWzgjo2GHAiMEzV6Xk3oZ/RHmWJ34Bemy7M5zYKDHErLhD6/UXiA/tYlTqqgu/4Jdxs07ilWmaVd3kTYywRYuTzR4yO3xq8ElpEnpby2WobGiVCsuzQwOe4fWSvV4wS8TpSdigoGxYQ+FPrrbc7jhgRodyZP1xF/mTHlIvNmaTYYc=
- secure: xLLhaBejrIuYAxwQoFPsrvnBpeDVY8IYdThJ36fJnD4V0jpqS7m8b2rw5fYrtwWvmEAQlqJ20/hnjfp9kKXr6Qpkj2im9d0KWdw4xAyD2KxiG/u5pBn1Y+zE9iGjq+NGa58EJDNaxQSnaXmVnk55tyT9W3ailkiO/lEtaofXXXGqiW9Nxa9D0GtbbNWBypcoc7X/HXCcg5hVpdVjEFh3Y+nFWIdqJEO0V7oKujfb5yFhu5PRU7siTzdN+nLoPXPMlkBa3aWwPLdM1D9HKXN1jBX6dM9dH3oz20K/TCPpbO5u675vfuTT9iP9XuLy4LB/cl7S6bcopvhU5ipkQvLEieeq73EP1hz5vwdSWgleXkNhWBInhzeHLTI04M49ZxIc0NEay2Tvx9tQl5e8BT1/WglpjnHvqx/VoF7zkHRfWyWeObL6YyFVFiJ0Gz3ExJTUCruQRBen+g2Cqr1qwBN4bFPhgxzHW58ECdsDFvfpZT3I7h/wnCzNVOZx+A74nVwDpl6zg+/+GWpqZF2ILGbRDTcjp1A/eH+FMwnQccRLiBcXm4v4y8pFfaNzjRwswUQjnMV5KyIV+dSyQQAh9sBedFJjeWm1HSy3UXFZvyc6gQIG5GR5uGWkyxYHdCxBFMYFj2xmEzoLwF7omu5CXF0TUdYxb5hvUBMEqEEKIwte2VE=
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
dist: trusty

View file

@ -1,77 +0,0 @@
<!--
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 users 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 dont be afraid to ask us if you need help with that!

View file

@ -1,38 +0,0 @@
{
"name": "paper-slider",
"version": "1.0.11",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"slider",
"control"
],
"main": "paper-slider.html",
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-slider.git"
},
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

View file

@ -1,122 +0,0 @@
<!--
@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-slider 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="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../paper-slider.html">
<style is="custom-style" include="demo-pages-shared-styles">
paper-slider {
width: 100%;
}
</style>
</head>
<body unresolved>
<div class="vertical-section-container centered">
<h3>paper-sliders can have values, secondary progress values, or be disabled.</h3>
<demo-snippet>
<template>
<paper-slider value="21"></paper-slider>
<paper-slider value="0"></paper-slider>
<paper-slider value="50" secondary-progress="85"></paper-slider>
<paper-slider disabled value="33"></paper-slider>
</template>
</demo-snippet>
<h3>They can be editable, and styled using custom properties</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-slider.red {
--paper-slider-knob-color: var(--paper-red-500);
--paper-slider-active-color: var(--paper-red-500);
}
paper-slider.green {
--paper-slider-knob-color: var(--paper-green-500);
--paper-slider-active-color: var(--paper-green-500);
}
paper-slider.blue {
--paper-slider-knob-color: var(--paper-light-blue-500);
--paper-slider-active-color: var(--paper-light-blue-500);
}
</style>
<div>R</div>
<paper-slider class="red" value="23" max="255" editable></paper-slider>
<div>G</div>
<paper-slider class="green" value="183" max="255" editable></paper-slider>
<div>B</div>
<paper-slider class="blue" value="211" max="255" editable></paper-slider>
</template>
</demo-snippet>
<h3>The pins can be labelled</h3>
<demo-snippet>
<template>
<style is="custom-style">
.caption {
padding-left: 12px;
color: #a0a0a0;
}
#grade {
--paper-slider-secondary-color: var(--paper-red-a200);
}
</style>
<div>Brightness</div><br>
<paper-slider pin value="20"></paper-slider>
<div>Ratings: <span id="ratingsLabel" class="caption"></span></div><br>
<paper-slider id="ratings" pin snaps max="10" max-markers="10" step="1" value="5"></paper-slider>
<div>Grade: <span id="gradeLabel" class="caption"></span></div><br>
<paper-slider id="grade" pin value="20" secondary-progress="70"></paper-slider>
<script>
document.addEventListener('WebComponentsReady', function() {
var ratings = document.querySelector('#ratings');
ratings.addEventListener('value-change', function() {
document.querySelector('#ratingsLabel').textContent = ratings.value;
});
var grade = document.querySelector('#grade');
grade.addEventListener('value-change', function() {
var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
});
});
</script>
</template>
</demo-snippet>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
var ratings = document.querySelector('#ratings');
ratings.addEventListener('value-change', function() {
document.querySelector('#ratingsLabel').textContent = ratings.value;
});
var grade = document.querySelector('#grade');
grade.addEventListener('value-change', function() {
var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
});
});
</script>
</body>
</html>

View file

@ -1,20 +0,0 @@
<?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">
<circle cx="110" cy="61" r="4"/>
<rect x="61" y="60" width="49" height="2"/>
<rect x="110" y="60" width="53" height="2"/>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>

Before

Width:  |  Height:  |  Size: 757 B

View file

@ -1,29 +0,0 @@
<!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-slider</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>

View file

@ -1,758 +0,0 @@
<!--
@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-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-styles/color.html">
<!--
Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)
`paper-slider` allows user to select a value from a range of values by
moving the slider thumb. The interactive nature of the slider makes it a
great choice for settings that reflect intensity levels, such as volume,
brightness, or color saturation.
Example:
<paper-slider></paper-slider>
Use `min` and `max` to specify the slider range. Default is 0 to 100.
Example:
<paper-slider min="10" max="200" value="110"></paper-slider>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-slider-container-color` | The background color of the bar | `--paper-grey-400`
`--paper-slider-bar-color` | The background color of the slider | `transparent`
`--paper-slider-active-color` | The progress bar color | `--google-blue-700`
`--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
`--paper-slider-knob-color` | The knob color | `--google-blue-700`
`--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
`--paper-slider-pin-color` | The pin color | `--google-blue-700`
`--paper-slider-font-color` | The pin's text color | `#fff`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
`--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
`--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`
`--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
`--paper-slider-height` | Height of the progress bar | `2px`
`--paper-slider-input` | Mixin applied to the input in editable mode | `{}`
@group Paper Elements
@element paper-slider
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-slider">
<template strip-whitespace>
<style>
:host {
@apply(--layout);
@apply(--layout-justified);
@apply(--layout-center);
width: 200px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --paper-grey-400);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --paper-grey-400);
}
/* focus shows the ripple */
:host(:focus) {
outline: none;
}
#sliderContainer {
position: relative;
width: 100%;
height: calc(30px + var(--paper-slider-height, 2px));
margin-left: calc(15px + var(--paper-slider-height, 2px)/2);
margin-right: calc(15px + var(--paper-slider-height, 2px)/2);
}
#sliderContainer:focus {
outline: 0;
}
#sliderContainer.editable {
margin-top: 12px;
margin-bottom: 12px;
}
.bar-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.ring > .bar-container {
left: calc(5px + var(--paper-slider-height, 2px)/2);
transition: left 0.18s ease;
}
.ring.expand.dragging > .bar-container {
transition: none;
}
.ring.expand:not(.pin) > .bar-container {
left: calc(8px + var(--paper-slider-height, 2px)/2);
}
#sliderBar {
padding: 15px 0;
width: 100%;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-container-color: var(--paper-slider-container-color, --paper-grey-400);
--paper-progress-height: var(--paper-slider-height, 2px);
}
.slider-markers {
position: absolute;
top: calc(14px + var(--paper-slider-height,2px)/2);
height: var(--paper-slider-height, 2px);
left: 0;
right: -1px;
box-sizing: border-box;
pointer-events: none;
@apply(--layout-horizontal);
}
.slider-marker {
@apply(--layout-flex);
}
.slider-markers::after,
.slider-marker::after {
content: "";
display: block;
margin-left: -1px;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: black;
}
#sliderKnob {
position: absolute;
left: 0;
top: 0;
margin-left: calc(-15px - var(--paper-slider-height, 2px)/2);
width: calc(30px + var(--paper-slider-height, 2px));
height: calc(30px + var(--paper-slider-height, 2px));
}
.transiting > #sliderKnob {
transition: left 0.08s ease;
}
#sliderKnob:focus {
outline: none;
}
#sliderKnob.dragging {
transition: none;
}
.snaps > #sliderKnob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnobInner {
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background-color: var(--paper-slider-knob-color, --google-blue-700);
border: 2px solid var(--paper-slider-knob-color, --google-blue-700);
border-radius: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition-property: -webkit-transform, background-color, border;
transition-property: transform, background-color, border;
transition-duration: 0.18s;
transition-timing-function: ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
#sliderKnobInner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
}
.pin > #sliderKnob > #sliderKnobInner::before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -13px;
width: 26px;
height: 26px;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
#sliderKnobInner::before,
#sliderKnobInner::after {
transition: -webkit-transform .18s ease, background-color .18s ease;
transition: transform .18s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
.pin > #sliderKnob > #sliderKnobInner::after {
content: attr(value);
position: absolute;
top: 0;
left: 50%;
margin-left: -16px;
width: 32px;
height: 26px;
text-align: center;
color: var(--paper-slider-font-color, #fff);
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > #sliderKnob > #sliderKnobInner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
/* paper-input */
.slider-input {
width: 50px;
overflow: hidden;
--paper-input-container-input: {
text-align: center;
};
@apply(--paper-slider-input);
}
/* disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-disabled-knob-color, --paper-grey-400);
border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-400);
-webkit-transform: scale3d(0.75, 0.75, 1);
transform: scale3d(0.75, 0.75, 1);
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
}
</style>
<div id="sliderContainer"
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
<div class="bar-container">
<paper-progress
disabled$="[[disabled]]"
id="sliderBar"
aria-hidden="true"
min="[[min]]"
max="[[max]]"
step="[[step]]"
value="[[immediateValue]]"
secondary-progress="[[secondaryProgress]]"
on-down="_bardown"
on-up="_resetKnob"
on-track="_onTrack">
</paper-progress>
</div>
<template is="dom-if" if="[[snaps]]">
<div class="slider-markers">
<template is="dom-repeat" items="[[markers]]">
<div class="slider-marker"></div>
</template>
</div>
</template>
<div id="sliderKnob"
on-down="_knobdown"
on-up="_resetKnob"
on-track="_onTrack"
on-transitionend="_knobTransitionEnd">
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
</div>
</div>
<template is="dom-if" if="[[editable]]">
<paper-input
id="input"
type="number"
step="[[step]]"
min="[[min]]"
max="[[max]]"
class="slider-input"
disabled$="[[disabled]]"
value="[[immediateValue]]"
on-change="_changeValue"
on-keydown="_inputKeyDown"
no-label-float>
</paper-input>
</template>
</template>
<script>
Polymer({
is: 'paper-slider',
behaviors: [
Polymer.IronA11yKeysBehavior,
Polymer.IronFormElementBehavior,
Polymer.PaperInkyFocusBehavior,
Polymer.IronRangeBehavior
],
properties: {
/**
* If true, the slider thumb snaps to tick marks evenly spaced based
* on the `step` property value.
*/
snaps: {
type: Boolean,
value: false,
notify: true
},
/**
* If true, a pin with numeric value label is shown when the slider thumb
* is pressed. Use for settings for which users need to know the exact
* value of the setting.
*/
pin: {
type: Boolean,
value: false,
notify: true
},
/**
* The number that represents the current secondary progress.
*/
secondaryProgress: {
type: Number,
value: 0,
notify: true,
observer: '_secondaryProgressChanged'
},
/**
* If true, an input is shown and user can use it to set the slider value.
*/
editable: {
type: Boolean,
value: false
},
/**
* The immediate value of the slider. This value is updated while the user
* is dragging the slider.
*/
immediateValue: {
type: Number,
value: 0,
readOnly: true,
notify: true
},
/**
* The maximum number of markers
*/
maxMarkers: {
type: Number,
value: 0,
notify: true
},
/**
* If true, the knob is expanded
*/
expand: {
type: Boolean,
value: false,
readOnly: true
},
/**
* True when the user is dragging the slider.
*/
dragging: {
type: Boolean,
value: false,
readOnly: true
},
transiting: {
type: Boolean,
value: false,
readOnly: true
},
markers: {
type: Array,
readOnly: true,
value: []
},
},
observers: [
'_updateKnob(value, min, max, snaps, step)',
'_valueChanged(value)',
'_immediateValueChanged(immediateValue)',
'_updateMarkers(maxMarkers, min, max, snaps)'
],
hostAttributes: {
role: 'slider',
tabindex: 0
},
keyBindings: {
'left down pagedown home': '_decrementKey',
'right up pageup end': '_incrementKey'
},
/**
* Increases value by `step` but not above `max`.
* @method increment
*/
increment: function() {
this.value = this._clampValue(this.value + this.step);
},
/**
* Decreases value by `step` but not below `min`.
* @method decrement
*/
decrement: function() {
this.value = this._clampValue(this.value - this.step);
},
_updateKnob: function(value, min, max, snaps, step) {
this.setAttribute('aria-valuemin', min);
this.setAttribute('aria-valuemax', max);
this.setAttribute('aria-valuenow', value);
this._positionKnob(this._calcRatio(value));
},
_valueChanged: function() {
this.fire('value-change');
},
_immediateValueChanged: function() {
if (this.dragging) {
this.fire('immediate-value-change');
} else {
this.value = this.immediateValue;
}
},
_secondaryProgressChanged: function() {
this.secondaryProgress = this._clampValue(this.secondaryProgress);
},
_expandKnob: function() {
this._setExpand(true);
},
_resetKnob: function() {
this.cancelDebouncer('expandKnob');
this._setExpand(false);
},
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setPinValue(this.immediateValue);
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
if (this.dragging) {
this._knobstartx = this.ratio * this._w;
this.translate3d(0, 0, 0, this.$.sliderKnob);
}
},
_calcKnobPosition: function(ratio) {
return (this.max - this.min) * ratio + this.min;
},
_onTrack: function(event) {
event.stopPropagation();
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd();
break;
}
},
_trackStart: function(event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x;
this._knobstartx = this._startx;
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
this._setDragging(true);
},
_trackX: function(e) {
if (!this.dragging) {
this._trackStart(e);
}
var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
this._setImmediateValue(immediateValue);
// update knob's position
var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
this._setPinValue(this.immediateValue);
},
_setPinValue: function (value) {
this.pinValue = value;
},
_trackEnd: function() {
var s = this.$.sliderKnob.style;
this.$.sliderKnob.classList.remove('dragging');
this._setDragging(false);
this._resetKnob();
this.value = this.immediateValue;
s.transform = s.webkitTransform = '';
this.fire('change');
},
_knobdown: function(event) {
this._expandKnob();
// cancel selection
event.preventDefault();
// set the focus manually because we will called prevent default
this.focus();
},
_bardown: function(event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w;
var prevRatio = this.ratio;
this._setTransiting(true);
this._positionKnob(ratio);
this.debounce('expandKnob', this._expandKnob, 60);
// if the ratio doesn't change, sliderKnob's animation won't start
// and `_knobTransitionEnd` won't be called
// Therefore, we need to manually update the `transiting` state
if (prevRatio === this.ratio) {
this._setTransiting(false);
}
this.async(function() {
this.fire('change');
});
// cancel selection
event.preventDefault();
// set the focus manually because we will called prevent default
this.focus();
},
_knobTransitionEnd: function(event) {
if (event.target === this.$.sliderKnob) {
this._setTransiting(false);
}
},
_updateMarkers: function(maxMarkers, min, max, snaps) {
if (!snaps) {
this._setMarkers([]);
}
var steps = Math.round((max - min) / this.step);
if (steps > maxMarkers) {
steps = maxMarkers;
}
this._setMarkers(new Array(steps));
},
_mergeClasses: function(classes) {
return Object.keys(classes).filter(
function(className) {
return classes[className];
}).join(' ');
},
_getClassNames: function() {
return this._mergeClasses({
disabled: this.disabled,
pin: this.pin,
snaps: this.snaps,
ring: this.immediateValue <= this.min,
expand: this.expand,
dragging: this.dragging,
transiting: this.transiting,
editable: this.editable
});
},
_incrementKey: function(event) {
if (!this.disabled) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
}
this.fire('change');
}
},
_decrementKey: function(event) {
if (!this.disabled) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
}
this.fire('change');
}
},
_changeValue: function(event) {
this.value = event.target.value;
this.fire('change');
},
_inputKeyDown: function(event) {
event.stopPropagation();
},
// create the element ripple inside the `sliderKnob`
_createRipple: function() {
this._rippleContainer = this.$.sliderKnob;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
},
// Hide the ripple when user is not interacting with keyboard.
// This behavior is different from other ripple-y controls, but is
// according to spec: https://www.google.com/design/spec/components/sliders.html
_focusedChanged: function(receivedFocusFromKeyboard) {
if (receivedFocusFromKeyboard) {
this.ensureRipple();
}
if (this.hasRipple()) {
// note, ripple must be un-hidden prior to setting `holdDown`
if (receivedFocusFromKeyboard) {
this._ripple.style.display = '';
} else {
this._ripple.style.display = 'none';
}
this._ripple.holdDown = receivedFocusFromKeyboard;
}
}
});
/**
* Fired when the slider's value changes.
*
* @event value-change
*/
/**
* Fired when the slider's immediateValue changes. Only occurs while the
* user is dragging.
*
* To detect changes to immediateValue that happen for any input (i.e.
* dragging, tapping, clicking, etc.) listen for immediate-value-changed
* instead.
*
* @event immediate-value-change
*/
/**
* Fired when the slider's value changes due to user interaction.
*
* Changes to the slider's value due to changes in an underlying
* bound variable will not trigger this event.
*
* @event change
*/
</script>
</dom-module>

View file

@ -1,84 +0,0 @@
<!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-slider a11y 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="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../paper-slider.html">
</head>
<body>
<test-fixture id="trivialSlider">
<template>
<paper-slider value="50"></paper-slider>
</template>
</test-fixture>
<script>
suite('a11y', function() {
var slider;
setup(function() {
slider = fixture('trivialSlider');
});
test('has aria role "slider"', function(done) {
flush(function() {
assert.equal(slider.getAttribute('role'), 'slider');
assert.equal(slider.getAttribute('aria-valuemin'), slider.min);
assert.equal(slider.getAttribute('aria-valuemax'), slider.max);
assert.equal(slider.getAttribute('aria-valuenow'), slider.value);
done();
});
});
test('ripple is added after keyboard event on knob', function() {
assert.isFalse(slider.hasRipple());
MockInteractions.down(slider.$.sliderKnob);
assert.isTrue(slider.hasRipple());
});
test('interacting without keyboard causes no ripple', function() {
MockInteractions.focus(slider);
MockInteractions.down(slider.$.sliderKnob);
var ripple = slider.getRipple();
assert.equal(ripple.offsetHeight, 0);
assert.equal(ripple.offsetWidth, 0);
});
test('interacting with keyboard causes ripple', function() {
MockInteractions.focus(slider);
MockInteractions.pressSpace(slider.$.sliderKnob);
var ripple = slider.getRipple();
assert.isAbove(ripple.offsetHeight, 0);
assert.isAbove(ripple.offsetWidth, 0);
});
test('slider has focus after click event on bar"', function() {
var focusSpy = sinon.spy(slider, 'focus');
MockInteractions.down(slider.$.sliderBar);
assert.isTrue(focusSpy.called);
});
a11ySuite('trivialSlider');
});
</script>
</body>
</html>

View file

@ -1,241 +0,0 @@
<!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-slider 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="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../paper-slider.html">
</head>
<body>
<test-fixture id="trivialProgress">
<template>
<paper-slider></paper-slider>
</template>
</test-fixture>
<script>
suite('<paper-slider>', function() {
var slider;
setup(function() {
slider = fixture('trivialProgress');
});
test('check default', function() {
assert.equal(slider.min, 0);
assert.equal(slider.max, 100);
assert.equal(slider.value, 0);
});
test('set value', function(done) {
slider.value = 50;
flush(function() {
assert.equal(slider.value, 50);
// test clamp value
slider.value = 60.1;
flush(function() {
assert.equal(slider.value, 60);
done();
});
});
});
test('set max', function(done) {
slider.max = 10;
slider.value = 11;
flush(function() {
assert.equal(slider.value, slider.max);
done();
});
});
test('ratio', function(done) {
slider.max = 10;
slider.value = 5;
flush(function() {
assert.equal(slider.ratio, 0.5);
done();
});
});
test('snaps', function(done) {
slider.snaps = true;
slider.step = 10;
slider.max = 100;
slider.value = 25;
flush(function() {
assert.equal(slider.value, 30);
slider.value = 51.1;
flush(function() {
assert.equal(slider.value, 50);
slider.snaps = false;
slider.step = 1;
done();
});
});
});
test('secondary progress', function(done) {
slider.max = 10;
slider.secondaryProgress = 50;
flush(function() {
assert.equal(slider.secondaryProgress, slider.max);
done();
});
});
test('increment', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 2;
slider.value = 0;
slider.increment();
flush(function() {
assert.equal(slider.value, slider.step);
slider.step = 1;
done();
});
});
test('decrement', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 2;
slider.value = 8;
slider.decrement();
flush(function() {
assert.equal(slider.value, 6);
slider.step = 1;
done();
});
});
test('editable', function(done) {
slider.min = 0;
slider.max = 10;
slider.step = 1;
slider.editable = true;
flush(function() {
slider.value = 2;
assert.equal(slider.$$('#input').value, slider.value);
done();
});
});
test('decimal values', function(done) {
slider.min = 0;
slider.max = 1;
slider.value = slider.min;
slider.step = 0.1;
slider.increment();
flush(function() {
assert.equal(slider.value, slider.step);
assert.equal(slider.$.sliderBar.value, slider.step);
done();
});
});
test('snap to the correct value on tapping', function(done) {
var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
cursor.x += slider.$.sliderBar.getBoundingClientRect().width * 0.9;
slider.min = 0;
slider.max = 2;
slider.step = 1;
slider.value = 0;
MockInteractions.down(slider.$.sliderBar, cursor);
flush(function() {
assert.equal(slider.value, slider.max);
slider.step = 1;
done();
});
});
test('value should notify', function(done) {
var targetValue = 10;
slider.addEventListener('value-changed', onValueChanged);
slider.min = 0;
slider.max = 100;
slider.value = targetValue;
function onValueChanged(e) {
assert.equal(e.detail.value, targetValue);
done();
slider.removeEventListener('value-changed', onValueChanged);
}
});
test('immediateValue should notify', function(done) {
var targetValue = 50;
slider.addEventListener('immediate-value-changed', function(e) {
assert.equal(e.detail.value, targetValue);
assert.equal(slider.immediateValue, targetValue);
done();
});
var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
cursor.x += slider.$.sliderBar.getBoundingClientRect().width * targetValue/100;
slider.min = 0;
slider.max = 100;
MockInteractions.down(slider.$.sliderBar, cursor);
});
test('max markers', function(done) {
slider.min = 0;
slider.max = 100;
slider.snap = true;
slider.step = 4;
slider.maxMarkers = 10;
flush(function() {
assert.equal(slider.markers.length, 10);
done();
});
});
test('decimal markers', function(done) {
slider.min = 0;
slider.max = 0.7;
slider.snap = true;
slider.step = 0.1;
slider.maxMarkers = 10;
flush(function() {
assert.equal(slider.markers.length, 7);
done();
});
});
});
</script>
</body>
</html>

View file

@ -1,26 +0,0 @@
<!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',
'a11y.html',
'basic.html?dom=shadow',
'a11y.html?dom=shadow'
]);
</script>
</body></html>