remove unneeded components
This commit is contained in:
Luke Pulverenti
parent
61b625bbdb
commit
2d822ccb6f
61 changed files with 4 additions and 5173 deletions
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -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"
|
||||
|
|
@ -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 user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [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 don’t be afraid to ask us if you need help with that!
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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><iron-media-query></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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -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
|
||||
|
|
@ -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 user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
|
|
@ -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": []
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components/
|
||||
|
|
@ -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"
|
||||
|
|
@ -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 user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
|
|
@ -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": []
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -54,7 +54,8 @@
|
|||
"tag": "v1.1.11",
|
||||
"commit": "8cfe5c5bf8c2e40d243443d046a94b6fe371983c"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
"_originalSource": "polymerelements/paper-input"
|
||||
"_source": "git://github.com/PolymerElements/paper-input.git",
|
||||
"_target": "^1.1.11",
|
||||
"_originalSource": "PolymerElements/paper-input",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -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"
|
||||
|
|
@ -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 user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
|
|
@ -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": []
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -1 +0,0 @@
|
|||
bower_components
|
||||
|
|
@ -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
|
||||
|
|
@ -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 user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue