finish dropping polymer

This commit is contained in:
Luke Pulverenti 2016-09-15 19:17:50 -04:00
parent 17af3ec3ef
commit 2c9913c69b
279 changed files with 259 additions and 28449 deletions

View 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
}

View 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.

View 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

View 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>

View 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"
]
}

View 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);
}
});

View File

@ -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",

View File

@ -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>

View File

@ -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"
}

View File

@ -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

View File

@ -1 +0,0 @@
bower_components

View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: 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

View File

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

View File

@ -1,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": []
}

View File

@ -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>

View File

@ -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>

View File

@ -1,28 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<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>

View File

@ -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>

View File

@ -1,24 +0,0 @@
<!DOCTYPE html><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><html><head>
<meta charset="utf-8">
<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>

View File

@ -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>

View File

@ -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"
}

View File

@ -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

View File

@ -1 +0,0 @@
bower_components

View File

@ -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

View File

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

View File

@ -1,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": []
}

View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<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>

View File

@ -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>

View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"
}

View File

@ -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

View File

@ -1 +0,0 @@
bower_components

View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: 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

View File

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

View File

@ -1,32 +0,0 @@
{
"name": "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": []
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"
}

View File

@ -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

View File

@ -1 +0,0 @@
bower_components

View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: 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

View File

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

View File

@ -1,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"
}
}

View File

@ -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>

View File

@ -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>

View File

@ -1,30 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"
}

View File

@ -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

View File

@ -1 +0,0 @@
bower_components/

View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
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

View File

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

View File

@ -1,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"
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,28 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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>

View File

@ -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>

View File

@ -1,26 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>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>

View File

@ -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>

View File

@ -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"
}

View File

@ -1,2 +0,0 @@
bower_components

View File

@ -1,25 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: 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"

View File

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

View File

@ -1,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": []
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"
}

View File

@ -1 +0,0 @@
bower_components

View File

@ -1,22 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
env:
global:
- secure: 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"

View File

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

View File

@ -1,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": []
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,30 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>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>

View File

@ -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>

View File

@ -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