mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
finish dropping polymer
This commit is contained in:
parent
17af3ec3ef
commit
2c9913c69b
35
dashboard-ui/bower_components/document-register-element/.bower.json
vendored
Normal file
35
dashboard-ui/bower_components/document-register-element/.bower.json
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "document-register-element",
|
||||
"description": "A stand-alone working lightweight version of the W3C Custom Elements specification",
|
||||
"main": "./build/document-register-element.js",
|
||||
"ignore": [
|
||||
"test",
|
||||
".jshintrc",
|
||||
".travis.yml",
|
||||
".TO_LOCALE.md",
|
||||
".gitignore",
|
||||
".gitmodules",
|
||||
".npmignore",
|
||||
"benchmark",
|
||||
"dom4",
|
||||
"ie8",
|
||||
"src",
|
||||
"template",
|
||||
"package.json",
|
||||
"index.html",
|
||||
"testrhino.js",
|
||||
"Makefile"
|
||||
],
|
||||
"homepage": "https://github.com/WebReflection/document-register-element",
|
||||
"version": "0.5.4",
|
||||
"_release": "0.5.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.4",
|
||||
"commit": "d1d0e80a1c8a0e3f9369280fca834e2cbac2ce6e"
|
||||
},
|
||||
"_source": "https://github.com/WebReflection/document-register-element.git",
|
||||
"_target": "^0.5.4",
|
||||
"_originalSource": "document-register-element",
|
||||
"_direct": true
|
||||
}
|
19
dashboard-ui/bower_components/document-register-element/LICENSE.txt
vendored
Normal file
19
dashboard-ui/bower_components/document-register-element/LICENSE.txt
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
Copyright (C) 2014-2015 by WebReflection
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
9
dashboard-ui/bower_components/document-register-element/RESOURCES.md
vendored
Normal file
9
dashboard-ui/bower_components/document-register-element/RESOURCES.md
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
# A list of resources related to Custom Elements and this polyfill
|
||||
|
||||
## Demo
|
||||
|
||||
* [Self contained Custom Elements via restyle()](http://webreflection.blogspot.co.uk/2014/08/self-contained-custom-elements-via.html) post and its cross browser [demo](https://webreflection.github.io/custom-element/)
|
||||
* [transform-3d](https://github.com/kentaromiura/transform-3d/) repo and [its demo](http://kentaromiura.github.io/transform-3d/)
|
||||
* comparison against Polymer and demos in [Why Web Components Are Ready For Production](http://developer.telerik.com/featured/web-components-ready-production/)
|
||||
* [W3C Specifications](http://w3c.github.io/webcomponents/spec/custom/)
|
||||
* [HTML5 Rocks Article](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) except for the Shadow DOM being completely different specification
|
12
dashboard-ui/bower_components/document-register-element/basic.html
vendored
Normal file
12
dashboard-ui/bower_components/document-register-element/basic.html
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>testing my-element</title>
|
||||
<script src="build/document-register-element.js"></script>
|
||||
<script src="test/my-element.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-element>
|
||||
some content
|
||||
</my-element>
|
||||
</body>
|
23
dashboard-ui/bower_components/document-register-element/bower.json
vendored
Normal file
23
dashboard-ui/bower_components/document-register-element/bower.json
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "document-register-element",
|
||||
"description": "A stand-alone working lightweight version of the W3C Custom Elements specification",
|
||||
"main": "./build/document-register-element.js",
|
||||
"ignore": [
|
||||
"test",
|
||||
".jshintrc",
|
||||
".travis.yml",
|
||||
".TO_LOCALE.md",
|
||||
".gitignore",
|
||||
".gitmodules",
|
||||
".npmignore",
|
||||
"benchmark",
|
||||
"dom4",
|
||||
"ie8",
|
||||
"src",
|
||||
"template",
|
||||
"package.json",
|
||||
"index.html",
|
||||
"testrhino.js",
|
||||
"Makefile"
|
||||
]
|
||||
}
|
52
dashboard-ui/bower_components/document-register-element/testrunner.js
vendored
Normal file
52
dashboard-ui/bower_components/document-register-element/testrunner.js
vendored
Normal file
@ -0,0 +1,52 @@
|
||||
console.log('Loading: test.html');
|
||||
var page = require('webpage').create();
|
||||
var url = 'index.html';
|
||||
page.open(url, function (status) {
|
||||
if (status === 'success') {
|
||||
setTimeout(function () {
|
||||
var results = page.evaluate(function() {
|
||||
// remove the first node with the total from the following counts
|
||||
var passed = Math.max(0, document.querySelectorAll('.pass').length - 1);
|
||||
return {
|
||||
// retrieve the total executed tests number
|
||||
total: ''.concat(
|
||||
passed,
|
||||
' blocks (',
|
||||
document.querySelector('#wru strong').textContent.replace(/\D/g, ''),
|
||||
' single tests)'
|
||||
),
|
||||
passed: passed,
|
||||
failed: Math.max(0, document.querySelectorAll('.fail').length - 1),
|
||||
failures: [].map.call(document.querySelectorAll('.fail'), function (node) {
|
||||
return node.textContent;
|
||||
}),
|
||||
errored: Math.max(0, document.querySelectorAll('.error').length - 1),
|
||||
errors: [].map.call(document.querySelectorAll('.error'), function (node) {
|
||||
return node.textContent;
|
||||
})
|
||||
};
|
||||
});
|
||||
console.log('- - - - - - - - - -');
|
||||
console.log('total: ' + results.total);
|
||||
console.log('- - - - - - - - - -');
|
||||
console.log('passed: ' + results.passed);
|
||||
if (results.failed) {
|
||||
console.log('failures: \n' + results.failures.join('\n'));
|
||||
} else {
|
||||
console.log('failed: ' + results.failed);
|
||||
}
|
||||
if (results.errored) {
|
||||
console.log('errors: \n' + results.errors.join('\n'));
|
||||
} else {
|
||||
console.log('errored: ' + results.errored);
|
||||
}
|
||||
console.log('- - - - - - - - - -');
|
||||
if (0 < results.failed + results.errored) {
|
||||
status = 'failed';
|
||||
}
|
||||
phantom.exit(0);
|
||||
}, 2000);
|
||||
} else {
|
||||
phantom.exit(1);
|
||||
}
|
||||
});
|
@ -14,12 +14,12 @@
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.247",
|
||||
"_release": "1.4.247",
|
||||
"version": "1.4.248",
|
||||
"_release": "1.4.248",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.247",
|
||||
"commit": "f5678d95ef2db4849be318783e3efa76bf3c9698"
|
||||
"tag": "1.4.248",
|
||||
"commit": "099ebb1e4d7df48d6dbf182985a565b83b17cea7"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
@ -15,7 +15,9 @@
|
||||
<div class="selectContainer" style="flex-grow: 1; margin-bottom: 0;">
|
||||
<select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
|
||||
</div>
|
||||
<button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><i class="md-icon">search</i></button>
|
||||
<button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;">
|
||||
<i class="md-icon">search</i>
|
||||
</button>
|
||||
</div>
|
||||
<button is="emby-button" type="submit" class="raised btnSubmit block button-submit">${Search}</button>
|
||||
</form>
|
||||
|
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "iron-a11y-announcer",
|
||||
"version": "1.0.5",
|
||||
"description": "A singleton element that simplifies announcing text to screen readers.",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"a11y",
|
||||
"live"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
|
||||
},
|
||||
"main": "iron-a11y-announcer.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-announcer",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "2432d39a1693ccd728cbe7eb55810063737d3403"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-announcer.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-a11y-announcer"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-a11y-announcer/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -1 +0,0 @@
|
||||
bower_components
|
@ -1,23 +0,0 @@
|
||||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: QlyQxWnziNgzWqptOtM0Oq1s/q6YHT/GPuslA31yC0nex7Wi6X9DFoF5rNlDEY0Y6WxCh8xzsZpwXrI9vZypgKoZlAwO1e3RLDsGV0APPrWg66MyImAwlHAJolvJg+ASsLJ8pm9nxMP/xapRamciqUMTUTeZh0V/5SR82BXQCf3zXe+9cMmAFNXBrIg6LDCm77AwW+1vkE/IZAL1oShSBwXEybn9kpYsdCiOGdnvMlChhaeqRlOUXkr3LHPUDtV8hbd2EswmPeHSV+RGdB/UFyRGa4g7gPgqtz7U2FS0/BqT0G2iJlAXGCttJnS6fXwyCriREplYjXzqrX0MeRWHD5vNxAucO/Va1n2tHEmJM3OhIYgO8VDM8S3nRRUDE/ifSjsu1UgBN7b1vml0zWo7rdvpD8fedx6+g4ph390kg5XRFNJZJ03YijfcNVUfnOTEWt9LntGRq5aKPB6RSbEvkuZFjLGHHD/xQu2LfyIjmueIWJNk4JeCNrm3zFPMhBAZfu7WTJPTk3dZ2L+0mty1QbaJ/lyTWIBYbTVBwwHzXKrPbgg5u/9e6DjhT8Zg/eJvmN/+sXAlUqnmTAE9coQ0LIivg6COWPoRDmdGl2uMygiCaLkFAy4sqhjP99Aq5/ekZWXUrTTa4NGw2qnvM4JY9YcEzUC0ZqzM11gj8x8ATi0=
|
||||
- secure: d0wz93AwXyNVmCr33od+TFC51nZgUzcdwHiJWxX0E+msZ8VgYCjj21D6OOZy84O7vYiPFy8vO03dvyqkj1uclEvfu2YlfiEaRxifKaxN6mQx142WjBtdHFjEUfBJR5eqm5qSeGj7aSZzPgerUl6yAkYH5tFldBatevF5Ax98Yr1dCsgpegsLCmBmusPH7tERnBilalcvXKVBfRXrnrkFkVoWroBb04W79aZSTlLGTlpBJCzR9Xe7RiXqnanSQQb1LjyCl55P0NvVVRjwpoVnikRqkIV/jehcNfIiJSC/vetepqqUehD6RdP2T8Nio7YvlLtXnW9vptlKYL2uZjhg23DyhgGW/4ZPaIABWVBqVUBbyaX6GCXo3EMyQcZhi17qCWEKnFGCrorC/4ZM6A0kJ+olOfQxszf9HrAX8+9DCaiKscn2Lz+ON/opFKFRAQngCJ9swBc27twavUxx4qNzOVJLdH8oGhCdl5DA4mgGGDWZz463X0HzagGUpi/RfME26uQnTkyK8eErL2yac+1VmA/QOx0RkYlrZ/pIEywkZPWusjJepCm9nlZGylaBr2mDpk8Kea+7IytO6sefiBwjX1RiqmnjnszO3jb/w5s0giUItWuFmDr14sOaFmj6wQB643eSGi42LSPG+FMea1RwUupyEPeLZq/aoJ0jmewGLv4=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '46.0'
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
|
||||
dist: trusty
|
@ -1,77 +0,0 @@
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,33 +0,0 @@
|
||||
{
|
||||
"name": "iron-a11y-announcer",
|
||||
"version": "1.0.5",
|
||||
"description": "A singleton element that simplifies announcing text to screen readers.",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"a11y",
|
||||
"live"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-a11y-announcer.git"
|
||||
},
|
||||
"main": "iron-a11y-announcer.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta 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">
|
||||
|
||||
<title>iron-a11y-announcer demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="x-announces.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<div class="vertical-section">
|
||||
<span>Note: in order to hear the announcements, be sure to turn on your favorite screen reader!</span>
|
||||
<x-announces>Hello, my name is Ava.</x-announces>
|
||||
<x-announces>This true sentence is false.</x-announces>
|
||||
<x-announces>Are you paying attention?</x-announces>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,60 +0,0 @@
|
||||
<!--
|
||||
@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
|
||||
-->
|
||||
<!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../iron-a11y-announcer.html">
|
||||
|
||||
<dom-module id="x-announces">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
paper-button {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-button on-tap="_onTapAnnounce" raised>Announce</paper-button>
|
||||
<span id="content" aria-hidden="true">
|
||||
<content></content>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-announces',
|
||||
|
||||
attached: function() {
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
},
|
||||
|
||||
_onTapAnnounce: function() {
|
||||
this.fire('iron-announce', {
|
||||
text: this.$.content.textContent.trim()
|
||||
}, {
|
||||
bubbles: true
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
@ -1,28 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-a11y-announcer</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,124 +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">
|
||||
|
||||
<!--
|
||||
`iron-a11y-announcer` is a singleton element that is intended to add a11y
|
||||
to features that require on-demand announcement from screen readers. In
|
||||
order to make use of the announcer, it is best to request its availability
|
||||
in the announcing element.
|
||||
|
||||
Example:
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-chatty',
|
||||
|
||||
attached: function() {
|
||||
// This will create the singleton element if it has not
|
||||
// been created yet:
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
}
|
||||
});
|
||||
|
||||
After the `iron-a11y-announcer` has been made available, elements can
|
||||
make announces by firing bubbling `iron-announce` events.
|
||||
|
||||
Example:
|
||||
|
||||
this.fire('iron-announce', {
|
||||
text: 'This is an announcement!'
|
||||
}, { bubbles: true });
|
||||
|
||||
Note: announcements are only audible if you have a screen reader enabled.
|
||||
|
||||
@group Iron Elements
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="iron-a11y-announcer">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
clip: rect(0px,0px,0px,0px);
|
||||
}
|
||||
</style>
|
||||
<div aria-live$="[[mode]]">[[_text]]</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer.IronA11yAnnouncer = Polymer({
|
||||
is: 'iron-a11y-announcer',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The value of mode is used to set the `aria-live` attribute
|
||||
* for the element that will be announced. Valid values are: `off`,
|
||||
* `polite` and `assertive`.
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
value: 'polite'
|
||||
},
|
||||
|
||||
_text: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
Polymer.IronA11yAnnouncer.instance = this;
|
||||
}
|
||||
|
||||
document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Cause a text string to be announced by screen readers.
|
||||
*
|
||||
* @param {string} text The text that should be announced.
|
||||
*/
|
||||
announce: function(text) {
|
||||
this._text = '';
|
||||
this.async(function() {
|
||||
this._text = text;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
_onIronAnnounce: function(event) {
|
||||
if (event.detail && event.detail.text) {
|
||||
this.announce(event.detail.text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Polymer.IronA11yAnnouncer.instance = null;
|
||||
|
||||
Polymer.IronA11yAnnouncer.requestAvailability = function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
Polymer.IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');
|
||||
}
|
||||
|
||||
document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
|
||||
};
|
||||
})();
|
||||
|
||||
</script>
|
||||
</dom-module>
|
@ -1,24 +0,0 @@
|
||||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>iron-a11y-announcer tests</title>
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'iron-a11y-announcer.html',
|
||||
'iron-a11y-announcer.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
@ -1,56 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>iron-a11y-announcer</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-announcer.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="Announcer">
|
||||
<template>
|
||||
<iron-a11y-announcer></iron-a11y-announcer>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('<iron-a11y-announcer>', function() {
|
||||
var announcer;
|
||||
|
||||
setup(function() {
|
||||
announcer = fixture('Announcer');
|
||||
});
|
||||
|
||||
test('announces when there is an iron-announce event', function() {
|
||||
var event = new CustomEvent('iron-announce', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
text: 'foo'
|
||||
}
|
||||
});
|
||||
|
||||
sinon.spy(announcer, 'announce');
|
||||
|
||||
document.body.dispatchEvent(event);
|
||||
|
||||
expect(announcer.announce.callCount).to.be.equal(1);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "iron-a11y-keys-behavior",
|
||||
"version": "1.1.8",
|
||||
"description": "A behavior that enables keybindings for greater a11y.",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"a11y",
|
||||
"input"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
|
||||
},
|
||||
"main": "iron-a11y-keys-behavior.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
|
||||
"_release": "1.1.8",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.8",
|
||||
"commit": "078d64750538735c27e1c68ade907a6b58aceb43"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-a11y-keys-behavior/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -1 +0,0 @@
|
||||
bower_components
|
@ -1,25 +0,0 @@
|
||||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: >-
|
||||
XJ31r/5USVGZRtziCLfr8qM1pJKKQMUN1AeYbCdDFEc6i293WxZneR8PwUVhvyptu+qdyd28uy24sH+Ob7kShFbZTUaif5P4gqHPekrYToI0aHyhmVX7C1LmT7nEL8IcT62NhUwh+83eHTAdodkXgnhfQhPn9FHV24Dkvwm8OKhhzEhtTgUGVuGX9j9FyNV6n1+gf4X3Zq63+NkEUh5vpolpue4W7ul2u0sf4l0fzg9pvKPCmywUwX2i7wwAEf3CJghMu2xup54OzXTEkjjSou/ebt1ZnxaUNV1+dblfUne0v9wTD0dPF8H3DwgewwzcZSbOZmj6lFVHRzmLzWcRJOEKdDrpJkjpg7HIhNPGCKDUcNylekafqi7ezhzrkzFwkh6JCdAj7He4mv/X/OUDNjNCClB7Ms/+WPZwtACvIcR2/pvgZ+1PHbIkbIInyAe6iVMMR0oUecei/X+d04DH7iW7rrODVEu6qdibsJki0R0lR2184rrDO9pGek4rLu9sUQBDNgEM6ZLEXXByO8lpG4xStRdkg0/uR5i1/Q8kux4gIJ9yV8WLANkS8NVlmuJgIi6kbh5n4VVKaihGhbBUuTt2aL7fLnH2I6YRwjyNI9TOIRxwk4afppFYUuq6Fv+nfPcdqDOi5Y2AOXLJ3Yvco0+H57nXe/Ny29gFVW4Kftg=
|
||||
- secure: >-
|
||||
huEi/Ja2qnLatb7EJ4Jdc/XAeKphhdH6G+px7/XZY33oDawjStxakx0N/MpT0LPE1BdEWOYTzc17CzKv9R2L3ybWksqXyv/Zs+1NMTmpEAS/54Sk4E61aE3nrV5cfS2R8dBGbJhFoH1W237BDsbw9A4XhsTvhxlIsluWsZgeurbleGg+DgAmg8KlHGRddsfBFgXEk+Khhj6KPsbgPUiWhXpdnXKBPJKF7fJEAbsGR4aFK2eFbYd1OAgJg2Aye0n93IHe+SsxcKRUYteg6UK9V8fk7q5PBlvaodly4F3gH82l+zbnhcTFVW+qN0s6xDBTQzsQ55eTlO3pEezIo3u/1Lq41Yoe6scEkLs63pSYqoB3kakbhLMDJAen080ggdNg9evqvgyznKFYM7sqEcPu+KxHd043DyLTTW11y9lZ/hV3xSTdG4W8mV7+ILbIi54wMaYAcWSGMTOVM0JC/KDoVjze3tzDmfcZwiutLPBFgfrkfJQf3fyqcgvhoLKtHaWHI+76XDsXwEOS2Q5OX9oDtjoZaZ7r8Gp4dqwaKYceOrlsLbaZOLh5nJ4WnDbf4AqZkeM22QWWIfUN6aK+yhsDpQ/d+xJ+/WFENDADrMEKp0Lf3CkzAAcpHp3u65B9qsqweD5/5Je9t0GsA/NvK2xCasnNz6inYy4tAx9i4NWPcOY=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '46.0'
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
|
||||
dist: trusty
|
@ -1,77 +0,0 @@
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,33 +0,0 @@
|
||||
{
|
||||
"name": "iron-a11y-keys-behavior",
|
||||
"version": "1.1.8",
|
||||
"description": "A behavior that enables keybindings for greater a11y.",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"a11y",
|
||||
"input"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
|
||||
},
|
||||
"main": "iron-a11y-keys-behavior.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,24 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Iron A11y Keys Behavior demo</title>
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="x-key-aware.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="vertical-section vertical-section-container centered">
|
||||
<x-key-aware></x-key-aware>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,105 +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="../../paper-styles/color.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior.html">
|
||||
|
||||
<dom-module id="x-key-aware">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--google-blue-700);
|
||||
}
|
||||
|
||||
.keys {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.keys span {
|
||||
cursor: default;
|
||||
background-color: var(--google-grey-100);
|
||||
border: 1px solid var(--google-grey-300);
|
||||
padding: 1px 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h4>Press any of these keys</h4>
|
||||
<input type="checkbox" checked="{{preventDefault::change}}"> prevent default = {{preventDefault}}
|
||||
<p class="keys">
|
||||
<template is="dom-repeat" items="[[boundKeys]]">
|
||||
<span>{{item}}</span>
|
||||
</template>
|
||||
</p>
|
||||
<pre>[[pressed]]</pre>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-key-aware',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronA11yKeysBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
pressed: {
|
||||
type: String,
|
||||
readOnly: true,
|
||||
value: ''
|
||||
},
|
||||
|
||||
boundKeys: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return Object.keys(this.keyBindings).join(' ').split(' ');
|
||||
}
|
||||
},
|
||||
|
||||
preventDefault: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
keyEventTarget: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return document.body;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
|
||||
'a': '_updatePressed',
|
||||
'shift+a alt+a': '_updatePressed',
|
||||
'shift+tab shift+space': '_updatePressed'
|
||||
},
|
||||
|
||||
_updatePressed: function(event) {
|
||||
console.log(event.detail);
|
||||
|
||||
if (this.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
this._setPressed(
|
||||
this.pressed + event.detail.combo + ' pressed!\n'
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
@ -1,24 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-a11y-keys-behavior</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,492 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Chrome uses an older version of DOM Level 3 Keyboard Events
|
||||
*
|
||||
* Most keys are labeled as text, but some are Unicode codepoints.
|
||||
* Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
|
||||
*/
|
||||
var KEY_IDENTIFIER = {
|
||||
'U+0008': 'backspace',
|
||||
'U+0009': 'tab',
|
||||
'U+001B': 'esc',
|
||||
'U+0020': 'space',
|
||||
'U+007F': 'del'
|
||||
};
|
||||
|
||||
/**
|
||||
* Special table for KeyboardEvent.keyCode.
|
||||
* KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
|
||||
* than that.
|
||||
*
|
||||
* Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
|
||||
*/
|
||||
var KEY_CODE = {
|
||||
8: 'backspace',
|
||||
9: 'tab',
|
||||
13: 'enter',
|
||||
27: 'esc',
|
||||
33: 'pageup',
|
||||
34: 'pagedown',
|
||||
35: 'end',
|
||||
36: 'home',
|
||||
32: 'space',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down',
|
||||
46: 'del',
|
||||
106: '*'
|
||||
};
|
||||
|
||||
/**
|
||||
* MODIFIER_KEYS maps the short name for modifier keys used in a key
|
||||
* combo string to the property name that references those same keys
|
||||
* in a KeyboardEvent instance.
|
||||
*/
|
||||
var MODIFIER_KEYS = {
|
||||
'shift': 'shiftKey',
|
||||
'ctrl': 'ctrlKey',
|
||||
'alt': 'altKey',
|
||||
'meta': 'metaKey'
|
||||
};
|
||||
|
||||
/**
|
||||
* KeyboardEvent.key is mostly represented by printable character made by
|
||||
* the keyboard, with unprintable keys labeled nicely.
|
||||
*
|
||||
* However, on OS X, Alt+char can make a Unicode character that follows an
|
||||
* Apple-specific mapping. In this case, we fall back to .keyCode.
|
||||
*/
|
||||
var KEY_CHAR = /[a-z0-9*]/;
|
||||
|
||||
/**
|
||||
* Matches a keyIdentifier string.
|
||||
*/
|
||||
var IDENT_CHAR = /U\+/;
|
||||
|
||||
/**
|
||||
* Matches arrow keys in Gecko 27.0+
|
||||
*/
|
||||
var ARROW_KEY = /^arrow/;
|
||||
|
||||
/**
|
||||
* Matches space keys everywhere (notably including IE10's exceptional name
|
||||
* `spacebar`).
|
||||
*/
|
||||
var SPACE_KEY = /^space(bar)?/;
|
||||
|
||||
/**
|
||||
* Matches ESC key.
|
||||
*
|
||||
* Value from: http://w3c.github.io/uievents-key/#key-Escape
|
||||
*/
|
||||
var ESC_KEY = /^escape$/;
|
||||
|
||||
/**
|
||||
* Transforms the key.
|
||||
* @param {string} key The KeyBoardEvent.key
|
||||
* @param {Boolean} [noSpecialChars] Limits the transformation to
|
||||
* alpha-numeric characters.
|
||||
*/
|
||||
function transformKey(key, noSpecialChars) {
|
||||
var validKey = '';
|
||||
if (key) {
|
||||
var lKey = key.toLowerCase();
|
||||
if (lKey === ' ' || SPACE_KEY.test(lKey)) {
|
||||
validKey = 'space';
|
||||
} else if (ESC_KEY.test(lKey)) {
|
||||
validKey = 'esc';
|
||||
} else if (lKey.length == 1) {
|
||||
if (!noSpecialChars || KEY_CHAR.test(lKey)) {
|
||||
validKey = lKey;
|
||||
}
|
||||
} else if (ARROW_KEY.test(lKey)) {
|
||||
validKey = lKey.replace('arrow', '');
|
||||
} else if (lKey == 'multiply') {
|
||||
// numpad '*' can map to Multiply on IE/Windows
|
||||
validKey = '*';
|
||||
} else {
|
||||
validKey = lKey;
|
||||
}
|
||||
}
|
||||
return validKey;
|
||||
}
|
||||
|
||||
function transformKeyIdentifier(keyIdent) {
|
||||
var validKey = '';
|
||||
if (keyIdent) {
|
||||
if (keyIdent in KEY_IDENTIFIER) {
|
||||
validKey = KEY_IDENTIFIER[keyIdent];
|
||||
} else if (IDENT_CHAR.test(keyIdent)) {
|
||||
keyIdent = parseInt(keyIdent.replace('U+', '0x'), 16);
|
||||
validKey = String.fromCharCode(keyIdent).toLowerCase();
|
||||
} else {
|
||||
validKey = keyIdent.toLowerCase();
|
||||
}
|
||||
}
|
||||
return validKey;
|
||||
}
|
||||
|
||||
function transformKeyCode(keyCode) {
|
||||
var validKey = '';
|
||||
if (Number(keyCode)) {
|
||||
if (keyCode >= 65 && keyCode <= 90) {
|
||||
// ascii a-z
|
||||
// lowercase is 32 offset from uppercase
|
||||
validKey = String.fromCharCode(32 + keyCode);
|
||||
} else if (keyCode >= 112 && keyCode <= 123) {
|
||||
// function keys f1-f12
|
||||
validKey = 'f' + (keyCode - 112);
|
||||
} else if (keyCode >= 48 && keyCode <= 57) {
|
||||
// top 0-9 keys
|
||||
validKey = String(keyCode - 48);
|
||||
} else if (keyCode >= 96 && keyCode <= 105) {
|
||||
// num pad 0-9
|
||||
validKey = String(keyCode - 96);
|
||||
} else {
|
||||
validKey = KEY_CODE[keyCode];
|
||||
}
|
||||
}
|
||||
return validKey;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the normalized key for a KeyboardEvent.
|
||||
* @param {KeyboardEvent} keyEvent
|
||||
* @param {Boolean} [noSpecialChars] Set to true to limit keyEvent.key
|
||||
* transformation to alpha-numeric chars. This is useful with key
|
||||
* combinations like shift + 2, which on FF for MacOS produces
|
||||
* keyEvent.key = @
|
||||
* To get 2 returned, set noSpecialChars = true
|
||||
* To get @ returned, set noSpecialChars = false
|
||||
*/
|
||||
function normalizedKeyForEvent(keyEvent, noSpecialChars) {
|
||||
// Fall back from .key, to .keyIdentifier, to .keyCode, and then to
|
||||
// .detail.key to support artificial keyboard events.
|
||||
return transformKey(keyEvent.key, noSpecialChars) ||
|
||||
transformKeyIdentifier(keyEvent.keyIdentifier) ||
|
||||
transformKeyCode(keyEvent.keyCode) ||
|
||||
transformKey(keyEvent.detail ? keyEvent.detail.key : keyEvent.detail, noSpecialChars) || '';
|
||||
}
|
||||
|
||||
function keyComboMatchesEvent(keyCombo, event) {
|
||||
// For combos with modifiers we support only alpha-numeric keys
|
||||
var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers);
|
||||
return keyEvent === keyCombo.key &&
|
||||
(!keyCombo.hasModifiers || (
|
||||
!!event.shiftKey === !!keyCombo.shiftKey &&
|
||||
!!event.ctrlKey === !!keyCombo.ctrlKey &&
|
||||
!!event.altKey === !!keyCombo.altKey &&
|
||||
!!event.metaKey === !!keyCombo.metaKey)
|
||||
);
|
||||
}
|
||||
|
||||
function parseKeyComboString(keyComboString) {
|
||||
if (keyComboString.length === 1) {
|
||||
return {
|
||||
combo: keyComboString,
|
||||
key: keyComboString,
|
||||
event: 'keydown'
|
||||
};
|
||||
}
|
||||
return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
|
||||
var eventParts = keyComboPart.split(':');
|
||||
var keyName = eventParts[0];
|
||||
var event = eventParts[1];
|
||||
|
||||
if (keyName in MODIFIER_KEYS) {
|
||||
parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
|
||||
parsedKeyCombo.hasModifiers = true;
|
||||
} else {
|
||||
parsedKeyCombo.key = keyName;
|
||||
parsedKeyCombo.event = event || 'keydown';
|
||||
}
|
||||
|
||||
return parsedKeyCombo;
|
||||
}, {
|
||||
combo: keyComboString.split(':').shift()
|
||||
});
|
||||
}
|
||||
|
||||
function parseEventString(eventString) {
|
||||
return eventString.trim().split(' ').map(function(keyComboString) {
|
||||
return parseKeyComboString(keyComboString);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
|
||||
* keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
|
||||
* The element takes care of browser differences with respect to Keyboard events
|
||||
* and uses an expressive syntax to filter key presses.
|
||||
*
|
||||
* Use the `keyBindings` prototype property to express what combination of keys
|
||||
* will trigger the callback. A key binding has the format
|
||||
* `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or
|
||||
* `"KEY:EVENT": "callback"` are valid as well). Some examples:
|
||||
*
|
||||
* keyBindings: {
|
||||
* 'space': '_onKeydown', // same as 'space:keydown'
|
||||
* 'shift+tab': '_onKeydown',
|
||||
* 'enter:keypress': '_onKeypress',
|
||||
* 'esc:keyup': '_onKeyup'
|
||||
* }
|
||||
*
|
||||
* The callback will receive with an event containing the following information in `event.detail`:
|
||||
*
|
||||
* _onKeydown: function(event) {
|
||||
* console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab"
|
||||
* console.log(event.detail.key); // KEY only, e.g. "tab"
|
||||
* console.log(event.detail.event); // EVENT, e.g. "keydown"
|
||||
* console.log(event.detail.keyboardEvent); // the original KeyboardEvent
|
||||
* }
|
||||
*
|
||||
* Use the `keyEventTarget` attribute to set up event handlers on a specific
|
||||
* node.
|
||||
*
|
||||
* See the [demo source code](https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/master/demo/x-key-aware.html)
|
||||
* for an example.
|
||||
*
|
||||
* @demo demo/index.html
|
||||
* @polymerBehavior
|
||||
*/
|
||||
Polymer.IronA11yKeysBehavior = {
|
||||
properties: {
|
||||
/**
|
||||
* The EventTarget that will be firing relevant KeyboardEvents. Set it to
|
||||
* `null` to disable the listeners.
|
||||
* @type {?EventTarget}
|
||||
*/
|
||||
keyEventTarget: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return this;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, this property will cause the implementing element to
|
||||
* automatically stop propagation on any handled KeyboardEvents.
|
||||
*/
|
||||
stopKeyboardEventPropagation: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_boundKeyHandlers: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
// We use this due to a limitation in IE10 where instances will have
|
||||
// own properties of everything on the "prototype".
|
||||
_imperativeKeyBindings: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
|
||||
],
|
||||
|
||||
|
||||
/**
|
||||
* To be used to express what combination of keys will trigger the relative
|
||||
* callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}`
|
||||
* @type {!Object}
|
||||
*/
|
||||
keyBindings: {},
|
||||
|
||||
registered: function() {
|
||||
this._prepKeyBindings();
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._listenKeyEventListeners();
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
this._unlistenKeyEventListeners();
|
||||
},
|
||||
|
||||
/**
|
||||
* Can be used to imperatively add a key binding to the implementing
|
||||
* element. This is the imperative equivalent of declaring a keybinding
|
||||
* in the `keyBindings` prototype property.
|
||||
*/
|
||||
addOwnKeyBinding: function(eventString, handlerName) {
|
||||
this._imperativeKeyBindings[eventString] = handlerName;
|
||||
this._prepKeyBindings();
|
||||
this._resetKeyEventListeners();
|
||||
},
|
||||
|
||||
/**
|
||||
* When called, will remove all imperatively-added key bindings.
|
||||
*/
|
||||
removeOwnKeyBindings: function() {
|
||||
this._imperativeKeyBindings = {};
|
||||
this._prepKeyBindings();
|
||||
this._resetKeyEventListeners();
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if a keyboard event matches `eventString`.
|
||||
*
|
||||
* @param {KeyboardEvent} event
|
||||
* @param {string} eventString
|
||||
* @return {boolean}
|
||||
*/
|
||||
keyboardEventMatchesKeys: function(event, eventString) {
|
||||
var keyCombos = parseEventString(eventString);
|
||||
for (var i = 0; i < keyCombos.length; ++i) {
|
||||
if (keyComboMatchesEvent(keyCombos[i], event)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
_collectKeyBindings: function() {
|
||||
var keyBindings = this.behaviors.map(function(behavior) {
|
||||
return behavior.keyBindings;
|
||||
});
|
||||
|
||||
if (keyBindings.indexOf(this.keyBindings) === -1) {
|
||||
keyBindings.push(this.keyBindings);
|
||||
}
|
||||
|
||||
return keyBindings;
|
||||
},
|
||||
|
||||
_prepKeyBindings: function() {
|
||||
this._keyBindings = {};
|
||||
|
||||
this._collectKeyBindings().forEach(function(keyBindings) {
|
||||
for (var eventString in keyBindings) {
|
||||
this._addKeyBinding(eventString, keyBindings[eventString]);
|
||||
}
|
||||
}, this);
|
||||
|
||||
for (var eventString in this._imperativeKeyBindings) {
|
||||
this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
|
||||
}
|
||||
|
||||
// Give precedence to combos with modifiers to be checked first.
|
||||
for (var eventName in this._keyBindings) {
|
||||
this._keyBindings[eventName].sort(function (kb1, kb2) {
|
||||
var b1 = kb1[0].hasModifiers;
|
||||
var b2 = kb2[0].hasModifiers;
|
||||
return (b1 === b2) ? 0 : b1 ? -1 : 1;
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
_addKeyBinding: function(eventString, handlerName) {
|
||||
parseEventString(eventString).forEach(function(keyCombo) {
|
||||
this._keyBindings[keyCombo.event] =
|
||||
this._keyBindings[keyCombo.event] || [];
|
||||
|
||||
this._keyBindings[keyCombo.event].push([
|
||||
keyCombo,
|
||||
handlerName
|
||||
]);
|
||||
}, this);
|
||||
},
|
||||
|
||||
_resetKeyEventListeners: function() {
|
||||
this._unlistenKeyEventListeners();
|
||||
|
||||
if (this.isAttached) {
|
||||
this._listenKeyEventListeners();
|
||||
}
|
||||
},
|
||||
|
||||
_listenKeyEventListeners: function() {
|
||||
if (!this.keyEventTarget) {
|
||||
return;
|
||||
}
|
||||
Object.keys(this._keyBindings).forEach(function(eventName) {
|
||||
var keyBindings = this._keyBindings[eventName];
|
||||
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
|
||||
|
||||
this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
|
||||
|
||||
this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
|
||||
}, this);
|
||||
},
|
||||
|
||||
_unlistenKeyEventListeners: function() {
|
||||
var keyHandlerTuple;
|
||||
var keyEventTarget;
|
||||
var eventName;
|
||||
var boundKeyHandler;
|
||||
|
||||
while (this._boundKeyHandlers.length) {
|
||||
// My kingdom for block-scope binding and destructuring assignment..
|
||||
keyHandlerTuple = this._boundKeyHandlers.pop();
|
||||
keyEventTarget = keyHandlerTuple[0];
|
||||
eventName = keyHandlerTuple[1];
|
||||
boundKeyHandler = keyHandlerTuple[2];
|
||||
|
||||
keyEventTarget.removeEventListener(eventName, boundKeyHandler);
|
||||
}
|
||||
},
|
||||
|
||||
_onKeyBindingEvent: function(keyBindings, event) {
|
||||
if (this.stopKeyboardEventPropagation) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// if event has been already prevented, don't do anything
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < keyBindings.length; i++) {
|
||||
var keyCombo = keyBindings[i][0];
|
||||
var handlerName = keyBindings[i][1];
|
||||
if (keyComboMatchesEvent(keyCombo, event)) {
|
||||
this._triggerKeyHandler(keyCombo, handlerName, event);
|
||||
// exit the loop if eventDefault was prevented
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
|
||||
var detail = Object.create(keyCombo);
|
||||
detail.keyboardEvent = keyboardEvent;
|
||||
var event = new CustomEvent(keyCombo.event, {
|
||||
detail: detail,
|
||||
cancelable: true
|
||||
});
|
||||
this[handlerName].call(this, event);
|
||||
if (event.defaultPrevented) {
|
||||
keyboardEvent.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
</script>
|
@ -1,446 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>iron-a11y-keys</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior.html">
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="BasicKeys">
|
||||
<template>
|
||||
<x-a11y-basic-keys></x-a11y-basic-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="NonPropagatingKeys">
|
||||
<template>
|
||||
<x-a11y-basic-keys stop-keyboard-event-propagation></x-a11y-basic-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="ComboKeys">
|
||||
<template>
|
||||
<x-a11y-combo-keys></x-a11y-combo-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="AlternativeEventKeys">
|
||||
<template>
|
||||
<x-a11y-alternate-event-keys></x-a11y-alternate-event-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="BehaviorKeys">
|
||||
<template>
|
||||
<x-a11y-behavior-keys></x-a11y-behavior-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="PreventKeys">
|
||||
<template>
|
||||
<x-a11y-prevent-keys></x-a11y-prevent-keys>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('Polymer.IronA11yKeysBehavior', function() {
|
||||
var keys;
|
||||
|
||||
suiteSetup(function() {
|
||||
var KeysTestBehavior = [Polymer.IronA11yKeysBehavior, {
|
||||
properties: {
|
||||
keyCount: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
|
||||
_keyHandler: function(event) {
|
||||
this.keyCount++;
|
||||
this.lastEvent = event;
|
||||
},
|
||||
|
||||
// Same as _keyHandler, used to distinguish who's called before who.
|
||||
_keyHandler2: function(event) {
|
||||
this.keyCount++;
|
||||
this.lastEvent = event;
|
||||
},
|
||||
|
||||
_preventDefaultHandler: function(event) {
|
||||
event.preventDefault();
|
||||
this.keyCount++;
|
||||
this.lastEvent = event;
|
||||
}
|
||||
}];
|
||||
|
||||
Polymer({
|
||||
is: 'x-a11y-basic-keys',
|
||||
|
||||
behaviors: [
|
||||
KeysTestBehavior
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'space': '_keyHandler',
|
||||
'@': '_keyHandler',
|
||||
'esc': '_keyHandler'
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'x-a11y-combo-keys',
|
||||
|
||||
behaviors: [
|
||||
KeysTestBehavior
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'enter': '_keyHandler2',
|
||||
'ctrl+shift+a shift+enter': '_keyHandler'
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'x-a11y-alternate-event-keys',
|
||||
|
||||
behaviors: [
|
||||
KeysTestBehavior
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'space:keyup': '_keyHandler'
|
||||
}
|
||||
});
|
||||
|
||||
var XA11yBehavior = {
|
||||
keyBindings: {
|
||||
'enter': '_keyHandler'
|
||||
}
|
||||
};
|
||||
|
||||
Polymer({
|
||||
is: 'x-a11y-behavior-keys',
|
||||
|
||||
behaviors: [
|
||||
KeysTestBehavior,
|
||||
XA11yBehavior
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'enter': '_keyHandler'
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'x-a11y-prevent-keys',
|
||||
|
||||
behaviors: [
|
||||
KeysTestBehavior,
|
||||
XA11yBehavior
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'space a': '_keyHandler',
|
||||
'enter shift+a': '_preventDefaultHandler'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
suite('basic keys', function() {
|
||||
setup(function() {
|
||||
keys = fixture('BasicKeys');
|
||||
});
|
||||
|
||||
test('trigger the handler when the specified key is pressed', function() {
|
||||
MockInteractions.pressSpace(keys);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('keyEventTarget can be null, and disables listeners', function() {
|
||||
keys.keyEventTarget = null;
|
||||
MockInteractions.pressSpace(keys);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(0);
|
||||
});
|
||||
|
||||
test('trigger the handler when the specified key is pressed together with a modifier', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.ctrlKey = true;
|
||||
event.keyCode = event.code = 32;
|
||||
keys.dispatchEvent(event);
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('handles special character @', function() {
|
||||
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], '@');
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('handles variations of Esc key', function() {
|
||||
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], 'Esc');
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
|
||||
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], 'Escape');
|
||||
expect(keys.keyCount).to.be.equal(2);
|
||||
|
||||
MockInteractions.pressAndReleaseKeyOn(keys, 27, [], '');
|
||||
expect(keys.keyCount).to.be.equal(3);
|
||||
});
|
||||
|
||||
test('do not trigger the handler for non-specified keys', function() {
|
||||
MockInteractions.pressEnter(keys);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(0);
|
||||
});
|
||||
|
||||
test('can have bindings added imperatively', function() {
|
||||
keys.addOwnKeyBinding('enter', '_keyHandler');
|
||||
|
||||
MockInteractions.pressEnter(keys);
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
|
||||
MockInteractions.pressSpace(keys);
|
||||
expect(keys.keyCount).to.be.equal(2);
|
||||
});
|
||||
|
||||
test('can remove imperatively added bindings', function() {
|
||||
keys.addOwnKeyBinding('enter', '_keyHandler');
|
||||
keys.removeOwnKeyBindings();
|
||||
|
||||
MockInteractions.pressEnter(keys);
|
||||
expect(keys.keyCount).to.be.equal(0);
|
||||
|
||||
MockInteractions.pressSpace(keys);
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('allows propagation beyond the key combo handler', function() {
|
||||
var keySpy = sinon.spy();
|
||||
document.addEventListener('keydown', keySpy);
|
||||
|
||||
MockInteractions.pressEnter(keys);
|
||||
|
||||
expect(keySpy.callCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
suite('edge cases', function() {
|
||||
test('knows that `spacebar` is the same as `space`', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.key = 'spacebar';
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('handles `+`', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.key = '+';
|
||||
expect(keys.keyboardEventMatchesKeys(event, '+')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('handles `:`', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.key = ':';
|
||||
expect(keys.keyboardEventMatchesKeys(event, ':')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('handles ` ` (space)', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.key = ' ';
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
|
||||
});
|
||||
});
|
||||
|
||||
suite('matching keyboard events to keys', function() {
|
||||
test('can be done imperatively', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.keyCode = 65;
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'a')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('can be done with a provided keyboardEvent', function() {
|
||||
var event;
|
||||
MockInteractions.pressSpace(keys);
|
||||
event = keys.lastEvent;
|
||||
|
||||
expect(event.detail.keyboardEvent).to.be.okay;
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('can handle variations in arrow key names', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.key = 'up';
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
|
||||
event.key = 'ArrowUp';
|
||||
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
|
||||
});
|
||||
});
|
||||
|
||||
suite('matching keyboard events to top row and number pad digit keys', function() {
|
||||
test('top row can be done imperatively', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.keyCode = 49;
|
||||
expect(keys.keyboardEventMatchesKeys(event, '1')).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('number pad digits can be done imperatively', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
event.keyCode = 97;
|
||||
expect(keys.keyboardEventMatchesKeys(event, '1')).to.be.equal(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('combo keys', function() {
|
||||
setup(function() {
|
||||
keys = fixture('ComboKeys');
|
||||
});
|
||||
|
||||
test('trigger the handler when the combo is pressed', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
|
||||
event.ctrlKey = true;
|
||||
event.shiftKey = true;
|
||||
event.keyCode = event.code = 65;
|
||||
|
||||
keys.dispatchEvent(event);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('check if KeyBoardEvent.key is alpha-numberic', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
|
||||
event.ctrlKey = true;
|
||||
event.shiftKey = true;
|
||||
event.key = 'å';
|
||||
event.keyCode = event.code = 65;
|
||||
|
||||
keys.dispatchEvent(event);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('trigger also bindings without modifiers', function() {
|
||||
var event = new CustomEvent('keydown');
|
||||
// Combo `shift+enter`.
|
||||
event.shiftKey = true;
|
||||
event.keyCode = event.code = 13;
|
||||
keys.dispatchEvent(event);
|
||||
expect(keys.keyCount).to.be.equal(2);
|
||||
});
|
||||
|
||||
test('give precendence to combos with modifiers', function() {
|
||||
var enterSpy = sinon.spy(keys, '_keyHandler2');
|
||||
var shiftEnterSpy = sinon.spy(keys, '_keyHandler');
|
||||
var event = new CustomEvent('keydown');
|
||||
// Combo `shift+enter`.
|
||||
event.shiftKey = true;
|
||||
event.keyCode = event.code = 13;
|
||||
keys.dispatchEvent(event);
|
||||
expect(enterSpy.called).to.be.true;
|
||||
expect(shiftEnterSpy.called).to.be.true;
|
||||
expect(enterSpy.calledAfter(shiftEnterSpy)).to.be.true;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('alternative event keys', function() {
|
||||
setup(function() {
|
||||
keys = fixture('AlternativeEventKeys');
|
||||
});
|
||||
|
||||
test('trigger on the specified alternative keyboard event', function() {
|
||||
MockInteractions.keyDownOn(keys, 32);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(0);
|
||||
|
||||
MockInteractions.keyUpOn(keys, 32);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
});
|
||||
});
|
||||
|
||||
suite('behavior keys', function() {
|
||||
setup(function() {
|
||||
keys = fixture('BehaviorKeys');
|
||||
});
|
||||
|
||||
test('bindings in other behaviors are transitive', function() {
|
||||
MockInteractions.pressEnter(keys);
|
||||
expect(keys.keyCount).to.be.equal(2);
|
||||
});
|
||||
});
|
||||
|
||||
suite('stopping propagation automatically', function() {
|
||||
setup(function() {
|
||||
keys = fixture('NonPropagatingKeys');
|
||||
});
|
||||
|
||||
test('does not propagate key events beyond the combo handler', function() {
|
||||
var keySpy = sinon.spy();
|
||||
|
||||
document.addEventListener('keydown', keySpy);
|
||||
|
||||
MockInteractions.pressEnter(keys);
|
||||
|
||||
expect(keySpy.callCount).to.be.equal(0);
|
||||
});
|
||||
});
|
||||
|
||||
suite('prevent default behavior of event', function() {
|
||||
setup(function() {
|
||||
keys = fixture('PreventKeys');
|
||||
});
|
||||
|
||||
test('`defaultPrevented` is correctly set', function() {
|
||||
MockInteractions.pressEnter(keys);
|
||||
expect(keys.lastEvent.defaultPrevented).to.be.equal(true);
|
||||
});
|
||||
|
||||
test('only 1 handler is invoked', function() {
|
||||
var aSpy = sinon.spy(keys, '_keyHandler');
|
||||
var shiftASpy = sinon.spy(keys, '_preventDefaultHandler');
|
||||
var event = new CustomEvent('keydown', {
|
||||
cancelable: true
|
||||
});
|
||||
// Combo `shift+a`.
|
||||
event.shiftKey = true;
|
||||
event.keyCode = event.code = 65;
|
||||
keys.dispatchEvent(event);
|
||||
|
||||
expect(keys.keyCount).to.be.equal(1);
|
||||
expect(shiftASpy.called).to.be.true;
|
||||
expect(aSpy.called).to.be.false;
|
||||
});
|
||||
});
|
||||
|
||||
suite('remove key behavior with null target', function () {
|
||||
test('add and remove a iron-a11y-keys-behavior', function () {
|
||||
var element = document.createElement('x-a11y-basic-keys');
|
||||
element.keyEventTarget = null;
|
||||
document.body.appendChild(element);
|
||||
document.body.removeChild(element);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,28 +0,0 @@
|
||||
<!--
|
||||
@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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><!DOCTYPE html><html><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>Tests</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
// Load and run all tests (.html, .js) as one suite:
|
||||
WCT.loadSuites([
|
||||
'basic-test.html',
|
||||
'basic-test.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
@ -1,42 +0,0 @@
|
||||
{
|
||||
"name": "iron-behaviors",
|
||||
"version": "1.0.17",
|
||||
"description": "Provides a set of behaviors for the iron elements",
|
||||
"private": true,
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-behaviors.git"
|
||||
},
|
||||
"main": [
|
||||
"iron-button-state.html",
|
||||
"iron-control-state.html"
|
||||
],
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.2.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.2",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-behaviors",
|
||||
"_release": "1.0.17",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.17",
|
||||
"commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-behaviors"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-behaviors/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -1 +0,0 @@
|
||||
bower_components
|
@ -1,23 +0,0 @@
|
||||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: H49pcRc5C6G+ti/ehtT74GZdsUsM/xCvEVJBmKq8rpck7s18R6BbH37RkF2XgYfO4rVa1Bl4KU4Wf5S6aIDYzdaq/phGtFQ04NmDYGbmBhRjwfgxlW4dJ7mkXqXCvNZkxJtAJpgzgVG+xu/I6GsO1Lp4VjGENvVYSsrkGIlSA34=
|
||||
- secure: Zq+hvOlL1RmTtMfAtO3bxqYnB7X6MY199cVCKo2J/EbsMvOHII1JvEU1+s2/UG9tgoiXkd7N2OfFOivlbQ75BDIwtvkq32KZNrUEC6vRGhbMBc8JCKkdFB/XHh1mNhQcn6Js656PhZIj2WteZYMSGYDUj7KcBBMacRZQKWuB0OU=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '46.0'
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
|
||||
dist: trusty
|
@ -1,77 +0,0 @@
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "iron-behaviors",
|
||||
"version": "1.0.17",
|
||||
"description": "Provides a set of behaviors for the iron elements",
|
||||
"private": true,
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-behaviors.git"
|
||||
},
|
||||
"main": [
|
||||
"iron-button-state.html",
|
||||
"iron-control-state.html"
|
||||
],
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.2.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.2",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta 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">
|
||||
|
||||
<title>simple-button</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link href="../../paper-styles/demo-pages.html" rel="import">
|
||||
<link href="simple-button.html" rel="import">
|
||||
|
||||
<style>
|
||||
|
||||
.vertical-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="vertical-section vertical-section-container centered">
|
||||
<h3>Normal</h3>
|
||||
|
||||
<simple-button tabindex="0">Hello World</simple-button>
|
||||
|
||||
<h3>Toggles</h3>
|
||||
|
||||
<simple-button toggles tabindex="0">Hello World</simple-button>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
|
||||
<simple-button disabled tabindex="0">Hello World</simple-button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,66 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-button-state.html">
|
||||
<link rel="import" href="../iron-control-state.html">
|
||||
|
||||
<dom-module id="simple-button">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
background-color: #4285F4;
|
||||
color: #fff;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
padding: 16px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host([active]),
|
||||
:host([pressed]) {
|
||||
background-color: #3367D6;
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronButtonState
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'button'
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
@ -1,27 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Iron Behaviors</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page src="iron-button-state.html"></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,228 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="iron-control-state.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @demo demo/index.html
|
||||
* @polymerBehavior Polymer.IronButtonState
|
||||
*/
|
||||
Polymer.IronButtonStateImpl = {
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* If true, the user is currently holding down the button.
|
||||
*/
|
||||
pressed: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_pressedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the button toggles the active state with each tap or press
|
||||
* of the spacebar.
|
||||
*/
|
||||
toggles: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the button is a toggle and is currently in the active state.
|
||||
*/
|
||||
active: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the element is currently being pressed by a "pointer," which
|
||||
* is loosely defined as mouse or touch input (but specifically excluding
|
||||
* keyboard input).
|
||||
*/
|
||||
pointerDown: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the input device that caused the element to receive focus
|
||||
* was a keyboard.
|
||||
*/
|
||||
receivedFocusFromKeyboard: {
|
||||
type: Boolean,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The aria attribute to be set if the button is a toggle and in the
|
||||
* active state.
|
||||
*/
|
||||
ariaActiveAttribute: {
|
||||
type: String,
|
||||
value: 'aria-pressed',
|
||||
observer: '_ariaActiveAttributeChanged'
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
down: '_downHandler',
|
||||
up: '_upHandler',
|
||||
tap: '_tapHandler'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_detectKeyboardFocus(focused)',
|
||||
'_activeChanged(active, ariaActiveAttribute)'
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'enter:keydown': '_asyncClick',
|
||||
'space:keydown': '_spaceKeyDownHandler',
|
||||
'space:keyup': '_spaceKeyUpHandler',
|
||||
},
|
||||
|
||||
_mouseEventRe: /^mouse/,
|
||||
|
||||
_tapHandler: function() {
|
||||
if (this.toggles) {
|
||||
// a tap is needed to toggle the active state
|
||||
this._userActivate(!this.active);
|
||||
} else {
|
||||
this.active = false;
|
||||
}
|
||||
},
|
||||
|
||||
_detectKeyboardFocus: function(focused) {
|
||||
this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
|
||||
},
|
||||
|
||||
// to emulate native checkbox, (de-)activations from a user interaction fire
|
||||
// 'change' events
|
||||
_userActivate: function(active) {
|
||||
if (this.active !== active) {
|
||||
this.active = active;
|
||||
this.fire('change');
|
||||
}
|
||||
},
|
||||
|
||||
_downHandler: function(event) {
|
||||
this._setPointerDown(true);
|
||||
this._setPressed(true);
|
||||
this._setReceivedFocusFromKeyboard(false);
|
||||
},
|
||||
|
||||
_upHandler: function() {
|
||||
this._setPointerDown(false);
|
||||
this._setPressed(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {!KeyboardEvent} event .
|
||||
*/
|
||||
_spaceKeyDownHandler: function(event) {
|
||||
var keyboardEvent = event.detail.keyboardEvent;
|
||||
var target = Polymer.dom(keyboardEvent).localTarget;
|
||||
|
||||
// Ignore the event if this is coming from a focused light child, since that
|
||||
// element will deal with it.
|
||||
if (this.isLightDescendant(/** @type {Node} */(target)))
|
||||
return;
|
||||
|
||||
keyboardEvent.preventDefault();
|
||||
keyboardEvent.stopImmediatePropagation();
|
||||
this._setPressed(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {!KeyboardEvent} event .
|
||||
*/
|
||||
_spaceKeyUpHandler: function(event) {
|
||||
var keyboardEvent = event.detail.keyboardEvent;
|
||||
var target = Polymer.dom(keyboardEvent).localTarget;
|
||||
|
||||
// Ignore the event if this is coming from a focused light child, since that
|
||||
// element will deal with it.
|
||||
if (this.isLightDescendant(/** @type {Node} */(target)))
|
||||
return;
|
||||
|
||||
if (this.pressed) {
|
||||
this._asyncClick();
|
||||
}
|
||||
this._setPressed(false);
|
||||
},
|
||||
|
||||
// trigger click asynchronously, the asynchrony is useful to allow one
|
||||
// event handler to unwind before triggering another event
|
||||
_asyncClick: function() {
|
||||
this.async(function() {
|
||||
this.click();
|
||||
}, 1);
|
||||
},
|
||||
|
||||
// any of these changes are considered a change to button state
|
||||
|
||||
_pressedChanged: function(pressed) {
|
||||
this._changedButtonState();
|
||||
},
|
||||
|
||||
_ariaActiveAttributeChanged: function(value, oldValue) {
|
||||
if (oldValue && oldValue != value && this.hasAttribute(oldValue)) {
|
||||
this.removeAttribute(oldValue);
|
||||
}
|
||||
},
|
||||
|
||||
_activeChanged: function(active, ariaActiveAttribute) {
|
||||
if (this.toggles) {
|
||||
this.setAttribute(this.ariaActiveAttribute,
|
||||
active ? 'true' : 'false');
|
||||
} else {
|
||||
this.removeAttribute(this.ariaActiveAttribute);
|
||||
}
|
||||
this._changedButtonState();
|
||||
},
|
||||
|
||||
_controlStateChanged: function() {
|
||||
if (this.disabled) {
|
||||
this._setPressed(false);
|
||||
} else {
|
||||
this._changedButtonState();
|
||||
}
|
||||
},
|
||||
|
||||
// provide hook for follow-on behaviors to react to button-state
|
||||
|
||||
_changedButtonState: function() {
|
||||
if (this._buttonStateChanged) {
|
||||
this._buttonStateChanged(); // abstract
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/** @polymerBehavior */
|
||||
Polymer.IronButtonState = [
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronButtonStateImpl
|
||||
];
|
||||
|
||||
</script>
|
@ -1,110 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* @demo demo/index.html
|
||||
* @polymerBehavior
|
||||
*/
|
||||
Polymer.IronControlState = {
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* If true, the element currently has focus.
|
||||
*/
|
||||
focused: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
readOnly: true,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the user cannot interact with this element.
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
observer: '_disabledChanged',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
_oldTabIndex: {
|
||||
type: Number
|
||||
},
|
||||
|
||||
_boundFocusBlurHandler: {
|
||||
type: Function,
|
||||
value: function() {
|
||||
return this._focusBlurHandler.bind(this);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_changedControlState(focused, disabled)'
|
||||
],
|
||||
|
||||
ready: function() {
|
||||
this.addEventListener('focus', this._boundFocusBlurHandler, true);
|
||||
this.addEventListener('blur', this._boundFocusBlurHandler, true);
|
||||
},
|
||||
|
||||
_focusBlurHandler: function(event) {
|
||||
// NOTE(cdata): if we are in ShadowDOM land, `event.target` will
|
||||
// eventually become `this` due to retargeting; if we are not in
|
||||
// ShadowDOM land, `event.target` will eventually become `this` due
|
||||
// to the second conditional which fires a synthetic event (that is also
|
||||
// handled). In either case, we can disregard `event.path`.
|
||||
|
||||
if (event.target === this) {
|
||||
this._setFocused(event.type === 'focus');
|
||||
} else if (!this.shadowRoot) {
|
||||
var target = /** @type {Node} */(Polymer.dom(event).localTarget);
|
||||
if (!this.isLightDescendant(target)) {
|
||||
this.fire(event.type, {sourceEvent: event}, {
|
||||
node: this,
|
||||
bubbles: event.bubbles,
|
||||
cancelable: event.cancelable
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_disabledChanged: function(disabled, old) {
|
||||
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||
this.style.pointerEvents = disabled ? 'none' : '';
|
||||
if (disabled) {
|
||||
this._oldTabIndex = this.tabIndex;
|
||||
this._setFocused(false);
|
||||
this.tabIndex = -1;
|
||||
this.blur();
|
||||
} else if (this._oldTabIndex !== undefined) {
|
||||
this.tabIndex = this._oldTabIndex;
|
||||
}
|
||||
},
|
||||
|
||||
_changedControlState: function() {
|
||||
// _controlStateChanged is abstract, follow-on behaviors may implement it
|
||||
if (this._controlStateChanged) {
|
||||
this._controlStateChanged();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
@ -1,280 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>active-state</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
<link rel="import" href="test-elements.html">
|
||||
<link rel="import" href="../../paper-input/paper-input.html">
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="TrivialActiveState">
|
||||
<template>
|
||||
<test-button></test-button>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="ToggleActiveState">
|
||||
<template>
|
||||
<test-button toggles></test-button>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="ButtonWithNativeInput">
|
||||
<template>
|
||||
<test-light-dom><input id="input"></test-light-dom>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="ButtonWithPaperInput">
|
||||
<template>
|
||||
<test-light-dom><paper-input id="input"></paper-input></test-light-dom>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('active-state', function() {
|
||||
var activeTarget;
|
||||
|
||||
setup(function() {
|
||||
activeTarget = fixture('TrivialActiveState');
|
||||
});
|
||||
|
||||
suite('active state with toggles attribute', function() {
|
||||
setup(function() {
|
||||
activeTarget = fixture('ToggleActiveState');
|
||||
});
|
||||
|
||||
suite('when down', function() {
|
||||
test('is pressed', function() {
|
||||
MockInteractions.down(activeTarget);
|
||||
expect(activeTarget.hasAttribute('pressed')).to.be.eql(true);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when clicked', function() {
|
||||
test('is activated', function(done) {
|
||||
MockInteractions.downAndUp(activeTarget, function() {
|
||||
try {
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
|
||||
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
|
||||
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test('is deactivated by a subsequent click', function(done) {
|
||||
MockInteractions.downAndUp(activeTarget, function() {
|
||||
MockInteractions.downAndUp(activeTarget, function() {
|
||||
try {
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
|
||||
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
|
||||
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('false');
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('the correct aria attribute is set', function(done) {
|
||||
activeTarget.ariaActiveAttribute = 'aria-checked';
|
||||
MockInteractions.downAndUp(activeTarget, function() {
|
||||
try {
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
|
||||
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
|
||||
expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test('the aria attribute is updated correctly', function(done) {
|
||||
activeTarget.ariaActiveAttribute = 'aria-checked';
|
||||
MockInteractions.downAndUp(activeTarget, function() {
|
||||
try {
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
|
||||
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
|
||||
expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
|
||||
|
||||
activeTarget.ariaActiveAttribute = 'aria-pressed';
|
||||
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(false);
|
||||
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
|
||||
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('without toggles attribute', function() {
|
||||
suite('when mouse is down', function() {
|
||||
test('does not get an active attribute', function() {
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
|
||||
MockInteractions.down(activeTarget);
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when mouse is up', function() {
|
||||
test('does not get an active attribute', function() {
|
||||
MockInteractions.down(activeTarget);
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
|
||||
MockInteractions.up(activeTarget);
|
||||
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when space is pressed', function() {
|
||||
test('triggers a click event', function(done) {
|
||||
activeTarget.addEventListener('click', function() {
|
||||
done();
|
||||
});
|
||||
MockInteractions.pressSpace(activeTarget);
|
||||
});
|
||||
|
||||
test('only triggers click after the key is released', function(done) {
|
||||
var keyupTriggered = false;
|
||||
|
||||
activeTarget.addEventListener('keyup', function() {
|
||||
keyupTriggered = true;
|
||||
});
|
||||
|
||||
activeTarget.addEventListener('click', function() {
|
||||
try {
|
||||
expect(keyupTriggered).to.be.eql(true);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
|
||||
MockInteractions.pressSpace(activeTarget);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when enter is pressed', function() {
|
||||
test('triggers a click event', function(done) {
|
||||
activeTarget.addEventListener('click', function() {
|
||||
done();
|
||||
});
|
||||
|
||||
MockInteractions.pressEnter(activeTarget);
|
||||
});
|
||||
|
||||
test('only triggers click before the key is released', function(done) {
|
||||
var keyupTriggered = false;
|
||||
|
||||
activeTarget.addEventListener('keyup', function() {
|
||||
keyupTriggered = true;
|
||||
});
|
||||
|
||||
activeTarget.addEventListener('click', function() {
|
||||
try {
|
||||
expect(keyupTriggered).to.be.eql(false);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
|
||||
MockInteractions.pressEnter(activeTarget);
|
||||
});
|
||||
});
|
||||
|
||||
suite('nested native input inside button', function() {
|
||||
test('space in light child input does not trigger a button click event', function(done) {
|
||||
var item = fixture('ButtonWithNativeInput');
|
||||
var input = item.querySelector('#input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
item.addEventListener('click', itemClickHandler);
|
||||
|
||||
input.focus();
|
||||
MockInteractions.pressSpace(input);
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('space in button triggers a button click event', function(done) {
|
||||
var item = fixture('ButtonWithNativeInput');
|
||||
var input = item.querySelector('#input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
item.addEventListener('click', itemClickHandler);
|
||||
|
||||
MockInteractions.pressSpace(item);
|
||||
|
||||
Polymer.Base.async(function(){
|
||||
// You need two ticks, one for the MockInteractions event, and one
|
||||
// for the button event.
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(1);
|
||||
done();
|
||||
}, 1);
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
suite('nested paper-input inside button', function() {
|
||||
test('space in light child input does not trigger a button click event', function(done) {
|
||||
var item = fixture('ButtonWithPaperInput');
|
||||
var input = item.querySelector('#input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
item.addEventListener('click', itemClickHandler);
|
||||
|
||||
input.focus();
|
||||
MockInteractions.pressSpace(input);
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('space in button triggers a button click event', function(done) {
|
||||
var item = fixture('ButtonWithPaperInput');
|
||||
var input = item.querySelector('#input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
item.addEventListener('click', itemClickHandler);
|
||||
|
||||
MockInteractions.pressSpace(item);
|
||||
Polymer.Base.async(function(){
|
||||
// You need two ticks, one for the MockInteractions event, and one
|
||||
// for the button event.
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(1);
|
||||
done();
|
||||
}, 1);
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,82 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>disabled-state</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<link rel="import" href="test-elements.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialDisabledState">
|
||||
<template>
|
||||
<test-control></test-control>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="InitiallyDisabledState">
|
||||
<template>
|
||||
<test-control disabled></test-control>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('disabled-state', function() {
|
||||
var disableTarget;
|
||||
|
||||
suite('a trivial disabled state', function() {
|
||||
setup(function() {
|
||||
disableTarget = fixture('TrivialDisabledState');
|
||||
});
|
||||
|
||||
suite('when disabled is true', function() {
|
||||
test('receives a disabled attribute', function() {
|
||||
disableTarget.disabled = true;
|
||||
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
|
||||
});
|
||||
|
||||
test('receives an appropriate aria attribute', function() {
|
||||
disableTarget.disabled = true;
|
||||
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
|
||||
});
|
||||
});
|
||||
|
||||
suite('when disabled is false', function() {
|
||||
test('loses the disabled attribute', function() {
|
||||
disableTarget.disabled = true;
|
||||
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
|
||||
disableTarget.disabled = false;
|
||||
expect(disableTarget.hasAttribute('disabled')).to.be.eql(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('a state with an initially disabled target', function() {
|
||||
setup(function() {
|
||||
disableTarget = fixture('InitiallyDisabledState');
|
||||
});
|
||||
|
||||
test('preserves the disabled attribute on target', function() {
|
||||
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
|
||||
expect(disableTarget.disabled).to.be.eql(true);
|
||||
});
|
||||
|
||||
test('adds `aria-disabled` to the target', function() {
|
||||
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,161 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>focused-state</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
<link rel="import" href="test-elements.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialFocusedState">
|
||||
<template>
|
||||
<test-control tabindex="-1"></test-control>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="NestedFocusedState">
|
||||
<template>
|
||||
<nested-focusable></nested-focusable>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="LightDOM">
|
||||
<template>
|
||||
<test-light-dom>
|
||||
<input id="input">
|
||||
<nested-focusable></nested-focusable>
|
||||
</test-light-dom>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('focused-state', function() {
|
||||
var focusTarget;
|
||||
|
||||
setup(function() {
|
||||
focusTarget = fixture('TrivialFocusedState');
|
||||
});
|
||||
|
||||
suite('when is focused', function() {
|
||||
test('receives a focused attribute', function() {
|
||||
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
|
||||
MockInteractions.focus(focusTarget);
|
||||
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
|
||||
});
|
||||
|
||||
test('focused property is true', function() {
|
||||
expect(focusTarget.focused).to.not.be.eql(true);
|
||||
MockInteractions.focus(focusTarget);
|
||||
expect(focusTarget.focused).to.be.eql(true);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when is blurred', function() {
|
||||
test('loses the focused attribute', function() {
|
||||
MockInteractions.focus(focusTarget);
|
||||
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
|
||||
MockInteractions.blur(focusTarget);
|
||||
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
|
||||
});
|
||||
|
||||
test('focused property is false', function() {
|
||||
MockInteractions.focus(focusTarget);
|
||||
expect(focusTarget.focused).to.be.eql(true);
|
||||
MockInteractions.blur(focusTarget);
|
||||
expect(focusTarget.focused).to.be.eql(false);
|
||||
});
|
||||
});
|
||||
|
||||
suite('when the focused state is disabled', function() {
|
||||
test('will not be focusable', function() {
|
||||
var blurSpy = sinon.spy(focusTarget, 'blur');
|
||||
MockInteractions.focus(focusTarget);
|
||||
focusTarget.disabled = true;
|
||||
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
|
||||
expect(blurSpy.called).to.be.eql(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('nested focusable', function() {
|
||||
var focusable;
|
||||
|
||||
setup(function() {
|
||||
focusable = fixture('NestedFocusedState');
|
||||
});
|
||||
|
||||
test('focus/blur events fired on host element', function() {
|
||||
var nFocusEvents = 0;
|
||||
var nBlurEvents = 0;
|
||||
|
||||
focusable.addEventListener('focus', function() {
|
||||
nFocusEvents += 1;
|
||||
expect(focusable.focused).to.be.equal(true);
|
||||
MockInteractions.blur(focusable.$.input);
|
||||
});
|
||||
focusable.addEventListener('blur', function() {
|
||||
expect(focusable.focused).to.be.equal(false);
|
||||
nBlurEvents += 1;
|
||||
});
|
||||
|
||||
MockInteractions.focus(focusable.$.input);
|
||||
|
||||
expect(nBlurEvents).to.be.greaterThan(0);
|
||||
expect(nFocusEvents).to.be.greaterThan(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
suite('elements in the light dom', function() {
|
||||
var lightDOM, input, lightDescendantShadowInput;
|
||||
|
||||
setup(function() {
|
||||
lightDOM = fixture('LightDOM');
|
||||
input = document.querySelector('#input');
|
||||
lightDescendantShadowInput = Polymer.dom(lightDOM)
|
||||
.querySelector('nested-focusable').$.input;
|
||||
});
|
||||
|
||||
test('should not fire the focus event', function() {
|
||||
var nFocusEvents = 0;
|
||||
|
||||
lightDOM.addEventListener('focus', function() {
|
||||
nFocusEvents += 1;
|
||||
});
|
||||
|
||||
MockInteractions.focus(input);
|
||||
|
||||
expect(nFocusEvents).to.be.equal(0);
|
||||
});
|
||||
|
||||
test('should not fire the focus event from shadow descendants', function() {
|
||||
var nFocusEvents = 0;
|
||||
|
||||
lightDOM.addEventListener('focus', function() {
|
||||
nFocusEvents += 1;
|
||||
});
|
||||
|
||||
MockInteractions.focus(lightDescendantShadowInput);
|
||||
|
||||
expect(nFocusEvents).to.be.equal(0);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'focused-state.html',
|
||||
'active-state.html',
|
||||
'disabled-state.html',
|
||||
'focused-state.html?dom=shadow',
|
||||
'active-state.html?dom=shadow',
|
||||
'disabled-state.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
@ -1,91 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-control-state.html">
|
||||
<link rel="import" href="../iron-button-state.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-control',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-button',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronButtonState
|
||||
],
|
||||
|
||||
_buttonStateChanged: function() {
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<dom-module id="nested-focusable">
|
||||
|
||||
<template>
|
||||
<input id="input">
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'nested-focusable',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<dom-module id="test-light-dom">
|
||||
|
||||
<template>
|
||||
<content select="*"></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-light-dom',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronButtonState
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "iron-checked-element-behavior",
|
||||
"version": "1.0.5",
|
||||
"description": "Implements an element that has a checked attribute and can be added to a form",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"iron",
|
||||
"behavior"
|
||||
],
|
||||
"main": "iron-checked-element-behavior.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-checked-element-behavior.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-checked-element-behavior",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "c70add47a9af62d30746587e8a1303fb390787c6"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-checked-element-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-checked-element-behavior"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-checked-element-behavior/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -1 +0,0 @@
|
||||
bower_components
|
@ -1,23 +0,0 @@
|
||||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: zj5WTkJrZAy1QK0j65jHEsHluT4B/PZl0u3iVEWnyd4CSUbHh3rS5NytZTA8wZ63DYnUcrdbhPeIQI3UKaVBUM2MO/K4MwsC2YTRpifpCLbC+wlRV9WRZNZ9CJ3hu6leshOBWHzZucUWAcKtyQRm66rAU+90ZaJcrBPC/xtgPG1n/Bm2aygr5IA36vJy80Zpwk1+yFmb08eu7jpzNVhcFor+VX0gBW3rxeX0kvzhHGn0bTLxKztNB56Oe+bzx6vU8ACjBcSylouOtPJVIk/iIh7AIDHDcpoZGzmwtVnwAV2mJQtu3V8hQ2kE8eXpDloBGID+AUfTF3YSOVQo34I1yv4T+FlB7uxWrgJo80X5IRXUe15+OoXqraZ25v736RPdTWPjV2b6cWHqdOa45wODkDY0KZ9SrmwZibF3vcfVOG21llW2jF/HC5FvDIiM7gv1ro5jsFbEIwv7ligh0KKa+TOZBphL4sEtMrpxR/zXLqBLXUbKL54A+AefHelxjDIqT3oKQylesrGZ58fEF7Fx5xDSYGJwhIEwTLsEQWIWw8sWB34yRtDBIPocqh8nNZ9pJBOdhK3oC5KK44IQnE44YrIzLRRinHzRVoywpUb5OJDxxSSvOwcqmTYbkFmRJMzfJCEj/EtYsEokmSFv8zIRRDetvenBTGouNK/VsU9xQpA=
|
||||
- secure: Q3xN3fRvTQuy/HKlkYFFnVrFo01r6Q8zgzHHK8yKNKio9T/BM0+iIMYP8mRY+qvCQxCboXuUawG6gsxxT2Zn/p7SgNZ+UHq7DcLmocqxmECdGfqra6Hy9Y7BZVYPWlWIADkNUjI0RfOz69/3o/TAFlt4Cnw3BX3ip0o0Rri5/jzj0Nn+xSF+onyMnpH2gQvUE77MHvCuWTPki3R86Bz8RRzbTwKYwVa0oVca7jzdPtOjqzsnz8k9X0HVwQEpHGjqgTP3lg8EotON0rac/ayWs3J3bk9ye5AfvdTCYcZnDcz8POAN6FeC2Xey7oqQO4N8vFagru88mC3AmN67ZYqwI0fmDEYre20lnXFAFBFzsiu4FvKMgFYi/C5tG5ngSR5XcXwLskax82Un7yYYRzVbyhFSxxWZCqIC4cJ5d+E0Wex4eEYDwAlZ9AFP/hRJ2qrBVUbzXeGVMkHlg4qtdUIzHRkMUmjvEWVzTvk0Xa2wD+S0mYPcBwQcscoZy9zqdJM4hfbG9IGi02/DyrTOL3IuNH8WHHvGWS4ajDhSRkGCV4I5VtGKQ/Y3RA/pU6AaI7tVcDhbxOyIPKuOXO6PWuZOiJhhPQ/kceMkUXeh0TmsDtSBpe5OKCnjsdSn02lTT5yYf4nlVIVczP9p6zBerXorzZk1/S3CRBtqYZPgRrefbCw=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '46.0'
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
|
||||
dist: trusty
|
@ -1,77 +0,0 @@
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,34 +0,0 @@
|
||||
{
|
||||
"name": "iron-checked-element-behavior",
|
||||
"version": "1.0.5",
|
||||
"description": "Implements an element that has a checked attribute and can be added to a form",
|
||||
"authors": "The Polymer Authors",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"iron",
|
||||
"behavior"
|
||||
],
|
||||
"main": "iron-checked-element-behavior.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-checked-element-behavior.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-checked-element-behavior",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
@ -1,39 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta 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">
|
||||
|
||||
<title>iron-checked-element-behavior demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="simple-checkbox.html">
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Not required</h4>
|
||||
<div class="horizontal-section">
|
||||
<simple-checkbox></simple-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Required</h4>
|
||||
<div class="horizontal-section">
|
||||
<simple-checkbox required></simple-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,65 +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="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../iron-checked-element-behavior.html">
|
||||
|
||||
<dom-module id="simple-checkbox">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host([invalid]) span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#labelText {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input type="checkbox" id="checkbox" on-tap="_onCheckTap">
|
||||
<span id="labelText">{{label}}</span>
|
||||
<paper-button raised on-click="_onClick">validate</paper-button>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
is: 'simple-checkbox',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronCheckedElementBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
label: {
|
||||
type: String,
|
||||
value: 'not validated'
|
||||
}
|
||||
},
|
||||
|
||||
_onCheckTap: function() {
|
||||
this.checked = this.$.checkbox.checked;
|
||||
},
|
||||
|
||||
_onClick: function() {
|
||||
this.validate();
|
||||
this.label = this.invalid ? 'is invalid' : 'is valid';
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
@ -1,30 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>iron-checked-element-behavior</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,120 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
||||
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Use `Polymer.IronCheckedElementBehavior` to implement a custom element
|
||||
* that has a `checked` property, which can be used for validation if the
|
||||
* element is also `required`. Element instances implementing this behavior
|
||||
* will also be registered for use in an `iron-form` element.
|
||||
*
|
||||
* @demo demo/index.html
|
||||
* @polymerBehavior Polymer.IronCheckedElementBehavior
|
||||
*/
|
||||
Polymer.IronCheckedElementBehaviorImpl = {
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the checked state changes.
|
||||
*
|
||||
* @event iron-change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||
*/
|
||||
checked: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
notify: true,
|
||||
observer: '_checkedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the button toggles the active state with each tap or press
|
||||
* of the spacebar.
|
||||
*/
|
||||
toggles: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/* Overriden from Polymer.IronFormElementBehavior */
|
||||
value: {
|
||||
type: String,
|
||||
value: 'on',
|
||||
observer: '_valueChanged'
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_requiredChanged(required)'
|
||||
],
|
||||
|
||||
created: function() {
|
||||
// Used by `iron-form` to handle the case that an element with this behavior
|
||||
// doesn't have a role of 'checkbox' or 'radio', but should still only be
|
||||
// included when the form is serialized if `this.checked === true`.
|
||||
this._hasIronCheckedElementBehavior = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns false if the element is required and not checked, and true otherwise.
|
||||
* @param {*=} _value Ignored.
|
||||
* @return {boolean} true if `required` is false or if `checked` is true.
|
||||
*/
|
||||
_getValidity: function(_value) {
|
||||
return this.disabled || !this.required || this.checked;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the aria-required label when `required` is changed.
|
||||
*/
|
||||
_requiredChanged: function() {
|
||||
if (this.required) {
|
||||
this.setAttribute('aria-required', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-required');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fire `iron-changed` when the checked state changes.
|
||||
*/
|
||||
_checkedChanged: function() {
|
||||
this.active = this.checked;
|
||||
this.fire('iron-change');
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset value to 'on' if it is set to `undefined`.
|
||||
*/
|
||||
_valueChanged: function() {
|
||||
if (this.value === undefined || this.value === null) {
|
||||
this.value = 'on';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** @polymerBehavior Polymer.IronCheckedElementBehavior */
|
||||
Polymer.IronCheckedElementBehavior = [
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.IronValidatableBehavior,
|
||||
Polymer.IronCheckedElementBehaviorImpl
|
||||
];
|
||||
|
||||
</script>
|
@ -1,152 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iron-checked-element-behavior basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link href="../../test-fixture/test-fixture.html" rel="import">
|
||||
<link href="../../iron-meta/iron-meta.html" rel="import">
|
||||
<link href="simple-checkbox.html" rel="import">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<simple-checkbox></simple-checkbox>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="checked">
|
||||
<template>
|
||||
<simple-checkbox checked></simple-checkbox>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="with-value">
|
||||
<template>
|
||||
<simple-checkbox value="batman"></simple-checkbox>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic', function() {
|
||||
test('can be checked', function() {
|
||||
var c = fixture('basic');
|
||||
assert.isFalse(c.checked);
|
||||
c.checked = true;
|
||||
assert.isTrue(c.checked);
|
||||
});
|
||||
|
||||
test('can be unchecked', function() {
|
||||
var c = fixture('checked');
|
||||
assert.isTrue(c.checked);
|
||||
c.checked = false;
|
||||
assert.isFalse(c.checked);
|
||||
});
|
||||
|
||||
test('invalid if required and not checked', function() {
|
||||
var c = fixture('basic');
|
||||
c.required = true;
|
||||
assert.isFalse(c.checked);
|
||||
assert.isFalse(c.validate());
|
||||
assert.isTrue(c.invalid);
|
||||
});
|
||||
|
||||
test('valid if required and checked', function() {
|
||||
var c = fixture('basic');
|
||||
c.required = true;
|
||||
c.checked = true;
|
||||
assert.isTrue(c.checked);
|
||||
assert.isTrue(c.validate());
|
||||
assert.isFalse(c.invalid);
|
||||
});
|
||||
|
||||
test('valid if not required and not checked', function() {
|
||||
var c = fixture('basic');
|
||||
assert.isFalse(c.checked);
|
||||
assert.isTrue(c.validate());
|
||||
assert.isFalse(c.invalid);
|
||||
});
|
||||
|
||||
test('has a default value of "on", always', function() {
|
||||
var c = fixture('basic');
|
||||
|
||||
assert.isTrue(c.value === 'on');
|
||||
|
||||
c.checked = true;
|
||||
assert.isTrue(c.value === 'on');
|
||||
});
|
||||
|
||||
test('does not stomp over user defined value when checked', function() {
|
||||
var c = fixture('with-value');
|
||||
assert.isTrue(c.value === 'batman');
|
||||
|
||||
c.checked = true;
|
||||
assert.isTrue(c.value === 'batman');
|
||||
});
|
||||
|
||||
test('value returns "on" when no explicit value is specified', function() {
|
||||
var c = fixture('basic');
|
||||
|
||||
assert.equal(c.value, 'on', 'returns "on"');
|
||||
});
|
||||
|
||||
test('value returns the value when an explicit value is set', function() {
|
||||
var c = fixture('basic');
|
||||
|
||||
c.value = 'abc';
|
||||
assert.equal(c.value, 'abc', 'returns "abc"');
|
||||
|
||||
c.value = '123';
|
||||
assert.equal(c.value, '123', 'returns "123"');
|
||||
});
|
||||
|
||||
test('value returns "on" when value is set to undefined', function() {
|
||||
var c = fixture('basic');
|
||||
|
||||
c.value = 'abc';
|
||||
assert.equal(c.value, 'abc', 'returns "abc"');
|
||||
|
||||
c.value = undefined;
|
||||
assert.equal(c.value, 'on', 'returns "on"');
|
||||
});
|
||||
});
|
||||
|
||||
suite('a11y', function() {
|
||||
test('setting `required` sets `aria-required=true`', function() {
|
||||
var c = fixture('basic');
|
||||
c.required = true;
|
||||
assert.equal(c.getAttribute('aria-required'), 'true');
|
||||
c.required = false;
|
||||
assert.isFalse(c.hasAttribute('aria-required'));
|
||||
});
|
||||
|
||||
test('setting `invalid` sets `aria-invalid=true`', function() {
|
||||
var c = fixture('basic');
|
||||
c.invalid = true;
|
||||
assert.equal(c.getAttribute('aria-invalid'), 'true');
|
||||
c.invalid = false;
|
||||
assert.isFalse(c.hasAttribute('aria-invalid'));
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><html><head>
|
||||
|
||||
<title>iron-checked-element-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([
|
||||
'basic.html',
|
||||
'basic.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
@ -1,26 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-checked-element-behavior.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'simple-checkbox',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronCheckedElementBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,53 +0,0 @@
|
||||
{
|
||||
"name": "iron-demo-helpers",
|
||||
"version": "1.2.5",
|
||||
"description": "Utility classes to make building demo pages easier",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"demo"
|
||||
],
|
||||
"main": [
|
||||
"demo-snippet.html",
|
||||
"url-bar.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-demo-helpers.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-demo-helpers",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.5.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.1.0",
|
||||
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^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.1.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
||||
},
|
||||
"_release": "1.2.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.5",
|
||||
"commit": "a376e52de29be389fa22e175b64c9813163023fb"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-demo-helpers"
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
<!-- Instructions: https://github.com/PolymerElements/iron-demo-helpers/CONTRIBUTING.md#filing-issues -->
|
||||
### Description
|
||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
||||
|
||||
### Expected outcome
|
||||
|
||||
<!-- Example: The page stays the same color. -->
|
||||
|
||||
### Actual outcome
|
||||
|
||||
<!-- Example: The page turns pink. -->
|
||||
|
||||
### Live Demo
|
||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
<!-- Example
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
-->
|
||||
|
||||
### Browsers Affected
|
||||
<!-- Check all that apply -->
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
- [ ] Safari 9
|
||||
- [ ] Safari 8
|
||||
- [ ] Safari 7
|
||||
- [ ] Edge
|
||||
- [ ] IE 11
|
||||
- [ ] IE 10
|
@ -1 +0,0 @@
|
||||
bower_components/
|
@ -1,23 +0,0 @@
|
||||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: '46.0'
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
|
||||
env:
|
||||
global:
|
||||
- secure: i2lTz7D+1ZUYIqZoBtTaXXEUChnfihtpMDr7N6JBlCLBrj90GodBGYkJOJbn1GakBYRwpCvjsXI0DAhfSUQ+yEtLURnVW2KyuCFrAJ6/4h2QSPDJriJ+iG3/nexoDO3bxV010jms6b9/Fl8eeDWkVc2tjmOpBsa8T5+blot4xPVU3aKlB+gcXcLaYZFc6dBeXEBfSqK0bJ4601fRrX01ec25ljjZdgFnol405fThJlnr6GcFtQWNmtiMu0hqTk/AUFp3yL7IVFb0MfjrEBNZ47EL3BiYb4x1W4lDgCpooSoEYib5GDHw0N0NOaFcSoHqgQrDq1OxPH9qxEKkgFkGMhLa7dJ6Tt3GnJK1K+MS4yt//oAsMbPjwVCW4fZahzlIanQLhdFh7/UBRgnRlJ+lUzpcnVGIe2YNdL8wtMsJXApiOVFFEhKJ81dHwetvPmVz8SqF6B/uD9UuW04J34oxMrmV3g32x27rMpzSJQaU4h0jV0aYQcWLYhqDFSUWKXYTFdTBrnjKbuFxPa9VMs/kEmY8ckz3rcYet3eMlxRuL06qUr5Y0TC/kL7zM02L78YdRLqIeIDFPdqraVS7Kv8AoFBaYIm5MQ9dpsZomRP1h0DXXgcubnflLZCxawDn4dYfgZ27r1M0AXyZwiPP6+Lcel5DTyc8vwv7NO4QzIoaBvs=
|
||||
- secure: ODJASItc4zdTFFUAMyq2yfNszcjelFGYb8T4gwJyZe/Q5jWFfv3imBbZ/8UBVjaHh8pPANtb8iKBT70k1jl63uIeAlzNyCvE2ppqrfc2cuf9DL964i7ZY9kfC1cYni7UqdDnRgCir1mV2/Q0p3aGGw0/eksJtEjzVc4wPYN9+RjKljgRZzKq+Jbw8jM7NAS7BtRjTGPPTw+iDXvgabgQr7Sf7+bXECOXt9HqjLMxBdbR+DyvERZGpbj7Ish6CFKWOoULtnRPC+E9Subd1DQl0CEntPBlPWchxNoGxWPK2JURrNbup8dkwVDW433cm4ubuMnQpiQ0ityyzWF2fMPLOHPv6DLZl5RQPSz20oj9D9DOMV0nQTDegBTDazgGDpWei0Q3HH6EUj1nLdZag8EHWcbPzmIqseZ6cWP/C5Yps7BypEX5cWwJnKTe1BPXP/4Okeq/yZBIR+j5OdBo8q+G33qJBhMzLWdS2Pr3EYEujaCxU3VeZzFCCmdpZ7hwd68zWhJdILYWo4VCvkos61gwsUP3fizoBmFSW8copuRJbsFJ7Iq0gmM34pQsNKlOwgyN+uLHHEJ93ugFfmxpXdgbLO4Jo0NypITLO9bLICvMaSrpdG1kGwoIFH96XeWGZpYWN/9mtN9xct5hp6acPF4eeb2rwwSGH1rrFVqivnMLIN0=
|
||||
dist: trusty
|
@ -1,77 +0,0 @@
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "iron-demo-helpers",
|
||||
"version": "1.2.5",
|
||||
"description": "Utility classes to make building demo pages easier",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"demo"
|
||||
],
|
||||
"main": [
|
||||
"demo-snippet.html",
|
||||
"url-bar.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-demo-helpers.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-demo-helpers",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.5.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.1.0",
|
||||
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^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.1.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
||||
}
|
||||
}
|
@ -1,80 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="../paper-styles/shadow.html">
|
||||
|
||||
<dom-module id="demo-pages-shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
background-color: var(--paper-grey-50);
|
||||
}
|
||||
|
||||
.horizontal-section-container {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-justified);
|
||||
@apply(--layout-wrap);
|
||||
}
|
||||
|
||||
.vertical-section-container {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--center-justified);
|
||||
}
|
||||
|
||||
.horizontal-section {
|
||||
background-color: white;
|
||||
padding: 24px;
|
||||
margin-right: 24px;
|
||||
min-width: 200px;
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
background-color: white;
|
||||
padding: 24px;
|
||||
margin: 0 24px 24px 24px;
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.centered {
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--google-grey-700);
|
||||
}
|
||||
|
||||
demo-snippet {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
demo-snippet.centered-demo {
|
||||
--demo-snippet-demo: {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-wrap);
|
||||
@apply(--layout-center-justified);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
@ -1,184 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-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">
|
||||
<link rel="import" href="../prism-element/prism-theme-default.html">
|
||||
|
||||
<!--
|
||||
`demo-snippet` is a helper element that displays the source of a code snippet and
|
||||
its rendered demo. It can be used for both native elements and
|
||||
Polymer elements.
|
||||
|
||||
Example of a native element demo
|
||||
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<input type="date">
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
Example of a Polymer <paper-checkbox> demo
|
||||
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<paper-checkbox>Checkbox</paper-checkbox>
|
||||
<paper-checkbox checked>Checkbox</paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--demo-snippet` | Mixin applied to the entire element | `{}`
|
||||
`--demo-snippet-demo` | Mixin applied to just the demo section | `{}`
|
||||
`--demo-snippet-code` | Mixin applied to just the code section | `{}`
|
||||
|
||||
@element demo-snippet
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="demo-snippet">
|
||||
<template>
|
||||
<style is="custom-style" include="prism-theme-default"></style>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
@apply(--shadow-elevation-2dp);
|
||||
@apply(--demo-snippet);
|
||||
}
|
||||
|
||||
.demo {
|
||||
border-bottom: 1px solid var(--google-grey-300);
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
@apply(--demo-snippet-demo);
|
||||
}
|
||||
|
||||
.code {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
background-color: var(--google-grey-100);
|
||||
font-size: 13px;
|
||||
overflow: auto;
|
||||
@apply(--demo-snippet-code);
|
||||
}
|
||||
|
||||
.code > pre {
|
||||
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>
|
||||
|
||||
<div class="demo">
|
||||
<content id="content"></content>
|
||||
</div>
|
||||
|
||||
<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',
|
||||
|
||||
properties: {
|
||||
_markdown: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
var template = Polymer.dom(this).queryDistributedElements('template')[0];
|
||||
|
||||
// If there's no template, render empty code.
|
||||
if (!template) {
|
||||
this._markdown = '```\n```';
|
||||
return;
|
||||
}
|
||||
|
||||
var snippet = this.$.marked.unindent(template.innerHTML);
|
||||
|
||||
// Boolean properties are displayed as checked="", so remove the ="" bit.
|
||||
snippet = snippet.replace(/=""/g, '');
|
||||
|
||||
this._markdown = '```\n' + snippet + '\n' + '```';
|
||||
|
||||
// Stamp the template.
|
||||
if (!template.is) {
|
||||
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
|
||||
Polymer.Base._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>
|
||||
|
||||
</dom-module>
|
@ -1,88 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>demo-snippet demo</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-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="../demo-snippet.html">
|
||||
<link rel="import" href="../demo-pages-shared-styles.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
.vertical-section-container {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
paper-checkbox {
|
||||
display: block;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Demo of a native element</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<input type="date">
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Demo of a custom element</h4>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<paper-checkbox>Checkbox</paper-checkbox>
|
||||
<paper-checkbox checked>Checkbox</paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Demo of an element with custom styles</h4>
|
||||
<demo-snippet class="centered-demo small-text">
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
paper-checkbox.blue {
|
||||
--paper-checkbox-checked-color: var(--paper-blue-500);
|
||||
--paper-checkbox-checked-ink-color: var(--paper-blue-500);
|
||||
--paper-checkbox-unchecked-color: var(--paper-blue-900);
|
||||
--paper-checkbox-unchecked-ink-color: var(--paper-blue-900);
|
||||
--paper-checkbox-label-color: var(--paper-blue-500);
|
||||
}
|
||||
paper-checkbox.red {
|
||||
--paper-checkbox-checked-color: var(--paper-red-500);
|
||||
--paper-checkbox-checked-ink-color: var(--paper-red-500);
|
||||
--paper-checkbox-unchecked-color: var(--paper-red-900);
|
||||
--paper-checkbox-unchecked-ink-color: var(--paper-red-900);
|
||||
--paper-checkbox-label-color: var(--paper-red-500);
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-checkbox class="blue">Checkbox</paper-checkbox>
|
||||
<paper-checkbox checked class="red">Checkbox</paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Demo of an element with bindings</h4>
|
||||
<demo-snippet class="centered-demo small-text">
|
||||
<template is="dom-bind">
|
||||
<paper-checkbox checked="[[active]]">One-Way Binding</paper-checkbox>
|
||||
<paper-checkbox checked="{{active}}">Two-Way Binding</paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>url-bar demo</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-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../url-bar.html">
|
||||
<link rel="import" href="../demo-pages-shared-styles.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
<url-bar></url-bar>
|
||||
|
||||
<div id='message'></div>
|
||||
|
||||
<script>
|
||||
var message;
|
||||
if (window.top !== window) {
|
||||
message = 'URL Bar should appear above this text';
|
||||
} else {
|
||||
message = 'No URL Bar above this text. iframe below this text with URL bar.';
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('src', window.location.href);
|
||||
document.body.appendChild(iframe);
|
||||
}
|
||||
document.querySelector('#message').innerText = message;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,28 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>iron-demo-helpers</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page src="demo-snippet.html"></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,161 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>demo-snippet tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<link rel="import" href="../demo-snippet.html">
|
||||
<script src="../../iron-test-helpers/test-helpers.js"></script>
|
||||
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
|
||||
|
||||
</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".
|
||||
|
||||
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>
|
||||
<input disabled>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<demo-snippet id="customDemo">
|
||||
<template>
|
||||
<paper-checkbox disabled></paper-checkbox>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<demo-snippet id="demoWithAttributes">
|
||||
<template>
|
||||
<input disabled type="date">
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<demo-snippet id="typeExtensionDemo">
|
||||
<template is="dom-bind">
|
||||
<paper-checkbox checked="{{checked}}"></paper-checkbox>
|
||||
<input value="[[checked]]">
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<script>
|
||||
suite('display', function() {
|
||||
var emptyHeight;
|
||||
|
||||
setup(function() {
|
||||
var emptyDemo = document.getElementById('emptyDemo');
|
||||
emptyHeight = emptyDemo.getBoundingClientRect().height;
|
||||
});
|
||||
|
||||
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
|
||||
// it should respect the demo element's attributes, and not make up
|
||||
// new ones.
|
||||
var input = Polymer.dom(element).querySelector('input')
|
||||
expect(input).to.be.ok;
|
||||
expect(input.disabled).to.be.true;
|
||||
expect(input.checked).to.be.false;
|
||||
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
|
||||
});
|
||||
|
||||
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
|
||||
// it should respect the demo element's attributes, and not make up
|
||||
// new ones.
|
||||
var checkbox = Polymer.dom(element).querySelector('paper-checkbox')
|
||||
expect(checkbox).to.be.ok;
|
||||
expect(checkbox.disabled).to.be.true;
|
||||
expect(checkbox.checked).to.be.false;
|
||||
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal(
|
||||
'```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
|
||||
});
|
||||
|
||||
test('elements are only rendered once when using a custom type-extension', function() {
|
||||
var element = document.getElementById('typeExtensionDemo');
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
|
||||
var inputs = element.querySelectorAll('input');
|
||||
expect(inputs.length).to.be.equal(1);
|
||||
});
|
||||
|
||||
test('can support databinding between elements', function(done) {
|
||||
var element = document.getElementById('typeExtensionDemo');
|
||||
var input = Polymer.dom(element).querySelector('input');
|
||||
var checkbox = Polymer.dom(element).querySelector('paper-checkbox')
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
|
||||
checkbox.set('checked', true);
|
||||
|
||||
flush(function() {
|
||||
expect(checkbox.checked).to.be.equal(true);
|
||||
expect(input.value).to.be.equal('true');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('parsing', function() {
|
||||
test('preserves attributes', function() {
|
||||
var element = document.getElementById('demoWithAttributes');
|
||||
|
||||
// Render the distributed children.
|
||||
Polymer.dom.flush();
|
||||
|
||||
var markdownElement = element.$.marked;
|
||||
expect(markdownElement.markdown).to.be.equal(
|
||||
'```\n\n<input disabled type="date">\n\n```');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,26 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>demo-snippet tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'basic.html',
|
||||
'basic.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,102 +0,0 @@
|
||||
<!--
|
||||
@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
|
||||
-->
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-location/iron-location.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
|
||||
<!--
|
||||
`url-bar` is a helper element that displays a simple read-only URL bar if
|
||||
and only if the page is in an iframe. In this way we can demo elements that
|
||||
deal with the URL in our iframe-based demo environments.
|
||||
|
||||
If the page is not in an iframe, the url-bar element is not displayed.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--url-bar` | Mixin applied to the entire element | `{}`
|
||||
|
||||
@element url-bar
|
||||
@demo demo/url-bar.html
|
||||
-->
|
||||
<dom-module id='url-bar'>
|
||||
<template>
|
||||
<style include="iron-flex">
|
||||
:host {
|
||||
margin: 0px;
|
||||
padding: 15px 35px;
|
||||
border-bottom: 2px solid gray;
|
||||
height: 1.5em;
|
||||
display: none;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: white;
|
||||
@apply(--url-bar);
|
||||
}
|
||||
:host[in-iframe] {
|
||||
/* This element only wants to be displayed if it's in an iframe. */
|
||||
display: block;
|
||||
}
|
||||
label {
|
||||
@apply(--paper-font-common-base);
|
||||
display: inline-block;
|
||||
padding-right: 25px;
|
||||
}
|
||||
span {
|
||||
@apply(--paper-font-common-code);
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
<iron-location path="{{path}}" query="{{query}}" hash="{{hash}}">
|
||||
</iron-location>
|
||||
<div class="layout horizontal">
|
||||
<label>URL</label><span>{{url}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'url-bar',
|
||||
properties: {
|
||||
url: {
|
||||
computed: '__computeUrl(path, query, hash)'
|
||||
},
|
||||
inIframe: {
|
||||
value: function() {
|
||||
return window.top !== window;
|
||||
},
|
||||
reflectToAttribute: true
|
||||
},
|
||||
path: {
|
||||
type: String
|
||||
},
|
||||
query: {
|
||||
type: String
|
||||
},
|
||||
hash: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
__computeUrl: function(path, query, hash) {
|
||||
var url = path;
|
||||
if (query) {
|
||||
url += '?' + query;
|
||||
}
|
||||
if (hash) {
|
||||
url += '#' + hash;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</dom-module>
|
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.3.1",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"layout"
|
||||
],
|
||||
"main": "iron-flex-layout.html",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.3.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.3.1",
|
||||
"commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
}
|
@ -1,2 +0,0 @@
|
||||
bower_components
|
||||
|
@ -1,25 +0,0 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
|
||||
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
|
||||
- CXX=g++-4.8
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
@ -1,77 +0,0 @@
|
||||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.3.1",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"layout"
|
||||
],
|
||||
"main": "iron-flex-layout.html",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "^4.0.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,311 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="iron-shadow-flex-layout.html">
|
||||
|
||||
<script>
|
||||
console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
/*******************************
|
||||
Flex Layout
|
||||
*******************************/
|
||||
|
||||
.layout.horizontal,
|
||||
.layout.horizontal-reverse,
|
||||
.layout.vertical,
|
||||
.layout.vertical-reverse {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout.inline {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.layout.horizontal {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout.horizontal-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.layout.vertical {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout.vertical-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.layout.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.layout.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex,
|
||||
.flex-1 {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-2 {
|
||||
-ms-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.flex-3 {
|
||||
-ms-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.flex-4 {
|
||||
-ms-flex: 4;
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.flex-5 {
|
||||
-ms-flex: 5;
|
||||
-webkit-flex: 5;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.flex-6 {
|
||||
-ms-flex: 6;
|
||||
-webkit-flex: 6;
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
.flex-7 {
|
||||
-ms-flex: 7;
|
||||
-webkit-flex: 7;
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
.flex-8 {
|
||||
-ms-flex: 8;
|
||||
-webkit-flex: 8;
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
.flex-9 {
|
||||
-ms-flex: 9;
|
||||
-webkit-flex: 9;
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
.flex-10 {
|
||||
-ms-flex: 10;
|
||||
-webkit-flex: 10;
|
||||
flex: 10;
|
||||
}
|
||||
|
||||
.flex-11 {
|
||||
-ms-flex: 11;
|
||||
-webkit-flex: 11;
|
||||
flex: 11;
|
||||
}
|
||||
|
||||
.flex-12 {
|
||||
-ms-flex: 12;
|
||||
-webkit-flex: 12;
|
||||
flex: 12;
|
||||
}
|
||||
|
||||
/* alignment in cross axis */
|
||||
|
||||
.layout.start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.layout.center,
|
||||
.layout.center-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout.end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* alignment in main axis */
|
||||
|
||||
.layout.start-justified {
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.layout.center-justified,
|
||||
.layout.center-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout.end-justified {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.layout.around-justified {
|
||||
-ms-flex-pack: around;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.layout.justified {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* self alignment */
|
||||
|
||||
.self-start {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
-ms-align-self: flex-end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
-ms-align-self: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Other Layout
|
||||
*******************************/
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE 10 support for HTML5 hidden attr */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.fullbleed {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* fixed position */
|
||||
|
||||
.fixed-bottom,
|
||||
.fixed-left,
|
||||
.fixed-right,
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fixed-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed-left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
</style>
|
@ -1,307 +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
|
||||
-->
|
||||
|
||||
<script>
|
||||
console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
/*******************************
|
||||
Flex Layout
|
||||
*******************************/
|
||||
|
||||
html /deep/ .layout.horizontal,
|
||||
html /deep/ .layout.horizontal-reverse,
|
||||
html /deep/ .layout.vertical,
|
||||
html /deep/ .layout.vertical-reverse {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
html /deep/ .layout.inline {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
html /deep/ .layout.horizontal {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
html /deep/ .layout.horizontal-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .layout.vertical {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
html /deep/ .layout.vertical-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .layout.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
html /deep/ .layout.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .flex-auto {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
html /deep/ .flex-none {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
html /deep/ .flex,
|
||||
html /deep/ .flex-1 {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
html /deep/ .flex-2 {
|
||||
-ms-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
html /deep/ .flex-3 {
|
||||
-ms-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
html /deep/ .flex-4 {
|
||||
-ms-flex: 4;
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
html /deep/ .flex-5 {
|
||||
-ms-flex: 5;
|
||||
-webkit-flex: 5;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
html /deep/ .flex-6 {
|
||||
-ms-flex: 6;
|
||||
-webkit-flex: 6;
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
html /deep/ .flex-7 {
|
||||
-ms-flex: 7;
|
||||
-webkit-flex: 7;
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
html /deep/ .flex-8 {
|
||||
-ms-flex: 8;
|
||||
-webkit-flex: 8;
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
html /deep/ .flex-9 {
|
||||
-ms-flex: 9;
|
||||
-webkit-flex: 9;
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
html /deep/ .flex-10 {
|
||||
-ms-flex: 10;
|
||||
-webkit-flex: 10;
|
||||
flex: 10;
|
||||
}
|
||||
|
||||
html /deep/ .flex-11 {
|
||||
-ms-flex: 11;
|
||||
-webkit-flex: 11;
|
||||
flex: 11;
|
||||
}
|
||||
|
||||
html /deep/ .flex-12 {
|
||||
-ms-flex: 12;
|
||||
-webkit-flex: 12;
|
||||
flex: 12;
|
||||
}
|
||||
|
||||
/* alignment in cross axis */
|
||||
|
||||
html /deep/ .layout.start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .layout.center,
|
||||
html /deep/ .layout.center-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
html /deep/ .layout.end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* alignment in main axis */
|
||||
|
||||
html /deep/ .layout.start-justified {
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .layout.center-justified,
|
||||
html /deep/ .layout.center-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
html /deep/ .layout.end-justified {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
html /deep/ .layout.around-justified {
|
||||
-ms-flex-pack: around;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
html /deep/ .layout.justified {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* self alignment */
|
||||
|
||||
html /deep/ .self-start {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .self-center {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
html /deep/ .self-end {
|
||||
-ms-align-self: flex-end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
html /deep/ .self-stretch {
|
||||
-ms-align-self: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Other Layout
|
||||
*******************************/
|
||||
|
||||
html /deep/ .block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE 10 support for HTML5 hidden attr */
|
||||
html /deep/ [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html /deep/ .invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
html /deep/ .relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html /deep/ .fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.fullbleed {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html /deep/ .scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.fixed-left,
|
||||
.fixed-right,
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
</style>
|
@ -1,396 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-flex-layout demo</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../../iron-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 is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-demo: {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.container > div {
|
||||
padding: 15px;
|
||||
margin: 5px;
|
||||
background-color: white;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.vertical-section-container {
|
||||
max-width: 700px
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved class="fullbleed">
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
<div class="container flex">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Flexible children</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-horizontal {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-horizontal">
|
||||
<div>one</div>
|
||||
<div class="flexchild">two (flex)</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-vertical {
|
||||
@apply(--layout-vertical);
|
||||
height: 220px;
|
||||
}
|
||||
.flexchild-vertical {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-vertical">
|
||||
<div>one</div>
|
||||
<div class="flexchild-vertical">two (flex)</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Flex ratios</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-horizontal-with-ratios {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.flex2child {
|
||||
@apply(--layout-flex-2);
|
||||
}
|
||||
.flex3child {
|
||||
@apply(--layout-flex-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-horizontal-with-ratios">
|
||||
<div class="flex3child">one</div>
|
||||
<div class="flexchild">two</div>
|
||||
<div class="flex2child">three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-stretch-align {
|
||||
@apply(--layout-horizontal);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-stretch-align">
|
||||
<div>stretch</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-center-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-center-align">
|
||||
<div>center</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-start-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-start-align">
|
||||
<div>start</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-end-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-end-align">
|
||||
<div>end</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-start-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-start-justified">
|
||||
<div>start-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-center-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-center-justified">
|
||||
<div>center-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Justification, end justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-end-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-end-justified">
|
||||
<div>end-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-equal-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-equal-justified">
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-equal-around-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-around-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-equal-around-justified">
|
||||
<div>around-justified</div>
|
||||
<div>around-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Self alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-self-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
height: 120px;
|
||||
}
|
||||
.flex-self-align div {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.child1 {
|
||||
@apply(--layout-self-start);
|
||||
}
|
||||
.child2 {
|
||||
@apply(--layout-self-center);
|
||||
}
|
||||
.child3 {
|
||||
@apply(--layout-self-end);
|
||||
}
|
||||
.child4 {
|
||||
@apply(--layout-self-stretch);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-self-align">
|
||||
<div class="child1">one</div>
|
||||
<div class="child2">two</div>
|
||||
<div class="child3">three</div>
|
||||
<div class="child4">four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Wrapping</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-wrap {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-wrap);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-wrap">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
<div>four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>Reversed layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-reversed {
|
||||
@apply(--layout-horizontal-reverse);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-reversed">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
<div>four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h4>General purpose rules</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.general {
|
||||
width: 100%;
|
||||
}
|
||||
.general > div {
|
||||
background-color: #ccc;
|
||||
padding: 4px;
|
||||
margin: 12px;
|
||||
}
|
||||
.block {
|
||||
@apply(--layout-block);
|
||||
}
|
||||
.invisible {
|
||||
@apply(--layout-invisible);
|
||||
}
|
||||
.relative {
|
||||
@apply(--layout-relative);
|
||||
}
|
||||
.fit {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="general">
|
||||
<div>Before <span>[A Span]</span> After</div>
|
||||
<div>Before <span class="block">[A Block Span]</span> After</div>
|
||||
<div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
|
||||
<div class="relative" style="height: 100px;">
|
||||
<div class="fit" style="background-color: #000;color: white">Fit</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -1,24 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-flex-layout</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,431 +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
|
||||
-->
|
||||
|
||||
<!--
|
||||
A set of layout classes that let you specify layout properties directly in markup.
|
||||
You must include this file in every element that needs to use them.
|
||||
|
||||
Sample use:
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
|
||||
<div class="layout horizontal layout-start">
|
||||
<div>cross axis start alignment</div>
|
||||
</div>
|
||||
|
||||
The following imports are available:
|
||||
- iron-flex
|
||||
- iron-flex-reverse
|
||||
- iron-flex-alignment
|
||||
- iron-flex-factors
|
||||
- iron-positioning
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<!-- Most common used flex styles-->
|
||||
<dom-module id="iron-flex">
|
||||
<template>
|
||||
<style>
|
||||
.layout.horizontal,
|
||||
.layout.vertical {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout.inline {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.layout.horizontal {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layout.vertical {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.layout.center,
|
||||
.layout.center-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout.center-justified,
|
||||
.layout.center-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<!-- Basic flexbox reverse styles -->
|
||||
<dom-module id="iron-flex-reverse">
|
||||
<template>
|
||||
<style>
|
||||
.layout.horizontal-reverse,
|
||||
.layout.vertical-reverse {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout.horizontal-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.layout.vertical-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.layout.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<!-- Flexbox alignment -->
|
||||
<dom-module id="iron-flex-alignment">
|
||||
<template>
|
||||
<style>
|
||||
/**
|
||||
* Alignment in cross axis.
|
||||
*/
|
||||
.layout.start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.layout.center,
|
||||
.layout.center-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layout.end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.layout.baseline {
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alignment in main axis.
|
||||
*/
|
||||
.layout.start-justified {
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.layout.center-justified,
|
||||
.layout.center-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout.end-justified {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.layout.around-justified {
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.layout.justified {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/**
|
||||
* Self alignment.
|
||||
*/
|
||||
.self-start {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
-ms-align-self: flex-end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
-ms-align-self: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.self-baseline {
|
||||
-ms-align-self: baseline;
|
||||
-webkit-align-self: baseline;
|
||||
align-self: baseline;
|
||||
};
|
||||
|
||||
/**
|
||||
* multi-line alignment in main axis.
|
||||
*/
|
||||
.layout.start-aligned {
|
||||
-ms-flex-line-pack: start; /* IE10 */
|
||||
-ms-align-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.layout.end-aligned {
|
||||
-ms-flex-line-pack: end; /* IE10 */
|
||||
-ms-align-content: flex-end;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
|
||||
.layout.center-aligned {
|
||||
-ms-flex-line-pack: center; /* IE10 */
|
||||
-ms-align-content: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.layout.between-aligned {
|
||||
-ms-flex-line-pack: justify; /* IE10 */
|
||||
-ms-align-content: space-between;
|
||||
-webkit-align-content: space-between;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.layout.around-aligned {
|
||||
-ms-flex-line-pack: distribute; /* IE10 */
|
||||
-ms-align-content: space-around;
|
||||
-webkit-align-content: space-around;
|
||||
align-content: space-around;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<dom-module id="iron-flex-factors">
|
||||
<template>
|
||||
<style>
|
||||
.flex,
|
||||
.flex-1 {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
}
|
||||
|
||||
.flex-2 {
|
||||
-ms-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.flex-3 {
|
||||
-ms-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.flex-4 {
|
||||
-ms-flex: 4;
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.flex-5 {
|
||||
-ms-flex: 5;
|
||||
-webkit-flex: 5;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
.flex-6 {
|
||||
-ms-flex: 6;
|
||||
-webkit-flex: 6;
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
.flex-7 {
|
||||
-ms-flex: 7;
|
||||
-webkit-flex: 7;
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
.flex-8 {
|
||||
-ms-flex: 8;
|
||||
-webkit-flex: 8;
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
.flex-9 {
|
||||
-ms-flex: 9;
|
||||
-webkit-flex: 9;
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
.flex-10 {
|
||||
-ms-flex: 10;
|
||||
-webkit-flex: 10;
|
||||
flex: 10;
|
||||
}
|
||||
|
||||
.flex-11 {
|
||||
-ms-flex: 11;
|
||||
-webkit-flex: 11;
|
||||
flex: 11;
|
||||
}
|
||||
|
||||
.flex-12 {
|
||||
-ms-flex: 12;
|
||||
-webkit-flex: 12;
|
||||
flex: 12;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<!-- Non-flexbox positioning helper styles -->
|
||||
<dom-module id="iron-positioning">
|
||||
<template>
|
||||
<style>
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE 10 support for HTML5 hidden attr */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.fullbleed {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* fixed position */
|
||||
.fixed-bottom,
|
||||
.fixed-left,
|
||||
.fixed-right,
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fixed-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed-left {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
@ -1,399 +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">
|
||||
|
||||
<!--
|
||||
The `<iron-flex-layout>` component provides simple ways to use
|
||||
[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
|
||||
also known as flexbox. This component provides two different ways to use flexbox:
|
||||
|
||||
1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
|
||||
The layout class stylesheet provides a simple set of class-based flexbox rules, that
|
||||
let you specify layout properties directly in markup. You must include this file
|
||||
in every element that needs to use them.
|
||||
|
||||
Sample use:
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
|
||||
<div class="layout horizontal layout-start">
|
||||
<div>cross axis start alignment</div>
|
||||
</div>
|
||||
|
||||
2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
|
||||
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
|
||||
|
||||
Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
|
||||
are deprecated, and should not be used. To continue using layout properties
|
||||
directly in markup, please switch to using the new `dom-module`-based
|
||||
[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
|
||||
Please note that the new version does not use `/deep/`, and therefore requires you
|
||||
to import the `dom-modules` in every element that needs to use them.
|
||||
|
||||
A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
|
||||
|
||||
@group Iron Elements
|
||||
@pseudoElement iron-flex-layout
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<style>
|
||||
/* IE 10 support for HTML5 hidden attr */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is="custom-style">
|
||||
:root {
|
||||
|
||||
--layout: {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
};
|
||||
|
||||
--layout-inline: {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
};
|
||||
|
||||
--layout-horizontal: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
};
|
||||
|
||||
--layout-horizontal-reverse: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
};
|
||||
|
||||
--layout-vertical: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
};
|
||||
|
||||
--layout-vertical-reverse: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
};
|
||||
|
||||
--layout-wrap: {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
};
|
||||
|
||||
--layout-wrap-reverse: {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
};
|
||||
|
||||
--layout-flex-auto: {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
};
|
||||
|
||||
--layout-flex-none: {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
};
|
||||
|
||||
--layout-flex: {
|
||||
-ms-flex: 1 1 0.000000001px;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-flex-basis: 0.000000001px;
|
||||
flex-basis: 0.000000001px;
|
||||
};
|
||||
|
||||
--layout-flex-2: {
|
||||
-ms-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
};
|
||||
|
||||
--layout-flex-3: {
|
||||
-ms-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
};
|
||||
|
||||
--layout-flex-4: {
|
||||
-ms-flex: 4;
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
};
|
||||
|
||||
--layout-flex-5: {
|
||||
-ms-flex: 5;
|
||||
-webkit-flex: 5;
|
||||
flex: 5;
|
||||
};
|
||||
|
||||
--layout-flex-6: {
|
||||
-ms-flex: 6;
|
||||
-webkit-flex: 6;
|
||||
flex: 6;
|
||||
};
|
||||
|
||||
--layout-flex-7: {
|
||||
-ms-flex: 7;
|
||||
-webkit-flex: 7;
|
||||
flex: 7;
|
||||
};
|
||||
|
||||
--layout-flex-8: {
|
||||
-ms-flex: 8;
|
||||
-webkit-flex: 8;
|
||||
flex: 8;
|
||||
};
|
||||
|
||||
--layout-flex-9: {
|
||||
-ms-flex: 9;
|
||||
-webkit-flex: 9;
|
||||
flex: 9;
|
||||
};
|
||||
|
||||
--layout-flex-10: {
|
||||
-ms-flex: 10;
|
||||
-webkit-flex: 10;
|
||||
flex: 10;
|
||||
};
|
||||
|
||||
--layout-flex-11: {
|
||||
-ms-flex: 11;
|
||||
-webkit-flex: 11;
|
||||
flex: 11;
|
||||
};
|
||||
|
||||
--layout-flex-12: {
|
||||
-ms-flex: 12;
|
||||
-webkit-flex: 12;
|
||||
flex: 12;
|
||||
};
|
||||
|
||||
/* alignment in cross axis */
|
||||
|
||||
--layout-start: {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
};
|
||||
|
||||
--layout-center: {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
};
|
||||
|
||||
--layout-end: {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
};
|
||||
|
||||
--layout-baseline: {
|
||||
-ms-flex-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
align-items: baseline;
|
||||
};
|
||||
|
||||
/* alignment in main axis */
|
||||
|
||||
--layout-start-justified: {
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
};
|
||||
|
||||
--layout-center-justified: {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
};
|
||||
|
||||
--layout-end-justified: {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
};
|
||||
|
||||
--layout-around-justified: {
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
};
|
||||
|
||||
--layout-justified: {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
};
|
||||
|
||||
--layout-center-center: {
|
||||
@apply(--layout-center);
|
||||
@apply(--layout-center-justified);
|
||||
};
|
||||
|
||||
/* self alignment */
|
||||
|
||||
--layout-self-start: {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
};
|
||||
|
||||
--layout-self-center: {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
};
|
||||
|
||||
--layout-self-end: {
|
||||
-ms-align-self: flex-end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
};
|
||||
|
||||
--layout-self-stretch: {
|
||||
-ms-align-self: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
};
|
||||
|
||||
--layout-self-baseline: {
|
||||
-ms-align-self: baseline;
|
||||
-webkit-align-self: baseline;
|
||||
align-self: baseline;
|
||||
};
|
||||
|
||||
/* multi-line alignment in main axis */
|
||||
|
||||
--layout-start-aligned: {
|
||||
-ms-flex-line-pack: start; /* IE10 */
|
||||
-ms-align-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
};
|
||||
|
||||
--layout-end-aligned: {
|
||||
-ms-flex-line-pack: end; /* IE10 */
|
||||
-ms-align-content: flex-end;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
};
|
||||
|
||||
--layout-center-aligned: {
|
||||
-ms-flex-line-pack: center; /* IE10 */
|
||||
-ms-align-content: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
};
|
||||
|
||||
--layout-between-aligned: {
|
||||
-ms-flex-line-pack: justify; /* IE10 */
|
||||
-ms-align-content: space-between;
|
||||
-webkit-align-content: space-between;
|
||||
align-content: space-between;
|
||||
};
|
||||
|
||||
--layout-around-aligned: {
|
||||
-ms-flex-line-pack: distribute; /* IE10 */
|
||||
-ms-align-content: space-around;
|
||||
-webkit-align-content: space-around;
|
||||
align-content: space-around;
|
||||
};
|
||||
|
||||
/*******************************
|
||||
Other Layout
|
||||
*******************************/
|
||||
|
||||
--layout-block: {
|
||||
display: block;
|
||||
};
|
||||
|
||||
--layout-invisible: {
|
||||
visibility: hidden !important;
|
||||
};
|
||||
|
||||
--layout-relative: {
|
||||
position: relative;
|
||||
};
|
||||
|
||||
--layout-fit: {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
};
|
||||
|
||||
--layout-scroll: {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
};
|
||||
|
||||
--layout-fullbleed: {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
};
|
||||
|
||||
/* fixed position */
|
||||
|
||||
--layout-fixed-top: {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
};
|
||||
|
||||
--layout-fixed-right: {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
};
|
||||
|
||||
--layout-fixed-bottom: {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
};
|
||||
|
||||
--layout-fixed-left: {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</style>
|
@ -1,31 +0,0 @@
|
||||
<!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',
|
||||
'iron-flex-layout-classes.html',
|
||||
'iron-flex-layout-classes.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,412 +0,0 @@
|
||||
<!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-layout-classes 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-classes.html">
|
||||
|
||||
<style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
|
||||
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;
|
||||
}
|
||||
.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; }
|
||||
#c4 { background-color: #03A9F4; }
|
||||
#c5 { background-color: #E91E63; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<div class="container layout">
|
||||
<div id="c1"></div>
|
||||
<div id="c2"></div>
|
||||
<div id="c3"></div>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="flex">
|
||||
<template>
|
||||
<div class="container layout">
|
||||
<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 layout">
|
||||
<div id="c1"></div>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="positioning">
|
||||
<template>
|
||||
<div class="container layout relative">
|
||||
<div id="c1"></div>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="align-content">
|
||||
<template>
|
||||
<div class="container layout">
|
||||
<div id="c1"></div>
|
||||
<div id="c2"></div>
|
||||
<div id="c3"></div>
|
||||
<div id="c4"></div>
|
||||
<div id="c5"></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-reverse');
|
||||
container.classList.add('wrap-reverse');
|
||||
container.style.width = '100px';
|
||||
assert.isTrue(positionEquals(container, 0, 100, 0, 100), "container position ok");
|
||||
// |c3|
|
||||
// |c2| |c1|
|
||||
assert.isTrue(positionEquals(c1, 50, 100, 50, 100), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, 0, 50, 50, 100), "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('flex-2');
|
||||
c3.classList.add('flex-3');
|
||||
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('flex-2');
|
||||
c3.classList.add('flex-3');
|
||||
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('align-content', function() {
|
||||
var container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('align-content');
|
||||
container.classList.add('small');
|
||||
container.classList.add('tall');
|
||||
container.classList.add('horizontal');
|
||||
container.classList.add('flex');
|
||||
container.classList.add('wrap');
|
||||
});
|
||||
|
||||
test('default is stretch', function() {
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('layout-start-aligned', function() {
|
||||
container.classList.add('start-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
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");
|
||||
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('layout-end-aligned', function() {
|
||||
container.classList.add('end-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('layout-center-aligned', function() {
|
||||
container.classList.add('center-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
var center = (300 - 50) / 2;
|
||||
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('layout-between-aligned', function() {
|
||||
container.classList.add('between-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "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, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('layout-around-aligned', function() {
|
||||
container.classList.add('around-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
var center = (300 - 50) / 2;
|
||||
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 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>
|
@ -1,434 +0,0 @@
|
||||
<!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-layout 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; }
|
||||
#c4 { background-color: #03A9F4; }
|
||||
#c5 { background-color: #E91E63; }
|
||||
|
||||
.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); }
|
||||
.start-aligned { @apply(--layout-start-aligned); }
|
||||
.end-aligned { @apply(--layout-end-aligned); }
|
||||
.center-aligned { @apply(--layout-center-aligned); }
|
||||
.between-aligned { @apply(--layout-between-aligned); }
|
||||
.around-aligned { @apply(--layout-around-aligned); }
|
||||
|
||||
</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>
|
||||
|
||||
<test-fixture id="align-content">
|
||||
<template>
|
||||
<div class="container small tall horizontal flex wrap">
|
||||
<div id="c1"></div>
|
||||
<div id="c2"></div>
|
||||
<div id="c3"></div>
|
||||
<div id="c4"></div>
|
||||
<div id="c5"></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('align-content', function() {
|
||||
var container;
|
||||
|
||||
setup(function() {
|
||||
container = fixture('align-content');
|
||||
});
|
||||
|
||||
test('default is stretch', function() {
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('--layout-start-aligned', function() {
|
||||
container.classList.add('start-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
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");
|
||||
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('--layout-end-aligned', function() {
|
||||
container.classList.add('end-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('--layout-center-aligned', function() {
|
||||
container.classList.add('center-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
var center = (300 - 50) / 2;
|
||||
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('--layout-between-aligned', function() {
|
||||
container.classList.add('between-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "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, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
|
||||
});
|
||||
|
||||
test('--layout-around-aligned', function() {
|
||||
container.classList.add('around-aligned');
|
||||
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
|
||||
var center = (300 - 50) / 2;
|
||||
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
|
||||
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
|
||||
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
|
||||
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
|
||||
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 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>
|
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "iron-form-element-behavior",
|
||||
"version": "1.0.6",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"private": true,
|
||||
"main": "iron-form-element-behavior.html",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"description": "Enables a custom element to be included in an iron-form",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"form"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-form-element-behavior",
|
||||
"_release": "1.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.6",
|
||||
"commit": "cf9e09ded62daf3363852ce98260aaad1ed0fae1"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-form-element-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-form-element-behavior"
|
||||
}
|
@ -1 +0,0 @@
|
||||
bower_components
|
@ -1,22 +0,0 @@
|
||||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- bower install
|
||||
env:
|
||||
global:
|
||||
- secure: EN5HtbAeaCE1IzGk5JlSq7GWcANh/zYgbpZn1y0VocfkZfzOv8cIh8Zmr4Q6shII6K07Fyx1LQuAjsURqX9mc3AmfMHgPIbpZGpOKrjvt1Vf0bPN+uIC9vIFj3sLQj12gcfJg48EXk6HWsHscCZ3+am1xvRflhNEY3TjHPrUTgkF+KLbBEfb4mCZwVc4dln76ffvTQ/cPI9eYczNp1q9wWpYvn794qRLtAkKuQ5Z1b6hunOAx/hzCjGNbJDO3gkxO68dzzSp9YDIhKEFAUlMDalwLRr7sNgB4sNeDCg4mmie5fe6xk831HvBYFxZxmXD1uS6/Hvd8MiBDiols3lwz8uEUnPyrwDlxUkjn2sl5S+gO8CcHU2mShUCl73JfBtyWDKPSfQLR5QHEk4eqNzNn2HinAE/aezi4/TVCY7P3ujeK8sFlTsb9vlywnlJO3fqyZ+lBwZ4CbNjOTs1L2W+guT1Oq30PJ5TVxU2mvmIMtdpPveZB0iM/PM9FECsb303KeV5Zomk4dp2MxirK1O/4mPAHIz9UUpGopGOtpuODnRV4Lq7V9HaDxYOZzAHZDK4mJ1y6tSRH/yMUTEidhG2j5F6MXmhbKXj3I0oR95xx1RH+b8myErvUBlto4jR21Pd+mOVlkU78CBSN9XGhtBQjklF5+aC8YeH1DEv6mTn2o8=
|
||||
- secure: q3AjjaoaTZcdAdjIvzSf8Q1SdEg1mY6lBkeoDTMKJcftJ8zz1qIfjGzEuycSVVnOJhZ6WmvMMBxdThQCymF1wzT++SV+u34DYSFoZ5EhjM0TFhP63PRuhbE3DquPaISpM5aCH7epV4nMFD7PFE1BP4u/qiETAgPeAoY9LMT/JPclOfcQ3euwks3TSM6O8g7Ro1h1ElywCQ1souzkcjvJ3FxsqysJb7Mg/n9bmtwnkol/mrBaP6JzQMURUyswx7ZPj3qiFoA9ZLiNirzf+O781A4msKursjYrKr6TZtB6xcMlEg89YhFBXrLE9IEEM/fNp+vPNhaIA5VjYRy8iIK402RXpbh7/AlPD7yMFITeMSfT+Bqldur+pi0oN1N9SeWrmk6P+bdfdkdyGl1CVKP4S35z8cyFRgmvxO4/UG65cb66AdMeNVBEQsi2flCWgPyaTmOQ53YryCs7cFRu3zSMnU3F/gWqlmletgxGhFOBHTtEmr2A9QBLgg+EvB/83wj2dEEfMlIpoeq83/2PaE8hKAWyqPga7t532vU5AIFNOUk9vGzRCxsqGKF2j0/zFBdgHSLYCsWVrbjxmxdu6Fzi8ZATeqjDoc0eaIPhBkekOvDrUtUSHA9sSSG8j69GGUL4+WkoCMB74dz+GXz85fMJlMZWBXPtazDlNXYfU60T/1E=
|
||||
node_js: 4
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
@ -1,72 +0,0 @@
|
||||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "iron-form-element-behavior",
|
||||
"version": "1.0.6",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"private": true,
|
||||
"main": "iron-form-element-behavior.html",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"description": "Enables a custom element to be included in an iron-form",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"form"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-form-element-behavior.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
@ -1,67 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-form-element-behavior demo</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-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="simple-form.html">
|
||||
<link rel="import" href="simple-element.html">
|
||||
</head>
|
||||
<style>
|
||||
input {
|
||||
margin-bottom: 24px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="vertical-section-container centered">
|
||||
<div class="vertical-section">
|
||||
<form is="simple-form" id="form">
|
||||
Element with iron-form-element-behavior <input is="simple-element" type="text" name="one" value="one">
|
||||
<br>
|
||||
Element without iron-form-element-behavior <input type="text" name="two" value="two">
|
||||
<br>
|
||||
Element with iron-form-element-behavior <input is="simple-element" type="text" name="three" value="three">
|
||||
</form>
|
||||
|
||||
<h4>Elements tracked by the form: <button onclick="update()">Update</button> </h4>
|
||||
|
||||
<ul id="output">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function update() {
|
||||
var output = document.getElementById('output');
|
||||
var elements = document.getElementById('form').formElements;
|
||||
document.getElementById('output').innerHTML = '';
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var li = document.createElement('li');
|
||||
var text = document.createTextNode(elements[i].value);
|
||||
li.appendChild(text);
|
||||
output.appendChild(li);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
@ -1,27 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-form-element-behavior.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'simple-element',
|
||||
|
||||
extends: 'input',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronFormElementBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,53 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'simple-form',
|
||||
|
||||
extends: 'form',
|
||||
|
||||
properties: {
|
||||
formElements: {
|
||||
type: Object,
|
||||
notify: true
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'iron-form-element-register': '_elementRegistered',
|
||||
'iron-form-element-unregister': '_elementUnregistered'
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.formElements = [];
|
||||
},
|
||||
|
||||
_elementRegistered: function(e) {
|
||||
this.formElements.push(e.target);
|
||||
e.target._parentForm = this;
|
||||
},
|
||||
|
||||
_elementUnregistered: function(e) {
|
||||
var target = e.detail.target;
|
||||
if (target) {
|
||||
var index = this.formElements.indexOf(target);
|
||||
if (index > -1) {
|
||||
this.formElements.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
@ -1,30 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>iron-form-element-behavior</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -1,86 +0,0 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<script>
|
||||
/**
|
||||
Polymer.IronFormElementBehavior enables a custom element to be included
|
||||
in an `iron-form`.
|
||||
|
||||
@demo demo/index.html
|
||||
@polymerBehavior
|
||||
*/
|
||||
Polymer.IronFormElementBehavior = {
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the element is added to an `iron-form`.
|
||||
*
|
||||
* @event iron-form-element-register
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the element is removed from an `iron-form`.
|
||||
*
|
||||
* @event iron-form-element-unregister
|
||||
*/
|
||||
|
||||
/**
|
||||
* The name of this element.
|
||||
*/
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The value for this element.
|
||||
*/
|
||||
value: {
|
||||
notify: true,
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to mark the input as required. If used in a form, a
|
||||
* custom element that uses this behavior should also use
|
||||
* Polymer.IronValidatableBehavior and define a custom validation method.
|
||||
* Otherwise, a `required` element will always be considered valid.
|
||||
* It's also strongly recommended to provide a visual style for the element
|
||||
* when its value is invalid.
|
||||
*/
|
||||
required: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* The form that the element is registered to.
|
||||
*/
|
||||
_parentForm: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// Note: the iron-form that this element belongs to will set this
|
||||
// element's _parentForm property when handling this event.
|
||||
this.fire('iron-form-element-register');
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
if (this._parentForm) {
|
||||
this._parentForm.fire('iron-form-element-unregister', {target: this});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
@ -1,71 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>iron-form-element-behavior</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-form-element-behavior.html">
|
||||
<link rel="import" href="simple-element.html">
|
||||
<link rel="import" href="simple-form.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<form is="simple-form"></form>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('basic', function() {
|
||||
var form;
|
||||
|
||||
setup(function() {
|
||||
form = fixture('basic');
|
||||
});
|
||||
|
||||
test('elements fire an event when attached', function(done) {
|
||||
var element = document.createElement('input', 'simple-element');
|
||||
|
||||
var handler = sinon.spy();
|
||||
form.addEventListener('iron-form-element-register', handler);
|
||||
|
||||
form.appendChild(element);
|
||||
Polymer.Base.async(function() {
|
||||
expect(handler.callCount).to.be.equal(1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('elements fire an event when detached', function(done) {
|
||||
var element = document.createElement('input', 'simple-element');
|
||||
form.appendChild(element);
|
||||
element._parentForm = form;
|
||||
|
||||
var handler = sinon.spy();
|
||||
form.addEventListener('iron-form-element-unregister', handler);
|
||||
|
||||
form.removeChild(element);
|
||||
Polymer.Base.async(function() {
|
||||
expect(handler.callCount).to.be.equal(1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user