mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update polymer
This commit is contained in:
parent
8119b930e4
commit
cbb6337b41
@ -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"
|
||||
}
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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});
|
||||
|
@ -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;
|
||||
|
@ -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",
|
||||
|
@ -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": [
|
||||
|
@ -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);
|
||||
|
@ -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() {
|
||||
|
@ -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"
|
||||
}
|
@ -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",
|
||||
|
@ -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": {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -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
|
||||
];
|
||||
|
||||
|
61
dashboard-ui/bower_components/paper-behaviors/paper-checked-element-behavior.html
vendored
Normal file
61
dashboard-ui/bower_components/paper-behaviors/paper-checked-element-behavior.html
vendored
Normal 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>
|
@ -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
|
||||
];
|
||||
|
||||
|
117
dashboard-ui/bower_components/paper-behaviors/paper-ripple-behavior.html
vendored
Normal file
117
dashboard-ui/bower_components/paper-behaviors/paper-ripple-behavior.html
vendored
Normal 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>
|
@ -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>
|
||||
|
@ -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>
|
||||
|
94
dashboard-ui/bower_components/paper-behaviors/test/paper-checked-element-behavior.html
vendored
Normal file
94
dashboard-ui/bower_components/paper-behaviors/test/paper-checked-element-behavior.html
vendored
Normal 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>
|
@ -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());
|
||||
});
|
||||
|
||||
});
|
||||
|
82
dashboard-ui/bower_components/paper-behaviors/test/paper-ripple-behavior.html
vendored
Normal file
82
dashboard-ui/bower_components/paper-behaviors/test/paper-ripple-behavior.html
vendored
Normal 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>
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paper-button",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"description": "Material design button",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -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] {
|
||||
|
@ -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>
|
||||
|
||||
</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>
|
||||
|
@ -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);
|
||||
|
@ -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",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paper-checkbox",
|
||||
"version": "1.0.11",
|
||||
"version": "1.0.12",
|
||||
"description": "A material design checkbox",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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,7 +57,8 @@ Custom property | Description | Default
|
||||
-->
|
||||
|
||||
<dom-module id="paper-fab">
|
||||
<style>
|
||||
<template strip-whitespace>
|
||||
<style include="paper-material">
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
@ -80,6 +82,8 @@ Custom property | Description | Default
|
||||
|
||||
z-index: 0;
|
||||
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
@apply(--paper-fab);
|
||||
}
|
||||
|
||||
@ -97,22 +101,15 @@ Custom property | Description | Default
|
||||
@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 {
|
||||
:host(.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>
|
||||
</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;
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -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">
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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.
|
||||
@ -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,8 +63,8 @@ Custom property | Description | Default
|
||||
-->
|
||||
|
||||
<dom-module id="paper-icon-button">
|
||||
<template strip-whitespace>
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -85,6 +78,7 @@ Custom property | Description | Default
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
|
||||
width: 24px;
|
||||
@apply(--paper-icon-button);
|
||||
}
|
||||
|
||||
@ -99,12 +93,15 @@ Custom property | Description | Default
|
||||
cursor: auto;
|
||||
@apply(--paper-icon-button-disabled);
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
--iron-icon-width: 100%;
|
||||
--iron-icon-height: 100%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<paper-ripple id="ink" class="circle" center></paper-ripple>
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-icon-button',
|
||||
@ -155,3 +152,4 @@ Custom property | Description | Default
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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: {
|
||||
@ -193,38 +193,15 @@ Custom property | Description | Default
|
||||
*/
|
||||
|
||||
ariaActiveAttribute: {
|
||||
type: String,
|
||||
value: 'aria-checked'
|
||||
}
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._isReady = true;
|
||||
|
||||
// Don't stomp over a user-set aria-label.
|
||||
if (!this.getAttribute('aria-label')) {
|
||||
this.updateAriaLabel();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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>
|
||||
|
@ -100,10 +100,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
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");
|
||||
|
@ -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"
|
||||
}
|
@ -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"
|
||||
|
@ -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,11 +132,17 @@ 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) {
|
||||
// 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)
|
||||
oldItem.checked = false;
|
||||
|
@ -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);
|
||||
}, 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);
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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:
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
@ -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;
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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);
|
||||
});
|
||||
|
@ -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);
|
||||
}
|
@ -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,15 +675,18 @@ Custom property | Description | Default
|
||||
},
|
||||
|
||||
_incrementKey: function(event) {
|
||||
if (!this.disabled) {
|
||||
if (event.detail.key === 'end') {
|
||||
this.value = this.max;
|
||||
} else {
|
||||
this.increment();
|
||||
}
|
||||
this.fire('change');
|
||||
}
|
||||
},
|
||||
|
||||
_decrementKey: function(event) {
|
||||
if (!this.disabled) {
|
||||
if (event.detail.key === 'home') {
|
||||
this.value = this.min;
|
||||
} else {
|
||||
@ -476,6 +694,41 @@ Custom property | Description | Default
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
|
72
dashboard-ui/bower_components/paper-slider/test/a11y.html
vendored
Normal file
72
dashboard-ui/bower_components/paper-slider/test/a11y.html
vendored
Normal 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>
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
});
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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');
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user