update components

This commit is contained in:
Luke Pulverenti 2015-11-21 12:02:16 -05:00
parent 9337fa578f
commit 465ea29e6b
17 changed files with 477 additions and 63 deletions

View file

@ -1,6 +1,6 @@
{
"name": "paper-behaviors",
"version": "1.0.9",
"version": "1.0.10",
"description": "Common behaviors across the paper elements",
"authors": [
"The Polymer Authors"
@ -27,7 +27,7 @@
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
"polymer": "Polymer/polymer#^1.2.1"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
@ -35,16 +35,17 @@
"paper-material": "PolymerElements/paper-material#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^3.4.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.9",
"ignore": [],
"_release": "1.0.10",
"_resolution": {
"type": "version",
"tag": "v1.0.9",
"commit": "d9c0398cbaf3881bef3533b5b2b6127fc4d0960c"
"tag": "v1.0.10",
"commit": "4b244a542af2c6c271498dfb98b00ed284df1d6a"
},
"_source": "git://github.com/polymerelements/paper-behaviors.git",
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-behaviors"
"_originalSource": "PolymerElements/paper-behaviors"
}

View file

@ -0,0 +1,22 @@
language: node_js
sudo: false
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- bower install
env:
global:
- secure: Mni8srJPpo7GAk5wCLTiqqVqAJxxKMpGuxYxooqIAuc050n26KkHfDWLPY69taFY9WYjU3pzVEwrYX3HqSbib1CTlcfeATGs1+q2rXKZKmBAnKKPi12CEEXOcbMoVgzVQs7rzr8MQF9LR2TLtBuMQEoAimebA7uQcYGXcSWKJR4=
- secure: LYF3qBtJ6zZcf9dsSJ9t/My4Cne5ieI6RkHFj/0MBcy0vMbUazTH38vuy+FILYlrzbaxkVs36lPQFBXH83Ue3TxjdfjeNvK8YiuEcFjE5lQi2u7+x54eSV3myp2SIdtBLGE7rqmY0zj/Oeg91fV22OdfSHhJxuV/RxFFZIuZtHY=
node_js: 4
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

View file

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

View file

@ -1,6 +1,6 @@
{
"name": "paper-behaviors",
"version": "1.0.9",
"version": "1.0.10",
"description": "Common behaviors across the paper elements",
"authors": [
"The Polymer Authors"
@ -27,7 +27,7 @@
"dependencies": {
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
"polymer": "Polymer/polymer#^1.2.1"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
@ -35,7 +35,8 @@
"paper-material": "PolymerElements/paper-material#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^3.4.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
},
"ignore": []
}

View file

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

View file

@ -66,10 +66,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* Ensures this element contains a ripple effect. For startup efficiency
* the ripple effect is dynamically on demand when needed.
* @param {!Event=} opt_triggeringEvent (optional) event that triggered the
* @param {!Event=} optTriggeringEvent (optional) event that triggered the
* ripple.
*/
ensureRipple: function(opt_triggeringEvent) {
ensureRipple: function(optTriggeringEvent) {
if (!this.hasRipple()) {
this._ripple = this._createRipple();
this._ripple.noink = this.noink;
@ -77,12 +77,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
if (rippleContainer) {
Polymer.dom(rippleContainer).appendChild(this._ripple);
}
var domContainer = rippleContainer === this.shadyRoot ? this :
rippleContainer;
if (opt_triggeringEvent) {
var target = opt_triggeringEvent.target;
if (domContainer.contains(/** @type {Node} */(target))) {
this._ripple.uiDownAction(opt_triggeringEvent);
if (optTriggeringEvent) {
// Check if the event happened inside of the ripple container
// Fall back to host instead of the root because distributed text
// nodes are not valid event targets
var domContainer = Polymer.dom(this._rippleContainer || this);
var target = Polymer.dom(optTriggeringEvent).rootTarget;
if (domContainer.deepContains( /** @type {Node} */(target))) {
this._ripple.uiDownAction(optTriggeringEvent);
}
}
}

View file

@ -1,5 +1,4 @@
<!doctype html>
<!--
<!DOCTYPE html><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@ -7,10 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
--><html><head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
@ -21,8 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
'paper-button-behavior.html',
'paper-radio-button-behavior.html',
'paper-checked-element-behavior.html',
'paper-ripple-behavior.html'
'paper-ripple-behavior.html',
'paper-button-behavior.html?dom=shadow',
'paper-radio-button-behavior.html?dom=shadow',
'paper-checked-element-behavior.html?dom=shadow',
'paper-ripple-behavior.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>

View file

@ -15,13 +15,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-behaviors/iron-button-state.html">
<link rel="import" href="../paper-ripple-behavior.html">
<link rel="import" href="shadowed-ripple.html">
</head>
<body>
@ -48,6 +47,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="ShadowBasic">
<template>
<sd-ripple></sd-ripple>
</template>
</test-fixture>
<test-fixture id="ShadowText">
<template>
<sd-ripple>Howdy!</sd-ripple>
</template>
</test-fixture>
<test-fixture id="ShadowElement">
<template>
<sd-ripple>
<div id="source">source!</div>
</sd-ripple>
</template>
</test-fixture>
<script>
suite('PaperRippleBehavior', function() {
var ripple;
@ -75,6 +94,240 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
MockInteractions.up(ripple);
});
suite('Correct Targeting', function() {
function assertInteractionCausesRipple(host, node, expected, msg) {
var ripple = host.getRipple();
Polymer.dom.flush();
MockInteractions.down(node);
assert.equal(ripple.ripples.length > 0, expected, msg);
MockInteractions.up(node);
}
function assertInteractionAtLocationCausesRipple(host, node, location, expected, msg) {
var ripple = host.getRipple();
Polymer.dom.flush();
MockInteractions.down(node, location);
assert.equal(ripple.ripples.length > 0, expected, msg);
MockInteractions.up(node);
}
suite('basic', function() {
suite('container = host', function() {
setup(function() {
ripple = fixture('ShadowBasic');
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
});
test('tap #wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap #separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
});
suite('container = wrapper', function() {
setup(function() {
ripple = fixture('ShadowBasic');
ripple._rippleContainer = ripple.$.wrapper;
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap #wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap #separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#separate')
});
});
suite('container = separate', function(done) {
setup(function() {
ripple = fixture('ShadowBasic');
ripple._rippleContainer = ripple.$.separate;
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
});
});
suite('distributed text', function() {
var textLocation;
function getTextLocation(ripple) {
// build a Range to get the BCR of a given text node
var r = document.createRange();
r.selectNode(Polymer.dom(ripple.$.content).getDistributedNodes()[0]);
return MockInteractions.middleOfNode(r);
}
suite('container = host', function() {
setup(function() {
ripple = fixture('ShadowText');
textLocation = getTextLocation(ripple);
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
test('tap text', function() {
assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper, textLocation, true, 'text');
});
});
suite('container = wrapper', function() {
setup(function() {
ripple = fixture('ShadowText');
ripple._rippleContainer = ripple.$.wrapper;
textLocation = getTextLocation(ripple);
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#separate')
});
test('tap text', function() {
assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper, textLocation, true, 'text');
});
});
suite('container = separate', function() {
setup(function() {
ripple = fixture('ShadowText');
ripple._rippleContainer = ripple.$.separate;
textLocation = getTextLocation(ripple);
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
test('tap text', function() {
assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper, textLocation, false, 'text');
});
});
});
suite('distributed element', function() {
var source;
suite('container = host', function() {
setup(function() {
ripple = fixture('ShadowElement');
source = Polymer.dom(ripple).querySelector('#source');
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, true, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
test('tap source', function() {
assertInteractionCausesRipple(ripple, source, true, '#source');
});
});
suite('container = wrapper', function() {
setup(function() {
ripple = fixture('ShadowElement');
ripple._rippleContainer = ripple.$.wrapper;
source = Polymer.dom(ripple).querySelector('#source');
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#separate')
});
test('tap source', function() {
assertInteractionCausesRipple(ripple, source, true, '#source');
});
});
suite('container = separate', function() {
setup(function() {
ripple = fixture('ShadowElement');
ripple._rippleContainer = ripple.$.separate;
source = Polymer.dom(ripple).querySelector('#source');
});
test('tap host', function() {
assertInteractionCausesRipple(ripple, ripple, false, 'ripple');
});
test('tap wrapper', function() {
assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#wrapper');
});
test('tap separate', function() {
assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#separate')
});
test('tap source', function() {
assertInteractionCausesRipple(ripple, source, false, '#source');
});
});
});
});
});
</script>

View file

@ -0,0 +1,55 @@
<!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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-behaviors/iron-button-state.html">
<link rel="import" href="../paper-ripple-behavior.html">
<dom-module id="sd-ripple">
<template>
<style>
:host {
display: block;
width: 200px;
}
#separate, #wrapper {
height: 50px;
}
#separate {
background: blue;
}
#wrapper {
background: red;
}
#wrapper > ::content #source {
height: 25px;
width: 50px;
background: green;
}
</style>
<div id="separate">
<div id="target">
Internal Text Node
</div>
</div>
<div id="wrapper">
<content id="content"></content>
</div>
</template>
<script>
Polymer({
is: 'sd-ripple',
behaviors: [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperRippleBehavior
]
});
</script>
</dom-module>