update components

This commit is contained in:
Luke Pulverenti 2015-12-15 10:45:40 -05:00
parent abb1b78b2b
commit 27d49b3466
32 changed files with 739 additions and 380 deletions

View File

@ -30,14 +30,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.1.0",
"_resolution": {
"type": "version",
"tag": "v1.1.0",
"commit": "cd8c972278c0d916bef57209d7dce5b81e67687c"
},
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
}

View File

@ -1,7 +1,7 @@
{
"name": "iron-dropdown",
"version": "1.0.6",
"description": "",
"version": "1.1.0",
"description": "An unstyled element that works similarly to a native browser select",
"authors": [
"The Polymer Authors"
],
@ -35,11 +35,12 @@
"web-component-tester": "*",
"iron-image": "polymerelements/iron-image#^1.0.0"
},
"_release": "1.0.6",
"ignore": [],
"_release": "1.1.0",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "9b52ccb37577b0e4b3d34f3795117d95648b39ff"
"tag": "v1.1.0",
"commit": "b09b0d57ba917bac9315de4761373d88e85ac52e"
},
"_source": "git://github.com/polymerelements/iron-dropdown.git",
"_target": "^1.0.0",

View File

@ -0,0 +1,22 @@
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: Nd7sbgkYVekuQRB4K3svNCL3veA6t6aGopNP2FUxlJvQuzRV1vKV67angPvMUAFelEA7/rTzrFPBMfNbsz9C2wInLLLPux4wEk1MQX+2KYZVeXKMHjgl8iQKMXnodaL7XXwBPg0L7053TWtYkIt8wZ/vN0JGPQFKhlQkSrduztkPCJQfkFsMPJ7SudPG3Ld0UPBVxo8TwH/d44p8VhLGiI0oEWw3GnGZZ1T7RJLDAVBwj1BiVHAOaS0SSeOR3ngpZyXbk8OItgzw4o/bbAt2yrHMfwymBy0Xv9v3G0QLFJnMi/gE2lWnN4+IttUPI8gVyr1TuiTgtFxdwteLO3R5iFe+qlQjq0VGssmAHcPwtLhvrT4wEkGMc8ZeyW11z+GdkIw4XHGACWj+9Jz9f19mJd9xU3fkJ+f5mFiB8vEkzjsUI9pswgd3RoHt2WewcVdHnCED2wRdQCw9H34dX7d2ieWKPl/pv+EKZOgEJJ8UNZMyKnj57Y25WRrTpIQBt6p9uVv5MsiZQm7Sd1pYQnJKPQ+BxvvL5fsoT1YkFSjyz9gwijtftXhfL8KLB6i04V3mra3f9d5hc20wAOt+ad+mTOkaM/aGxE/I3Ko13BceMvRSNzuz+N2WE6FEJj1NuOCW/AeSh5/6n9nnlDeu7Nu7VeM9kjk4dyBGNRDWLNcSCEk=
- secure: aFsYKL6Sw8/r57wzj3pnzEwBE1mnTajJasHAbXgQMd336S2Sq/f39DCNTXgKBA4AKZGvWKe8w9nzaocQoMa4l9bLWEBJMCMPQFawOhTkuEjsLjpU3g74b46/EhjBP5zixR32xoyF5o9FTzC6UyrDjt2XpKwIQJYxaEfoyIW1vTPdoasWdaG5rXvWFTsmXtaMDpCKFH9aQ1DHn9Sbi9NZlR4izdULsbv9GZwg53xvuH4xYEkGtB29KKy04uK1nJ+9SmRWTAnu4Q/ivYWlbwBArjiYTTi0wclvDNvT1iaFNAaeK2pJea8CnoyJJ0pg9NcuzZtStGUvP00kGUpJQ4lqkr+gBCHDPYtoZ17XCz59cg6LrhG1q//vPi7Yz0xW51GHuwmcVs+PsjmWaRuO/1UFreDCQYf+GU4I1pQZf2q1R4m8noe4i5CcFXLKTrC4udBzPmzVB4As2LsxRc3HCIXmhaMxI8MJwdkQBA22u4vCwU2xpqBawJocj0Gvbeme6wG99PW7+XSkijQDk2cTJ5/CJtY22nAECvn4tve3OVvybSTjQ1yipLxJm/dtjgEXFWtknFZr++tId88wPd3EBtrwEhliD3zD/TyLPO2RPZGuI0i6oD3O89P5d8qp66T/eByDr1IEm0+FIQjgiCEMbhmaIuUKGG2GCfwPglI3uR0kbg0=
node_js: 4
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View File

@ -0,0 +1,72 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the users goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so dont be afraid to ask us if you need help with that!

View File

@ -1,7 +1,7 @@
{
"name": "iron-dropdown",
"version": "1.0.6",
"description": "",
"version": "1.1.0",
"description": "An unstyled element that works similarly to a native browser select",
"authors": [
"The Polymer Authors"
],
@ -34,5 +34,6 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*",
"iron-image": "polymerelements/iron-image#^1.0.0"
}
},
"ignore": []
}

View File

@ -19,22 +19,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="x-select.html">
<style>
ul {
display: block;
position: relative;
background-color: #fff;
box-shadow: 0px 2px 6px #ccc;
margin: 0.25em 0;
padding: 0.25em;
.dropdown-content {
background-color: white;
line-height: 20px;
border-radius: 3px;
box-shadow: 0px 2px 6px #ccc;
}
[vertical-align="top"] ul {
margin-top: 0;
.random-content {
padding: 1.5em 2em;
max-width: 250px;
}
[vertical-align="bottom"] ul {
margin-bottom: 0;
button {
border: 1px solid #ccc;
background-color: #eee;
padding: 1em;
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue;
}
ul {
margin: 0;
padding: 0;
}
li {
@ -59,19 +71,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
text-decoration: underline;
}
button {
border: 1px solid #ccc;
background-color: #eee;
padding: 1em;
border-radius: 3px;
cursor: pointer;
}
button:focus {
outline: none;
border-color: blue;
}
iron-image {
padding: 1em;
background-color: #fff;
@ -82,54 +81,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
<template is="dom-bind" id="Demo">
<div class="horizontal-section flex layout horizontal">
<x-select>
<button class="dropdown-trigger">Basic</button>
<ul class="dropdown-content" tabindex="0">
<template is="dom-repeat" items="[[letters]]">
<li><a href="javascript:void(0)">[[item]]</a></li>
</template>
</ul>
</x-select>
<x-select>
<button class="dropdown-trigger">Overflowing</button>
<ul class="dropdown-content" tabindex="0">
<template is="dom-repeat" items="[[dinosaurs]]">
<li><a href="javascript:void(0)">[[item]]</a></li>
</template>
</ul>
</x-select>
<x-select vertical-align="bottom">
<button class="dropdown-trigger">Bottom-left Aligned</button>
<ul class="dropdown-content" tabindex="0">
<template is="dom-repeat" items="[[letters]]">
<li><a href="javascript:void(0)">[[item]]</a></li>
</template>
</ul>
</x-select>
<x-select horizontal-align="right" vertical-align="top">
<button class="dropdown-trigger">Top-right Aligned</button>
<ul class="dropdown-content" tabindex="0">
<template is="dom-repeat" items="[[dinosaurs]]">
<li><a href="javascript:void(0)">[[item]]</a></li>
</template>
</ul>
</x-select>
<x-select horizontal-align="left" vertical-align="top">
<button class="dropdown-trigger">Alternate Content</button>
<iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
</x-select>
<div class="vertical-section vertical-section-container ">
<h1>iron-dropdown</h1>
<p>Examples of vanilla elements.</p>
<div>
<x-select>
<button class="dropdown-trigger">Basic</button>
<div class="dropdown-content random-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</x-select>
<x-select>
<button class="dropdown-trigger">Overflowing</button>
<div class="dropdown-content random-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</x-select>
<x-select vertical-align="bottom">
<button class="dropdown-trigger">Bottom-left Aligned</button>
<div class="dropdown-content random-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</x-select>
<x-select horizontal-align="right" vertical-align="top">
<button class="dropdown-trigger">Top-right Aligned</button>
<div class="dropdown-content random-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</x-select>
<x-select horizontal-align="left" vertical-align="top">
<button class="dropdown-trigger"> Content</button>
<iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
</x-select>
<x-select horizontal-align="right" vertical-align="top">
<button class="dropdown-trigger">Unordered list</button>
<ul class="dropdown-content" tabindex="0">
<template is="dom-repeat" items="[[dinosaurs]]">
<li><a href="javascript:void(0)">[[item]]</a></li>
</template>
</ul>
</x-select>
</div>
</div>
</template>
<script>
Demo.letters = [
'alpha',
'beta',
'gamma',
'delta',
'epsilon'
];
Demo.dinosaurs = [
'allosaurus',
'brontosaurus',

View File

@ -41,6 +41,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/
elementIsScrollLocked: function(element) {
var currentLockingElement = this.currentLockingElement;
if (currentLockingElement === undefined)
return false;
var scrollLocked;
if (this._hasCachedLockedElement(element)) {

View File

@ -100,8 +100,17 @@ method is called on the element.
/**
* A pixel value that will be added to the position calculated for the
* given `horizontalAlign`. Use a negative value to offset to the
* left, or a positive value to offset to the right.
* given `horizontalAlign`, in the direction of alignment. You can think
* of it as increasing or decreasing the distance to the side of the
* screen given by `horizontalAlign`.
*
* If `horizontalAlign` is "left", this offset will increase or decrease
* the distance to the left side of the screen: a negative offset will
* move the dropdown to the left; a positive one, to the right.
*
* Conversely if `horizontalAlign` is "right", this offset will increase
* or decrease the distance to the right side of the screen: a negative
* offset will move the dropdown to the right; a positive one, to the left.
*/
horizontalOffset: {
type: Number,
@ -111,8 +120,17 @@ method is called on the element.
/**
* A pixel value that will be added to the position calculated for the
* given `verticalAlign`. Use a negative value to offset towards the
* top, or a positive value to offset towards the bottom.
* given `verticalAlign`, in the direction of alignment. You can think
* of it as increasing or decreasing the distance to the side of the
* screen given by `verticalAlign`.
*
* If `verticalAlign` is "top", this offset will increase or decrease
* the distance to the top side of the screen: a negative offset will
* move the dropdown upwards; a positive one, downwards.
*
* Conversely if `verticalAlign` is "bottom", this offset will increase
* or decrease the distance to the bottom side of the screen: a negative
* offset will move the dropdown downwards; a positive one, upwards.
*/
verticalOffset: {
type: Number,
@ -211,6 +229,13 @@ method is called on the element.
return this.focusTarget || this.containedElement;
},
/**
* Whether the text direction is RTL
*/
_isRTL: function() {
return window.getComputedStyle(this).direction == 'rtl';
},
/**
* The element that should be used to position the dropdown when
* it opens, if no position target is configured.
@ -242,7 +267,10 @@ method is called on the element.
get _horizontalAlignTargetValue() {
var target;
if (this.horizontalAlign === 'right') {
// In RTL, the direction flips, so what is "right" in LTR becomes "left".
var isRTL = this._isRTL();
if ((!isRTL && this.horizontalAlign === 'right') ||
(isRTL && this.horizontalAlign === 'left')) {
target = document.documentElement.clientWidth - this._positionRect.right;
} else {
target = this._positionRect.left;
@ -270,6 +298,18 @@ method is called on the element.
return Math.max(target, 0);
},
/**
* The horizontal align value, accounting for the RTL/LTR text direction.
*/
get _localeHorizontalAlign() {
// In RTL, "left" becomes "right".
if (this._isRTL()) {
return this.horizontalAlign === 'right' ? 'left' : 'right';
} else {
return this.horizontalAlign;
}
},
/**
* Called when the value of `opened` changes.
*
@ -418,7 +458,7 @@ method is called on the element.
return;
}
this.style[this.horizontalAlign] =
this.style[this._localeHorizontalAlign] =
this._horizontalAlignTargetValue + 'px';
this.style[this.verticalAlign] =
@ -452,4 +492,3 @@ method is called on the element.
})();
</script>
</dom-module>

View File

@ -19,7 +19,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
WCT.loadSuites([
'iron-dropdown.html',
'iron-dropdown-scroll-manager.html'
'iron-dropdown-scroll-manager.html',
'iron-dropdown.html?dom=shadow',
'iron-dropdown-scroll-manager.html?dom=shadow'
]);
</script>
</body>

View File

@ -23,6 +23,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<test-fixture id="TrivialDropdown">
@ -35,8 +41,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="NonLockingDropdown">
<template>
<iron-dropdown>
<div class="dropdown-content" allow-outside-scroll>I don't lock scroll!</div>
<iron-dropdown allow-outside-scroll>
<div class="dropdown-content">I don't lock scroll!</div>
</iron-dropdown>
</template>
</test-fixture>
@ -51,6 +57,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<!-- Absolutely position the dropdown so that it has enough space to move around -->
<test-fixture id="OffsetDropdownTopLeft">
<template>
<div style="display: block; position: absolute; top: 40px; left: 40px; width: 100px; height: 100px;">
<iron-dropdown>
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
</div>
</template>
</test-fixture>
<test-fixture id="OffsetDropdownBottomRight">
<template>
<div style="display: block; position: absolute; top: 40px; left: 40px; width: 100px; height: 100px;">
<iron-dropdown horizontal-align="right" vertical-align="bottom">
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
</div>
</template>
</test-fixture>
<test-fixture id="FocusableContentDropdown">
<template>
<iron-dropdown>
@ -61,6 +88,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="RTLDropdownLeft">
<template>
<div dir="rtl" style="display: block; position: relative; width: 100px; height: 100px;">
<iron-dropdown>
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
</div>
</template>
</test-fixture>
<test-fixture id="RTLDropdownRight">
<template>
<div dir="rtl" style="display: block; position: relative; width: 100px; height: 100px;">
<iron-dropdown horizontal-align="right">
<div class="dropdown-content">Hello!</div>
</iron-dropdown>
</div>
</template>
</test-fixture>
<script>
function elementIsVisible(element) {
var contentRect = element.getBoundingClientRect();
@ -100,13 +147,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.Base.async(function() {
expect(elementIsVisible(content)).to.be.equal(true);
MockInteractions.downAndUp(document.body, function() {
// The document capture-click listeners are set async.
// Note(noms): I think this bit in iron-overlay-behavior is pretty
// brittle, so if the tests start failing in the future, make sure
// _toggleListeners is getting called at the right time.
Polymer.Base.async(function() {
MockInteractions.tap(dropdown.parentNode);
Polymer.Base.async(function() {
expect(elementIsVisible(content)).to.be.equal(false);
done();
}, 100);
});
}, 1);
});
});
@ -146,11 +197,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
dropdown = fixture('NonLockingDropdown');
});
test('can be disabled with `allowOutsideScroll`', function() {
test('can be disabled with `allowOutsideScroll`', function(done) {
dropdown.open();
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
.to.be.equal(false);
Polymer.Base.async(function() {
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(document.body))
.to.be.equal(false);
done();
});
});
});
@ -197,28 +251,135 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
done();
}, 1);
});
});
suite('with an offset', function() {
test('is offset by the offset value when open', function() {
var dropdownRect;
var offsetDropdownRect;
suite('when align is left/top, with an offset', function() {
var dropdownRect;
var offsetDropdownRect;
var dropdown;
setup(function() {
var parent = fixture('OffsetDropdownTopLeft');
dropdown = parent.querySelector('iron-dropdown');
});
dropdown.opened = true;
test('can be offset towards the bottom right', function(done) {
dropdown.opened = true;
Polymer.Base.async(function() {
dropdownRect = dropdown.getBoundingClientRect();
Polymer.Base.async(function() {
dropdownRect = dropdown.getBoundingClientRect();
dropdownRect.verticalOffset = 10;
dropdownRect.horizontalOffset = -10;
dropdown.verticalOffset = 10;
dropdown.horizontalOffset = 10;
offsetDropdownRect = dropdown.getBoundingClientRect();
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is top, so a positive offset moves down.
expect(dropdownRect.top + 10).to.be.closeTo(offsetDropdownRect.top, 0.1);
// horizontalAlign is left, so a positive offset moves to the right.
expect(dropdownRect.left + 10).to.be.closeTo(offsetDropdownRect.left, 0.1);
done();
}, 1);
});
expect(dropdownRect.top).to.be.equal(offsetDropdownRect.top - 10);
expect(dropdownRect.left).to.be.equal(offsetDropdownRect.left + 10);
}, 1);
test('can be offset towards the top left', function(done) {
dropdown.opened = true;
Polymer.Base.async(function() {
dropdownRect = dropdown.getBoundingClientRect();
dropdown.verticalOffset = -10;
dropdown.horizontalOffset = -10;
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is top, so a negative offset moves up.
expect(dropdownRect.top - 10).to.be.closeTo(offsetDropdownRect.top, 0.1);
// horizontalAlign is left, so a negative offset moves to the left.
expect(dropdownRect.left - 10).to.be.closeTo(offsetDropdownRect.left, 0.1);
done();
}, 1);
});
});
suite('when align is right/bottom, with an offset', function() {
var dropdownRect;
var offsetDropdownRect;
var dropdown;
setup(function() {
var parent = fixture('OffsetDropdownBottomRight');
dropdown = parent.querySelector('iron-dropdown');
});
test('can be offset towards the top left', function(done) {
dropdown.opened = true;
Polymer.Base.async(function() {
dropdownRect = dropdown.getBoundingClientRect();
dropdown.verticalOffset = 10;
dropdown.horizontalOffset = 10;
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is bottom, so a positive offset moves up.
expect(dropdownRect.bottom - 10).to.be.closeTo(offsetDropdownRect.bottom, 0.1);
// horizontalAlign is right, so a positive offset moves to the left.
expect(dropdownRect.right - 10).to.be.closeTo(offsetDropdownRect.right, 0.1);
done();
}, 1);
});
test('can be offset towards the bottom right', function(done) {
dropdown.opened = true;
Polymer.Base.async(function() {
dropdownRect = dropdown.getBoundingClientRect();
dropdown.verticalOffset = -10;
dropdown.horizontalOffset = -10;
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is bottom, so a negative offset moves down.
expect(dropdownRect.bottom + 10).to.be.closeTo(offsetDropdownRect.bottom, 0.1);
// horizontalAlign is right, so a positive offset moves to the right.
expect(dropdownRect.right + 10).to.be.closeTo(offsetDropdownRect.right, 0.1);
done();
}, 1);
});
});
suite('RTL', function() {
var dropdown;
var dropdownRect;
test('with horizontalAlign=left', function(done) {
var parent = fixture('RTLDropdownLeft');
dropdown = parent.querySelector('iron-dropdown');
dropdown.open();
Polymer.Base.async(function() {
// In RTL, if `horizontalAlign` is "left", that's the same as
// being right-aligned in LTR. So the dropdown should be in the top
// right corner.
dropdownRect = dropdown.getBoundingClientRect();
expect(dropdownRect.top).to.be.equal(0);
expect(dropdownRect.right).to.be.equal(100);
done();
});
});
test('with horizontalAlign=right', function(done) {
var parent = fixture('RTLDropdownRight');
dropdown = parent.querySelector('iron-dropdown');
dropdown.open();
Polymer.Base.async(function() {
// In RTL, if `horizontalAlign` is "right", that's the same as
// being left-aligned in LTR. So the dropdown should be in the top
// left corner.
dropdownRect = dropdown.getBoundingClientRect();
expect(dropdownRect.top).to.be.equal(0);
expect(dropdownRect.left).to.be.equal(0);
done();
});
});
});
});
</script>

View File

@ -36,7 +36,7 @@
"tag": "v1.0.8",
"commit": "e9a66727f3da0446f04956d4e4f1dcd51cdec2ff"
},
"_source": "git://github.com/PolymerElements/iron-selector.git",
"_source": "git://github.com/polymerelements/iron-selector.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-selector"
"_originalSource": "polymerelements/iron-selector"
}

View File

@ -52,7 +52,7 @@
"tag": "v1.1.3",
"commit": "f070288446f9e78fbe16b032ddb429a8e8015ee7"
},
"_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-input"
"_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9",
"_originalSource": "polymerelements/paper-input"
}

View File

@ -1,6 +1,6 @@
{
"name": "paper-material",
"version": "1.0.4",
"version": "1.0.5",
"description": "A material design container that looks like a lifted sheet of paper",
"private": true,
"authors": [
@ -31,11 +31,11 @@
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
},
"_release": "1.0.4",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "05f3800d37f8c5cad63ac2cf279f01bffb7d4fe8"
"tag": "v1.0.5",
"commit": "8a906004d8d0071004aafcd4bc4536ed2cf14bde"
},
"_source": "git://github.com/polymerelements/paper-material.git",
"_target": "^1.0.0",

View File

@ -11,7 +11,7 @@ env:
- secure: f/3XYrYjM8aXLe9kqM/MjHQ6IEsDRuoxDqM+l2JiR3v2Nw7lP6ZyXSNvKm8bN+VNU7ubSzAmRbUGnRU7e61BhnGzuLXjOqxYeJLWZaqoSm9TDz3re3rd7wB2ddAhRokeSSPO2KeAgr6C02P9M3Au1DiO1G66fuWVH62WtzW4+qY=
node_js: 4
addons:
firefox: '42.0'
firefox: latest
apt:
sources:
- google-chrome

View File

@ -1,6 +1,6 @@
{
"name": "paper-material",
"version": "1.0.4",
"version": "1.0.5",
"description": "A material design container that looks like a lifted sheet of paper",
"private": true,
"authors": [

View File

@ -0,0 +1,40 @@
<!--
@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
-->
<dom-module id="paper-material-shared-styles">
<template>
<style>
:host {
display: block;
position: relative;
}
:host([elevation="1"]) {
@apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
@apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
@apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
@apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
@apply(--shadow-elevation-16dp);
}
</style>
</template>
</dom-module>

View File

@ -10,6 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="paper-material-shared-styles.html">
<!--
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
@ -29,35 +30,11 @@ Example:
<dom-module id="paper-material">
<template>
<style include="paper-material-shared-styles"></style>
<style>
:host {
display: block;
position: relative;
}
:host([animated]) {
@apply(--shadow-transition);
}
:host([elevation="1"]) {
@apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
@apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
@apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
@apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
@apply(--shadow-elevation-16dp);
}
</style>
<content></content>

View File

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!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
@ -7,9 +6,7 @@ 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>
--><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-material tests</title>
@ -18,8 +15,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'paper-material.html'
'paper-material.html',
'paper-material.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-button",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design radio button",
"authors": [
"The Polymer Authors"
@ -28,17 +28,18 @@
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "paper-radio-button.html",
"_release": "1.0.11",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.11",
"commit": "5ba3cec1efcbdb0df3e5df28930473ea02539845"
"tag": "v1.0.12",
"commit": "d7a5a090968c8448d7568208e05fb626fe74ab64"
},
"_source": "git://github.com/PolymerElements/paper-radio-button.git",
"_target": "~1.0.5",

View File

@ -1,28 +1,24 @@
language: node_js
sudo: false
matrix:
include:
- node_js: stable
script: xvfb-run wct
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
- node_js: node
script:
- |
if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
wct -s 'default'
fi
before_script:
- npm install web-component-tester
- npm install bower
- export PATH=$PWD/node_modules/.bin:$PATH
- bower install
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
- npm install polylint
- polylint
env:
global:
- secure: P6B/39IMzhm/jBmxD+0CDZEPYNMMaizAgpn4MXUUlAmmdMJNwovzvm/kYtVyoPfGiJ08NJh5tNRLQbkG12OH71lQ7ReTiru0hEy93ssmIh0U6ZUAAxTZVQ9SxB5gjrQU8/0fVJ9tNd0kBklHH4FoK+ZtJurhKLJaXhXsupXpcuI=
- secure: rxY6LCY199Lt1aRGK8Hpq3wjx8xcpb91x21fJStKROlpJTlfp+c0yevK1oYkklzChJWEFewFNTYlHbm9pc7TCyXK2WCR0v1GgSeJAUpP4TONkdpueeOvsVC/CGB9mIXEtfUEh2CCdWDj+D7JGLdUvbgmu8C3gfqfP+AyXbQt5Jc=
- secure: P6B/39IMzhm/jBmxD+0CDZEPYNMMaizAgpn4MXUUlAmmdMJNwovzvm/kYtVyoPfGiJ08NJh5tNRLQbkG12OH71lQ7ReTiru0hEy93ssmIh0U6ZUAAxTZVQ9SxB5gjrQU8/0fVJ9tNd0kBklHH4FoK+ZtJurhKLJaXhXsupXpcuI=
- secure: rxY6LCY199Lt1aRGK8Hpq3wjx8xcpb91x21fJStKROlpJTlfp+c0yevK1oYkklzChJWEFewFNTYlHbm9pc7TCyXK2WCR0v1GgSeJAUpP4TONkdpueeOvsVC/CGB9mIXEtfUEh2CCdWDj+D7JGLdUvbgmu8C3gfqfP+AyXbQt5Jc=
node_js: 4
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-button",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design radio button",
"authors": [
"The Polymer Authors"
@ -28,6 +28,7 @@
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",

View File

@ -16,89 +16,63 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<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="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../paper-radio-button.html">
<style is="custom-style">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 630px;
}
paper-radio-button {
display: block;
margin-bottom: 40px;
}
paper-radio-button.blue {
--paper-radio-button-checked-color: var(--paper-light-blue-500);
--paper-radio-button-checked-ink-color: var(--paper-light-blue-500);
--paper-radio-button-unchecked-color: var(--paper-light-blue-900);
--paper-radio-button-unchecked-ink-color: var(--paper-light-blue-900);
}
paper-radio-button.red {
--paper-radio-button-checked-color: var(--paper-red-500);
--paper-radio-button-checked-ink-color: var(--paper-red-500);
--paper-radio-button-unchecked-color: var(--paper-red-900);
--paper-radio-button-unchecked-ink-color: var(--paper-red-900);
}
paper-radio-button.green {
--paper-radio-button-checked-color: var(--paper-green-500);
--paper-radio-button-checked-ink-color: var(--paper-green-500);
--paper-radio-button-unchecked-color: var(--paper-green-900);
--paper-radio-button-unchecked-ink-color: var(--paper-green-900);
}
paper-radio-button.orange {
--paper-radio-button-checked-color: var(--paper-orange-500);
--paper-radio-button-checked-ink-color: var(--paper-orange-500);
--paper-radio-button-unchecked-color: var(--paper-orange-900);
--paper-radio-button-unchecked-ink-color: var(--paper-orange-900);
margin-right: 24px;
}
</style>
</head>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Enabled</h4>
<div class="horizontal-section">
<paper-radio-button>Oxygen</paper-radio-button>
<paper-radio-button>Carbon</paper-radio-button>
<paper-radio-button checked>Hydrogen</paper-radio-button>
<paper-radio-button checked>Nitrogen</paper-radio-button>
<paper-radio-button checked>Calcium</paper-radio-button>
</div>
</div>
<div class="vertical-section-container centered">
<h3>Radio buttons can be checked or unchecked, or disabled entirely</h3>
<demo-snippet class="centered-demo">
<template>
<paper-radio-button>Radio</paper-radio-button>
<paper-radio-button checked>Radio</paper-radio-button>
<paper-radio-button disabled>Disabled</paper-radio-button>
</template>
</demo-snippet>
<div>
<h4>Disabled</h4>
<div class="horizontal-section">
<paper-radio-button disabled>Oxygen</paper-radio-button>
<paper-radio-button disabled>Carbon</paper-radio-button>
<paper-radio-button checked disabled>Hydrogen</paper-radio-button>
<paper-radio-button checked disabled>Nitrogen</paper-radio-button>
<paper-radio-button checked disabled>Calcium</paper-radio-button>
</div>
</div>
<h3>Radio buttons can hide the ripple effect using the <i>noink</i> attribute</h3>
<demo-snippet class="centered-demo">
<template>
<paper-radio-button noink>Radio</paper-radio-button>
</template>
</demo-snippet>
<div>
<h4>Color</h4>
<div class="horizontal-section">
<paper-radio-button class="blue" checked>Oxygen</paper-radio-button>
<paper-radio-button class="red" checked>Carbon</paper-radio-button>
<paper-radio-button class="orange" checked>Hydrogen</paper-radio-button>
<paper-radio-button class="green" checked>Nitrogen</paper-radio-button>
<paper-radio-button class="blue" checked>Calcium</paper-radio-button>
</div>
</div>
<h3>Radio buttons can be styled using custom properties</h3>
<demo-snippet class="centered-demo">
<template>
<style is="custom-style">
paper-radio-button.red {
--paper-radio-button-checked-color: var(--paper-red-500);
--paper-radio-button-checked-ink-color: var(--paper-red-500);
--paper-radio-button-unchecked-color: var(--paper-red-900);
--paper-radio-button-unchecked-ink-color: var(--paper-red-900);
--paper-radio-button-label-color: var(--paper-red-500);
}
paper-radio-button.green {
--paper-radio-button-checked-color: var(--paper-green-500);
--paper-radio-button-checked-ink-color: var(--paper-green-500);
--paper-radio-button-unchecked-color: var(--paper-green-900);
--paper-radio-button-unchecked-ink-color: var(--paper-green-900);
--paper-radio-button-label-color: var(--paper-green-500);
}
</style>
<div>
<h4>Noink </h4>
<div class="horizontal-section">
<paper-radio-button noink>Oxygen</paper-radio-button>
<paper-radio-button noink>Carbon</paper-radio-button>
<paper-radio-button checked noink>Hydrogen</paper-radio-button>
<paper-radio-button checked noink>Nitrogen</paper-radio-button>
<paper-radio-button checked noink>Calcium</paper-radio-button>
</div>
</div>
<paper-radio-button class="red">Radio</paper-radio-button>
<paper-radio-button checked class="green">Radio</paper-radio-button>
</template>
</demo-snippet>
</div>
</body>
</html>

View File

@ -1,14 +1,11 @@
<!doctype html>
<!--
<!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>
--><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-radio-button tests</title>
@ -17,8 +14,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'basic.html'
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/paper-ripple",
"homepage": "https://github.com/PolymerElements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-ripple"
"_originalSource": "PolymerElements/paper-ripple"
}

View File

@ -1,6 +1,6 @@
{
"name": "paper-toggle-button",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design toggle button control",
"authors": [
"The Polymer Authors"
@ -21,24 +21,26 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0"
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.11",
"main": "paper-toggle-button.html",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.11",
"commit": "a6c8e6d76c4645042b4f346dedad18bcd6d8ad10"
"tag": "v1.0.12",
"commit": "363fb16086662fea165668ffe10be233e02e0aa9"
},
"_source": "git://github.com/PolymerElements/paper-toggle-button.git",
"_target": "~1.0.5",

View File

@ -0,0 +1,24 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
- npm install polylint
- polylint
env:
global:
- secure: T4tEkegUT5RhgMTQAUxtXQROsEEIGYyQZ3MzrEX9Xf8XjCYk7pZmK50UXuHa61xO5F5M1bQV0mu4lPcl41Nzws3GKOmKrprbwdhLGfJY5DsqRr6rVnWKvCf57T1jXciEbr17dQyW0kqP41m4LSvNRRJwxv52bk9Nxu22X1HMrD0=
- secure: rKcth+F7zQJu/nMxEdxRDgyNAR/IQVuduPEmrgbUShIsbN48QoI+Bwdqj38NPpKj8LdVE8pgpuiN7FkQ8cipsQNiXTp5cl9t9k/gKGmXfsKE0K85H4bHYoPv6OH2bSyRuUzVlFWQH4FVNXGdDLwSLV/4VQT4+P19MTZRSm4oG1A=
node_js: 4
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View File

@ -0,0 +1,72 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the users goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so dont be afraid to ask us if you need help with that!

View File

@ -1,6 +1,6 @@
{
"name": "paper-toggle-button",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design toggle button control",
"authors": [
"The Polymer Authors"
@ -21,17 +21,19 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0"
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
}
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"main": "paper-toggle-button.html"
}

View File

@ -17,101 +17,71 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../paper-toggle-button.html">
<style is="custom-style">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
paper-toggle-button {
margin-bottom: 40px;
display: block;
}
paper-toggle-button:last-child {
margin-bottom: 0;
}
paper-toggle-button.blue {
--paper-toggle-button-checked-bar-color: var(--paper-light-blue-500);
--paper-toggle-button-checked-button-color: var(--paper-light-blue-500);
--paper-toggle-button-checked-ink-color: var(--paper-light-blue-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-light-blue-900);
--paper-toggle-button-unchecked-button-color: var(--paper-light-blue-900);
--paper-toggle-button-unchecked-ink-color: var(--paper-light-blue-900);
}
paper-toggle-button.red {
--paper-toggle-button-checked-bar-color: var(--paper-red-500);
--paper-toggle-button-checked-button-color: var(--paper-red-500);
--paper-toggle-button-checked-ink-color: var(--paper-red-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-red-900);
--paper-toggle-button-unchecked-button-color: var(--paper-red-900);
--paper-toggle-button-unchecked-ink-color: var(--paper-red-900);
}
paper-toggle-button.green {
--paper-toggle-button-checked-bar-color: var(--paper-green-500);
--paper-toggle-button-checked-button-color: var(--paper-green-500);
--paper-toggle-button-checked-ink-color: var(--paper-green-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-green-900);
--paper-toggle-button-unchecked-button-color: var(--paper-green-900);
--paper-toggle-button-unchecked-ink-color: var(--paper-green-900);
}
paper-toggle-button.orange {
--paper-toggle-button-checked-bar-color: var(--paper-orange-500);
--paper-toggle-button-checked-button-color: var(--paper-orange-500);
--paper-toggle-button-checked-ink-color: var(--paper-orange-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-orange-900);
--paper-toggle-button-unchecked-button-color: var(--paper-orange-900);
--paper-toggle-button-unchecked-ink-color: var(--paper-orange-900);
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Enabled</h4>
<div class="horizontal-section">
<paper-toggle-button>Oxygen</paper-toggle-button>
<paper-toggle-button>Carbon</paper-toggle-button>
<paper-toggle-button checked>Hydrogen</paper-toggle-button>
<paper-toggle-button checked>Nitrogen</paper-toggle-button>
<paper-toggle-button checked>Calcium</paper-toggle-button>
</div>
</div>
<div class="vertical-section-container centered">
<h3>Toggle buttons can be checked and disabled</h3>
<demo-snippet class="centered-demo">
<template>
<paper-toggle-button>Toggle</paper-toggle-button>
<paper-toggle-button checked>Toggle</paper-toggle-button>
<paper-toggle-button disabled>Disabled</paper-toggle-button>
</template>
</demo-snippet>
</div>
<div>
<h4>Disabled</h4>
<div class="horizontal-section">
<paper-toggle-button disabled>Oxygen</paper-toggle-button>
<paper-toggle-button disabled>Carbon</paper-toggle-button>
<paper-toggle-button checked disabled>Hydrogen</paper-toggle-button>
<paper-toggle-button checked disabled>Nitrogen</paper-toggle-button>
<paper-toggle-button checked disabled>Calcium</paper-toggle-button>
</div>
</div>
<div class="vertical-section-container centered">
<h3>Toggle buttons can hide the ripple effect using the <i>noink</i> attribute</h3>
<demo-snippet class="centered-demo">
<template>
<paper-toggle-button noink>Toggle</paper-toggle-button>
</template>
</demo-snippet>
</div>
<div>
<h4>Color</h4>
<div class="horizontal-section">
<paper-toggle-button class="blue">Oxygen</paper-toggle-button>
<paper-toggle-button class="red">Carbon</paper-toggle-button>
<paper-toggle-button checked class="orange">Hydrogen</paper-toggle-button>
<paper-toggle-button checked class="green">Nitrogen</paper-toggle-button>
<paper-toggle-button checked class="blue">Calcium</paper-toggle-button>
</div>
</div>
<div class="vertical-section-container centered">
<h3>Toggle buttons can be styled using custom properties</h3>
<demo-snippet class="centered-demo">
<template>
<style is="custom-style">
paper-toggle-button.green {
--paper-toggle-button-checked-bar-color: var(--paper-green-500);
--paper-toggle-button-checked-button-color: var(--paper-green-500);
--paper-toggle-button-checked-ink-color: var(--paper-green-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-teal-500);
--paper-toggle-button-unchecked-button-color: var(--paper-teal-500);
--paper-toggle-button-unchecked-ink-color: var(--paper-teal-500);
}
paper-toggle-button.pink {
--paper-toggle-button-checked-bar-color: var(--paper-pink-500);
--paper-toggle-button-checked-button-color: var(--paper-pink-500);
--paper-toggle-button-checked-ink-color: var(--paper-pink-500);
--paper-toggle-button-unchecked-bar-color: var(--paper-indigo-900);
--paper-toggle-button-unchecked-button-color: var(--paper-indigo-900);
--paper-toggle-button-unchecked-ink-color: var(--paper-indigo-900);
}
</style>
<div>
<h4>Noink</h4>
<div class="horizontal-section">
<paper-toggle-button noink>Oxygen</paper-toggle-button>
<paper-toggle-button noink>Carbon</paper-toggle-button>
<paper-toggle-button checked noink>Hydrogen</paper-toggle-button>
<paper-toggle-button checked noink>Nitrogen</paper-toggle-button>
<paper-toggle-button checked noink>Calcium</paper-toggle-button>
</div>
</div>
<paper-toggle-button class="green">Toggle</paper-toggle-button>
<paper-toggle-button checked class="pink">Toggle</paper-toggle-button>
</template>
</demo-snippet>
</div>
</body>
</html>

View File

@ -2,11 +2,11 @@
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

View File

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!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
@ -7,9 +6,7 @@ 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>
--><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-toggle-button tests</title>
@ -18,8 +15,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'basic.html'
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View File

@ -474,6 +474,10 @@
Format: 'idx',
Method: 'Embed'
});
profile.SubtitleProfiles.push({
Format: 'smi',
Method: 'Embed'
});
} else {
profile.SubtitleProfiles.push({
Format: 'vtt',