1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-02-18 13:20:10 -05:00
parent 02e924e3c5
commit 05b25af69f
55 changed files with 1554 additions and 907 deletions

View file

@ -1,6 +1,6 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.10",
"version": "1.0.11",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
@ -29,17 +29,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.4.0",
"web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.10",
"_release": "1.0.11",
"_resolution": {
"type": "version",
"tag": "v1.0.10",
"commit": "1ba4f97e250dc14e9638d95be582dd62b9083736"
"tag": "v1.0.11",
"commit": "8fe629c9fecb14b76319ab4fbeef7f0237d93004"
},
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
"_target": "^1.0.0",

View file

@ -1,22 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: lIogwlz5kFUKYy1OWASXxQgZE4YTyjUY0QcEgnqbv6wQ0GX8wRMgbI3zhbAv+xXU5ieYXg6Bd47ZFZZ1kVEWzQynAdd2od14Eu1vfN60/yc/llz62VTYuFsPt8r+Tgw41Iz8plwejK4a+V26Da5tXW+soJQOJKvE/MOiPzKi2m0=
- secure: cj3uSCQwLY6pyP3oTdGFjJoTRjv3G1lSe73fMd6i15XnMMxM4DVarfDtK+a0dPPxDY8BBhfr4sFClZuWX71bAHQuqUA84oigbeWt2xfl8d3HUuvr9aEnQxAGe2eQE7atpYJPC9M447sw48QKiUVgQo33DeJ1BGj6SBqkw0BJXO8=
node_js: 4
- CXX=g++-4.8
node_js: stable
addons:
firefox: '42.0'
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -5,6 +5,11 @@ 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
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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).
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.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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:
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, #40
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.10",
"version": "1.0.11",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
@ -29,9 +29,10 @@
},
"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.4.0",
"web-component-tester": "^4.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}

View file

@ -18,46 +18,80 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<title>iron-autogrow-textarea demo</title>
<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="../iron-autogrow-textarea.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style is="custom-style" include="demo-pages-shared-styles">
iron-autogrow-textarea {
display: block;
width: 200px;
margin: 5px 0;
}
textarea {
width: 200px;
}
.vertical-section {
box-sizing: border-box;
width: 400px;
margin: 0;
}
</style>
</head>
<style>
iron-autogrow-textarea {
width: 200px;
}
</style>
<body>
<body unresolved>
<div class="vertical-section-container centered">
<h4>Updating the value imperatively</h4>
<template is="dom-bind">
<div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br><br>
<h3>An iron-autogrow-textarea grows automatically as more text is entered</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea></iron-autogrow-textarea>
</template>
</demo-snippet>
<code>bind-value</code>: <span>[[bindValue]]</span>
<h3>The maximum height can be controlled either through the <i>max-rows</i>
property, or through a fixed max height</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea max-rows="4" placeholder="scrolls after 4 rows"></iron-autogrow-textarea>
<iron-autogrow-textarea style="max-height: 50px;" placeholder="scrolls after 50px"></iron-autogrow-textarea>
</template>
</demo-snippet>
<p on-click="setValue">
set <code>bind-value</code> to: <br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
<h3>The initial height can also be controlled using the <i>rows</i> property,
or through a fixed height</h3>
<demo-snippet class="centered-demo">
<template>
<iron-autogrow-textarea rows="4" placeholder="start with 4 rows"></iron-autogrow-textarea>
<iron-autogrow-textarea style="height: 50px;"></iron-autogrow-textarea>
</template>
</demo-snippet>
set <code>textarea.value</code> to: <br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
<h3>Example of updating the value imperatively</h3>
<!-- TODO: replace this with a demo-snippet when https://github.com/webcomponents/webcomponentsjs/issues/362
is fixed -->
<div class="example">
<template is="dom-bind">
<div class="vertical-section">
<iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
<br>
<code>bind-value</code>: <span>[[bindValue]]</span>
<p on-click="setValue">
Imperatively changing <code>bind-value</code> will also update
<code>textarea.value</code>:<br>
<textarea></textarea>
<button value="bindValue">set</button>
<br><br>
<h4>Custom</h4>
<div class="vertical-section">
<p>Scrolls after 4 rows:</p>
<iron-autogrow-textarea max-rows="4"></iron-autogrow-textarea>
<p>Initial height of 4 rows</p>
<iron-autogrow-textarea rows="4"></iron-autogrow-textarea>
Imperatively updating <code>textarea.value</code> will update
the display, but not update <code>bind-value</code>:<br>
<textarea></textarea>
<button value="value">set</button>
</p>
</div>
</template>
</div>
</div>
<script>
var scope = document.querySelector('template[is=dom-bind]');
@ -67,13 +101,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
var inputValue = event.target.previousElementSibling.value;
if (event.target.value == "bindValue") {
document.querySelector('iron-autogrow-textarea').bindValue = inputValue;
document.querySelector('#a1').bindValue = inputValue;
} else {
document.querySelector('iron-autogrow-textarea').textarea.value = inputValue;
document.querySelector('#a1').textarea.value = inputValue;
}
}
</script>
</body>
</html>

View file

@ -33,6 +33,7 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}`
`--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}`
@group Iron Elements
@hero hero.svg
@ -50,6 +51,7 @@ Custom property | Description | Default
padding: 2px;
-moz-appearance: textarea;
-webkit-appearance: textarea;
overflow: hidden;
}
.mirror-text {
@ -82,6 +84,21 @@ Custom property | Description | Default
box-shadow: none;
}
textarea::-webkit-input-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea:-moz-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea::-moz-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
textarea:-ms-input-placeholder {
@apply(--iron-autogrow-textarea-placeholder);
}
</style>
<template>
<!-- the mirror sizes the input/textarea so it grows with typing -->
@ -120,8 +137,6 @@ Custom property | Description | Default
/**
* Use this property instead of `value` for two-way data binding.
*
* @type {string|number|undefined|null}
*/
bindValue: {
observer: '_bindValueChanged',
@ -191,6 +206,7 @@ Custom property | Description | Default
value: {
notify: true,
type: String,
value: '',
computed: '_computeValue(bindValue)'
},
@ -266,6 +282,10 @@ Custom property | Description | Default
this.$.textarea.selectionEnd = value;
},
ready: function() {
this.bindValue = this.value;
},
/**
* Returns true if `value` is valid. The validator provided in `validator`
* will be used first, if it exists; otherwise, the `textarea`'s validity

View file

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!DOCTYPE html><!--
@license
Copyright (c) 2014 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>iron-autogrow-textarea tests</title>
@ -19,7 +16,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
WCT.loadSuites([
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View file

@ -29,14 +29,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"homepage": "https://github.com/polymerelements/iron-behaviors",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.12",
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_source": "git://github.com/polymerelements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors"
"_originalSource": "polymerelements/iron-behaviors"
}

View file

@ -1,6 +1,6 @@
{
"name": "iron-demo-helpers",
"version": "1.0.3",
"version": "1.1.0",
"description": "Utility classes to make building demo pages easier",
"authors": [
"The Polymer Authors"
@ -21,25 +21,27 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
"paper-styles": "PolymerElements/paper-styles#1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
},
"_release": "1.0.3",
"_release": "1.1.0",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "dbcd14c318654f0e42d391af409efff9a8a241a2"
"tag": "v1.1.0",
"commit": "ea98e51e3ac7b52dd53cea05d3f027b3a41388ad"
},
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
"_target": "^1.0.0",

View file

@ -0,0 +1,27 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
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"
SAUCE_USERNAME=polymer-ci:
secure: MdclMoQBh7FSa11Mfw1Q7Gx5dYmsfHp5w3tSj5i798eMsrDrHIbmJwnYAIEHch4wpIteQL4dynfzWyfpU3S1WSCTR7vNsbzz8XlmT+t+Bk474XOsKQ/I+z1Fd3NMSNR73H/rJxH3nEJfDSR6TFKfoT/SAO0/yPE1taSvvYJV3dRD6A+ZrftgDzaDB3YukiE+OU4Hsk0Fy8JnF3Lb5iAl9jkd8G5i0IfYpcXJwlPq3C9krs7i/QhVCa/PI2TQNubihGnQc9oSVYxU4BV2oJ7JvEgPYLc21jL07c71Mr7Nl7ZCxnGqPYHxtwFMalBaenHg+CdnReOyh3CjbPhK/c0avX9Xgnpsex2pt3gXo98sZ0TBCfsEm/eKPpzxktAs2XwQXV3Xct1t8Oop4tbwUqgobXOSR3GM/YY8+FONr7D4NENtMiarujvywfhUK4dwc5sSY44uEocEUoYfcNEO3YAu0TyGhtjlTkhRscW6W10ASnLHQ3Vkg1/OOwBiQC1OSZHudffc11yY6rQGlD7K48n2TIu8yI8m2AyEXWxTF6XINCC80+rSNJEibiih1McGbwqACv71S6fBhCNdS2UXfO8MWDe6Lg7TgFXfLqkLRuNz+YR/Jpp9Kx5JgdDLbDvddSaOZII5WUcP+CjAwe+dOHXxuiIao18Y1AUs1K49zShukN8=
env:
global:
- secure: ZdORgF+qeVeCULluFHTdv3rWkff5UZQB2R/XY4WlDX6VMNoa4ox+Bv9jEwC9dFISX3YGZP+jxA3EAm3vNUdnRfi0WgecISGpagRippqk6pj3sz1thsllVBZgxRo6x63BGog74zxE0Okv01p1gMF1xEmO7cKlkDl4Axo8H1CLU3zOaG3W8tuY9TMgghq9cJAi8ybsojh26LKWaD8UnOfyb406fjEtHMammJ0+mnCnqUFF4suEj0G3Pujld8DZsZG0A/xKCLfykPsIdEnsP823aCIJX99XE0clCd/FTlNTHRhgdcAFwc3jqOrRFwXkGG8aW0W+ciKFESwmS5cAZZ6an+4LsDoOLBlmReACNq85HAu45ID+xfIKuG4gROMwRdOeIH1Zh9SZ0szcnYO8/JsuxyoXHeaiQnHc0ZZ/bzO3AV5p1APflDi5V2/q4OdXRZ7K7CQNO7b3GQk1vvXWG+553BJLbyWv/D04NpvQbdQqI2Zt/SDTdb7zRQVDnk6rZuODe8LU4QtF7EaO5+KHWjOvEsEsstPS8NFelw6Iqv8sAMO7dErAjWFuDXCCyTGSN7PVLcOhVy2gnpAspX1OZ/rubsDjqe3tN3BHURlRoEq3wXs93ZHcakIIor8aVs1hLd1XeX46hGGoK215SiKoCJWN8Bs/0174hE2pDNuVG5Hm/VQ=
- secure: INTBdOGAsbGQ1aokMF/OX8SxTDlUH6VKcrdcOuVbu3aAllmMgOznRtOm8IbHa+c9Dn25nMEY7Nl9DvxA9EfkKbyKFCcwwYgzAtrs4U/9qmckw8yJikDyF06wwClxeXBDZr9qxHUarX770McBMfq+zOly6ls3v0TTrERO3MoV4dBJ+sj0Oj0TCjjt7hiaFq4xdSMpuGLoOdElL8zh+bgRj98R8uzOTYW4hdf80FZqO5gXOWMRDkZCI1Y4EDsAQSZQ9jDScT5qd4qYhujuFmAd1+a4EmRE+WF8Uvo2bwnm4/Fz8EEBYNzNQGftyTazXZqplhKlu1auTmOKxWadEWP2oD28FFFgnSyp/p9IzRi8DjKg7btumiL2bZOK5RFOP4OiN8+Fje7Hi9sA7utEunH8zqRYwZZehxQG3s/Ixi7wiOs9IoKxyjRpZTGMrb8tuCjsgtNTSsGbQ9Si3l/7q6zXd9ctC5F0HAhOANPUxqLt67NLxUDjp6mOcsdtEnB7hEGcC6g3NTGZnE6icTGi2f7SokK1dsxxoW8Z+FGWG+AT3FKTFJJlfoAx3Y/cSa/gI6/jyqheANbviD3qllrwvTCEjUPjMs0UoiLxEIb57aiY8cB1LplDnHQhZarXrOe1jcgOxs9H+YFaeSX6zL+WswLPwBvTgsvXuP018XBwBRpYbN8=
- CXX=g++-4.8

View file

@ -5,6 +5,11 @@ 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
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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).
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.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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:
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, #40
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{
"name": "iron-demo-helpers",
"version": "1.0.3",
"version": "1.1.0",
"description": "Utility classes to make building demo pages easier",
"authors": [
"The Polymer Authors"
@ -21,18 +21,20 @@
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "polymer/web-component-tester#^3.4.0",
"web-component-tester": "^4.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.1.2",
"paper-styles": "PolymerElements/paper-styles#1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
}
}

View file

@ -9,11 +9,12 @@ 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="../prism-element/prism-highlighter.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/shadow.html">
<link rel="import" href="../prism-element/prism-highlighter.html">
<!--
`demo-snippet` is a helper element that displays the source of a code snippet and
@ -61,7 +62,7 @@ Custom property | Description | Default
}
.demo {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid var(--google-grey-300);
background-color: white;
margin: 0;
padding: 20px;
@ -71,7 +72,7 @@ Custom property | Description | Default
.code {
padding: 0 20px;
margin: 0;
background-color: #fafafa;
background-color: var(--google-grey-100);
font-size: 13px;
overflow: auto;
@apply(--demo-snippet-code);
@ -81,6 +82,17 @@ Custom property | Description | Default
margin: 0;
padding: 0 0 10px 0;
}
.code-container {
position: relative;
}
paper-icon-button {
position: absolute;
top: 0;
right: 0px;
}
</style>
<prism-highlighter></prism-highlighter>
@ -89,12 +101,22 @@ Custom property | Description | Default
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code"></div>
</marked-element>
<div class="code-container">
<marked-element markdown=[[_markdown]] id="marked">
<div class="markdown-html code" id="code"></div>
</marked-element>
<paper-icon-button
id="copyButton"
icon="content-copy"
title="copy to clipboard"
on-tap="_copyToClipboard">
</paper-icon-button>
</div>
</template>
<script>
'use strict';
Polymer({
is: 'demo-snippet',
@ -114,9 +136,7 @@ Custom property | Description | Default
return;
}
// TODO(noms): When marked-element/issues/23 lands, this will become
// a public method and will need to be updated.
var snippet = this.$.marked._unindent(template.innerHTML);
var snippet = this.$.marked.unindent(template.innerHTML);
// Boolean properties are displayed as checked="", so remove the ="" bit.
snippet = snippet.replace(/=""/g, '');
@ -125,6 +145,34 @@ Custom property | Description | Default
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
},
_copyToClipboard: function() {
// From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
var snipRange = document.createRange();
snipRange.selectNodeContents(this.$.code);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(snipRange);
var result = false;
try {
result = document.execCommand('copy');
this.$.copyButton.icon = 'done';
} catch (err) {
// Copy command is not available
console.error(err);
this.$.copyButton.icon = 'error';
}
// Return to the copy button after a second.
setTimeout(this._resetCopyButtonState.bind(this), 1000);
selection.removeAllRanges();
return result;
},
_resetCopyButtonState: function() {
this.$.copyButton.icon = 'content-copy';
}
});
</script>

View file

@ -69,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--paper-checkbox-unchecked-ink-color: var(--paper-red-900);
--paper-checkbox-label-color: var(--paper-red-500);
}
</style>
</style>
<paper-checkbox class="blue">Checkbox</paper-checkbox>
<paper-checkbox checked class="red">Checkbox</paper-checkbox>

View file

@ -22,65 +22,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</head>
<body>
<!--
*** Important! ***
You'll notice that these tests don't use test-fixture. That's because
there's a problem stamping nested templates in IE/Safari 8. This
should eventually be patched in webcomponents.js, but in the meantime
we're going to run these tests "the old way".
<test-fixture id="empty-demo">
This is relevant because this means that you, as the test writer,
need to remember that an element's state is maintained between tests.
If you don't want this, either use a new element, or clean up after
your test.
-->
<demo-snippet id="emptyDemo"></demo-snippet>
<demo-snippet id="nativeDemo">
<template>
<demo-snippet></demo-snippet>
<input disabled>
</template>
</test-fixture>
</demo-snippet>
<test-fixture id="native-demo">
<demo-snippet id="customDemo">
<template>
<demo-snippet>
<template>
<input disabled>
</template>
</demo-snippet>
<paper-checkbox disabled></paper-checkbox>
</template>
</test-fixture>
</demo-snippet>
<test-fixture id="custom-demo">
<demo-snippet id="demoWithAttributes">
<template>
<demo-snippet>
<template>
<paper-checkbox disabled></paper-checkbox>
</template>
</demo-snippet>
<input disabled type="date">
</template>
</test-fixture>
<test-fixture id="demo-with-attributes">
<template>
<demo-snippet>
<template>
<input disabled type="date">
</template>
</demo-snippet>
</template>
</test-fixture>
</demo-snippet>
<script>
// TODO(notwaldorf): Tests are currently very unhappy in IE
function isNotIE() {
return !navigator.userAgent.match(/MSIE/i);
}
suite('display', function() {
var emptyHeight;
setup(function() {
var emptyDemo = fixture('empty-demo');
var emptyDemo = document.getElementById('emptyDemo');
emptyHeight = emptyDemo.getBoundingClientRect().height;
});
test('can render native elements', skipUnless(isNotIE, function() {
var element = fixture('native-demo');
test('can render native elements', function() {
var element = document.getElementById('nativeDemo');
// Render the distributed children.
Polymer.dom.flush();
var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and
@ -93,15 +84,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
}));
});
test('can render custom elements', skipUnless(isNotIE, function() {
var element = fixture('custom-demo');
test('can render custom elements', function() {
var element = document.getElementById('customDemo');
// Render the distributed children.
Polymer.dom.flush();
var rect = element.getBoundingClientRect();
expect(rect.height).to.be.greaterThan(emptyHeight);
// The demo is rendered in the light dom, so it should exist, and
@ -115,18 +107,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal(
'```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
}));
});
});
suite('parsing', function() {
var element;
setup(function() {
var element = fixture('demo-with-attributes');
});
test('preserves attributes', skipUnless(isNotIE, function() {
var element = fixture('demo-with-attributes');
test('preserves attributes', function() {
var element = document.getElementById('demoWithAttributes');
// Render the distributed children.
Polymer.dom.flush();
@ -134,7 +120,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var markdownElement = element.$.marked;
expect(markdownElement.markdown).to.be.equal(
'```\n\n<input disabled type="date">\n\n```');
}));
});
});
</script>
</body>

View file

@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
"version": "1.2.2",
"version": "1.2.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@ -21,21 +21,21 @@
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0",
"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",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
"web-component-tester": "^4.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
"_release": "1.2.2",
"homepage": "https://github.com/polymerelements/iron-flex-layout",
"_release": "1.2.3",
"_resolution": {
"type": "version",
"tag": "v1.2.2",
"commit": "41c4f35be1368afb770312b907a258175565dbdf"
"tag": "v1.2.3",
"commit": "3ae26f4a248ccc7a4c035590473840342182293e"
},
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-flex-layout"
"_originalSource": "polymerelements/iron-flex-layout"
}

View file

@ -1,22 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
node_js: 4
- 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:
- 'true || xvfb-run wct'
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then true || wct -s 'default'; fi"
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

@ -5,6 +5,11 @@ 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
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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).
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.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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:
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, #40
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
"version": "1.2.2",
"version": "1.2.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@ -21,11 +21,11 @@
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"marked-element": "polymerelements/marked-element#^1.0.0",
"prism-element": "PolymerElements/prism-element#^1.0.0",
"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",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
"web-component-tester": "^4.0.0"
},
"ignore": []
}

View file

@ -1,95 +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="../../prism-element/prism-highlighter.html">
<link rel="import" href="../../marked-element/marked-element.html">
<!--
Quick element that can display the source of a code snippet and a rendered demo.
<demo-snippet>
<template>
<style is="custom-style">
#demo6 {
@apply(--layout-horizontal);
@apply(--layout-start);
height: 120px;
}
</style>
<div class="container" id="demo6">
<div>start</div>
</div>
</template>
</demo-snippet>
-->
<dom-module id="demo-snippet">
<template>
<style>
:host {
display:inline-block;
}
.demo {
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
.code {
padding: 0;
margin: 0;
background-color: #fafafa;
font-size: 13px;
word-wrap: break-word;
}
.code > pre {
margin: 0;
padding: 0 0 10px 0;
}
</style>
<prism-highlighter></prism-highlighter>
<div class="demo">
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]]>
<div class="markdown-html code"></div>
</marked-element>
</template>
<script>
Polymer({
is: 'demo-snippet',
properties: {
_markdown: {
type: String,
value: ''
}
},
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
var snippet = Polymer.domInnerHTML.getInnerHTML(template);
this._markdown = '```\n' + snippet + '\n' + '```';
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
}
});
</script>
</dom-module>

View file

@ -19,10 +19,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="demo-snippet.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="../iron-flex-layout.html">
<style>
<style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
--demo-snippet-demo: {
padding: 0;
}
}
.container {
background-color: #ccc;
padding: 5px;
@ -35,20 +41,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
min-height: 20px;
}
demo-snippet {
width: 100%;
}
.vertical-section {
padding: 0 !important;
.vertical-section-container {
max-width: 700px
}
</style>
</head>
<body unresolved class="fullbleed">
<h4>Horizontal and vertical layout</h4>
<div class="vertical-section">
<div class="vertical-section-container centered">
<h4>Horizontal and vertical layout</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -56,7 +57,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
@apply(--layout-horizontal);
}
</style>
<div class="container flex">
<div>one</div>
<div>two</div>
@ -64,10 +64,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children</h4>
<div class="vertical-section">
<h4>Flexible children</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -86,10 +84,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children in vertical layouts</h4>
<div class="vertical-section">
<h4>Flexible children in vertical layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -109,10 +105,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Flex ratios</h4>
<div class="vertical-section">
<h4>Flex ratios</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -137,10 +131,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis stretch alignment (default)</h4>
<div class="vertical-section">
<h4>Cross-axis stretch alignment (default)</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -155,10 +147,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis center alignment</h4>
<div class="vertical-section">
<h4>Cross-axis center alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -174,10 +164,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis start alignment</h4>
<div class="vertical-section">
<h4>Cross-axis start alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -193,10 +181,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis end alignment</h4>
<div class="vertical-section">
<h4>Cross-axis end alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -212,10 +198,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -230,10 +214,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -248,10 +230,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, end justified</h4>
<div class="vertical-section">
<h4>Justification, end justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -266,10 +246,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space between elements</h4>
<div class="vertical-section">
<h4>Justification, equal space between elements</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -286,10 +264,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space around each element</h4>
<div class="vertical-section">
<h4>Justification, equal space around each element</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -305,10 +281,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Self alignment</h4>
<div class="vertical-section">
<h4>Self alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -342,10 +316,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Wrapping</h4>
<div class="vertical-section">
<h4>Wrapping</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -364,10 +336,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>Reversed layouts</h4>
<div class="vertical-section">
<h4>Reversed layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
@ -384,10 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</demo-snippet>
</div>
<h4>General purpose ruls</h4>
<div class="vertical-section">
<h4>General purpose rules</h4>
<demo-snippet>
<template>
<style is="custom-style">

View file

@ -217,7 +217,7 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
};
--layout-around-justified: {
-ms-flex-pack: around;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
};

View file

@ -0,0 +1,29 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 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-flex-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-flex-layout.html',
'iron-flex-layout.html?dom=shadow'
]);
</script>
</body>
</html>

View file

@ -0,0 +1,344 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 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-flex-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-flex-layout.html">
<style is="custom-style">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
min-height: 50px;
background-color: #ccc;
}
.container > div {
width: 50px;
min-height: 50px; /* so that it can grow in vertical layouts. */
}
/* IE11 does not calculate flex proportions correctly in a vertical
* layout if the children just have a min-height. For those tests,
* use a fixed height instead. */
.container > div.fixed-height {
min-height: 0;
height: 50px;
}
.relative { @apply(--layout-relative); }
.container.relative > div {
min-width: 50px;
min-height: 50px;
width: inherit;
}
.container.small { width: 120px; }
.container.tall { height: 300px; }
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
.horizontal { @apply(--layout-horizontal); }
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
.vertical { @apply(--layout-vertical); }
.vertical-reverse { @apply(--layout-vertical-reverse); }
.wrap { @apply(--layout-wrap); }
.wrap-reverse { @apply(--layout-wrap-reverse); }
.flex { @apply(--layout-flex); }
.flex2 { @apply(--layout-flex-2); }
.flex3 { @apply(--layout-flex-3); }
.center { @apply(--layout-center); }
.start { @apply(--layout-start); }
.end { @apply(--layout-end); }
.start-justified { @apply(--layout-start-justified); }
.center-justified { @apply(--layout-center-justified); }
.end-justified { @apply(--layout-end-justified); }
.justified { @apply(--layout-justified); }
.around-justified { @apply(--layout-around-justified); }
.fit { @apply(--layout-fit); }
</style>
</head>
<body>
<test-fixture id="basic">
<template>
<div class="container">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</template>
</test-fixture>
<test-fixture id="flex">
<template>
<div class="container">
<div id="c1" class="fixed-height"></div>
<div id="c2" class="fixed-height"></div>
<div id="c3" class="fixed-height"></div>
</div>
</template>
</test-fixture>
<test-fixture id="single-child">
<template>
<div class="container">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="positioning">
<template>
<div class="container relative">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom
&& rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
setup(function() {
container = fixture('basic');
});
test('--layout-horizontal', function() {
container.classList.add('horizontal');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok");
});
test('--layout-horizontal-reverse', function() {
container.classList.add('horizontal-reverse');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok");
});
test('--layout-vertical', function() {
container.classList.add('vertical');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok");
});
test('--layout-vertical-reverse', function() {
container.classList.add('vertical-reverse');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
test('--layout-wrap', function() {
container.classList.add('horizontal');
container.classList.add('wrap');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c1| |c2|
// |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
});
test('--layout-wrap-reverse', function() {
container.classList.add('horizontal');
container.classList.add('wrap-reverse');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c3|
// |c1| |c2|
assert.isTrue(positionEquals(c1, 50, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
});
suite('flex', function() {
var container;
setup(function() {
container = fixture('flex');
});
test('--layout-flex child in a horizontal layout', function() {
container.classList.add('horizontal');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-flex child in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a horizontal layout', function() {
container.classList.add('horizontal');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok");
});
});
suite('alignment', function() {
var container;
setup(function() {
container = fixture('single-child');
container.classList.add('horizontal');
});
test('stretch (default)', function() {
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok");
});
test('--layout-center', function() {
container.classList.add('center');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok");
});
test('--layout-start', function() {
container.classList.add('start');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end', function() {
container.classList.add('end');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok");
});
test('--layout-start-justified', function() {
container.classList.add('start-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end-justified', function() {
container.classList.add('end-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
});
test('--layout-center-justified', function() {
container.classList.add('center-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok");
});
});
suite('justification', function() {
var container;
setup(function() {
container = fixture('flex');
container.classList.add('horizontal');
});
test('--layout-justified', function() {
container.classList.add('justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-around-justified', function() {
container.classList.add('around-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var spacing = (300 - 50 * 3) / 6;
// Every child gets `spacing` on its left and right side.
assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok");
var end = spacing + 50 + spacing;
assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok");
end = end + spacing + 50 + spacing;
assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok");
});
});
suite('positioning', function() {
var container;
setup(function() {
container = fixture('positioning');
container.classList.add('tall');
});
test('--layout-fit', function() {
c1.classList.add('fit');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok");
});
});
</script>
</body>
</html>

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.3.1",
"version": "1.3.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,
@ -33,11 +33,11 @@
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
"_release": "1.3.1",
"_release": "1.3.2",
"_resolution": {
"type": "version",
"tag": "v1.3.1",
"commit": "efaa64da9dbaa4209483c2d9fd7bf3bd20beb5e2"
"tag": "v1.3.2",
"commit": "17d07bd2436f94af8de83b5f8b6444a194eb67a4"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.3.1",
"version": "1.3.2",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,

View file

@ -213,9 +213,10 @@ context. You should place this element as a child of `<body>` whenever possible.
/**
* Cancels the overlay.
* @param {?Event} event The original event
*/
cancel: function() {
var cancelEvent = this.fire('iron-overlay-canceled', undefined, {cancelable: true});
cancel: function(event) {
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
if (cancelEvent.defaultPrevented) {
return;
}
@ -326,6 +327,7 @@ context. You should place this element as a child of `<body>` whenever possible.
// tasks which must occur before opening; e.g. making the element visible
_prepareRenderOpened: function() {
this._manager.addOverlay(this);
this._preparePositioning();
@ -335,6 +337,12 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.withBackdrop) {
this.backdropElement.prepare();
}
// Safari will apply the focus to the autofocus element when displayed for the first time,
// so we blur it. Later, _applyFocus will set the focus if necessary.
if (this.noAutoFocus && document.activeElement === this._focusNode) {
this._focusNode.blur();
}
},
// tasks which cause the overlay to actually open; typically play an
@ -405,7 +413,7 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this.noCancelOnOutsideClick) {
this._applyFocus();
} else {
this.cancel();
this.cancel(event);
}
}
},
@ -415,7 +423,7 @@ context. You should place this element as a child of `<body>` whenever possible.
if (this._manager.currentOverlay() === this &&
!this.noCancelOnEscKey &&
event.keyCode === ESC) {
this.cancel();
this.cancel(event);
}
},
@ -447,6 +455,7 @@ context. You should place this element as a child of `<body>` whenever possible.
* Fired when the `iron-overlay` is canceled, but before it is closed.
* Cancel the event to prevent the `iron-overlay` from closing.
* @event iron-overlay-canceled
* @param {?Event} event The event in case the user pressed ESC or clicked outside the overlay
*/
/**

View file

@ -9,6 +9,7 @@ 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-overlay-behavior tests</title>
@ -24,7 +25,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="test-overlay.html">
<link rel="import" href="test-overlay2.html">
<style is="custom-style">
iron-overlay-backdrop {
/* For quicker tests */
--iron-overlay-backdrop: {
transition: none;
}
}
</style>
</head>
<body>
<test-fixture id="basic">
@ -52,55 +63,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="backdrop">
<template>
<test-overlay with-backdrop>
Overlay with backdrop
</test-overlay>
</template>
</test-fixture>
<test-fixture id="multiple">
<template>
<test-overlay class="overlay-1">
Overlay 1
Test overlay 1
</test-overlay>
<test-overlay class="overlay-2">
Overlay 2
Test overlay 2
</test-overlay>
<test-overlay class="overlay-3">
Overlay 3
</test-overlay>
</template>
</test-fixture>
<test-fixture id="backdrop-multiple">
<template>
<test-overlay with-backdrop class="overlay-1">
Overlay 1 with backdrop
</test-overlay>
<test-overlay with-backdrop class="overlay-2">
Overlay 2 with backdrop
</test-overlay>
<test-overlay with-backdrop class="overlay-3">
Overlay 3 with backdrop
</test-overlay>
</template>
</test-fixture>
<test-fixture id="backdrop-different-elements">
<template>
<test-overlay with-backdrop class="overlay-1">
Overlay 1 with backdrop
</test-overlay>
<test-overlay2 with-backdrop class="overlay-2">
Overlay 2 with backdrop
<test-overlay2 class="overlay-3">
Other overlay 3
</test-overlay2>
</template>
</test-fixture>
<script>
function runAfterOpen(overlay, cb) {
function runAfterOpen(overlay, callback) {
overlay.addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(cb, 1);
Polymer.Base.async(callback, 1);
});
overlay.open();
}
suite('basic overlay tests', function() {
function runAfterClose(overlay, callback) {
overlay.addEventListener('iron-overlay-closed', callback);
overlay.close();
}
suite('basic overlay', function() {
var overlay;
setup(function() {
@ -112,25 +110,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.equal(getComputedStyle(overlay).display, 'none', 'overlay starts hidden');
});
test('overlay open by default', function(done) {
overlay = fixture('opened');
overlay.addEventListener('iron-overlay-opened', function() {
assert.isTrue(overlay.opened, 'overlay starts opened');
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
done();
});
});
test('overlay positioned & sized properly', function(done) {
overlay = fixture('opened');
overlay.addEventListener('iron-overlay-opened', function() {
var s = getComputedStyle(overlay);
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
done();
});
});
test('overlay open/close events', function(done) {
var nevents = 0;
@ -148,13 +127,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overlay.opened = true;
});
test('open overlay refits on iron-resize', function() {
var overlay = fixture('opened');
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
assert.isTrue(spy.called, 'overlay should refit');
});
test('closed overlay does not refit on iron-resize', function() {
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
@ -165,8 +137,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
runAfterOpen(overlay, function () {
overlay.addEventListener('iron-resize', function() { callCount++; });
runAfterOpen(overlay, function() {
assert.equal(callCount, 1, 'iron-resize should be called once');
done();
});
@ -176,26 +148,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
overlay.addEventListener('iron-resize', function() { callCount++; });
Polymer.dom(overlay).appendChild(document.createElement('div'));
overlay.async(function() {
assert.equal(callCount, 0, 'iron-resize should not be called');
done();
}, 10);
});
test('open overlay triggers iron-resize when its content changes', function(done) {
runAfterOpen(overlay, function () {
runAfterOpen(overlay, function() {
// Ignore iron-resize triggered by window resize.
var callCount = 0;
window.addEventListener('resize', function() { callCount--; }, true);
overlay.addEventListener('iron-resize', function () { callCount++; });
var child = document.createElement('div');
child.innerHTML = 'hi';
Polymer.dom(overlay).appendChild(child);
overlay.async(function () {
overlay.addEventListener('iron-resize', function() { callCount++; });
Polymer.dom(overlay).appendChild(document.createElement('div'));
overlay.async(function() {
assert.equal(callCount, 1, 'iron-resize should be called once');
done();
}, 10);
@ -215,54 +183,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('close an overlay in proximity to another overlay', function(done) {
var secondOverlay = fixture('basic');
// Open and close a separate overlay.
secondOverlay.open();
secondOverlay.close();
// Open the overlay we care about.
overlay.open();
// Wait for infinite recursion, otherwise we win:
overlay.addEventListener('iron-overlay-closed', function() {
done();
});
// Immediately close the first overlay:
overlay.close();
});
test('clicking an overlay does not close it', function(done) {
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
overlay.fire('click');
setTimeout(function() {
MockInteractions.tap(overlay);
overlay.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
});
test('node with autofocus is focused', function(done) {
overlay = fixture('autofocus');
runAfterOpen(overlay, function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
});
});
test('cancel an overlay by clicking outside', function(done) {
test('clicking outside fires iron-overlay-canceled', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.target, document.body, 'detail contains original click event');
done();
});
MockInteractions.tap(document.body);
});
});
test('close an overlay by clicking outside', function(done) {
test('clicking outside closes the overlay', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-closed', function(event) {
assert.isTrue(event.detail.canceled, 'overlay is canceled');
@ -272,7 +215,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
test('cancel event can be prevented', function(done) {
test('iron-overlay-canceled event can be prevented', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
event.preventDefault();
@ -280,8 +223,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
Polymer.Base.async(function() {
assert.isTrue(overlay.opened, 'overlay is still open');
assert.isFalse(spy.called, 'iron-overlay-closed not fired');
done();
}, 10);
});
@ -290,11 +234,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('cancel an overlay with esc key', function(done) {
runAfterOpen(overlay, function() {
overlay.addEventListener('iron-overlay-canceled', function(event) {
assert.equal(event.detail.type, 'keydown');
done();
});
fireEvent('keydown', {
keyCode: 27
}, document);
MockInteractions.pressAndReleaseKeyOn(document, 27);
});
});
@ -304,9 +247,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.isTrue(event.detail.canceled, 'overlay is canceled');
done();
});
fireEvent('keydown', {
keyCode: 27
}, document);
MockInteractions.pressAndReleaseKeyOn(document, 27);
});
});
@ -316,86 +257,262 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
MockInteractions.tap(document.body);
setTimeout(function() {
Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
done();
}, 10);
});
});
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
overlay = fixture('autofocus');
overlay.noCancelOnOutsideClick = true;
runAfterOpen(overlay, function() {
MockInteractions.tap(document.body);
setTimeout(function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
}, 10);
});
});
test('no-cancel-on-esc-key property', function(done) {
overlay.noCancelOnEscKey = true;
runAfterOpen(overlay, function() {
var spy = sinon.stub();
overlay.addEventListener('iron-overlay-closed', spy);
fireEvent('keydown', {
keyCode: 27
}, document);
setTimeout(function() {
MockInteractions.pressAndReleaseKeyOn(document, 27);
Polymer.Base.async(function() {
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
done();
}, 10);
});
});
test('with-backdrop sets tabindex=-1 and removes it', function() {
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
overlay.withBackdrop = false;
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
});
test('with-backdrop does not override tabindex if already set', function() {
overlay.setAttribute('tabindex', '1');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
overlay.withBackdrop = false;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
});
});
suite('opened overlay', function() {
var overlay;
setup(function() {
overlay = fixture('opened');
});
test('overlay open by default', function(done) {
overlay.addEventListener('iron-overlay-opened', function() {
assert.isTrue(overlay.opened, 'overlay starts opened');
assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay starts showing');
done();
});
});
test('overlay positioned & sized properly', function(done) {
overlay.addEventListener('iron-overlay-opened', function() {
var s = getComputedStyle(overlay);
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth) / 2, 'centered horizontally');
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight) / 2, 'centered vertically');
done();
});
});
test('open overlay refits on iron-resize', function() {
var spy = sinon.spy(overlay, 'refit');
overlay.fire('iron-resize');
assert.isTrue(spy.called, 'overlay should refit');
});
});
suite('focus handling', function() {
var overlay;
setup(function() {
overlay = fixture('autofocus');
});
test('node with autofocus is focused', function(done) {
runAfterOpen(overlay, function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
});
});
test('no-auto-focus will not focus node with autofocus', function(done) {
overlay.noAutoFocus = true;
runAfterOpen(overlay, function() {
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not focused after opened');
done();
});
// In Safari the element with autofocus will immediately receive focus when displayed for the first time http://jsbin.com/woroci/2/
// Ensure this is not the case for overlay.
assert.notEqual(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> not immediately focused');
});
test('no-cancel-on-outside-click property; focus stays on overlay when click outside', function(done) {
overlay.noCancelOnOutsideClick = true;
runAfterOpen(overlay, function() {
MockInteractions.tap(document.body);
Polymer.Base.async(function() {
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
done();
}, 10);
});
});
test('with-backdrop traps the focus within the overlay', function(done) {
var focusSpy = sinon.stub();
var button = document.createElement('button');
document.body.appendChild(button);
button.addEventListener('focus', focusSpy, true);
overlay.withBackdrop = true;
runAfterOpen(overlay, function() {
// Try to steal the focus
MockInteractions.focus(button);
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
assert.equal(focusSpy.callCount, 0, 'button in body did not get the focus');
document.body.removeChild(button);
done();
});
});
});
suite('overlay with backdrop', function() {
var overlay;
setup(function() {
overlay = fixture('backdrop');
});
test('backdrop is opened when overlay is opened', function(done) {
assert.isDefined(overlay.backdropElement, 'backdrop is defined');
runAfterOpen(overlay, function() {
assert.isTrue(overlay.backdropElement.opened, 'backdrop is opened');
assert.isDefined(overlay.backdropElement.parentNode, 'backdrop is inserted in the DOM');
done();
});
});
test('backdrop appears behind the overlay', function(done) {
runAfterOpen(overlay, function() {
styleZ = parseInt(window.getComputedStyle(overlay).zIndex, 10);
backdropStyleZ = parseInt(window.getComputedStyle(overlay.backdropElement).zIndex, 10);
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
done();
});
});
test('backdrop is removed when overlay is closed', function(done) {
runAfterOpen(overlay, function() {
runAfterClose(overlay, function() {
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
done();
});
});
});
test('backdrop is removed when the element is removed from DOM', function(done) {
runAfterOpen(overlay, function() {
Polymer.dom(overlay).parentNode.removeChild(overlay);
// Wait enough so detached is executed.
Polymer.Base.async(function() {
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
done();
}, 100);
});
});
test('manager.getBackdrops() immediately updated on opened changes', function() {
overlay.opened = true;
assert.equal(overlay._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
overlay.opened = false;
assert.equal(overlay._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
});
test('updating with-backdrop to false closes backdrop', function(done) {
runAfterOpen(overlay, function() {
overlay.withBackdrop = false;
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
done();
});
});
test('backdrop is removed when toggling overlay opened', function(done) {
overlay.open();
assert.isObject(overlay.backdropElement.parentNode, 'backdrop is immediately inserted in the document');
runAfterClose(overlay, function() {
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlay.backdropElement.parentNode, 'backdrop is removed from document');
done();
});
});
});
suite('multiple overlays', function() {
var overlays;
var overlay1, overlay2;
setup(function() {
overlays = fixture('multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
});
test('new overlays appear on top', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var styleZ1 = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
assert.isTrue(styleZ1 > styleZ, 'overlays[1] has higher z-index than overlays[0]');
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var styleZ1 = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
assert.isTrue(styleZ1 > styleZ, 'overlay2 has higher z-index than overlay1');
done();
});
});
});
test('ESC closes only one opened overlay', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
// keydown is sync, keyup async (but no need to wait for it).
MockInteractions.pressAndReleaseKeyOn(document.body, 27);
// Ideally overlays[1] should be closed and overlays[0] still open,
// but in this test env overlays[0]._onCaptureKeydown gets called before
// overlays[1]._onCaptureKeydown.
// TODO investigate if this is because of CustomEvents in MockInteractions.
var opened0 = overlays[0].opened && !overlays[1].opened;
var opened1 = !overlays[0].opened && overlays[1].opened;
assert.isTrue(opened0 || opened1, 'only one overlay is still opened');
test('ESC closes only the top overlay', function(done) {
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
MockInteractions.pressAndReleaseKeyOn(document, 27);
assert.isFalse(overlay2.opened, 'overlay2 was closed');
assert.isTrue(overlay1.opened, 'overlay1 is still opened');
done();
});
});
});
test('close an overlay in proximity to another overlay', function(done) {
// Open and close a separate overlay.
overlay1.open();
overlay1.close();
// Open the overlay we care about.
overlay2.open();
// Immediately close the first overlay.
// Wait for infinite recursion, otherwise we win.
runAfterClose(overlay2, function() {
done();
})
});
});
suite('z-ordering', function() {
var overlays;
var originalMinimumZ;
var overlay1, overlay2;
setup(function() {
overlays = fixture('multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
originalMinimumZ = Polymer.IronOverlayManager._minimumZ;
});
@ -405,9 +522,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// for iframes
test('default z-index is greater than 100', function(done) {
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 100, 'overlays[0] z-index is <= 100');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 100, 'overlay1 z-index is <= 100');
done();
});
});
@ -415,9 +532,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('ensureMinimumZ() effects z-index', function(done) {
Polymer.IronOverlayManager.ensureMinimumZ(1000);
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done();
});
});
@ -426,155 +543,69 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.IronOverlayManager.ensureMinimumZ(1000);
Polymer.IronOverlayManager.ensureMinimumZ(500);
runAfterOpen(overlays[0], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlays[0] z-index is <= 1000');
runAfterOpen(overlay1, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
assert.isTrue(styleZ > 1000, 'overlay1 z-index is <= 1000');
done();
});
});
});
suite('overlays with backdrop', function() {
var overlays;
setup(function() {
overlays = fixture('backdrop-multiple');
});
test('backdrop appears behind the overlay', function(done) {
runAfterOpen(overlays[0], function() {
assert.isDefined(overlays[0].backdropElement, 'backdrop is defined');
assert.isDefined(overlays[0].backdropElement.parentNode, 'backdrop is inserted in the DOM');
styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
backdropStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index than backdrop');
done();
});
});
test('backdrop is removed when the element is removed from DOM', function(done) {
runAfterOpen(overlays[0], function() {
var backdrop = overlays[0].backdropElement;
Polymer.dom(backdrop.parentNode).removeChild(backdrop);
Polymer.dom.flush();
assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM');
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), (0));
done();
});
});
test('backdrop is opened when iron-overlay-open-completed fires', function(done) {
runAfterOpen(overlays[0], function() {
assert.isTrue(overlays[0].backdropElement.opened, 'backdrop is opened');
done();
});
});
test('manager backdrops immediately updated on opened changes', function() {
overlays[0].opened = true;
assert.equal(overlays[0]._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
overlays[0].opened = false;
assert.equal(overlays[0]._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
});
test('with-backdrop sets tabindex=-1 and removes it', function() {
var overlay = fixture('basic');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '-1', 'tabindex is -1');
overlay.withBackdrop = false;
assert.isFalse(overlay.hasAttribute('tabindex'), 'tabindex removed');
});
test('with-backdrop does not override tabindex if already set', function() {
var overlay = fixture('basic');
overlay.setAttribute('tabindex', '1');
overlay.withBackdrop = true;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is 1');
overlay.withBackdrop = false;
assert.equal(overlay.getAttribute('tabindex'), '1', 'tabindex is still 1');
});
test('with-backdrop traps the focus within the overlay', function(done) {
// Add button to try to "steal" focus.
var button = document.createElement('button');
var focusSpy = sinon.stub();
button.addEventListener('focus', focusSpy, true);
document.body.appendChild(button);
var overlay = fixture('autofocus');
overlay.withBackdrop = true;
runAfterOpen(overlay, function() {
// Try to steal the focus
MockInteractions.focus(button);
assert.isFalse(focusSpy.called, 'button in body did not get the focus');
assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), document.activeElement, '<button autofocus> is focused');
button.parentNode.removeChild(button);
done();
});
});
});
suite('multiple overlays with backdrop', function() {
var overlays;
var overlay1, overlay2, overlay3;
setup(function() {
overlays = fixture('backdrop-multiple');
var f = fixture('multiple');
overlay1 = f[0];
overlay2 = f[1];
overlay3 = f[2];
overlay1.withBackdrop = overlay2.withBackdrop = overlay3.withBackdrop = true;
});
test('multiple overlays share the same backdrop', function() {
assert.isTrue(overlays[0].backdropElement === overlays[1].backdropElement, 'overlays[0] has the same backdrop element as overlays[1]');
assert.isTrue(overlay1.backdropElement === overlay2.backdropElement, 'overlay1 and overlay2 have the same backdrop element');
assert.isTrue(overlay1.backdropElement === overlay3.backdropElement, 'overlay1 and overlay3 have the same backdrop element');
});
test('newest overlay appear on top', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(style1Z > styleZ, 'overlays[1] has higher z-index than overlays[0]');
assert.isTrue(styleZ > bgStyleZ, 'overlays[0] has higher z-index than backdrop');
done();
});
});
test('only one iron-overlay-backdrop in the DOM', function() {
// Open them all.
overlay1.opened = overlay2.opened = overlay3.opened = true;
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1, 'only one backdrop element in the DOM');
});
test('updating with-backdrop to false closes backdrop', function(done) {
// no waiting for animations
overlays[0].backdropElement.style.transitionDuration = '0s';
runAfterOpen(overlays[0], function() {
overlays[0].withBackdrop = false;
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
overlays[0].backdropElement.style.transitionDuration = '';
done();
});
});
test('backdrop is removed when toggling overlay opened', function(done) {
overlays[0].open();
assert.isObject(overlays[0].backdropElement.parentNode, 'backdrop is immediately inserted in the document');
overlays[0].close();
// Wait a tick (overlay will call backdropElement.close in the _openChangedAsync)
setTimeout(function() {
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
test('iron-overlay-backdrop is removed from the DOM when all overlays with backdrop are closed', function(done) {
// Open & close them all.
overlay1.opened = overlay2.opened = overlay3.opened = true;
overlay1.opened = overlay2.opened = overlay3.opened = false;
Polymer.Base.async(function() {
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'backdrop element removed from the DOM');
done();
}, 1);
});
test('newest overlay appear on top', function(done) {
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > styleZ, 'overlay2 has higher z-index than overlay1');
assert.isTrue(styleZ > bgStyleZ, 'overlay1 has higher z-index than backdrop');
done();
});
});
});
test('updating with-backdrop updates z-index', function(done) {
runAfterOpen(overlays[0], function() {
runAfterOpen(overlays[1], function() {
overlays[0].withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop');
runAfterOpen(overlay1, function() {
runAfterOpen(overlay2, function() {
overlay1.withBackdrop = false;
var styleZ = parseInt(window.getComputedStyle(overlay1).zIndex, 10);
var style1Z = parseInt(window.getComputedStyle(overlay2).zIndex, 10);
var bgStyleZ = parseInt(window.getComputedStyle(overlay1.backdropElement).zIndex, 10);
assert.isTrue(style1Z > bgStyleZ, 'overlay2 has higher z-index than backdrop');
assert.isTrue(styleZ < bgStyleZ, 'overlay1 has lower z-index than backdrop');
done();
});
});
@ -582,44 +613,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
suite('multiple overlays with backdrop implemented in different elements', function () {
var overlays;
setup(function() {
overlays = fixture('backdrop-different-elements');
});
test('multiple overlays share the same backdrop', function() {
assert.equal(overlays[0].backdropElement, overlays[1].backdropElement);
});
test('when overlays close, the backdrop is closed', function(done) {
runAfterOpen(overlays[0], function () {
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1);
// After second overlay is closed, both backdrops should be hidden
overlays[1].addEventListener('iron-overlay-closed', function() {
Polymer.Base.async(function () {
assert.isFalse(overlays[1].backdropElement.opened, 'second overlay backdrop is closed');
assert.isFalse(overlays[0].backdropElement.opened, 'first overlay backdrop is closed');
done();
}, 1);
});
// After second overlay is opened, immediately close it
overlays[1].addEventListener('iron-overlay-opened', function() {
Polymer.Base.async(function () {
overlays[1].close();
}, 1);
});
// Immediately close first overlay and open the other one
overlays[0].close();
overlays[1].open();
});
});
})
suite('a11y', function() {
test('overlay has aria-hidden=true when opened', function() {
@ -632,8 +625,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
})
</script>
</body>
</html>

View file

@ -1,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,
@ -24,15 +24,16 @@
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
"_release": "1.0.2",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
"tag": "v1.0.3",
"commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
},
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
"_target": "^1.0.0",

View file

@ -0,0 +1,25 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: fs6PoLBRc5z3vn6PWJTkxmGWTHnHVcXx2c7sb7wUlLFLjWUegb93X5gAUhAQvvLvFYT8uMYxT7sNsP15O16CH9OWS8h6ZbgaPp61zRJXvGN+pOtohOloanjzANzsYNFsV3LKEFg8/BULqQAKkRAdsg4hXfMWDzPvCGl1++y5mGc=
- secure: gm+c5R0tFY/GJfKOnfV3J0IADe7QSzo5wZvRq4wZnroK9gBixuI66fq0dhRFtMjkc3dip1h+iqwmRqY8bKoMriCcl8J8ya7mG92sUTz57H7Sr6hxoYDdT4v+JUrQ+iZmTczh77IAQDZrAnxQIeEnBsLezidZD4b+EAYCICvL9WE=
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

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

View file

@ -1,6 +1,6 @@
{
"name": "iron-resizable-behavior",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Coordinates the flow of resizeable elements",
"private": true,
@ -24,7 +24,8 @@
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
},
"ignore": []
}

View file

@ -17,11 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
* size or hidden state of their children) and "resizables" (elements that need to be
* notified when they are resized or un-hidden by their parents in order to take
* action on their new measurements).
*
* Elements that perform measurement should add the `IronResizableBehavior` behavior to
* their element definition and listen for the `iron-resize` event on themselves.
* This event will be fired when they become showing after having been hidden,
* when they are resized explicitly by another resizable, or when the window has been
* resized.
*
* Note, the `iron-resize` event is non-bubbling.
*
* @polymerBehavior Polymer.IronResizableBehavior

View file

@ -82,7 +82,7 @@ Notes on Polyfill compatibility in tests:
suite('x-resizer-parent', function() {
test('notify resizables from window', function(done) {
test('notify resizables from window', function() {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a),
@ -91,22 +91,13 @@ Notes on Polyfill compatibility in tests:
ListenForResize(testEl.$.shadow1d.$.resizable)
];
setTimeout(function() {
try {
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
RemoveListeners(listeners);
});
test('notify resizables from parent', function(done) {
test('notify resizables from parent', function() {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a),
@ -115,43 +106,33 @@ Notes on Polyfill compatibility in tests:
ListenForResize(testEl.$.shadow1d.$.resizable)
];
setTimeout(function() {
try {
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('detach resizables then notify parent', function(done) {
var listeners = [
ListenForResize(testEl.$.parent),
ListenForResize(testEl.$.child1a, false),
ListenForResize(testEl.$.child1b),
ListenForResize(testEl.$.shadow1c.$.resizable, false),
ListenForResize(testEl.$.shadow1d.$.resizable)
];
test('detach resizables then notify parent', function() {
sinon.spy(testEl.$.child1a, 'notifyResize');
sinon.spy(testEl.$.shadow1c.$.resizable, 'notifyResize');
sinon.spy(testEl.$.child1b, 'notifyResize');
sinon.spy(testEl.$.shadow1d.$.resizable, 'notifyResize');
var el = Polymer.dom(testEl.root).querySelector('#child1a');
var firstElementToRemove = testEl.$.child1a;
var firstElementParent = Polymer.dom(firstElementToRemove).parentNode;
var secondElementToRemove = testEl.$.shadow1c.$.resizable;
var secondElementParent = Polymer.dom(secondElementToRemove).parentNode;
el.parentNode.removeChild(el);
el = Polymer.dom(testEl.root).querySelector('#shadow1c');
el.parentNode.removeChild(el);
Polymer.dom(firstElementParent).removeChild(firstElementToRemove);
Polymer.dom(secondElementParent).removeChild(secondElementToRemove);
setTimeout(function() {
try {
testEl.$.parent.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
Polymer.dom.flush();
testEl.$.parent.notifyResize();
expect(testEl.$.child1a.notifyResize.callCount).to.be.equal(0);
expect(testEl.$.shadow1c.$.resizable.notifyResize.callCount).to.be.equal(0);
expect(testEl.$.child1b.notifyResize.callCount).to.be.equal(1);
expect(testEl.$.shadow1d.$.resizable.notifyResize.callCount).to.be.equal(1);
});
test('detach parent then notify window', function(done) {
@ -183,7 +164,7 @@ Notes on Polyfill compatibility in tests:
suite('x-resizer-parent-filtered', function() {
test('notify resizables from window', function(done) {
test('notify resizables from window', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a),
@ -194,19 +175,12 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.child2a;
setTimeout(function() {
try {
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
window.dispatchEvent(new CustomEvent('resize', { bubbles: false }));
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('notify resizables from parent', function(done) {
test('notify resizables from parent', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a),
@ -217,19 +191,12 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.child2a;
setTimeout(function() {
try {
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
test('detach resizables then notify parent', function(done) {
test('detach resizables then notify parent', function() {
var listeners = [
ListenForResize(testEl.$.parentFiltered),
ListenForResize(testEl.$.child2a, false),
@ -245,16 +212,9 @@ Notes on Polyfill compatibility in tests:
testEl.$.parentFiltered.active = testEl.$.shadow2d.$.resizable;
setTimeout(function() {
try {
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
done();
} catch (e) {
done(e);
}
}, 0);
testEl.$.parentFiltered.notifyResize();
expect(pendingNotifications).to.be.eql(0);
RemoveListeners(listeners);
});
});
});

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,10 +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">
<title>Tests</title>
@ -20,13 +16,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'basic.html',
'iron-resizable-behavior.html'
'iron-resizable-behavior.html',
'basic.html?dom=shadow',
'iron-resizable-behavior.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View file

@ -74,6 +74,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
suite('window\'s resize', function() {
test('causes all iron-resize events to fire once', function() {
window.dispatchEvent(new CustomEvent('resize'));
Polymer.dom.flush();
expect(resizable.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable1.ironResizeCount).to.be.equal(2);
expect(resizable.$.childResizable2.ironResizeCount).to.be.equal(2);

View file

@ -1,6 +1,6 @@
{
"name": "iron-selector",
"version": "1.2.1",
"version": "1.2.4",
"description": "Manages a set of elements that can be selected",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
@ -30,11 +30,11 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.2.1",
"_release": "1.2.4",
"_resolution": {
"type": "version",
"tag": "v1.2.1",
"commit": "1e6a7ee05e5ff350472ffc1ee780f145a7606b7b"
"tag": "v1.2.4",
"commit": "1ee4e2e11a9e5118320987d93fc2c03ae9a489f4"
},
"_source": "git://github.com/PolymerElements/iron-selector.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-selector",
"version": "1.2.1",
"version": "1.2.4",
"description": "Manages a set of elements that can be selected",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",

View file

@ -46,7 +46,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
observers: [
'_updateSelected(attrForSelected, selectedValues)'
'_updateSelected(selectedValues)'
],
/**
@ -77,6 +77,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
(this.selectedValues != null && this.selectedValues.length);
},
_updateAttrForSelected: function() {
if (!this.multi) {
Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
} else if (this._shouldUpdateSelection) {
this.selectedValues = this.selectedItems.map(function(selectedItem) {
return this._indexToValue(this.indexOf(selectedItem));
}, this).filter(function(unfilteredValue) {
return unfilteredValue != null;
}, this);
}
},
_updateSelected: function() {
if (this.multi) {
this._selectMulti(this.selectedValues);
@ -86,11 +98,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_selectMulti: function(values) {
this._selection.clear();
if (values) {
for (var i = 0; i < values.length; i++) {
this._selection.setItemSelected(this._valueToItem(values[i]), true);
var selectedItems = this._valuesToItems(values);
// clear all but the current selected items
this._selection.clear(selectedItems);
// select only those not selected yet
for (var i = 0; i < selectedItems.length; i++) {
this._selection.setItemSelected(selectedItems[i], true);
}
} else {
this._selection.clear();
}
},
@ -113,6 +130,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this.splice('selectedValues',i,1);
}
this._selection.setItemSelected(this._valueToItem(value), unselected);
},
_valuesToItems: function(values) {
return (values == null) ? null : values.map(function(value) {
return this._valueToItem(value);
}, this);
}
};

View file

@ -136,7 +136,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
observers: [
'_updateSelected(attrForSelected, selected)'
'_updateAttrForSelected(attrForSelected)',
'_updateSelected(selected)'
],
created: function() {
@ -148,7 +149,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._observer = this._observeItems(this);
this._updateItems();
if (!this._shouldUpdateSelection) {
this._updateSelected(this.attrForSelected,this.selected)
this._updateSelected();
}
this._addListener(this.activateEvent);
},
@ -241,6 +242,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this._setItems(nodes);
},
_updateAttrForSelected: function() {
if (this._shouldUpdateSelection) {
this.selected = this._indexToValue(this.indexOf(this.selectedItem));
}
},
_updateSelected: function() {
this._selectSelected(this.selected);
},
@ -310,7 +317,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
// Let other interested parties know about the change so that
// we don't have to recreate mutation observers everywher.
// we don't have to recreate mutation observers everywhere.
this.fire('iron-items-changed', mutations, {
bubbles: false,
cancelable: false

View file

@ -69,16 +69,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
*/
setItemSelected: function(item, isSelected) {
if (item != null) {
if (isSelected) {
this.selection.push(item);
} else {
var i = this.selection.indexOf(item);
if (i >= 0) {
this.selection.splice(i, 1);
if (isSelected !== this.isSelected(item)) {
// proceed to update selection only if requested state differs from current
if (isSelected) {
this.selection.push(item);
} else {
var i = this.selection.indexOf(item);
if (i >= 0) {
this.selection.splice(i, 1);
}
}
if (this.selectCallback) {
this.selectCallback(item, isSelected);
}
}
if (this.selectCallback) {
this.selectCallback(item, isSelected);
}
}
},

View file

@ -1,15 +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">
<title>Tests</title>
@ -19,7 +15,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'activate-event.html',
'basic.html',
@ -29,10 +24,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'selected-attribute.html',
'template-repeat.html',
'content.html',
'excluded-local-names.html'
'excluded-local-names.html',
'activate-event.html?dom=shadow',
'basic.html?dom=shadow',
'multi.html?dom=shadow',
'next-previous.html?dom=shadow',
'selected-attribute.html?dom=shadow',
'template-repeat.html?dom=shadow',
'content.html?dom=shadow',
'excluded-local-names.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View file

@ -93,8 +93,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('set multi-selection via tap', function() {
// set selectedValues
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
MockInteractions.tap(s.children[0]);
MockInteractions.tap(s.children[2]);
// check selected class
assert.isTrue(s.children[0].classList.contains('iron-selected'));
assert.isTrue(s.children[2].classList.contains('iron-selected'));
@ -104,31 +104,106 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.equal(s.selectedItems[1], s.children[2]);
});
test('fire iron-select/deselect events', function() {
// setup listener for iron-select event
var selectEventCounter = 0;
test('fire iron-select/deselect events when selectedValues changes', function() {
// setup listener for iron-select/deselect events
var items = [s.children[0], s.children[1], s.children[2]],
selectEventCounters = [0, 0, 0],
deselectEventCounters = [0, 0, 0];
s.addEventListener('iron-select', function(e) {
selectEventCounter++;
selectEventCounters[items.indexOf(e.detail.item)]++;
});
// setup listener for core-deselect event
var deselectEventCounter = 0;
s.addEventListener('iron-deselect', function(e) {
deselectEventCounter++;
deselectEventCounters[items.indexOf(e.detail.item)]++;
});
// tap to select an item
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
// programatically select values 0 and 1 (both fire select)
s.selectedValues = [0, 1];
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
s.selectedValues = [1, 2];
// programatically deselect all values (1 and 2 fire deselect)
s.selectedValues = [];
// check events
assert.equal(selectEventCounter, 1);
assert.equal(deselectEventCounter, 0);
// tap on already selected item should deselect it
s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
// check selectedValues
assert.equal(s.selectedValues.length, 0);
// check class
assert.isFalse(s.children[0].classList.contains('iron-selected'));
assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounters[0], 1);
assert.equal(selectEventCounters[1], 1);
assert.equal(deselectEventCounters[1], 1);
assert.equal(selectEventCounters[2], 1);
assert.equal(deselectEventCounters[2], 1);
});
test('fire iron-select/deselect events when toggling items', function() {
// setup listener for iron-select/deselect events
var items = [s.children[0], s.children[1], s.children[2]],
selectEventCounters = [0, 0, 0],
deselectEventCounters = [0, 0, 0];
s.addEventListener('iron-select', function(e) {
selectEventCounters[items.indexOf(e.detail.item)]++;
});
s.addEventListener('iron-deselect', function(e) {
deselectEventCounters[items.indexOf(e.detail.item)]++;
});
// tap to select items 0 and 1 (both fire select)
MockInteractions.tap(items[0]);
MockInteractions.tap(items[1]);
// programatically select values 1 and 2 (2 fires select, 0 fires deselect)
s.selectedValues = [1, 2];
// tap to deselect items 1 and 2 (both fire deselect)
MockInteractions.tap(items[1]);
MockInteractions.tap(items[2]);
// check events
assert.equal(selectEventCounter, 1);
assert.equal(deselectEventCounter, 1);
assert.equal(selectEventCounters[0], 1);
assert.equal(deselectEventCounters[0], 1);
assert.equal(selectEventCounters[1], 1);
assert.equal(deselectEventCounters[1], 1);
assert.equal(selectEventCounters[2], 1);
assert.equal(deselectEventCounters[2], 1);
});
test('toggle iron-selected class when toggling items selection', function() {
// setup listener for iron-item-select/deselect events
var item0 = s.children[0], item1 = s.children[1];
assert.isFalse(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// tap to select item 0 (add iron-selected class)
MockInteractions.tap(item0);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// tap to select item 1 (add iron-selected class)
MockInteractions.tap(item1);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isTrue(item1.classList.contains('iron-selected'));
// tap to deselect item 1 (remove iron-selected class)
MockInteractions.tap(item1);
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
// programatically select both values (1 add iron-selected class)
s.selectedValues = [0, 1];
assert.isTrue(item0.classList.contains('iron-selected'));
assert.isTrue(item1.classList.contains('iron-selected'));
// programatically deselect all values (both removes iron-selected class)
s.selectedValues = [];
assert.isFalse(item0.classList.contains('iron-selected'));
assert.isFalse(item1.classList.contains('iron-selected'));
});
test('fires selected-values-changed when selection changes', function() {
@ -180,10 +255,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.dom(s).removeChild(lastChild);
Polymer.Base.async(function() {
expect(s.selectedItems.length).to.be.equal(1);
done();
});
Polymer.dom.flush();
expect(s.selectedItems.length).to.be.equal(1);
expect(s.selectedItems[0]).to.be.equal(firstChild);
done();
});
});

View file

@ -43,6 +43,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="test-attr-change">
<template>
<iron-selector id="selector" attr-for-selected="data-x" selected="x-1">
<div data-x="x-1" data-y="y-1">1</div>
<div data-x="x-2" data-y="y-2">2</div>
<div data-x="x-3" data-y="y-3">3</div>
</iron-selector>
</template>
</test-fixture>
<test-fixture id="test-attr-change-multi">
<template>
<iron-selector multi id="selector"
attr-for-selected="data-x"
selected-values='["x-1","x-2"]'>
<div data-x="x-1" data-y="y-1">1</div>
<div data-x="x-2" data-y="y-2">2</div>
<div data-x="x-3" data-y="y-3">3</div>
</iron-selector>
</template>
</test-fixture>
<script>
suite('selected attributes', function() {
@ -66,6 +88,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
suite('changing attrForSelected', function() {
var s;
setup(function () {
s = fixture('test-attr-change');
});
test('changing selectedAttribute', function() {
Polymer.dom.flush();
s.attrForSelected = 'data-y';
assert.equal(s.selected, 'y-1');
});
});
suite('changing attrForSelected in multi', function() {
var s;
setup(function () {
s = fixture('test-attr-change-multi');
});
test('changing selectedAttribute', function() {
Polymer.dom.flush();
s.attrForSelected = 'data-y';
assert.equal(s.selectedValues.length, 2);
assert.equal(s.selectedValues[0],'y-1');
assert.equal(s.selectedValues[1],'y-2');
});
});
</script>
</body>

View file

@ -1,6 +1,6 @@
{
"name": "paper-input",
"version": "1.1.5",
"version": "1.1.6",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
@ -33,7 +33,7 @@
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
@ -47,11 +47,11 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.1.5",
"_release": "1.1.6",
"_resolution": {
"type": "version",
"tag": "v1.1.5",
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17"
"tag": "v1.1.6",
"commit": "d918956322b733ee7673aec6e1ce9939aadb4c63"
},
"_source": "git://github.com/polymerelements/paper-input.git",
"_target": "^1.0.9",

View file

@ -5,6 +5,11 @@ 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
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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).
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.
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
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:
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, #40
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:

View file

@ -1,6 +1,6 @@
{
"name": "paper-input",
"version": "1.1.5",
"version": "1.1.6",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
@ -33,7 +33,7 @@
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
"iron-input": "PolymerElements/iron-input#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {

View file

@ -365,13 +365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
listeners: {
'addon-attached': '_onAddonAttached',
'focus': '_onFocus'
},
observers: [
'_focusedControlStateChanged(focused)'
],
keyBindings: {
'shift+tab:keydown': '_onShiftTabDown'
},
@ -440,12 +435,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
/**
* Forward focus to inputElement
* Forward focus to inputElement. Overriden from IronControlState.
*/
_onFocus: function() {
if (!this._shiftTabPressed) {
_focusBlurHandler: function(event) {
if (this._shiftTabPressed)
return;
Polymer.IronControlState._focusBlurHandler.call(this, event);
// Forward the focus to the nested input.
if (this.focused)
this._focusableElement.focus();
}
},
/**
@ -497,24 +497,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return placeholder || alwaysFloatLabel;
},
_focusedControlStateChanged: function(focused) {
// IronControlState stops the focus and blur events in order to redispatch them on the host
// element, but paper-input-container listens to those events. Since there are more
// pending work on focus/blur in IronControlState, I'm putting in this hack to get the
// input focus state working for now.
if (!this.$.container) {
this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
if (!this.$.container) {
return;
}
}
if (focused) {
this.$.container._onFocus();
} else {
this.$.container._onBlur();
}
},
_updateAriaLabelledBy: function() {
var label = Polymer.dom(this.root).querySelector('label');
if (!label) {

View file

@ -72,13 +72,13 @@ Custom property | Description | Default
state.value = state.value || '';
// Account for the textarea's new lines.
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
var counter = state.value.length;
if (state.inputElement.hasAttribute('maxlength')) {
str += '/' + state.inputElement.getAttribute('maxlength');
counter += '/' + state.inputElement.getAttribute('maxlength');
}
this._charCounterStr = str;
this._charCounterStr = counter;
}
});
</script>

View file

@ -10,7 +10,6 @@ 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="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/typography.html">
@ -74,8 +73,8 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--error-color`
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
`--paper-input-container` | Mixin applied to the container | `{}`
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
@ -125,8 +124,9 @@ This element is `display:block` by default, but you can set the `inline` attribu
.focused-line {
@apply(--layout-fit);
background: var(--paper-input-container-focus-color, --default-primary-color);
background: var(--paper-input-container-focus-color, --primary-color);
height: 2px;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale3d(0,1,1);
@ -145,7 +145,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.underline.is-invalid .focused-line {
background: var(--paper-input-container-invalid-color, --google-red-500);
background: var(--paper-input-container-invalid-color, --error-color);
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform 0.25s;
@ -157,8 +157,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
.unfocused-line {
@apply(--layout-fit);
height: 1px;
background: var(--paper-input-container-color, --secondary-text-color);
height: 1px;
@apply(--paper-input-container-underline);
}
@ -174,6 +174,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
.label-and-input-container {
@apply(--layout-flex-auto);
@apply(--layout-relative);
width: 100%;
max-width: 100%;
}
@ -194,26 +195,26 @@ This element is `display:block` by default, but you can set the `inline` attribu
width: 100%;
font: inherit;
color: var(--paper-input-container-color, --secondary-text-color);
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
transition: transform 0.25s, width 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
@apply(--paper-font-common-nowrap);
@apply(--paper-font-subhead);
@apply(--paper-input-container-label);
@apply(--paper-transition-easing);
}
.input-content.label-is-floating ::content label,
.input-content.label-is-floating ::content .paper-input-label {
-webkit-transform: translateY(-75%) scale(0.75);
transform: translateY(-75%) scale(0.75);
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
transition: transform 0.25s, width 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top;
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
original space now available */
width: 133%;
@apply(--paper-transition-easing);
@apply(--paper-input-container-label-floating);
}
@ -229,14 +230,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
.input-content.label-is-highlighted ::content label,
.input-content.label-is-highlighted ::content .paper-input-label {
color: var(--paper-input-container-focus-color, --default-primary-color);
color: var(--paper-input-container-focus-color, --primary-color);
@apply(--paper-input-container-label-focus);
}
.input-content.is-invalid ::content label,
.input-content.is-invalid ::content .paper-input-label {
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
}
.input-content.label-is-hidden ::content label,
@ -266,12 +267,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
::content [prefix] {
@apply(--paper-font-subhead);
@apply(--paper-input-prefix);
@apply(--layout-flex-none);
}
::content [suffix] {
@apply(--paper-font-subhead);
@apply(--paper-input-suffix);
@apply(--layout-flex-none);
}
@ -290,11 +293,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
}
.add-on-content.is-invalid ::content * {
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
}
.add-on-content.is-highlighted ::content * {
color: var(--paper-input-container-focus-color, --default-primary-color);
color: var(--paper-input-container-focus-color, --primary-color);
}
</style>

View file

@ -9,7 +9,6 @@ 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/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="paper-input-addon-behavior.html">
@ -28,7 +27,7 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
`--paper-input-container-invalid-color` | The foreground color of the error | `--error-color`
`--paper-input-error` | Mixin applied to the error | `{}`
-->
@ -39,7 +38,7 @@ Custom property | Description | Default
display: inline-block;
visibility: hidden;
color: var(--paper-input-container-invalid-color, --google-red-500);
color: var(--paper-input-container-invalid-color, --error-color);
@apply(--paper-font-caption);
@apply(--paper-input-error);

View file

@ -97,8 +97,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
assert.ok(counter, 'paper-input-char-counter exists');
// A new line counts as two characters.
assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
});
});

View file

@ -196,23 +196,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
input = fixture('basic');
});
test('focus/blur events fired on host element', function() {
var nFocusEvents = 0;
var nBlurEvents = 0;
// At the moment, it is very hard to correctly fire exactly
// one focus/blur events on a paper-input. This is because
// when a paper-input is focused, it needs to focus
// its underlying native input, which will also fire a `blur`
// event.
test('focus events fired on host element', function() {
input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement);
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
assert(!input.focused, 'input is blurred');
});
MockInteractions.focus(input.inputElement);
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
assert.isTrue(nBlurEvents >= 1, 'blur event fired');
MockInteractions.focus(input);
});
test('focus events fired on host element if nested element is focused', function() {
input.addEventListener('focus', function(event) {
assert(input.focused, 'input is focused');
});
MockInteractions.focus(input.inputElement);
});
test('blur events fired on host element', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input);
});
test('blur events fired on host element nested element is blurred', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input.inputElement);
});
test('focusing then bluring sets the focused attribute correctly', function() {
MockInteractions.focus(input);
assert(input.focused, 'input is focused');
MockInteractions.blur(input);
assert(!input.focused, 'input is blurred');
MockInteractions.focus(input.inputElement);
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement);
assert(!input.focused, 'input is blurred');
});
});
suite('focused styling (integration test)', function() {

View file

@ -32,12 +32,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="has-tabindex">
<template>
<paper-textarea tabindex="0"></paper-textarea>
</template>
</test-fixture>
<test-fixture id="label">
<template>
<paper-textarea label="foo"></paper-textarea>
@ -139,33 +133,50 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
input = fixture('basic');
});
test('focus/blur events fired on host element', function() {
var nFocusEvents = 0;
var nBlurEvents = 0;
// At the moment, it is very hard to correctly fire exactly
// one focus/blur events on a paper-textarea. This is because
// when a paper-textarea is focused, it needs to focus
// its underlying native textarea, which will also fire a `blur`
// event.
test('focus events fired on host element', function() {
input.addEventListener('focus', function(event) {
nFocusEvents += 1;
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement.textarea);
});
input.addEventListener('blur', function() {
nBlurEvents += 1;
assert(!input.focused, 'input is blurred');
});
MockInteractions.focus(input.inputElement.textarea);
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
assert.isTrue(nBlurEvents >= 1, 'blur event fired')
MockInteractions.focus(input);
});
test('focus a textarea with tabindex', function(done) {
var input = fixture('has-tabindex');
flush(function() {
assert.notEqual(document.activeElement, input._focusableElement);
MockInteractions.focus(input);
setTimeout(function() {
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
done();
}, 1);
})
test('focus events fired on host element if nested element is focused', function() {
input.addEventListener('focus', function(event) {
assert(input.focused, 'input is focused');
});
MockInteractions.focus(input.inputElement.textarea);
});
test('blur events fired on host element', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input);
});
test('blur events fired on host element nested element is blurred', function() {
MockInteractions.focus(input);
input.addEventListener('blur', function(event) {
assert(!input.focused, 'input is blurred');
});
MockInteractions.blur(input.inputElement.textarea);
});
test('focusing then bluring sets the focused attribute correctly', function() {
MockInteractions.focus(input);
assert(input.focused, 'input is focused');
MockInteractions.blur(input);
assert(!input.focused, 'input is blurred');
MockInteractions.focus(input.inputElement.textarea);
assert(input.focused, 'input is focused');
MockInteractions.blur(input.inputElement.textarea);
assert(!input.focused, 'input is blurred');
});
});

View file

@ -26,14 +26,14 @@
"web-component-tester": "*"
},
"private": true,
"homepage": "https://github.com/polymer/polymer",
"homepage": "https://github.com/Polymer/polymer",
"_release": "1.2.4",
"_resolution": {
"type": "version",
"tag": "v1.2.4",
"commit": "284332a905ddd60eab11901a82ac037976175cf8"
},
"_source": "git://github.com/polymer/polymer.git",
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.0.0",
"_originalSource": "polymer/polymer"
"_originalSource": "Polymer/polymer"
}