update polymer

This commit is contained in:
Luke Pulverenti 2015-10-07 21:49:40 -04:00
parent 8119b930e4
commit cbb6337b41
74 changed files with 2195 additions and 1393 deletions

View File

@ -29,14 +29,14 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.0.6",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "af5c98b1cf9b3d180a6326c99ac9c7057eee647f"
},
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
}

View File

@ -1,6 +1,6 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.6",
"version": "1.0.7",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"
@ -37,11 +37,11 @@
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.6",
"_release": "1.0.7",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "e0465d41019cf03827f4820a254ce80e56266e99"
"tag": "v1.0.7",
"commit": "f31131a9c45af7845780f94ec7e69816929ac6cc"
},
"_source": "git://github.com/PolymerElements/iron-autogrow-textarea.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "iron-autogrow-textarea",
"version": "1.0.6",
"version": "1.0.7",
"description": "A textarea element that automatically grows with input",
"authors": [
"The Polymer Authors"

View File

@ -26,6 +26,12 @@ Example:
Because the `textarea`'s `value` property is not observable, you should use
this element's `bind-value` instead for imperative updates.
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}`
@group Iron Elements
@hero hero.svg
@demo demo/index.html
@ -62,6 +68,7 @@ this element's `bind-value` instead for imperative updates.
font-size: inherit;
font-family: inherit;
line-height: inherit;
@apply(--iron-autogrow-textarea);
}
::content textarea:invalid {
@ -82,6 +89,7 @@ this element's `bind-value` instead for imperative updates.
placeholder$="[[placeholder]]"
readonly$="[[readonly]]"
required$="[[required]]"
disabled$="[[disabled]]"
rows$="[[rows]]"
maxlength$="[[maxlength]]"></textarea>
</div>
@ -278,7 +286,14 @@ this element's `bind-value` instead for imperative updates.
return;
}
textarea.value = this.bindValue;
// If the bindValue changed manually, then we need to also update
// the underlying textarea's value. Otherwise this change was probably
// generated from the _onInput handler, and the two values are already
// the same.
if (textarea.value !== this.bindValue) {
textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
}
this.$.mirror.innerHTML = this._valueForMirror();
// manually notify because we don't want to notify until after setting value
this.fire('bind-value-changed', {value: this.bindValue});

View File

@ -88,6 +88,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.isTrue(finalHeight < initialHeight);
});
test('an undefined bindValue is the empty string', function() {
var autogrow = fixture('basic');
var initialHeight = autogrow.offsetHeight;
autogrow.bindValue = 'batman\nand\nrobin';
var finalHeight = autogrow.offsetHeight;
assert.isTrue(finalHeight > initialHeight);
autogrow.bindValue = undefined;
assert.equal(autogrow.offsetHeight, initialHeight);
assert.equal(autogrow.textarea.value, '');
});
test('textarea selection works', function() {
var autogrow = fixture('basic');
var textarea = autogrow.textarea;

View File

@ -1,6 +1,6 @@
{
"name": "iron-behaviors",
"version": "1.0.8",
"version": "1.0.9",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
@ -28,11 +28,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-behaviors",
"_release": "1.0.8",
"_release": "1.0.9",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "663ad706b43989f4961d945b8116cf4db346532f"
"tag": "v1.0.9",
"commit": "4b8cab62a4916cc4b1dbd262cbb7eb1eec624b6f"
},
"_source": "git://github.com/polymerelements/iron-behaviors.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "iron-behaviors",
"version": "1.0.8",
"version": "1.0.9",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [

View File

@ -125,33 +125,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
},
_eventSourceIsPrimaryInput: function(event) {
event = event.detail.sourceEvent || event;
// Always true for non-mouse events....
if (!this._mouseEventRe.test(event.type)) {
return true;
}
// http://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
if ('buttons' in event) {
return event.buttons === 1;
}
// http://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
if (typeof event.which === 'number') {
return event.which < 2;
}
// http://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
return event.button < 1;
},
_downHandler: function(event) {
if (!this._eventSourceIsPrimaryInput(event)) {
return;
}
this._setPointerDown(true);
this._setPressed(true);
this._setReceivedFocusFromKeyboard(false);

View File

@ -41,20 +41,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
activeTarget = fixture('TrivialActiveState');
});
suite('non-primary pointer input source', function() {
test('does not cause state to change', function() {
var rightClickMouseEvent = new CustomEvent('mousedown');
rightClickMouseEvent.buttons = 2;
activeTarget.dispatchEvent(rightClickMouseEvent);
expect(activeTarget.pressed).to.be.equal(false);
});
});
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() {

View File

@ -25,14 +25,14 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/polymerelements/iron-meta",
"homepage": "https://github.com/PolymerElements/iron-meta",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
},
"_source": "git://github.com/polymerelements/iron-meta.git",
"_source": "git://github.com/PolymerElements/iron-meta.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-meta"
"_originalSource": "PolymerElements/iron-meta"
}

View File

@ -1,6 +1,6 @@
{
"name": "paper-behaviors",
"version": "1.0.4",
"version": "1.0.5",
"description": "Common behaviors across the paper elements",
"authors": [
"The Polymer Authors"
@ -25,6 +25,7 @@
"homepage": "https://github.com/PolymerElements/paper-behaviors",
"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"
},
"devDependencies": {
@ -36,11 +37,11 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.4",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "a7ac7fbdb79b4d82416ec9b41613575386d0d226"
"tag": "v1.0.5",
"commit": "57b4ddedf6fa54171d0c9d078f340399724bfe4e"
},
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "paper-behaviors",
"version": "1.0.4",
"version": "1.0.5",
"description": "Common behaviors across the paper elements",
"authors": [
"The Polymer Authors"
@ -25,6 +25,7 @@
"homepage": "https://github.com/PolymerElements/paper-behaviors",
"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"
},
"devDependencies": {

View File

@ -18,6 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
:host {
display: inline-block;
position: relative;
background-color: #4285F4;
color: #fff;
border-radius: 3px;

View File

@ -10,7 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-inky-focus-behavior.html">
<link rel="import" href="../paper-checked-element-behavior.html">
<dom-module id="paper-radio-button">
@ -89,7 +89,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div id="radioContainer">
<div id="offRadio"></div>
<div id="onRadio"></div>
<paper-ripple id="ink" class="circle" center></paper-ripple>
</div>
</template>
@ -98,7 +97,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer({
behaviors: [
Polymer.PaperInkyFocusBehavior
Polymer.PaperCheckedElementBehavior
],
hostAttributes: {
@ -107,6 +106,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
ready: function() {
this.toggles = true;
},
_createRipple: function() {
this._rippleContainer = this.$.radioContainer;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
}
});

View File

@ -10,27 +10,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="paper-ripple-behavior.html">
<script>
/** @polymerBehavior */
/** @polymerBehavior Polymer.PaperButtonBehavior */
Polymer.PaperButtonBehaviorImpl = {
properties: {
_elevation: {
type: Number
/**
* The z-depth of this element, from 0-5. Setting to 0 will remove the
* shadow, and each increasing number greater than 0 will be "deeper"
* than the last.
*
* @attribute elevation
* @type number
* @default 1
*/
elevation: {
type: Number,
reflectToAttribute: true,
readOnly: true
}
},
observers: [
'_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)'
'_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
'_computeKeyboardClass(receivedFocusFromKeyboard)'
],
hostAttributes: {
role: 'button',
tabindex: '0'
tabindex: '0',
animated: true
},
_calculateElevation: function() {
@ -42,14 +56,42 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
} else if (this.receivedFocusFromKeyboard) {
e = 3;
}
this._elevation = e;
this._setElevation(e);
},
_computeKeyboardClass: function(receivedFocusFromKeyboard) {
this.classList.toggle('keyboard-focus', receivedFocusFromKeyboard);
},
/**
* In addition to `IronButtonState` behavior, when space key goes down,
* create a ripple down effect.
*/
_spaceKeyDownHandler: function(event) {
Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
if (this.hasRipple()) {
this._ripple.uiDownAction();
}
},
/**
* In addition to `IronButtonState` behavior, when space key goes up,
* create a ripple up effect.
*/
_spaceKeyUpHandler: function(event) {
Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
if (this.hasRipple()) {
this._ripple.uiUpAction();
}
}
};
/** @polymerBehavior */
Polymer.PaperButtonBehavior = [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperRippleBehavior,
Polymer.PaperButtonBehaviorImpl
];

View File

@ -0,0 +1,61 @@
<!--
@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/iron-checked-element-behavior.html">
<link rel="import" href="paper-inky-focus-behavior.html">
<script>
/**
* Use `Polymer.PaperCheckedElementBehavior` to implement a custom element
* that has a `checked` property similar to `Polymer.IronCheckedElementBehavior`
* and is compatible with having a ripple effect.
* @polymerBehavior Polymer.PaperCheckedElementBehavior
*/
Polymer.PaperCheckedElementBehaviorImpl = {
/**
* Synchronizes the element's checked state with its ripple effect.
*/
_checkedChanged: function() {
Polymer.IronCheckedElementBehaviorImpl._checkedChanged.call(this);
if (this.hasRipple()) {
if (this.checked) {
this._ripple.setAttribute('checked', '');
} else {
this._ripple.removeAttribute('checked');
}
}
},
/**
* Synchronizes the element's `active` and `checked` state.
*/
_buttonStateChanged: function() {
Polymer.PaperRippleBehavior._buttonStateChanged.call(this);
if (this.disabled) {
return;
}
if (this.isAttached) {
this.checked = this.active;
}
}
};
/** @polymerBehavior Polymer.PaperCheckedElementBehavior */
Polymer.PaperCheckedElementBehavior = [
Polymer.PaperInkyFocusBehavior,
Polymer.IronCheckedElementBehavior,
Polymer.PaperCheckedElementBehaviorImpl
];
</script>

View File

@ -10,13 +10,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-behaviors/iron-button-state.html">
<link rel="import" href="paper-ripple-behavior.html">
<script>
/**
* `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
*
* @polymerBehavior Polymer.PaperInkyFocusBehavior
* @polymerBehavior Polymer.PaperInkyFocusBehaviorImpl
*/
Polymer.PaperInkyFocusBehaviorImpl = {
@ -25,11 +26,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
],
_focusedChanged: function(receivedFocusFromKeyboard) {
if (!this.$.ink) {
return;
if (receivedFocusFromKeyboard) {
this.ensureRipple();
}
if (this.hasRipple()) {
this._ripple.holdDown = receivedFocusFromKeyboard;
}
},
this.$.ink.holdDown = receivedFocusFromKeyboard;
_createRipple: function() {
var ripple = Polymer.PaperRippleBehavior._createRipple();
ripple.id = 'ink';
ripple.setAttribute('center', '');
ripple.classList.add('circle');
return ripple;
}
};
@ -38,6 +48,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.PaperInkyFocusBehavior = [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperRippleBehavior,
Polymer.PaperInkyFocusBehaviorImpl
];

View File

@ -0,0 +1,117 @@
<!--
@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-ripple/paper-ripple.html">
<script>
/**
* `Polymer.PaperRippleBehavior` dynamically implements a ripple
* when the element has focus via pointer or keyboard.
*
* NOTE: This behavior is intended to be used in conjunction with and after
* `Polymer.IronButtonState` and `Polymer.IronControlState`.
*
* @polymerBehavior Polymer.PaperRippleBehavior
*/
Polymer.PaperRippleBehavior = {
properties: {
/**
* If true, the element will not produce a ripple effect when interacted
* with via the pointer.
*/
noink: {
type: Boolean,
observer: '_noinkChanged'
}
},
/**
* Ensures a `<paper-ripple>` element is available when the element is
* focused.
*/
_buttonStateChanged: function() {
if (this.focused) {
this.ensureRipple();
}
},
/**
* In addition to the functionality provided in `IronButtonState`, ensures
* a ripple effect is created when the element is in a `pressed` state.
*/
_downHandler: function(event) {
Polymer.IronButtonStateImpl._downHandler.call(this, event);
if (this.pressed) {
this.ensureRipple(event);
}
},
/**
* Ensures this element contains a ripple effect. For startup efficiency
* the ripple effect is dynamically on demand when needed.
* @param {event} triggeringEvent (optional) event that triggered the
* ripple.
*/
ensureRipple: function(triggeringEvent) {
if (!this.hasRipple()) {
this._ripple = this._createRipple();
this._ripple.noink = this.noink;
var rippleContainer = this._rippleContainer || this.root;
if (rippleContainer) {
Polymer.dom(rippleContainer).appendChild(this._ripple);
}
var domContainer = rippleContainer === this.shadyRoot ? this :
rippleContainer;
if (triggeringEvent && domContainer.contains(triggeringEvent.target)) {
this._ripple.uiDownAction(triggeringEvent);
}
}
},
/**
* Returns the `<paper-ripple>` element used by this element to create
* ripple effects. The element's ripple is created on demand, when
* necessary, and calling this method will force the
* ripple to be created.
*/
getRipple: function() {
this.ensureRipple();
return this._ripple;
},
/**
* Returns true if this element currently contains a ripple effect.
* @return {boolean}
*/
hasRipple: function() {
return Boolean(this._ripple);
},
/**
* Create the element's ripple effect via creating a `<paper-ripple>`.
* Override this method to customize the ripple element.
* @return {element} Returns a `<paper-ripple>` element.
*/
_createRipple: function() {
return document.createElement('paper-ripple');
},
_noinkChanged: function(noink) {
if (this.hasRipple()) {
this._ripple.noink = noink;
}
}
};
</script>

View File

@ -19,7 +19,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
WCT.loadSuites([
'paper-button-behavior.html',
'paper-radio-button-behavior.html'
'paper-radio-button-behavior.html',
'paper-checked-element-behavior.html',
'paper-ripple-behavior.html'
]);
</script>
</body>

View File

@ -39,19 +39,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
test('normal (no states)', function() {
assert.equal(button._elevation, 1);
assert.equal(button.elevation, 1);
});
test('set disabled property', function() {
button.disabled = true;
assert.equal(button._elevation, 0);
assert.equal(button.elevation, 0);
});
test('pressed and released', function() {
MockInteractions.down(button);
assert.equal(button._elevation, 4);
assert.equal(button.elevation, 4);
MockInteractions.up(button);
assert.equal(button._elevation, 1);
assert.equal(button.elevation, 1);
assert.ok(button.hasRipple());
});
suite('a button with toggles', function() {
@ -62,7 +63,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('activated by tap', function(done) {
MockInteractions.downAndUp(button, function() {
try {
assert.equal(button._elevation, 4);
assert.equal(button.elevation, 4);
assert.ok(button.hasRipple());
done();
} catch (e) {
done(e);
@ -73,7 +75,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('receives focused', function() {
MockInteractions.focus(button);
assert.equal(button._elevation, 3);
assert.equal(button.elevation, 3);
assert.ok(button.hasRipple());
});
});
</script>

View File

@ -0,0 +1,94 @@
<!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>paper-checked-element-behavior</title>
<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="../paper-checked-element-behavior.html">
</head>
<body>
<dom-module id="test-checked">
<template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'test-checked',
behaviors: [
Polymer.PaperCheckedElementBehavior
]
});
});
</script>
</dom-module>
<test-fixture id="basic">
<template>
<test-checked></test-checked>
</template>
</test-fixture>
<script>
suite('PaperCheckedElementBehavior', function() {
var checked;
setup(function() {
checked = fixture('basic');
});
test('element checked when tapped to check', function() {
MockInteractions.tap(checked);
assert.isTrue(checked.checked);
});
test('element checked when active', function() {
checked.active = true;
assert.isTrue(checked.checked);
});
test('element not checked when disabled and made active', function() {
checked.disabled = true;
checked.active = true;
assert.isFalse(checked.checked);
});
test('element not checked when disabled and tapped', function() {
checked.disabled = true;
MockInteractions.tap(checked);
assert.isFalse(checked.checked);
});
test('element ripple has checked attribute when element tapped to check', function() {
MockInteractions.tap(checked);
assert.isTrue(checked.hasRipple());
assert.isTrue(checked.getRipple().hasAttribute('checked'));
});
test('element ripple does not have checked attribute when element tapped to uncheck', function() {
MockInteractions.tap(checked);
MockInteractions.tap(checked);
assert.isFalse(checked.getRipple().hasAttribute('checked'));
});
});
</script>
</body>
</html>

View File

@ -33,26 +33,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script>
suite('basic', function() {
var button;
var ink;
setup(function() {
button = fixture('basic');
ink = button.querySelector('paper-ripple');
MockInteractions.blur(button);
});
test('normal (no states)', function() {
assert.isFalse(button.focused);
assert.isFalse(ink._animating);
assert.equal(ink.ripples.length, 0);
assert.isFalse(button.hasRipple());
});
test('receives focus', function() {
MockInteractions.focus(button);
assert.isTrue(button.focused);
assert.isTrue(ink._animating);
assert.equal(ink.ripples.length, 1);
assert.isTrue(button.hasRipple());
});
});

View File

@ -0,0 +1,82 @@
<!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>paper-ripple-behavior</title>
<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">
</head>
<body>
<dom-module id="test-ripple">
<template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'test-ripple',
behaviors: [
Polymer.IronButtonState,
Polymer.IronControlState,
Polymer.PaperRippleBehavior
]
});
});
</script>
</dom-module>
<test-fixture id="basic">
<template>
<test-ripple></test-ripple>
</template>
</test-fixture>
<script>
suite('PaperRippleBehavior', function() {
var ripple;
setup(function() {
ripple = fixture('basic');
});
test('no ripple at startup', function() {
assert.isFalse(ripple.hasRipple());
});
test('calling getRipple returns ripple', function() {
assert.ok(ripple.getRipple());
});
test('focus generates ripple', function() {
MockInteractions.focus(ripple);
assert.ok(ripple.hasRipple());
});
test('down generates ripple', function() {
MockInteractions.down(ripple);
assert.ok(ripple.hasRipple());
MockInteractions.up(ripple);
});
});
</script>
</body>
</html>

View File

@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../paper-inky-focus-behavior.html">
<link rel="import" href="../paper-checked-element-behavior.html">
<link rel="import" href="../../paper-ripple/paper-ripple.html">
<dom-module id="test-radio-button">
@ -35,7 +35,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
is: 'test-radio-button',
behaviors: [
Polymer.PaperInkyFocusBehavior
Polymer.PaperCheckedElementBehavior
]
});
</script>

View File

@ -1,6 +1,6 @@
{
"name": "paper-button",
"version": "1.0.7",
"version": "1.0.8",
"description": "Material design button",
"authors": [
"The Polymer Authors"
@ -37,11 +37,11 @@
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0"
},
"_release": "1.0.7",
"_release": "1.0.8",
"_resolution": {
"type": "version",
"tag": "v1.0.7",
"commit": "6f4599ab8615af533afdd50e710baa702fe6f84c"
"tag": "v1.0.8",
"commit": "08553a8c5e4d27fc6180bbcfb952f86b38b51345"
},
"_source": "git://github.com/PolymerElements/paper-button.git",
"_target": "~1.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "paper-button",
"version": "1.0.7",
"version": "1.0.8",
"description": "Material design button",
"authors": [
"The Polymer Authors"

View File

@ -44,7 +44,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
paper-button[toggles] {
transition: background-color 0.3s;
transition: all 0.3s;
}
paper-button[toggles][active] {

View File

@ -15,8 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
`paper-button` is a button. When the user touches the button, a ripple effect emanates
from the point of contact. It may be flat or raised. A raised button is styled with a
@ -76,9 +75,9 @@ Custom property | Description | Default
-->
<dom-module id="paper-button">
<template>
<template strip-whitespace>
<style>
<style include="paper-material">
:host {
display: inline-block;
position: relative;
@ -102,12 +101,12 @@ Custom property | Description | Default
@apply(--paper-button);
}
:host([raised]) .keyboard-focus {
:host([raised].keyboard-focus) {
font-weight: bold;
@apply(--paper-button-raised-keyboard-focus);
}
:host(:not([raised])) .keyboard-focus {
:host(:not([raised]).keyboard-focus) {
font-weight: bold;
@apply(--paper-button-flat-keyboard-focus);
}
@ -121,32 +120,15 @@ Custom property | Description | Default
@apply(--paper-button-disabled);
}
:host([noink]) paper-ripple {
display: none;
}
paper-ripple {
color: var(--paper-button-ink-color);
}
paper-material {
border-radius: inherit;
@apply(--layout-fit);
}
.content > ::content * {
:host > ::content * {
text-transform: inherit;
}
</style>
<paper-ripple></paper-ripple>
<paper-material elevation="[[_elevation]]" animated></paper-material>
<div class$="[[_computeContentClass(receivedFocusFromKeyboard)]]">
<content></content>
</div>
<content></content>
</template>
</dom-module>
@ -172,18 +154,10 @@ Custom property | Description | Default
_calculateElevation: function() {
if (!this.raised) {
this._elevation = 0;
this.elevation = 0;
} else {
Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
}
},
_computeContentClass: function(receivedFocusFromKeyboard) {
var className = 'content ';
if (receivedFocusFromKeyboard) {
className += ' keyboard-focus';
}
return className;
}
});
</script>

View File

@ -46,7 +46,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.Base.async(function() {
try {
expect(button._elevation).to.be.eql(1);
expect(button.elevation).to.be.eql(1);
done();
} catch (e) {
done(e);

View File

@ -1,6 +1,6 @@
{
"name": "paper-checkbox",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design checkbox",
"authors": [
"The Polymer Authors"
@ -35,11 +35,11 @@
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"_release": "1.0.11",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.11",
"commit": "00a147c81fe766f5c90222b2d1b0d8b5ddb12be5"
"tag": "v1.0.12",
"commit": "04fefb44a6e93bcee030f892694663f8d7fd0365"
},
"_source": "git://github.com/PolymerElements/paper-checkbox.git",
"_target": "~1.0.5",

View File

@ -1,6 +1,6 @@
{
"name": "paper-checkbox",
"version": "1.0.11",
"version": "1.0.12",
"description": "A material design checkbox",
"authors": [
"The Polymer Authors"

View File

@ -87,6 +87,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-checkbox class="blue" checked>Calcium</paper-checkbox>
</div>
</div>
<div>
<h4>Noink</h4>
<div class="horizontal-section">
<paper-checkbox noink>Oxygen</paper-checkbox>
<paper-checkbox noink>Carbon</paper-checkbox>
<paper-checkbox checked noink>Hydrogen</paper-checkbox>
<paper-checkbox checked noink>Nitrogen</paper-checkbox>
<paper-checkbox checked noink>Calcium</paper-checkbox>
</div>
</div>
</div>
</body>
</html>

View File

@ -12,8 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../iron-checked-element-behavior/iron-checked-element-behavior.html">
<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
<!--
Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
@ -49,7 +48,7 @@ Custom property | Description | Default
-->
<dom-module id="paper-checkbox">
<template>
<template strip-whitespace>
<style>
:host {
display: inline-block;
@ -201,7 +200,6 @@ Custom property | Description | Default
</style>
<div id="checkboxContainer">
<paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
<div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
</div>
@ -215,8 +213,7 @@ Custom property | Description | Default
is: 'paper-checkbox',
behaviors: [
Polymer.PaperInkyFocusBehavior,
Polymer.IronCheckedElementBehavior
Polymer.PaperCheckedElementBehavior
],
hostAttributes: {
@ -243,20 +240,6 @@ Custom property | Description | Default
}
},
attached: function() {
this._isReady = true;
},
// button-behavior hook
_buttonStateChanged: function() {
if (this.disabled) {
return;
}
if (this._isReady) {
this.checked = this.active;
}
},
_computeCheckboxClass: function(checked, invalid) {
var className = '';
if (checked) {
@ -270,7 +253,14 @@ Custom property | Description | Default
_computeCheckmarkClass: function(checked) {
return checked ? '' : 'hidden';
},
// create ripple inside the checkboxContainer
_createRipple: function() {
this._rippleContainer = this.$.checkboxContainer;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
}
});
</script>
</dom-module>

View File

@ -1,6 +1,6 @@
{
"name": "paper-fab",
"version": "1.0.4",
"version": "1.0.5",
"description": "A material design floating action button",
"authors": [
"The Polymer Authors"
@ -36,11 +36,11 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.4",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "7eddddad90a5ca962209fa7241435459ebb9b6b7"
"tag": "v1.0.5",
"commit": "2f1cebbceeb76b5f48f2d82ea02001e0725d2d6e"
},
"_source": "git://github.com/PolymerElements/paper-fab.git",
"_target": "~1.0.2",

View File

@ -1,6 +1,6 @@
{
"name": "paper-fab",
"version": "1.0.4",
"version": "1.0.5",
"description": "A material design floating action button",
"authors": [
"The Polymer Authors"

View File

@ -63,33 +63,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div>
<h4>Enabled</h4>
<div class="horizontal-section">
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
<paper-fab icon="create" title="create" tabindex="0"></paper-fab>
<paper-fab icon="favorite" title="heart" tabindex="0"></paper-fab>
<paper-fab mini icon="done" title="done" tabindex="0"></paper-fab>
<paper-fab mini icon="reply" title="reply" tabindex="0"></paper-fab>
<paper-fab icon="arrow-forward" title="arrow-forward"></paper-fab>
<paper-fab icon="create" title="create"></paper-fab>
<paper-fab icon="favorite" title="heart"></paper-fab>
<paper-fab mini icon="done" title="done"></paper-fab>
<paper-fab mini icon="reply" title="reply"></paper-fab>
</div>
</div>
<div>
<h4>Disabled</h4>
<div class="horizontal-section">
<paper-fab disabled icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
<paper-fab disabled icon="create" title="create" tabindex="0"></paper-fab>
<paper-fab disabled icon="favorite" title="heart" tabindex="0"></paper-fab>
<paper-fab disabled mini icon="done" title="done" tabindex="0"></paper-fab>
<paper-fab disabled mini icon="reply" title="reply" tabindex="0"></paper-fab>
<paper-fab disabled icon="arrow-forward" title="arrow-forward"></paper-fab>
<paper-fab disabled icon="create" title="create"></paper-fab>
<paper-fab disabled icon="favorite" title="heart"></paper-fab>
<paper-fab disabled mini icon="done" title="done"></paper-fab>
<paper-fab disabled mini icon="reply" title="reply"></paper-fab>
</div>
</div>
<div>
<h4>Colors</h4>
<div class="horizontal-section">
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0" class="blue"></paper-fab>
<paper-fab icon="create" title="create" tabindex="0" class="red"></paper-fab>
<paper-fab icon="favorite" title="heart" tabindex="0" class="orange"></paper-fab>
<paper-fab mini icon="done" title="done" tabindex="0" class="green"></paper-fab>
<paper-fab mini icon="reply" title="reply" tabindex="0" class="blue"></paper-fab>
<paper-fab icon="arrow-forward" title="arrow-forward" class="blue"></paper-fab>
<paper-fab icon="create" title="create" class="red"></paper-fab>
<paper-fab icon="favorite" title="heart" class="orange"></paper-fab>
<paper-fab mini icon="done" title="done" class="green"></paper-fab>
<paper-fab mini icon="reply" title="reply" class="blue"></paper-fab>
</div>
</div>
<div>
<h4>Noink</h4>
<div class="horizontal-section">
<paper-fab noink icon="arrow-forward" title="arrow-forward"></paper-fab>
<paper-fab noink icon="create" title="create"></paper-fab>
<paper-fab noink icon="favorite" title="heart"></paper-fab>
<paper-fab noink mini icon="done" title="done"></paper-fab>
<paper-fab noink mini icon="reply" title="reply"></paper-fab>
</div>
</div>
</div>

View File

@ -18,7 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
Material design: [Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
`paper-fab` is a floating action button. It contains an image placed in the center and
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
@ -49,6 +49,7 @@ Custom property | Description | Default
`--paper-fab` | Mixin applied to the button | `{}`
`--paper-fab-mini` | Mixin applied to a mini button | `{}`
`--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
`--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}`
@group Paper Elements
@demo demo/index.html
@ -56,63 +57,59 @@ Custom property | Description | Default
-->
<dom-module id="paper-fab">
<style>
<template strip-whitespace>
<style include="paper-material">
:host {
display: inline-block;
position: relative;
outline: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
cursor: pointer;
:host {
display: inline-block;
position: relative;
outline: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
user-select: none;
cursor: pointer;
box-sizing: border-box;
min-width: 0;
width: 56px;
height: 56px;
background: var(--paper-fab-background, --accent-color);
color: var(--text-primary-color);
border-radius: 50%;
padding: 16px;
box-sizing: border-box;
min-width: 0;
width: 56px;
height: 56px;
background: var(--paper-fab-background, --accent-color);
color: var(--text-primary-color);
border-radius: 50%;
padding: 16px;
z-index: 0;
z-index: 0;
@apply(--paper-fab);
}
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--paper-fab);
}
:host([mini]) {
width: 40px;
height: 40px;
padding: 8px;
:host([mini]) {
width: 40px;
height: 40px;
padding: 8px;
@apply(--paper-fab-mini);
}
@apply(--paper-fab-mini);
}
:host([disabled]) {
color: var(--paper-fab-disabled-text, --paper-grey-500);
background: var(--paper-fab-disabled-background, --paper-grey-300);
@apply(--paper-fab-disabled);
}
:host([disabled]) {
color: var(--paper-fab-disabled-text, --paper-grey-500);
background: var(--paper-fab-disabled-background, --paper-grey-300);
@apply(--paper-fab-disabled);
}
paper-material {
border-radius: inherit;
@apply(--layout-fit);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
iron-icon {
@apply(--paper-fab-iron-icon);
}
.keyboard-focus {
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
}
</style>
<template>
<paper-ripple></paper-ripple>
<paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
</paper-material>
:host(.keyboard-focus) {
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
}
</style>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
</template>
</dom-module>
<script>
@ -163,14 +160,6 @@ Custom property | Description | Default
value: false,
reflectToAttribute: true
}
},
_computeContentClass: function(receivedFocusFromKeyboard) {
var className = 'content';
if (receivedFocusFromKeyboard) {
className += ' keyboard-focus';
}
return className;
}
});

View File

@ -18,7 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../core-icons/core-icons.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-fab.html">

View File

@ -1,7 +1,7 @@
{
"name": "paper-icon-button",
"private": true,
"version": "1.0.3",
"version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design icon button",
"main": "paper-icon-button.html",
@ -20,26 +20,26 @@
"url": "git://github.com/PolymerElements/paper-icon-button.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
"polymer": "Polymer/polymer#^1.1.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
},
"homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "1.0.3",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "9f183bdae3ff419aeae78a51a05fcc4d0100e5a3"
"tag": "v1.0.4",
"commit": "50cef0a41abe586110ee0ac9720cea70f0b2f5e1"
},
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "~1.0.2",

View File

@ -1,7 +1,7 @@
{
"name": "paper-icon-button",
"private": true,
"version": "1.0.3",
"version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "A material design icon button",
"main": "paper-icon-button.html",
@ -20,18 +20,18 @@
"url": "git://github.com/PolymerElements/paper-icon-button.git"
},
"dependencies": {
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
"polymer": "Polymer/polymer#^1.1.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
}
}

View File

@ -27,7 +27,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
paper-icon-button {
margin-left: 30px;
display: block;
width: 24px;
text-align: center;
}
@ -70,18 +69,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
paper-icon-button.huge {
margin-left: 0px;
width: 100px;
height: 100px;
--paper-icon-button-ink-color: var(--paper-indigo-500);
}
paper-icon-button.huge::shadow #icon {
width: 100px;
height: 100px;
}
paper-icon-button.huge #icon {
width: 100px;
height: 100px;
}
</style>
</head>
@ -136,6 +126,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-icon-button icon="polymer" alt="polymer" class="huge"></paper-icon-button>
</div>
</div>
<div>
<h4>Noink</h4>
<div class="horizontal-section">
<paper-icon-button noink icon="favorite" alt="heart"></paper-icon-button>
<br><br><br>
<paper-icon-button noink icon="polymer" alt="polymer"></paper-icon-button>
</div>
</div>
</div>
<script>

View File

@ -17,7 +17,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-ripple/paper-ripple.html">
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
`paper-icon-button` is a button with an image placed at the center. When the user touches
the button, a ripple effect emanates from the center of the button.
@ -37,7 +37,7 @@ Example:
<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button src="star.png"></paper-icon-button>
###Styling
### Styling
Style the button with CSS as you would a normal DOM element. If you are using the icons
provided by `iron-icons`, they will inherit the foreground color of the button.
@ -46,21 +46,14 @@ provided by `iron-icons`, they will inherit the foreground color of the button.
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
By default, the ripple is the same color as the foreground at 25% opacity. You may
customize the color using this selector:
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow #ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
customize the color using the `--paper-icon-button-ink-color` custom property.
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-icon-button-disabled-text` | The color of the disabled button | `--primary-text-color`
`--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-primary-color`
`--paper-icon-button-disabled-text` | The color of the disabled button | `--disabled-text-color`
`--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-color`
`--paper-icon-button` | Mixin for a button | `{}`
`--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
@ -70,88 +63,93 @@ Custom property | Description | Default
-->
<dom-module id="paper-icon-button">
<style>
<template strip-whitespace>
<style>
:host {
display: inline-block;
position: relative;
padding: 8px;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
:host {
display: inline-block;
position: relative;
padding: 8px;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
width: 24px;
@apply(--paper-icon-button);
}
@apply(--paper-icon-button);
}
:host #ink {
color: var(--paper-icon-button-ink-color, --primary-text-color);
opacity: 0.6;
}
:host #ink {
color: var(--paper-icon-button-ink-color, --primary-text-color);
opacity: 0.6;
}
:host([disabled]) {
color: var(--paper-icon-button-disabled-text, --disabled-text-color);
pointer-events: none;
cursor: auto;
@apply(--paper-icon-button-disabled);
}
:host([disabled]) {
color: var(--paper-icon-button-disabled-text, --disabled-text-color);
pointer-events: none;
cursor: auto;
@apply(--paper-icon-button-disabled);
}
</style>
<template>
<paper-ripple id="ink" class="circle" center></paper-ripple>
iron-icon {
--iron-icon-width: 100%;
--iron-icon-height: 100%;
}
</style>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
</template>
<script>
Polymer({
is: 'paper-icon-button',
hostAttributes: {
role: 'button',
tabindex: '0'
},
behaviors: [
Polymer.PaperInkyFocusBehavior
],
properties: {
/**
* The URL of an image for the icon. If the src property is specified,
* the icon property should not be.
*/
src: {
type: String
},
/**
* Specifies the icon name or index in the set of icons available in
* the icon's icon set. If the icon property is specified,
* the src property should not be.
*/
icon: {
type: String
},
/**
* Specifies the alternate text for the button, for accessibility.
*/
alt: {
type: String,
observer: "_altChanged"
}
},
_altChanged: function(newValue, oldValue) {
var label = this.getAttribute('aria-label');
// Don't stomp over a user-set aria-label.
if (!label || oldValue == label) {
this.setAttribute('aria-label', newValue);
}
}
});
</script>
</dom-module>
<script>
Polymer({
is: 'paper-icon-button',
hostAttributes: {
role: 'button',
tabindex: '0'
},
behaviors: [
Polymer.PaperInkyFocusBehavior
],
properties: {
/**
* The URL of an image for the icon. If the src property is specified,
* the icon property should not be.
*/
src: {
type: String
},
/**
* Specifies the icon name or index in the set of icons available in
* the icon's icon set. If the icon property is specified,
* the src property should not be.
*/
icon: {
type: String
},
/**
* Specifies the alternate text for the button, for accessibility.
*/
alt: {
type: String,
observer: "_altChanged"
}
},
_altChanged: function(newValue, oldValue) {
var label = this.getAttribute('aria-label');
// Don't stomp over a user-set aria-label.
if (!label || oldValue == label) {
this.setAttribute('aria-label', newValue);
}
}
});
</script>

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-button",
"version": "1.0.8",
"version": "1.0.9",
"description": "A material design radio button",
"authors": [
"The Polymer Authors"
@ -33,11 +33,11 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.8",
"_release": "1.0.9",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "f6fcf203775984877bd97393ac4a9cb2da45597b"
"tag": "v1.0.9",
"commit": "708d1e611ad5a7c9600a128545a88e9991fe789e"
},
"_source": "git://github.com/PolymerElements/paper-radio-button.git",
"_target": "~1.0.5",

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-button",
"version": "1.0.8",
"version": "1.0.9",
"description": "A material design radio button",
"authors": [
"The Polymer Authors"

View File

@ -88,6 +88,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-radio-button class="blue" checked>Calcium</paper-radio-button>
</div>
</div>
<div>
<h4>Noink </h4>
<div class="horizontal-section">
<paper-radio-button noink>Oxygen</paper-radio-button>
<paper-radio-button noink>Carbon</paper-radio-button>
<paper-radio-button checked noink>Hydrogen</paper-radio-button>
<paper-radio-button checked noink>Nitrogen</paper-radio-button>
<paper-radio-button checked noink>Calcium</paper-radio-button>
</div>
</div>
</div>
</body>
</html>

View File

@ -1,4 +1,5 @@
<!--
@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
@ -10,10 +11,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../iron-checked-element-behavior/iron-checked-element-behavior.html">
<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
<!--
Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
`paper-radio-button` is a button that can be either checked or unchecked.
User can tap the radio button to check or uncheck it.
@ -46,7 +48,7 @@ Custom property | Description | Default
-->
<dom-module id="paper-radio-button">
<template>
<template strip-whitespace>
<style>
:host {
display: inline-block;
@ -157,7 +159,6 @@ Custom property | Description | Default
<div id="radioContainer">
<div id="offRadio"></div>
<div id="onRadio"></div>
<paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
</div>
<div id="radioLabel"><content></content></div>
@ -169,8 +170,7 @@ Custom property | Description | Default
is: 'paper-radio-button',
behaviors: [
Polymer.PaperInkyFocusBehavior,
Polymer.IronCheckedElementBehavior
Polymer.PaperCheckedElementBehavior
],
hostAttributes: {
@ -192,39 +192,16 @@ Custom property | Description | Default
* @event iron-change
*/
ariaActiveAttribute: {
value: 'aria-checked'
}
},
attached: function() {
this._isReady = true;
// Don't stomp over a user-set aria-label.
if (!this.getAttribute('aria-label')) {
this.updateAriaLabel();
ariaActiveAttribute: {
type: String,
value: 'aria-checked'
}
},
/**
* Update the checkbox aria-label. This is a temporary workaround not
* being able to observe changes in <content>
* (see: https://github.com/Polymer/polymer/issues/1773)
*
* Call this if you manually change the contents of the checkbox
* and want the aria-label to match the new contents.
*/
updateAriaLabel: function() {
this.setAttribute('aria-label', Polymer.dom(this).textContent.trim());
},
_buttonStateChanged: function() {
if (this.disabled) {
return;
}
if (this._isReady) {
this.checked = this.active;
}
// create the element ripple inside the `radioContainer`
_createRipple: function() {
this._rippleContainer = this.$.radioContainer;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
}
})
</script>

View File

@ -99,11 +99,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
test('button with no label has no aria label', function() {
assert.isTrue(!r1.getAttribute('aria-label'));
});
test('button with a label sets an aria label', function() {
assert.isTrue(r2.getAttribute('aria-label') == "Batman");
});
test('button respects the user set aria-label', function() {
var c = fixture('AriaLabel');
assert.isTrue(c.getAttribute('aria-label') == "Batman");

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-group",
"version": "1.0.4",
"version": "1.0.5",
"description": "A group of material design radio buttons",
"authors": [
"The Polymer Authors"
@ -33,14 +33,13 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.4",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "18b94b1ef062d8583cf37c9ccfbb21f70e49ad78"
"tag": "v1.0.5",
"commit": "cab4056c58d273f0953c70cc070001c97c9950b3"
},
"_source": "git://github.com/PolymerElements/paper-radio-group.git",
"_target": "~1.0.4",
"_originalSource": "PolymerElements/paper-radio-group",
"_direct": true
"_originalSource": "PolymerElements/paper-radio-group"
}

View File

@ -1,6 +1,6 @@
{
"name": "paper-radio-group",
"version": "1.0.4",
"version": "1.0.5",
"description": "A group of material design radio buttons",
"authors": [
"The Polymer Authors"

View File

@ -14,11 +14,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<!--
`paper-radio-group` allows user to select only one radio button from a set.
Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
`paper-radio-group` allows user to select at most one radio button from a set.
Checking one radio button that belongs to a radio group unchecks any
previously checked radio button within the same group. Use
`selected` to get or set the selected radio button.
The <paper-radio-buttons> inside the group must have the `name` attribute
set.
Example:
<paper-radio-group selected="small">
@ -27,7 +32,15 @@ Example:
<paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>
See <a href="paper-radio-button.html">paper-radio-button</a> for more
Radio-button-groups can be made optional, and allow zero buttons to be selected:
<paper-radio-group selected="small" allow-empty-selection>
<paper-radio-button name="small">Small</paper-radio-button>
<paper-radio-button name="medium">Medium</paper-radio-button>
<paper-radio-button name="large">Large</paper-radio-button>
</paper-radio-group>
See <a href="paper-radio-button">paper-radio-button</a> for more
information about `paper-radio-button`.
@group Paper Elements
@ -36,7 +49,7 @@ information about `paper-radio-button`.
@demo demo/index.html
-->
<dom-module name="paper-radio-group">
<dom-module id="paper-radio-group">
<style>
:host {
display: inline-block;
@ -68,6 +81,12 @@ information about `paper-radio-button`.
},
properties: {
/**
* Fired when the radio group selection changes.
*
* @event paper-radio-group-changed
*/
/**
* Overriden from Polymer.IronSelectableBehavior
*/
@ -90,6 +109,14 @@ information about `paper-radio-button`.
selectable: {
type: String,
value: 'paper-radio-button'
},
/**
* If true, radio-buttons can be deselected
*/
allowEmptySelection: {
type: Boolean,
value: false
}
},
@ -105,10 +132,16 @@ information about `paper-radio-button`.
if (this.selected) {
var oldItem = this._valueToItem(this.selected);
// Do not allow unchecking the selected item.
if (this.selected == value) {
oldItem.checked = true;
return;
// If deselecting is allowed we'll have to apply an empty selection.
// Otherwise, we should force the selection to stay and make this
// action a no-op.
if (this.allowEmptySelection) {
value = '';
} else {
oldItem.checked = true;
return;
}
}
if (oldItem)

View File

@ -154,15 +154,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// The selection should not change, but wait for a little bit just
// in case it would and an event would be fired.
setTimeout(function() {
try {
expect(items[0].checked).to.be.equal(true);
expect(items[1].checked).to.be.equal(false);
expect(items[2].checked).to.be.equal(false);
done();
} catch (e) {
done(e)
}
}, 200);
expect(items[0].checked).to.be.equal(true);
expect(items[1].checked).to.be.equal(false);
expect(items[2].checked).to.be.equal(false);
done();
}, 1);
});
test('clicking the selected item should deselect if allow-empty-selection is set', function (done) {
var g = fixture('WithSelection');
g.allowEmptySelection = true;
var items = g.items;
expect(items[0].checked).to.be.equal(true);
MockInteractions.tap(items[0]);
// The selection should not change, but wait for a little bit just
// in case it would and an event would be fired.
setTimeout(function() {
expect(items[0].checked).to.be.equal(false);
expect(items[1].checked).to.be.equal(false);
expect(items[2].checked).to.be.equal(false);
done();
}, 1);
});
});

View File

@ -1,6 +1,6 @@
{
"name": "paper-ripple",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container",
"private": true,
@ -28,14 +28,15 @@
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.2",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "b546dbe6ad0b1f58cac80caec3136cf3232e12fc"
"tag": "v1.0.3",
"commit": "c6e9664ca79c74bbd4219077438c4d163d6be962"
},
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "paper-ripple",
"version": "1.0.2",
"version": "1.0.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container",
"private": true,
@ -28,6 +28,7 @@
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
}
}

View File

@ -250,6 +250,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-ripple></paper-ripple>
</div>
<div class="button raised" noink>
<div class="center" fit>NO INK</div>
<paper-ripple noink></paper-ripple>
</div>
<div class="button raised grey">
<div class="center" fit>CANCEL</div>
<paper-ripple></paper-ripple>

View File

@ -11,19 +11,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<!--
Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction)
`paper-ripple` provides a visual effect that other paper elements can
use to simulate a rippling effect emanating from the point of contact. The
effect can be visualized as a concentric circle with motion.
Example:
<paper-ripple></paper-ripple>
<div style="position:relative">
<paper-ripple></paper-ripple>
</div>
Note, it's important that the parent container of the ripple be relative position, otherwise
the ripple will emanate outside of the desired container.
`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
effect when touches on it. You can also defeat the default behavior and
manually route the down and up actions to the ripple element. Note that it is
important if you call downAction() you will have to make sure to call
upAction() so that `paper-ripple` would end the animation loop.
important if you call `downAction()` you will have to make sure to call
`upAction()` so that `paper-ripple` would end the animation loop.
Example:
@ -526,6 +533,17 @@ Apply `circle` class to make the rippling effect within a circle.
observer: '_holdDownChanged'
},
/**
* If true, the ripple will not generate a ripple effect
* via pointer interaction.
* Calling ripple's imperative api like `simulatedRipple` will
* still generate the ripple effect.
*/
noink: {
type: Boolean,
value: false
},
_animating: {
type: Boolean
},
@ -538,6 +556,10 @@ Apply `circle` class to make the rippling effect within a circle.
}
},
observers: [
'_noinkChanged(noink, isAttached)'
],
get target () {
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var target;
@ -558,12 +580,13 @@ Apply `circle` class to make the rippling effect within a circle.
},
attached: function() {
this.listen(this.target, 'up', 'upAction');
this.listen(this.target, 'down', 'downAction');
this.listen(this.target, 'up', 'uiUpAction');
this.listen(this.target, 'down', 'uiDownAction');
},
if (!this.target.hasAttribute('noink')) {
this.keyEventTarget = this.target;
}
detached: function() {
this.unlisten(this.target, 'up', 'uiUpAction');
this.unlisten(this.target, 'down', 'uiDownAction');
},
get shouldKeepAnimating () {
@ -585,7 +608,22 @@ Apply `circle` class to make the rippling effect within a circle.
}, 1);
},
/** @param {Event=} event */
/**
* Provokes a ripple down effect via a UI event,
* respecting the `noink` property.
* @param {Event=} event
*/
uiDownAction: function(event) {
if (!this.noink) {
this.downAction(event);
}
},
/**
* Provokes a ripple down effect via a UI event,
* *not* respecting the `noink` property.
* @param {Event=} event
*/
downAction: function(event) {
if (this.holdDown && this.ripples.length > 0) {
return;
@ -600,7 +638,22 @@ Apply `circle` class to make the rippling effect within a circle.
}
},
/** @param {Event=} event */
/**
* Provokes a ripple up effect via a UI event,
* respecting the `noink` property.
* @param {Event=} event
*/
uiUpAction: function(event) {
if (!this.noink) {
this.upAction(event);
}
},
/**
* Provokes a ripple up effect via a UI event,
* *not* respecting the `noink` property.
* @param {Event=} event
*/
upAction: function(event) {
if (this.holdDown) {
return;
@ -673,24 +726,35 @@ Apply `circle` class to make the rippling effect within a circle.
},
_onEnterKeydown: function() {
this.downAction();
this.async(this.upAction, 1);
this.uiDownAction();
this.async(this.uiUpAction, 1);
},
_onSpaceKeydown: function() {
this.downAction();
this.uiDownAction();
},
_onSpaceKeyup: function() {
this.upAction();
this.uiUpAction();
},
_holdDownChanged: function(holdDown) {
if (holdDown) {
// note: holdDown does not respect noink since it can be a focus based
// effect.
_holdDownChanged: function(newVal, oldVal) {
if (oldVal === undefined) {
return;
}
if (newVal) {
this.downAction();
} else {
this.upAction();
}
},
_noinkChanged: function(noink, attached) {
if (attached) {
this.keyEventTarget = noink ? this : this.target;
}
}
});
})();

View File

@ -18,6 +18,7 @@ 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="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-ripple.html">
@ -56,18 +57,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="NoinkTarget">
<template>
<div id="RippleContainer">
<paper-ripple noink></paper-ripple>
</div>
</template>
</test-fixture>
<script>
function FakeMouseEvent (target, relativeX, relativeX) {
var rect = target.getBoundingClientRect();
return {
detail: {
x: rect.left + relativeX,
y: rect.top + relativeX
}
};
}
suite('<paper-ripple>', function () {
var mouseEvent;
var rippleContainer;
@ -77,13 +75,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
setup(function () {
rippleContainer = fixture('TrivialRipple');
ripple = rippleContainer.firstElementChild;
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
});
test('creates a ripple', function () {
expect(ripple.ripples.length).to.be.eql(0);
ripple.downAction(mouseEvent);
MockInteractions.down(ripple);
expect(ripple.ripples.length).to.be.eql(1);
});
@ -91,18 +87,58 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
expect(ripple.ripples.length).to.be.eql(0);
for (var i = 0; i < 3; ++i) {
ripple.downAction(mouseEvent);
MockInteractions.down(ripple);
expect(ripple.ripples.length).to.be.eql(i + 1);
}
});
});
suite('when holdDown is togggled', function() {
setup(function () {
rippleContainer = fixture('TrivialRipple');
ripple = rippleContainer.firstElementChild;
});
test('generates a ripple', function() {
ripple.holdDown = true;
expect(ripple.ripples.length).to.be.eql(1);
});
test('generates a ripple when noink', function() {
ripple.noink = true;
ripple.holdDown = true;
expect(ripple.ripples.length).to.be.eql(1);
});
});
suite('when target is noink', function () {
setup(function () {
rippleContainer = fixture('NoinkTarget');
ripple = rippleContainer.firstElementChild;
});
test('tapping does not create a ripple', function () {
expect(ripple.keyEventTarget).to.be.equal(ripple);
expect(ripple.ripples.length).to.be.eql(0);
MockInteractions.down(ripple);
expect(ripple.ripples.length).to.be.eql(0);
});
test('ripples can be manually created', function () {
expect(ripple.ripples.length).to.be.eql(0);
ripple.simulatedRipple()
expect(ripple.ripples.length).to.be.eql(1);
});
});
suite('with the `center` attribute set to true', function () {
setup(function () {
rippleContainer = fixture('CenteringRipple');
ripple = rippleContainer.firstElementChild;
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
});
test('ripples will center', function (done) {
@ -112,11 +148,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
div.style.webkitTransform = 'translate3d(0px, 0px, 0px)';
div.style.transform = 'translate3d(0px, 0px, 0)';
ripple.downAction(mouseEvent);
MockInteractions.down(ripple);
waveContainerElement = ripple.ripples[0].waveContainer;
ripple.upAction(mouseEvent);
MockInteractions.up(ripple);
window.requestAnimationFrame(function () {
var currentTransform = waveContainerElement.style.transform;
@ -137,15 +173,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
setup(function () {
rippleContainer = fixture('RecenteringRipple');
ripple = rippleContainer.firstElementChild;
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
});
test('ripples will gravitate towards the center', function (done) {
var waveContainerElement;
var waveTranslateString;
ripple.downAction(mouseEvent);
MockInteractions.down(ripple, {x: 10, y: 10});
waveContainerElement = ripple.ripples[0].waveContainer;
waveTranslateString = waveContainerElement.style.transform;
ripple.upAction(mouseEvent);
MockInteractions.up(ripple);
window.requestAnimationFrame(function () {
try {
expect(waveTranslateString).to.be.ok;

View File

@ -1,6 +1,6 @@
{
"name": "paper-slider",
"version": "1.0.6",
"version": "1.0.7",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
@ -37,11 +37,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/paper-slider",
"_release": "1.0.6",
"_release": "1.0.7",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "4ae2e000dcbbfda4e12611f07c21fea3c0a9270d"
"tag": "v1.0.7",
"commit": "087c9ecdfca14f4a3faf45006203de08a8910995"
},
"_source": "git://github.com/PolymerElements/paper-slider.git",
"_target": "~1.0.3",

View File

@ -1,6 +1,6 @@
{
"name": "paper-slider",
"version": "1.0.6",
"version": "1.0.7",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",

View File

@ -17,7 +17,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../paper-slider.html">
@ -51,11 +50,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
--paper-slider-pin-color: var(--paper-orange-500);
}
#ratingsLabel {
.caption {
padding-left: 12px;
color: #a0a0a0;
}
#grade {
--paper-slider-secondary-color: var(--paper-red-a200);
}
</style>
</head>
@ -70,9 +73,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div>Hydrogen</div>
<paper-slider value="0"></paper-slider><br><br>
<div>Nitrogen</div>
<paper-slider value="78"></paper-slider><br><br>
<paper-slider value="78" secondary-progress="85"></paper-slider><br><br>
<div>Sprinkles</div>
<paper-slider disabled value="33"></paper-slider>
<paper-slider disabled value="33" secondary-progress="66"></paper-slider>
</div>
<h4>Editable</h4>
@ -99,8 +102,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div class="vertical-section">
<div>Brightness</div><br>
<paper-slider pin value="20" class="orange"></paper-slider>
<div>Ratings: <span id="ratingsLabel"></span></div><br>
<div>Ratings: <span id="ratingsLabel" class="caption"></span></div><br>
<paper-slider id="ratings" pin snaps max="10" step="1" value="5" class="orange"></paper-slider>
<div>Grade: <span id="gradeLabel" class="caption"></span></div><br>
<paper-slider id="grade" pin value="20" secondary-progress="70" class="blue"></paper-slider>
</div>
</div>
@ -111,6 +116,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
document.querySelector('#ratingsLabel').textContent = ratings.value;
});
var grade = document.querySelector('#grade');
grade.addEventListener('value-change', function() {
var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
});
var test = document.querySelector("#test");
test.addEventListener('value-changed', function(e) {
console.log(e);
});

View File

@ -1,247 +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
*/
:host {
display: inline-block;
width: 200px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
}
/* focus shows the ripple */
:host(:focus) {
outline: none;
}
#sliderContainer {
position: relative;
width: calc(100% - 32px);
height: 32px;
}
#sliderContainer.editable {
float: left;
width: calc(100% - 72px);
margin: 12px 0;
}
.bar-container {
position: absolute;
top: 0;
left: 16px;
height: 100%;
width: 100%;
overflow: hidden;
}
.ring > .bar-container {
left: 20px;
width: calc(100% - 4px);
transition: left 0.18s ease, width 0.18s ease;
}
.ring.expand:not(.pin) > .bar-container {
left: 30px;
width: calc(100% - 14px);
}
.ring.expand.dragging > .bar-container {
transition: none;
}
#sliderBar {
position: absolute;
top: 15px;
left: 0;
width: 100%;
padding: 8px 0;
margin: -8px 0;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-height: var(--paper-slider-height, 2px);
}
.ring #sliderBar {
left: -4px;
width: calc(100% + 4px);
}
.ring.expand:not(.pin) #sliderBar {
left: -14px;
width: calc(100% + 14px);
}
.slider-markers {
position: absolute;
top: 15px;
left: 15px;
height: 2px;
width: calc(100% + 2px);
box-sizing: border-box;
pointer-events: none;
}
.slider-markers::after,
.slider-marker::after {
content: "";
display: block;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: black;
}
#sliderKnob {
@apply(--layout-center-justified);
@apply(--layout-center);
@apply(--layout-horizontal);
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
}
.transiting > #sliderKnob {
transition: left 0.08s ease;
}
#sliderKnob:focus {
outline: none;
}
#sliderKnob.dragging {
transition: none;
}
.snaps > #sliderKnob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnobInner {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--paper-slider-knob-color, --google-blue-700);
-moz-box-sizing: border-box;
box-sizing: border-box;
transition-property: height, width, background-color, border;
transition-duration: 0.1s;
transition-timing-function: ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
}
#sliderKnobInner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
}
.pin > #sliderKnob > #sliderKnobInner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
margin-left: 3px;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
#sliderKnobInner::before,
#sliderKnobInner::after {
transition: -webkit-transform .2s ease, background-color .18s ease;
transition: transform .2s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: var(--paper-slider-pin-start-color, #c8c8c8);
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
.pin > #sliderKnob > #sliderKnobInner::after {
content: attr(value);
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 26px;
text-align: center;
color: var(--paper-slider-font-color, #fff);
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > #sliderKnob > #sliderKnobInner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
/* editable: paper-input */
.slider-input {
width: 40px;
float: right;
overflow: hidden;
}
.slider-input {
--paper-input-container-input: {
text-align: center;
};
}
/* disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > #sliderKnob > #sliderKnobInner {
width: 8px;
height: 8px;
background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
}

View File

@ -9,7 +9,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.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-progress/paper-progress.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
@ -19,6 +20,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<!--
Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)
`paper-slider` allows user to select a value from a range of values by
moving the slider thumb. The interactive nature of the slider makes it a
great choice for settings that reflect intensity levels, such as volume,
@ -61,10 +64,248 @@ Custom property | Description | Default
-->
<dom-module id="paper-slider">
<template strip-whitespace>
<style>
:host {
display: inline-block;
width: 200px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
}
<link rel="import" type="css" href="paper-slider.css">
/* focus shows the ripple */
:host(:focus) {
outline: none;
}
<template>
#sliderContainer {
position: relative;
width: calc(100% - 32px);
height: 32px;
}
#sliderContainer:focus {
outline: 0;
}
#sliderContainer.editable {
float: left;
width: calc(100% - 72px);
margin: 12px 0;
}
.bar-container {
position: absolute;
top: 0;
left: 16px;
height: 100%;
width: 100%;
overflow: hidden;
}
.ring > .bar-container {
left: 20px;
width: calc(100% - 4px);
transition: left 0.18s ease, width 0.18s ease;
}
.ring.expand:not(.pin) > .bar-container {
left: 30px;
width: calc(100% - 14px);
}
.ring.expand.dragging > .bar-container {
transition: none;
}
#sliderBar {
position: absolute;
top: 15px;
left: 0;
width: 100%;
padding: 8px 0;
margin: -8px 0;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-height: var(--paper-slider-height, 2px);
}
.ring #sliderBar {
left: -4px;
width: calc(100% + 4px);
}
.ring.expand:not(.pin) #sliderBar {
left: -14px;
width: calc(100% + 14px);
}
.slider-markers {
position: absolute;
top: 15px;
left: 15px;
height: 2px;
width: calc(100% + 2px);
box-sizing: border-box;
pointer-events: none;
}
.slider-markers::after,
.slider-marker::after {
content: "";
display: block;
width: 2px;
height: 2px;
border-radius: 50%;
background-color: black;
}
#sliderKnob {
@apply(--layout-center-justified);
@apply(--layout-center);
@apply(--layout-horizontal);
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
}
.transiting > #sliderKnob {
transition: left 0.08s ease;
}
#sliderKnob:focus {
outline: none;
}
#sliderKnob.dragging {
transition: none;
}
.snaps > #sliderKnob.dragging {
transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnobInner {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--paper-slider-knob-color, --google-blue-700);
-moz-box-sizing: border-box;
box-sizing: border-box;
transition-property: height, width, background-color, border;
transition-duration: 0.1s;
transition-timing-function: ease;
}
.expand:not(.pin) > #sliderKnob > #sliderKnobInner {
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.ring > #sliderKnob > #sliderKnobInner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
}
#sliderKnobInner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
}
.pin > #sliderKnob > #sliderKnobInner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 26px;
height: 26px;
margin-left: 3px;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
#sliderKnobInner::before,
#sliderKnobInner::after {
transition: -webkit-transform .2s ease, background-color .18s ease;
transition: transform .2s ease, background-color .18s ease;
}
.pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: var(--paper-slider-pin-start-color, #c8c8c8);
}
.pin.expand > #sliderKnob > #sliderKnobInner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
transform: rotate(-45deg) scale(1) translate(17px, -17px);
}
.pin > #sliderKnob > #sliderKnobInner::after {
content: attr(value);
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 26px;
text-align: center;
color: var(--paper-slider-font-color, #fff);
font-size: 10px;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > #sliderKnob > #sliderKnobInner::after {
-webkit-transform: scale(1) translate(0, -17px);
transform: scale(1) translate(0, -17px);
}
/* paper-input */
.slider-input {
width: 50px;
float: right;
overflow: hidden;
--paper-input-container-input: {
text-align: center;
};
}
/* disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > #sliderKnob > #sliderKnobInner {
width: 8px;
height: 8px;
background-color: var(--paper-slider-disabled-knob-color, --google-grey-500);
}
.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
}
</style>
<div id="sliderContainer"
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
@ -98,28 +339,25 @@ Custom property | Description | Default
on-up="_resetKnob"
on-track="_onTrack"
on-transitionend="_knobTransitionEnd">
<paper-ripple
center
id="ink"
class="circle"
hidden$="[[!receivedFocusFromKeyboard]]">
</paper-ripple>
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
</div>
</div>
<template is="dom-if" if="[[editable]]">
<paper-input
id="input"
type="number"
step="[[step]]"
min="[[min]]"
max="[[max]]"
class="slider-input"
disabled$="[[disabled]]"
on-change="_inputChange"
value="[[_fixForInput(immediateValue)]]"
>
value="[[immediateValue]]"
on-change="_changeValue"
on-keydown="_inputKeyDown"
no-label-float>
</paper-input>
</template>
</template>
</dom-module>
<script>
@ -228,8 +466,6 @@ Custom property | Description | Default
observers: [
'_updateKnob(value, min, max, snaps, step)',
'_minChanged(min)',
'_maxChanged(max)',
'_valueChanged(value)',
'_immediateValueChanged(immediateValue)'
],
@ -246,7 +482,6 @@ Custom property | Description | Default
ready: function() {
// issue polymer/polymer#1305
this.async(function() {
this._updateKnob(this.value);
}, 1);
@ -268,20 +503,15 @@ Custom property | Description | Default
this.value = this._clampValue(this.value - this.step);
},
_updateKnob: function(value) {
_updateKnob: function(value, min, max, snaps, step) {
this.setAttribute('aria-valuemin', min);
this.setAttribute('aria-valuemax', max);
this.setAttribute('aria-valuenow', value);
this._positionKnob(this._calcRatio(value));
},
_minChanged: function() {
this.setAttribute('aria-valuemin', this.min);
},
_maxChanged: function() {
this.setAttribute('aria-valuemax', this.max);
},
_valueChanged: function() {
this.setAttribute('aria-valuenow', this.value);
this.fire('value-change');
},
@ -297,11 +527,6 @@ Custom property | Description | Default
this.secondaryProgress = this._clampValue(this.secondaryProgress);
},
_fixForInput: function(immediateValue) {
// paper-input/issues/114
return this.immediateValue.toString();
},
_expandKnob: function() {
this._setExpand(true);
},
@ -313,17 +538,11 @@ Custom property | Description | Default
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setPinValue(this.immediateValue);
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
},
_inputChange: function() {
this.value = this.$$('#input').value;
this.fire('change');
},
_calcKnobPosition: function(ratio) {
return (this.max - this.min) * ratio + this.min;
},
@ -350,7 +569,6 @@ Custom property | Description | Default
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
this._setDragging(true);
},
@ -368,11 +586,8 @@ Custom property | Description | Default
// update knob's position
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
this._setPinValue(immediateValue);
},
_setPinValue: function (value) {
this.pinValue = value;
},
_trackEnd: function() {
var s = this.$.sliderKnob.style;
@ -460,22 +675,60 @@ Custom property | Description | Default
},
_incrementKey: function(event) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
if (!this.disabled) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
}
this.fire('change');
}
this.fire('change');
},
_decrementKey: function(event) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
if (!this.disabled) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
}
this.fire('change');
}
},
_changeValue: function(event) {
this.value = event.target.value;
this.fire('change');
},
_inputKeyDown: function(event) {
event.stopPropagation();
},
// create the element ripple inside the `sliderKnob`
_createRipple: function() {
this._rippleContainer = this.$.sliderKnob;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
},
// Hide the ripple when user is not interacting with keyboard.
// This behavior is different from other ripple-y controls, but is
// according to spec: https://www.google.com/design/spec/components/sliders.html
_focusedChanged: function(receivedFocusFromKeyboard) {
if (receivedFocusFromKeyboard) {
this.ensureRipple();
}
if (this.hasRipple()) {
// note, ripple must be un-hidden prior to setting `holdDown`
if (receivedFocusFromKeyboard) {
this._ripple.removeAttribute('hidden');
} else {
this._ripple.setAttribute('hidden', '');
}
this._ripple.holdDown = receivedFocusFromKeyboard;
}
}
});
/**

View File

@ -0,0 +1,72 @@
<!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>paper-slider a11y test</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>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../paper-slider.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
</head>
<body>
<test-fixture id="trivialSlider">
<template>
<paper-slider min="0" max="100" value="50"></paper-slider>
</template>
</test-fixture>
<script>
suite('a11y', function() {
var slider;
setup(function() {
slider = fixture('trivialSlider');
});
test('has aria role "slider"', function() {
assert.equal(slider.getAttribute('role'), 'slider');
assert.equal(slider.getAttribute('aria-valuemin'), slider.min);
assert.equal(slider.getAttribute('aria-valuemax'), slider.max);
assert.equal(slider.getAttribute('aria-valuenow'), slider.value);
});
test('interacting without keyboard causes no ripple', function() {
MockInteractions.down(slider.$.sliderKnob);
assert.isTrue(slider.hasRipple());
var ripple = slider.getRipple();
assert.equal(ripple.offsetHeight, 0);
assert.equal(ripple.offsetWidth, 0);
});
test('interacting with keyboard causes ripple', function() {
MockInteractions.focus(slider);
MockInteractions.pressSpace(slider.$.sliderKnob);
assert.isTrue(slider.hasRipple());
var ripple = slider.getRipple();
assert.isAbove(ripple.offsetHeight, 0);
assert.isAbove(ripple.offsetWidth, 0);
});
a11ySuite('trivialSlider');
});
</script>
</body>
</html>

View File

@ -18,7 +18,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'basic.html'
'basic.html',
'a11y.html'
]);
</script>
</body>

View File

@ -1,6 +1,6 @@
{
"name": "paper-toggle-button",
"version": "1.0.10",
"version": "1.0.11",
"description": "A material design toggle button control",
"authors": [
"The Polymer Authors"
@ -34,11 +34,11 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
},
"_release": "1.0.10",
"_release": "1.0.11",
"_resolution": {
"type": "version",
"tag": "v1.0.10",
"commit": "b9851b6ab872ea03df70b80c6f89478f50d12823"
"tag": "v1.0.11",
"commit": "a6c8e6d76c4645042b4f346dedad18bcd6d8ad10"
},
"_source": "git://github.com/PolymerElements/paper-toggle-button.git",
"_target": "~1.0.5",

View File

@ -1,6 +1,6 @@
{
"name": "paper-toggle-button",
"version": "1.0.10",
"version": "1.0.11",
"description": "A material design toggle button control",
"authors": [
"The Polymer Authors"

View File

@ -101,6 +101,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-toggle-button checked class="blue">Calcium</paper-toggle-button>
</div>
</div>
<div>
<h4>Noink</h4>
<div class="horizontal-section">
<paper-toggle-button noink>Oxygen</paper-toggle-button>
<paper-toggle-button noink>Carbon</paper-toggle-button>
<paper-toggle-button checked noink>Hydrogen</paper-toggle-button>
<paper-toggle-button checked noink>Nitrogen</paper-toggle-button>
<paper-toggle-button checked noink>Calcium</paper-toggle-button>
</div>
</div>
</div>
</body>
</html>

View File

@ -12,10 +12,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../iron-checked-element-behavior/iron-checked-element-behavior.html">
<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
<!--
Material design: [Switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
`paper-toggle-button` provides a ON/OFF switch that user can toggle the state
by tapping or by dragging the switch.
@ -48,7 +49,7 @@ Custom property | Description | Default
-->
<dom-module id="paper-toggle-button">
<template>
<template strip-whitespace>
<style>
:host {
@ -156,9 +157,7 @@ Custom property | Description | Default
<div class="toggle-container">
<div id="toggleBar" class="toggle-bar"></div>
<div id="toggleButton" class="toggle-button">
<paper-ripple id="ink" class="toggle-ink circle" recenters></paper-ripple>
</div>
<div id="toggleButton" class="toggle-button"></div>
</div>
<div class="toggle-label"><content></content></div>
@ -170,8 +169,7 @@ Custom property | Description | Default
is: 'paper-toggle-button',
behaviors: [
Polymer.PaperInkyFocusBehavior,
Polymer.IronCheckedElementBehavior
Polymer.PaperCheckedElementBehavior
],
hostAttributes: {
@ -197,20 +195,6 @@ Custom property | Description | Default
track: '_ontrack'
},
ready: function() {
this._isReady = true;
},
// button-behavior hook
_buttonStateChanged: function() {
if (this.disabled) {
return;
}
if (this._isReady) {
this.checked = this.active;
}
},
_ontrack: function(event) {
var track = event.detail;
if (track.state === 'start') {
@ -243,6 +227,16 @@ Custom property | Description | Default
_trackEnd: function(track) {
this.$.toggleButton.classList.remove('dragging');
this.transform('', this.$.toggleButton);
},
// customize the element's ripple
_createRipple: function() {
this._rippleContainer = this.$.toggleButton;
var ripple = Polymer.PaperRippleBehavior._createRipple();
ripple.id = 'ink';
ripple.setAttribute('recenters', '');
ripple.classList.add('circle', 'toggle-ink');
return ripple;
}
});

View File

@ -1208,7 +1208,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
top: 0;
background-color: rgba(0, 0, 0, .3);
z-index: 999;
border: 1px solid #52B54B;
border: 1px solid #43A047;
}
.itemSelectionPanel #checkbox {
@ -1221,7 +1221,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
left: 0;
right: 0;
height: 50px;
background: #52B54B;
background: #43A047;
z-index: 1000;
}

View File

@ -1110,10 +1110,32 @@
selectionCommandsPanel.innerHTML = html;
$('.btnCloseSelectionPanel', selectionCommandsPanel).on('click', hideSelections);
$('.btnSelectionPanelOptions', selectionCommandsPanel).on('click', showMenuForSelectedItems);
var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
$(btnSelectionPanelOptions).on('click', showMenuForSelectedItems);
shake(btnSelectionPanelOptions, 1);
}
}
function shake(elem, iterations) {
var keyframes = [
{ transform: 'translate3d(0, 0, 0)', offset: 0 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 },
{ transform: 'translate3d(10px, 0, 0)', offset: 0.2 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 },
{ transform: 'translate3d(10px, 0, 0)', offset: 0.4 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 },
{ transform: 'translate3d(10px, 0, 0)', offset: 0.6 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 },
{ transform: 'translate3d(10px, 0, 0)', offset: 0.8 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 },
{ transform: 'translate3d(0, 0, 0)', offset: 1 }];
var timing = { duration: 900, iterations: iterations };
return elem.animate(keyframes, timing);
}
function showSelections(initialCard) {
var cards = document.querySelectorAll('.card');

View File

@ -240,16 +240,6 @@
saveSchedule(page);
// Disable default form submission
return false;
},
onBlockedTagFormSubmit: function () {
var page = $(this).parents('.page');
saveBlockedTag(page);
// Disable default form submission
return false;
}
@ -326,19 +316,6 @@
$('#popupSchedule', page).popup('close');
}
function saveBlockedTag(page) {
var tag = $('#txtBlockedTag', page).val();
var tags = getBlockedTagsFromPage(page);
if (tags.indexOf(tag) == -1) {
tags.push(tag);
loadBlockedTags(page, tags);
}
$('#popupBlockedTag', page).popup('close');
}
function getSchedulesFromPage(page) {
return $('.liSchedule', page).map(function () {
@ -363,8 +340,25 @@
function showBlockedTagPopup(page) {
$('#popupBlockedTag', page).popup('open');
$('#txtBlockedTag', page).val('').focus();
require(['prompt'], function (prompt) {
prompt({
text: Globalize.translate('LabelTag:'),
title: Globalize.translate('HeaderAddTag'),
callback: function(value) {
if (value) {
var tags = getBlockedTagsFromPage(page);
if (tags.indexOf(value) == -1) {
tags.push(value);
loadBlockedTags(page, tags);
}
}
}
});
});
}
$(document).on('pageinit', "#userParentalControlPage", function () {
@ -384,7 +378,6 @@
populateHours(page);
$('.blockedTagForm').off('submit', UserParentalControlPage.onBlockedTagFormSubmit).on('submit', UserParentalControlPage.onBlockedTagFormSubmit);
$('.scheduleForm').off('submit', UserParentalControlPage.onScheduleFormSubmit).on('submit', UserParentalControlPage.onScheduleFormSubmit);
$('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);

View File

@ -1380,10 +1380,8 @@
"HeaderParentalRatings": "Parental Ratings",
"HeaderVideoTypes": "Video Types",
"HeaderYears": "Years",
"HeaderAddTag": "Add Tag",
"HeaderBlockItemsWithNoRating": "Block content with no or unrecognized rating information:",
"LabelBlockContentWithTags": "Block content with tags:",
"LabelTag": "Tag:",
"LabelEnableSingleImageInDidlLimit": "Limit to single embedded image",
"LabelEnableSingleImageInDidlLimitHelp": "Some devices will not render properly if multiple images are embedded within Didl.",
"TabActivity": "Activity",

View File

@ -39,6 +39,8 @@
"TextEnjoyBonusFeatures": "Enjoy Bonus Features",
"TitleLiveTV": "Live TV",
"ButtonCancelSyncJob": "Cancel sync",
"HeaderAddTag": "Add Tag",
"LabelTag": "Tag:",
"ButtonSelectView": "Select view",
"TitleSync": "Sync",
"OptionAutomatic": "Auto",

View File

@ -68,32 +68,6 @@
</form>
<div data-role="popup" id="popupBlockedTag" class="popup" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 5px 20px;">
<h3 style="margin: .5em;">${HeaderAddTag}</h3>
</div>
<div style="padding:10px 5px 0;">
<form class="blockedTagForm" style="min-width:210px;">
<ul data-role="listview" class="ulForm" style="margin-bottom:10px!important;">
<li>
<label for="txtBlockedTag">${LabelTag}</label>
<input id="txtBlockedTag" type="text" required="required" />
</li>
<li>
<button type="submit" data-icon="plus" data-theme="b" data-mini="true">${ButtonAdd}</button>
<button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">${ButtonCancel}</button>
</li>
</ul>
</form>
</div>
</div>
<div data-role="popup" id="popupSchedule" class="popup" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 5px 20px;">

File diff suppressed because it is too large Load Diff