mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update polymer
This commit is contained in:
Luke Pulverenti
parent
571dd964e6
commit
c526176a6a
23 changed files with 707 additions and 243 deletions
|
|
@ -25,14 +25,14 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/polymerelements/iron-meta",
|
"homepage": "https://github.com/PolymerElements/iron-meta",
|
||||||
"_release": "1.0.3",
|
"_release": "1.0.3",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.3",
|
"tag": "v1.0.3",
|
||||||
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
|
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-meta.git",
|
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-meta"
|
"_originalSource": "PolymerElements/iron-meta"
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-selector",
|
"name": "iron-selector",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"description": "Manages a set of elements that can be selected",
|
"description": "Manages a set of elements that can be selected",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
|
@ -19,21 +19,23 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git://github.com/PolymerElements/iron-selector.git"
|
"url": "git://github.com/PolymerElements/iron-selector.git"
|
||||||
},
|
},
|
||||||
|
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||||
|
"ignore": [],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.4",
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/iron-selector",
|
"_release": "1.0.3",
|
||||||
"_release": "1.0.2",
|
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.2",
|
"tag": "v1.0.3",
|
||||||
"commit": "ea22d91d11ba6f72c01faa952d5e600f9d1773cf"
|
"commit": "d93b02871f790b6bcb1fff52f24757e9c2eb04a5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-selector",
|
"name": "iron-selector",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"description": "Manages a set of elements that can be selected",
|
"description": "Manages a set of elements that can be selected",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
|
@ -19,10 +19,13 @@
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git://github.com/PolymerElements/iron-selector.git"
|
"url": "git://github.com/PolymerElements/iron-selector.git"
|
||||||
},
|
},
|
||||||
|
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||||
|
"ignore": [],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.4",
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
|
|
|
||||||
|
|
@ -17,50 +17,70 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||||
|
|
||||||
|
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||||
<link rel="import" href="../iron-selector.html">
|
<link rel="import" href="../iron-selector.html">
|
||||||
|
|
||||||
<style>
|
<style is="custom-style">
|
||||||
|
|
||||||
iron-selector > * {
|
iron-selector > * {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.horizontal-section {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.iron-selected {
|
.iron-selected {
|
||||||
background-color: #ddd;
|
background-color: var(--google-blue-500);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body unresolved>
|
||||||
|
|
||||||
<h3>Basic</h3>
|
<div class="horizontal center-justified layout">
|
||||||
|
<div>
|
||||||
|
<h3>Basic</h3>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<iron-selector selected="0">
|
||||||
|
<div>Item 0</div>
|
||||||
|
<div>Item 1</div>
|
||||||
|
<div>Item 2</div>
|
||||||
|
<div>Item 3</div>
|
||||||
|
<div>Item 4</div>
|
||||||
|
</iron-selector>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<iron-selector selected="0">
|
<div>
|
||||||
<div>Item 0</div>
|
<h3>Multi-select</h3>
|
||||||
<div>Item 1</div>
|
<div class="horizontal-section">
|
||||||
<div>Item 2</div>
|
<iron-selector multi selected-values='[0,2]'>
|
||||||
<div>Item 3</div>
|
<div>Item 0</div>
|
||||||
<div>Item 4</div>
|
<div>Item 1</div>
|
||||||
</iron-selector>
|
<div>Item 2</div>
|
||||||
|
<div>Item 3</div>
|
||||||
|
<div>Item 4</div>
|
||||||
|
</iron-selector>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Multi-select</h3>
|
<div>
|
||||||
|
<h3>Example</h3>
|
||||||
<iron-selector multi selected-values='[0,2]'>
|
<div class="horizontal-section">
|
||||||
<div>Item 0</div>
|
<iron-selector selected="foo" attr-for-selected="name">
|
||||||
<div>Item 1</div>
|
<div name="foo">Foo</div>
|
||||||
<div>Item 2</div>
|
<div name="bar">Bar</div>
|
||||||
<div>Item 3</div>
|
<div name="baz">Baz</div>
|
||||||
<div>Item 4</div>
|
<div name="qux">Qux</div>
|
||||||
</iron-selector>
|
<div name="quux">Quux</div>
|
||||||
|
</iron-selector>
|
||||||
<h3>Example</h3>
|
</div>
|
||||||
|
</div>
|
||||||
<iron-selector selected="foo" attr-for-selected="name">
|
</div>
|
||||||
<div name="foo">Foo</div>
|
|
||||||
<div name="bar">Bar</div>
|
|
||||||
<div name="zot">Zot</div>
|
|
||||||
</iron-selector>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
/** @polymerBehavior */
|
/** @polymerBehavior */
|
||||||
Polymer.IronSelectableBehavior = {
|
Polymer.IronSelectableBehavior = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired when iron-selector is activated (selected or deselected).
|
||||||
|
* It is fired before the selected items are changed.
|
||||||
|
* Cancel the event to abort selection.
|
||||||
|
*
|
||||||
|
* @event iron-activate
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* Fired when an item is selected
|
||||||
|
*
|
||||||
|
* @event iron-select
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* Fired when an item is deselected
|
||||||
|
*
|
||||||
|
* @event iron-deselect
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -68,7 +89,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is a CSS selector sting. If this is set, only items that matches the CSS selector
|
* This is a CSS selector string. If this is set, only items that match the CSS selector
|
||||||
* are selectable.
|
* are selectable.
|
||||||
*
|
*
|
||||||
* @attribute selectable
|
* @attribute selectable
|
||||||
|
|
@ -96,18 +117,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
selectedAttribute: {
|
selectedAttribute: {
|
||||||
type: String,
|
type: String,
|
||||||
value: null
|
value: null
|
||||||
}
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The set of excluded elements where the key is the `localName`
|
||||||
|
* of the element that will be ignored from the item list.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
* @default {template: 1}
|
||||||
|
*/
|
||||||
|
|
||||||
|
excludedLocalNames: {
|
||||||
|
type: Object,
|
||||||
|
value: function() {
|
||||||
|
return {
|
||||||
|
'template': 1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
observers: [
|
observers: [
|
||||||
'_updateSelected(attrForSelected, selected)'
|
'_updateSelected(attrForSelected, selected)'
|
||||||
],
|
],
|
||||||
|
|
||||||
excludedLocalNames: {
|
|
||||||
'template': 1
|
|
||||||
},
|
|
||||||
|
|
||||||
created: function() {
|
created: function() {
|
||||||
this._bindFilterItem = this._filterItem.bind(this);
|
this._bindFilterItem = this._filterItem.bind(this);
|
||||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||||
|
|
@ -186,9 +219,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
},
|
},
|
||||||
|
|
||||||
_removeListener: function(eventName) {
|
_removeListener: function(eventName) {
|
||||||
// There is no unlisten yet...
|
this.unlisten(this, eventName, '_activateHandler');
|
||||||
// https://github.com/Polymer/polymer/issues/1639
|
|
||||||
//this.removeEventListener(eventName, this._bindActivateHandler);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_activateEventChanged: function(eventName, old) {
|
_activateEventChanged: function(eventName, old) {
|
||||||
|
|
@ -277,11 +308,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
},
|
},
|
||||||
|
|
||||||
_activateHandler: function(e) {
|
_activateHandler: function(e) {
|
||||||
// TODO: remove this when https://github.com/Polymer/polymer/issues/1639 is fixed so we
|
|
||||||
// can just remove the old event listener.
|
|
||||||
if (e.type !== this.activateEvent) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var t = e.target;
|
var t = e.target;
|
||||||
var items = this.items;
|
var items = this.items;
|
||||||
while (t && t != this) {
|
while (t && t != this) {
|
||||||
|
|
|
||||||
90
dashboard-ui/bower_components/iron-selector/test/excluded-local-names.html
vendored
Normal file
90
dashboard-ui/bower_components/iron-selector/test/excluded-local-names.html
vendored
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!--
|
||||||
|
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||||
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||||
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||||
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||||
|
Code distributed by Google as part of the polymer project is also
|
||||||
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>iron-selector-selected-attribute</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||||
|
<link rel="import" href="../iron-selector.html">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<test-fixture id="test1">
|
||||||
|
<template>
|
||||||
|
<iron-selector>
|
||||||
|
<div>Item 0</div>
|
||||||
|
<div>Item 1</div>
|
||||||
|
<div>Item 2</div>
|
||||||
|
<span>Item 3</span>
|
||||||
|
</iron-selector>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-fixture id="test2">
|
||||||
|
<template>
|
||||||
|
<iron-selector>
|
||||||
|
<div>Item 0</div>
|
||||||
|
<div>Item 1</div>
|
||||||
|
<div>Item 2</div>
|
||||||
|
<p>Item 3</p>
|
||||||
|
</iron-selector>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
suite('excluded local names', function() {
|
||||||
|
|
||||||
|
var test1, test2;
|
||||||
|
|
||||||
|
setup(function () {
|
||||||
|
test1 = fixture('test1');
|
||||||
|
test2 = fixture('test2');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('default `excludedLocalNames`', function() {
|
||||||
|
assert.isTrue('template' in test1.excludedLocalNames);
|
||||||
|
assert.isTrue('template' in test2.excludedLocalNames);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('custom `excludedLocalNames`', function() {
|
||||||
|
test1.excludedLocalNames.foo = 1;
|
||||||
|
|
||||||
|
assert.isTrue('foo' in test1.excludedLocalNames);
|
||||||
|
assert.isFalse('foo' in test2.excludedLocalNames);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
test('items', function() {
|
||||||
|
test1.excludedLocalNames.span = 1;
|
||||||
|
test2.excludedLocalNames.div = 1;
|
||||||
|
|
||||||
|
var NOT_FOUND = -1;
|
||||||
|
var items1 = test1.items.map(function(el) { return el.localName; });
|
||||||
|
var items2 = test2.items.map(function(el) { return el.localName; });
|
||||||
|
|
||||||
|
assert.equal(items1.indexOf('span'), NOT_FOUND);
|
||||||
|
assert.equal(items2.indexOf('div'), NOT_FOUND);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -27,7 +27,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
'next-previous.html',
|
'next-previous.html',
|
||||||
'selected-attribute.html',
|
'selected-attribute.html',
|
||||||
'template-repeat.html',
|
'template-repeat.html',
|
||||||
'content.html'
|
'content.html',
|
||||||
|
'excluded-local-names.html'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
"tag": "v1.0.3",
|
"tag": "v1.0.3",
|
||||||
"commit": "90b54de14264c19693601b9fc16af6b68a9d48e4"
|
"commit": "90b54de14264c19693601b9fc16af6b68a9d48e4"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
|
"_source": "git://github.com/polymerelements/paper-behaviors.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/paper-behaviors"
|
"_originalSource": "polymerelements/paper-behaviors"
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-input",
|
"name": "paper-input",
|
||||||
"version": "1.0.13",
|
"version": "1.0.14",
|
||||||
"description": "Material design text fields",
|
"description": "Material design text fields",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||||
|
|
@ -44,11 +44,11 @@
|
||||||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.13",
|
"_release": "1.0.14",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.13",
|
"tag": "v1.0.14",
|
||||||
"commit": "3f3d09f47b77e33ea4a0c531a1b95567563528a0"
|
"commit": "120a0610aca5c86194977e30f696b09716f93bbc"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||||
"_target": "^1.0.9",
|
"_target": "^1.0.9",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-input",
|
"name": "paper-input",
|
||||||
"version": "1.0.13",
|
"version": "1.0.14",
|
||||||
"description": "Material design text fields",
|
"description": "Material design text fields",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
Polymer.PaperInputBehaviorImpl = {
|
Polymer.PaperInputBehaviorImpl = {
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
/**
|
||||||
|
* Fired when the input changes due to user interaction.
|
||||||
|
*
|
||||||
|
* @event change
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
||||||
|
|
@ -395,6 +400,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
label.id = labelledBy;
|
label.id = labelledBy;
|
||||||
}
|
}
|
||||||
this._ariaLabelledBy = labelledBy;
|
this._ariaLabelledBy = labelledBy;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onChange:function(event) {
|
||||||
|
// In the Shadow DOM, the `change` event is not leaked into the
|
||||||
|
// ancestor tree, so we must do this manually.
|
||||||
|
// See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-not-leaked-into-ancestor-trees.
|
||||||
|
if (this.shadowRoot) {
|
||||||
|
this.fire(event.type, {sourceEvent: event}, {
|
||||||
|
node: this,
|
||||||
|
bubbles: event.bubbles,
|
||||||
|
cancelable: event.cancelable
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,8 @@ style this element.
|
||||||
list$="[[list]]"
|
list$="[[list]]"
|
||||||
size$="[[size]]"
|
size$="[[size]]"
|
||||||
autocapitalize$="[[autocapitalize]]"
|
autocapitalize$="[[autocapitalize]]"
|
||||||
autocorrect$="[[autocorrect]]">
|
autocorrect$="[[autocorrect]]"
|
||||||
|
on-change="_onChange">
|
||||||
|
|
||||||
<content select="[suffix]"></content>
|
<content select="[suffix]"></content>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,8 @@ style this element.
|
||||||
maxlength$="[[maxlength]]"
|
maxlength$="[[maxlength]]"
|
||||||
autocapitalize$="[[autocapitalize]]"
|
autocapitalize$="[[autocapitalize]]"
|
||||||
rows$="[[rows]]"
|
rows$="[[rows]]"
|
||||||
max-rows$="[[maxRows]]"></iron-autogrow-textarea>
|
max-rows$="[[maxRows]]"
|
||||||
|
on-change="_onChange"></iron-autogrow-textarea>
|
||||||
|
|
||||||
<template is="dom-if" if="[[errorMessage]]">
|
<template is="dom-if" if="[[errorMessage]]">
|
||||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-progress",
|
"name": "paper-progress",
|
||||||
"version": "1.0.3",
|
"version": "1.0.4",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "A material design progress bar",
|
"description": "A material design progress bar",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
@ -29,11 +29,11 @@
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/paper-progress",
|
"homepage": "https://github.com/PolymerElements/paper-progress",
|
||||||
"_release": "1.0.3",
|
"_release": "1.0.4",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.3",
|
"tag": "v1.0.4",
|
||||||
"commit": "a8ae3f94aa3727793d43396758a444a2e781e9a8"
|
"commit": "3bef91b5f9479b8b85c4725b441acf8fb433e008"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-progress",
|
"name": "paper-progress",
|
||||||
"version": "1.0.3",
|
"version": "1.0.4",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "A material design progress bar",
|
"description": "A material design progress bar",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,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="../polymer/polymer.html">
|
||||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||||
|
<link rel="import" href="../paper-styles/paper-styles-classes.html">
|
||||||
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
|
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
|
||||||
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
The progress bars are for situations where the percentage completed can be
|
The progress bars are for situations where the percentage completed can be
|
||||||
|
|
@ -60,14 +60,17 @@ the value changed. You can also customize the transition:
|
||||||
|
|
||||||
The following mixins are available for styling:
|
The following mixins are available for styling:
|
||||||
|
|
||||||
Custom property | Description | Default
|
Custom property | Description | Default
|
||||||
--------------------------------------------|----------------------------------------|----------
|
--------------------------------------------|---------------------------------------------|----------
|
||||||
--paper-progress-container-color | Mixin applied to container | --google-grey-300
|
--paper-progress-container-color | Mixin applied to container | --google-grey-300
|
||||||
--paper-progress-transition-duration | Duration of the transition | 0.008s
|
--paper-progress-transition-duration | Duration of the transition | 0.008s
|
||||||
--paper-progress-transition-timing-function | The timing function for the transition | ease
|
--paper-progress-transition-timing-function | The timing function for the transition | ease
|
||||||
--paper-progress-transition-delay | delay for the transition | 0s
|
--paper-progress-transition-delay | delay for the transition | 0s
|
||||||
--paper-progress-active-color | The color of the active bar | --google-green-500
|
--paper-progress-active-color | The color of the active bar | --google-green-500
|
||||||
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
|
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
|
||||||
|
--paper-progress-disabled-active-color | The color of the active bar if disabled | --google-grey-500
|
||||||
|
--paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300
|
||||||
|
--paper-progress-height | The height of the progress bar | 4px
|
||||||
|
|
||||||
@group Paper Elements
|
@group Paper Elements
|
||||||
@element paper-progress
|
@element paper-progress
|
||||||
|
|
@ -80,21 +83,31 @@ Custom property | Description
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 4px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host,
|
#progressContainer {
|
||||||
#primaryProgress.indeterminate:after {
|
position: relative;
|
||||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:host > *,
|
#progressContainer,
|
||||||
#primaryProgress.indeterminate:after {
|
/* the stripe for the indeterminate animation*/
|
||||||
|
.indeterminate:after {
|
||||||
|
height: var(--paper-progress-height, 4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#primaryProgress,
|
||||||
|
#secondaryProgress,
|
||||||
|
.indeterminate:after {
|
||||||
@apply(--layout-fit);
|
@apply(--layout-fit);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#progressContainer,
|
||||||
|
.indeterminate:after {
|
||||||
|
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
:host(.transiting) > * {
|
:host(.transiting) > * {
|
||||||
-webkit-transition-property: -webkit-transform;
|
-webkit-transition-property: -webkit-transform;
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
|
|
@ -114,10 +127,12 @@ Custom property | Description
|
||||||
|
|
||||||
#primaryProgress,
|
#primaryProgress,
|
||||||
#secondaryProgress {
|
#secondaryProgress {
|
||||||
|
@apply(--layout-fit);
|
||||||
-webkit-transform-origin: left center;
|
-webkit-transform-origin: left center;
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
-webkit-transform: scaleX(0);
|
-webkit-transform: scaleX(0);
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
#primaryProgress {
|
#primaryProgress {
|
||||||
|
|
@ -125,20 +140,27 @@ Custom property | Description
|
||||||
}
|
}
|
||||||
|
|
||||||
#secondaryProgress {
|
#secondaryProgress {
|
||||||
|
position: relative;
|
||||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
#primaryProgress.indeterminate {
|
:host([disabled]) #primaryProgress {
|
||||||
|
background-color: var(--paper-progress-disabled-active-color, --google-grey-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #secondaryProgress {
|
||||||
|
background-color: var(--paper-progress-disabled-active-color, --google-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([disabled])) #primaryProgress.indeterminate {
|
||||||
-webkit-transform-origin: right center;
|
-webkit-transform-origin: right center;
|
||||||
transform-origin: right center;
|
transform-origin: right center;
|
||||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||||
animation: indeterminate-bar 2s linear infinite;
|
animation: indeterminate-bar 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#primaryProgress.indeterminate:after {
|
:host(:not([disabled])) #primaryProgress.indeterminate:after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
-webkit-transform-origin: center center;
|
-webkit-transform-origin: center center;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
|
||||||
|
|
@ -211,8 +233,10 @@ Custom property | Description
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div id="secondaryProgress" hidden$="[[!_hasSecondaryProgress(secondaryRatio)]]"></div>
|
<div id="progressContainer">
|
||||||
<div id="primaryProgress"></div>
|
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||||||
|
<div id="primaryProgress"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
|
|
@ -225,10 +249,6 @@ Custom property | Description
|
||||||
Polymer.IronRangeBehavior
|
Polymer.IronRangeBehavior
|
||||||
],
|
],
|
||||||
|
|
||||||
hostAttributes: {
|
|
||||||
role: 'progressbar'
|
|
||||||
},
|
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -253,15 +273,29 @@ Custom property | Description
|
||||||
*/
|
*/
|
||||||
indeterminate: {
|
indeterminate: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false
|
value: false,
|
||||||
|
observer: '_toggleIndeterminate'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if the progress is disabled.
|
||||||
|
*/
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
reflectToAttribute: true,
|
||||||
|
observer: '_disabledChanged'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
observers: [
|
observers: [
|
||||||
'_progressChanged(secondaryProgress, value, min, max)',
|
'_progressChanged(secondaryProgress, value, min, max)'
|
||||||
'_toggleIndeterminate(indeterminate)'
|
|
||||||
],
|
],
|
||||||
|
|
||||||
|
hostAttributes: {
|
||||||
|
role: 'progressbar'
|
||||||
|
},
|
||||||
|
|
||||||
_toggleIndeterminate: function(indeterminate) {
|
_toggleIndeterminate: function(indeterminate) {
|
||||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||||
|
|
@ -295,8 +329,12 @@ Custom property | Description
|
||||||
this.setAttribute('aria-valuemax', max);
|
this.setAttribute('aria-valuemax', max);
|
||||||
},
|
},
|
||||||
|
|
||||||
_hasSecondaryProgress: function(secondaryRatio) {
|
_disabledChanged: function(disabled) {
|
||||||
return secondaryRatio > 0
|
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||||
|
},
|
||||||
|
|
||||||
|
_hideSecondaryProgress: function(secondaryRatio) {
|
||||||
|
return secondaryRatio === 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-slider",
|
"name": "paper-slider",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "A material design-style slider",
|
"description": "A material design-style slider",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/paper-slider",
|
"homepage": "https://github.com/PolymerElements/paper-slider",
|
||||||
"_release": "1.0.5",
|
"_release": "1.0.6",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.6",
|
||||||
"commit": "8672cf9466fe8387f04ef5065ea83a4a18f8b06d"
|
"commit": "4ae2e000dcbbfda4e12611f07c21fea3c0a9270d"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-slider.git",
|
"_source": "git://github.com/PolymerElements/paper-slider.git",
|
||||||
"_target": "~1.0.3",
|
"_target": "~1.0.3",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-slider",
|
"name": "paper-slider",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "A material design-style slider",
|
"description": "A material design-style slider",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<h4>Default</h4>
|
<h4>Default</h4>
|
||||||
<div class="vertical-section">
|
<div class="vertical-section">
|
||||||
<div>Oxygen</div>
|
<div>Oxygen</div>
|
||||||
<paper-slider value="21"></paper-slider><br><br>
|
<paper-slider value="21" id="test"></paper-slider><br><br>
|
||||||
<div>Argon</div>
|
<div>Argon</div>
|
||||||
<paper-slider value="1"></paper-slider><br><br>
|
<paper-slider value="1"></paper-slider><br><br>
|
||||||
<div>Hydrogen</div>
|
<div>Hydrogen</div>
|
||||||
|
|
@ -111,6 +111,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
document.querySelector('#ratingsLabel').textContent = ratings.value;
|
document.querySelector('#ratingsLabel').textContent = ratings.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test.addEventListener('value-changed', function(e) {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -17,24 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
}
|
|
||||||
|
|
||||||
:host(:not([disabled])) #sliderBar {
|
|
||||||
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
|
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
|
||||||
}
|
|
||||||
|
|
||||||
:host(:not([disabled])) #sliderBar {
|
|
||||||
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
|
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([disabled]) #sliderBar {
|
/* focus shows the ripple */
|
||||||
--paper-progress-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([disabled]) #sliderBar {
|
|
||||||
--paper-progress-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host(:focus) {
|
:host(:focus) {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
@ -83,7 +72,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
margin: -8px 0;
|
margin: -8px 0;
|
||||||
background-color: var(--paper-slider-bar-color, transparent);
|
background-color: var(--paper-slider-bar-color, transparent);
|
||||||
--paper-progress-height: 2px;
|
--paper-progress-height: var(--paper-slider-height, 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ring #sliderBar {
|
.ring #sliderBar {
|
||||||
|
|
@ -234,7 +223,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
.slider-input {
|
.slider-input {
|
||||||
--paper-input-container-input: {
|
--paper-input-container-input: {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,7 @@ Custom property | Description | Default
|
||||||
`--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
|
`--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
|
||||||
`--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `#c8c8c8`
|
`--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `#c8c8c8`
|
||||||
`--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8c8`
|
`--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8c8`
|
||||||
|
`--paper-slider-height` | Height of the progress bar | `2px`
|
||||||
|
|
||||||
@group Paper Elements
|
@group Paper Elements
|
||||||
@element paper-slider
|
@element paper-slider
|
||||||
|
|
@ -69,7 +70,7 @@ Custom property | Description | Default
|
||||||
|
|
||||||
<div class="bar-container">
|
<div class="bar-container">
|
||||||
<paper-progress
|
<paper-progress
|
||||||
class$="[[_getProgressClass(transiting)]]"
|
disabled$="[[disabled]]"
|
||||||
id="sliderBar"
|
id="sliderBar"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
min="[[min]]"
|
min="[[min]]"
|
||||||
|
|
@ -103,7 +104,7 @@ Custom property | Description | Default
|
||||||
class="circle"
|
class="circle"
|
||||||
hidden$="[[!receivedFocusFromKeyboard]]">
|
hidden$="[[!receivedFocusFromKeyboard]]">
|
||||||
</paper-ripple>
|
</paper-ripple>
|
||||||
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
|
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -180,7 +181,8 @@ Custom property | Description | Default
|
||||||
immediateValue: {
|
immediateValue: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
readOnly: true
|
readOnly: true,
|
||||||
|
notify: true
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -311,7 +313,6 @@ Custom property | Description | Default
|
||||||
|
|
||||||
_positionKnob: function(ratio) {
|
_positionKnob: function(ratio) {
|
||||||
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
||||||
this._setPinValue(this.immediateValue);
|
|
||||||
this._setRatio(this._calcRatio(this.immediateValue));
|
this._setRatio(this._calcRatio(this.immediateValue));
|
||||||
|
|
||||||
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
||||||
|
|
@ -366,7 +367,6 @@ Custom property | Description | Default
|
||||||
// update knob's position
|
// update knob's position
|
||||||
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
||||||
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
||||||
this._setPinValue(immediateValue);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_trackEnd: function() {
|
_trackEnd: function() {
|
||||||
|
|
@ -443,23 +443,15 @@ Custom property | Description | Default
|
||||||
},
|
},
|
||||||
|
|
||||||
_getClassNames: function() {
|
_getClassNames: function() {
|
||||||
var classes = {};
|
|
||||||
|
|
||||||
classes.disabled = this.disabled;
|
|
||||||
classes.pin = this.pin;
|
|
||||||
classes.snaps = this.snaps;
|
|
||||||
classes.ring = this.immediateValue <= this.min;
|
|
||||||
classes.expand = this.expand;
|
|
||||||
classes.dragging = this.dragging;
|
|
||||||
classes.transiting = this.transiting;
|
|
||||||
classes.editable = this.editable;
|
|
||||||
|
|
||||||
return this._mergeClasses(classes);
|
|
||||||
},
|
|
||||||
|
|
||||||
_getProgressClass: function() {
|
|
||||||
return this._mergeClasses({
|
return this._mergeClasses({
|
||||||
transiting: this.transiting
|
disabled: this.disabled,
|
||||||
|
pin: this.pin,
|
||||||
|
snaps: this.snaps,
|
||||||
|
ring: this.immediateValue <= this.min,
|
||||||
|
expand: this.expand,
|
||||||
|
dragging: this.dragging,
|
||||||
|
transiting: this.transiting,
|
||||||
|
editable: this.editable
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -479,9 +471,6 @@ Custom property | Description | Default
|
||||||
this.decrement();
|
this.decrement();
|
||||||
}
|
}
|
||||||
this.fire('change');
|
this.fire('change');
|
||||||
},
|
|
||||||
_setPinValue: function (value) {
|
|
||||||
this.pinValue = value;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -178,6 +178,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('value should notify', function(done) {
|
||||||
|
var targetValue = 10;
|
||||||
|
|
||||||
|
slider.addEventListener('value-changed', function(e) {
|
||||||
|
assert.equal(e.detail.value, targetValue);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
slider.min = 0;
|
||||||
|
slider.max = 100;
|
||||||
|
slider.value = targetValue;
|
||||||
|
});
|
||||||
|
|
||||||
|
test('immediateValue should notify', function(done) {
|
||||||
|
var targetValue = 50;
|
||||||
|
|
||||||
|
slider.addEventListener('immediate-value-changed', function(e) {
|
||||||
|
assert.equal(e.detail.value, targetValue);
|
||||||
|
assert.equal(slider.immediateValue, targetValue);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
var cursor = MockInteractions.topLeftOfNode(slider.$.sliderBar);
|
||||||
|
cursor.x += slider.$.sliderBar.getBoundingClientRect().width * targetValue/100;
|
||||||
|
|
||||||
|
slider.min = 0;
|
||||||
|
slider.max = 100;
|
||||||
|
MockInteractions.down(slider.$.sliderBar, cursor);
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -10803,6 +10803,27 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
/** @polymerBehavior */
|
/** @polymerBehavior */
|
||||||
Polymer.IronSelectableBehavior = {
|
Polymer.IronSelectableBehavior = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired when iron-selector is activated (selected or deselected).
|
||||||
|
* It is fired before the selected items are changed.
|
||||||
|
* Cancel the event to abort selection.
|
||||||
|
*
|
||||||
|
* @event iron-activate
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* Fired when an item is selected
|
||||||
|
*
|
||||||
|
* @event iron-select
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
/**
|
||||||
|
* Fired when an item is deselected
|
||||||
|
*
|
||||||
|
* @event iron-deselect
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -10856,7 +10877,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is a CSS selector sting. If this is set, only items that matches the CSS selector
|
* This is a CSS selector string. If this is set, only items that match the CSS selector
|
||||||
* are selectable.
|
* are selectable.
|
||||||
*
|
*
|
||||||
* @attribute selectable
|
* @attribute selectable
|
||||||
|
|
@ -10884,18 +10905,30 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
selectedAttribute: {
|
selectedAttribute: {
|
||||||
type: String,
|
type: String,
|
||||||
value: null
|
value: null
|
||||||
}
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The set of excluded elements where the key is the `localName`
|
||||||
|
* of the element that will be ignored from the item list.
|
||||||
|
*
|
||||||
|
* @type {object}
|
||||||
|
* @default {template: 1}
|
||||||
|
*/
|
||||||
|
|
||||||
|
excludedLocalNames: {
|
||||||
|
type: Object,
|
||||||
|
value: function() {
|
||||||
|
return {
|
||||||
|
'template': 1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
observers: [
|
observers: [
|
||||||
'_updateSelected(attrForSelected, selected)'
|
'_updateSelected(attrForSelected, selected)'
|
||||||
],
|
],
|
||||||
|
|
||||||
excludedLocalNames: {
|
|
||||||
'template': 1
|
|
||||||
},
|
|
||||||
|
|
||||||
created: function() {
|
created: function() {
|
||||||
this._bindFilterItem = this._filterItem.bind(this);
|
this._bindFilterItem = this._filterItem.bind(this);
|
||||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||||
|
|
@ -10974,9 +11007,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
},
|
},
|
||||||
|
|
||||||
_removeListener: function(eventName) {
|
_removeListener: function(eventName) {
|
||||||
// There is no unlisten yet...
|
this.unlisten(this, eventName, '_activateHandler');
|
||||||
// https://github.com/Polymer/polymer/issues/1639
|
|
||||||
//this.removeEventListener(eventName, this._bindActivateHandler);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_activateEventChanged: function(eventName, old) {
|
_activateEventChanged: function(eventName, old) {
|
||||||
|
|
@ -11065,11 +11096,6 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
},
|
},
|
||||||
|
|
||||||
_activateHandler: function(e) {
|
_activateHandler: function(e) {
|
||||||
// TODO: remove this when https://github.com/Polymer/polymer/issues/1639 is fixed so we
|
|
||||||
// can just remove the old event listener.
|
|
||||||
if (e.type !== this.activateEvent) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var t = e.target;
|
var t = e.target;
|
||||||
var items = this.items;
|
var items = this.items;
|
||||||
while (t && t != this) {
|
while (t && t != this) {
|
||||||
|
|
@ -11779,6 +11805,194 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.paper-font-display4,
|
||||||
|
.paper-font-display3,
|
||||||
|
.paper-font-display2,
|
||||||
|
.paper-font-display1,
|
||||||
|
.paper-font-headline,
|
||||||
|
.paper-font-title,
|
||||||
|
.paper-font-subhead,
|
||||||
|
.paper-font-body2,
|
||||||
|
.paper-font-body1,
|
||||||
|
.paper-font-caption,
|
||||||
|
.paper-font-menu,
|
||||||
|
.paper-font-button {
|
||||||
|
font-family: 'Roboto', 'Noto', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-code2,
|
||||||
|
.paper-font-code1 {
|
||||||
|
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
||||||
|
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Opt for better kerning for headers & other short labels. */
|
||||||
|
.paper-font-display4,
|
||||||
|
.paper-font-display3,
|
||||||
|
.paper-font-display2,
|
||||||
|
.paper-font-display1,
|
||||||
|
.paper-font-headline,
|
||||||
|
.paper-font-title,
|
||||||
|
.paper-font-subhead,
|
||||||
|
.paper-font-menu,
|
||||||
|
.paper-font-button {
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
"Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
|
||||||
|
styles. All other styles should exist as single lines."
|
||||||
|
*/
|
||||||
|
.paper-font-display4,
|
||||||
|
.paper-font-display3,
|
||||||
|
.paper-font-title,
|
||||||
|
.paper-font-caption,
|
||||||
|
.paper-font-menu,
|
||||||
|
.paper-font-button {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-display4 {
|
||||||
|
font-size: 112px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: -.044em;
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-display3 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -.026em;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-display2 {
|
||||||
|
font-size: 45px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -.018em;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-display1 {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-headline {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -.012em;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-subhead {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-body2 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-body1 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-caption {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.011em;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-menu {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-button {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.018em;
|
||||||
|
line-height: 24px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-code2 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-font-code1 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.shadow-transition {
|
||||||
|
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-2dp {
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||||
|
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-3dp {
|
||||||
|
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||||
|
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-4dp {
|
||||||
|
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||||
|
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-6dp {
|
||||||
|
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||||
|
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-8dp {
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||||
|
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-elevation-16dp {
|
||||||
|
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||||
|
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||||
|
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -12308,6 +12522,11 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
Polymer.PaperInputBehaviorImpl = {
|
Polymer.PaperInputBehaviorImpl = {
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
|
/**
|
||||||
|
* Fired when the input changes due to user interaction.
|
||||||
|
*
|
||||||
|
* @event change
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
* The label for this input. Bind this to `<paper-input-container>`'s `label` property.
|
||||||
|
|
@ -12678,6 +12897,19 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
label.id = labelledBy;
|
label.id = labelledBy;
|
||||||
}
|
}
|
||||||
this._ariaLabelledBy = labelledBy;
|
this._ariaLabelledBy = labelledBy;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onChange:function(event) {
|
||||||
|
// In the Shadow DOM, the `change` event is not leaked into the
|
||||||
|
// ancestor tree, so we must do this manually.
|
||||||
|
// See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-not-leaked-into-ancestor-trees.
|
||||||
|
if (this.shadowRoot) {
|
||||||
|
this.fire(event.type, {sourceEvent: event}, {
|
||||||
|
node: this,
|
||||||
|
bubbles: event.bubbles,
|
||||||
|
cancelable: event.cancelable
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
@ -16355,13 +16587,34 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
<dom-module id="paper-progress" assetpath="bower_components/paper-progress/">
|
<dom-module id="paper-progress" assetpath="bower_components/paper-progress/">
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
display: inline-block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 4px;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.transiting) #activeProgress,
|
#progressContainer {
|
||||||
:host(.transiting) #secondaryProgress {
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressContainer,
|
||||||
|
/* the stripe for the indeterminate animation*/
|
||||||
|
.indeterminate:after {
|
||||||
|
height: var(--paper-progress-height, 4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#primaryProgress,
|
||||||
|
#secondaryProgress,
|
||||||
|
.indeterminate:after {
|
||||||
|
@apply(--layout-fit);
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressContainer,
|
||||||
|
.indeterminate:after {
|
||||||
|
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.transiting) > * {
|
||||||
-webkit-transition-property: -webkit-transform;
|
-webkit-transition-property: -webkit-transform;
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
|
|
||||||
|
|
@ -16378,48 +16631,45 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
transition-delay: var(--paper-progress-transition-delay, 0s);
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||||
}
|
}
|
||||||
|
|
||||||
#progressContainer {
|
#primaryProgress,
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--paper-progress-container);
|
|
||||||
}
|
|
||||||
|
|
||||||
#progressContainer, #indeterminateSplitter {
|
|
||||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
#activeProgress,
|
|
||||||
#secondaryProgress {
|
#secondaryProgress {
|
||||||
|
@apply(--layout-fit);
|
||||||
-webkit-transform-origin: left center;
|
-webkit-transform-origin: left center;
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
-webkit-transform: scaleX(0);
|
-webkit-transform: scaleX(0);
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
#activeProgress {
|
#primaryProgress {
|
||||||
background-color: var(--paper-progress-active-color, --google-green-500);
|
background-color: var(--paper-progress-active-color, --google-green-500);
|
||||||
}
|
}
|
||||||
|
|
||||||
#secondaryProgress {
|
#secondaryProgress {
|
||||||
|
position: relative;
|
||||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
#indeterminateSplitter {
|
:host([disabled]) #primaryProgress {
|
||||||
display: none;
|
background-color: var(--paper-progress-disabled-active-color, --google-grey-500);
|
||||||
}
|
}
|
||||||
|
|
||||||
#activeProgress.indeterminate {
|
:host([disabled]) #secondaryProgress {
|
||||||
|
background-color: var(--paper-progress-disabled-active-color, --google-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:not([disabled])) #primaryProgress.indeterminate {
|
||||||
-webkit-transform-origin: right center;
|
-webkit-transform-origin: right center;
|
||||||
transform-origin: right center;
|
transform-origin: right center;
|
||||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||||
animation: indeterminate-bar 2s linear infinite;
|
animation: indeterminate-bar 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#indeterminateSplitter.indeterminate {
|
:host(:not([disabled])) #primaryProgress.indeterminate:after {
|
||||||
display: block;
|
content: "";
|
||||||
-webkit-transform-origin: center center;
|
-webkit-transform-origin: center center;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
|
||||||
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
||||||
animation: indeterminate-splitter 2s linear infinite;
|
animation: indeterminate-splitter 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
@ -16489,10 +16739,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
<div id="progressContainer">
|
||||||
<div id="secondaryProgress" class="fit"></div>
|
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||||||
<div id="activeProgress" class="fit"></div>
|
<div id="primaryProgress"></div>
|
||||||
<div id="indeterminateSplitter" class="fit"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
@ -16513,8 +16762,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
*/
|
*/
|
||||||
secondaryProgress: {
|
secondaryProgress: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0
|
||||||
notify: true
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -16523,8 +16771,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
secondaryRatio: {
|
secondaryRatio: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
readOnly: true,
|
readOnly: true
|
||||||
observer: '_secondaryRatioChanged'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -16533,21 +16780,32 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
indeterminate: {
|
indeterminate: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false,
|
value: false,
|
||||||
notify: true,
|
|
||||||
observer: '_toggleIndeterminate'
|
observer: '_toggleIndeterminate'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* True if the progress is disabled.
|
||||||
|
*/
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
reflectToAttribute: true,
|
||||||
|
observer: '_disabledChanged'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
observers: [
|
observers: [
|
||||||
'_ratioChanged(ratio)',
|
'_progressChanged(secondaryProgress, value, min, max)'
|
||||||
'_secondaryProgressChanged(secondaryProgress, min, max)'
|
|
||||||
],
|
],
|
||||||
|
|
||||||
_toggleIndeterminate: function() {
|
hostAttributes: {
|
||||||
|
role: 'progressbar'
|
||||||
|
},
|
||||||
|
|
||||||
|
_toggleIndeterminate: function(indeterminate) {
|
||||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress);
|
||||||
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_transformProgress: function(progress, ratio) {
|
_transformProgress: function(progress, ratio) {
|
||||||
|
|
@ -16555,17 +16813,34 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
progress.style.transform = progress.style.webkitTransform = transform;
|
progress.style.transform = progress.style.webkitTransform = transform;
|
||||||
},
|
},
|
||||||
|
|
||||||
_ratioChanged: function(ratio) {
|
_mainRatioChanged: function(ratio) {
|
||||||
this._transformProgress(this.$.activeProgress, ratio);
|
this._transformProgress(this.$.primaryProgress, ratio);
|
||||||
},
|
},
|
||||||
|
|
||||||
_secondaryRatioChanged: function(secondaryRatio) {
|
_progressChanged: function(secondaryProgress, value, min, max) {
|
||||||
|
secondaryProgress = this._clampValue(secondaryProgress);
|
||||||
|
value = this._clampValue(value);
|
||||||
|
|
||||||
|
var secondaryRatio = this._calcRatio(secondaryProgress) * 100;
|
||||||
|
var mainRatio = this._calcRatio(value) * 100;
|
||||||
|
|
||||||
|
this._setSecondaryRatio(secondaryRatio);
|
||||||
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
|
this._transformProgress(this.$.secondaryProgress, secondaryRatio);
|
||||||
|
this._transformProgress(this.$.primaryProgress, mainRatio);
|
||||||
|
|
||||||
|
this.secondaryProgress = secondaryProgress;
|
||||||
|
|
||||||
|
this.setAttribute('aria-valuenow', value);
|
||||||
|
this.setAttribute('aria-valuemin', min);
|
||||||
|
this.setAttribute('aria-valuemax', max);
|
||||||
},
|
},
|
||||||
|
|
||||||
_secondaryProgressChanged: function() {
|
_disabledChanged: function(disabled) {
|
||||||
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||||
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
|
},
|
||||||
|
|
||||||
|
_hideSecondaryProgress: function(secondaryRatio) {
|
||||||
|
return secondaryRatio === 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -17183,7 +17458,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
|
|
||||||
<label hidden$="[[!label]]">[[label]]</label>
|
<label hidden$="[[!label]]">[[label]]</label>
|
||||||
|
|
||||||
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]">
|
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" maxlength$="[[maxlength]]" min$="[[min]]" max$="[[max]]" step$="[[step]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" on-change="_onChange">
|
||||||
|
|
||||||
<content select="[suffix]"></content>
|
<content select="[suffix]"></content>
|
||||||
|
|
||||||
|
|
@ -17233,24 +17508,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
}
|
|
||||||
|
|
||||||
:host(:not([disabled])) #sliderBar {
|
|
||||||
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
|
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
|
||||||
}
|
|
||||||
|
|
||||||
:host(:not([disabled])) #sliderBar {
|
|
||||||
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
|
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([disabled]) #sliderBar {
|
/* focus shows the ripple */
|
||||||
--paper-progress-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([disabled]) #sliderBar {
|
|
||||||
--paper-progress-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host(:focus) {
|
:host(:focus) {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
@ -17295,11 +17559,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 2px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
margin: -8px 0;
|
margin: -8px 0;
|
||||||
background-color: var(--paper-slider-bar-color, transparent);
|
background-color: var(--paper-slider-bar-color, transparent);
|
||||||
|
--paper-progress-height: var(--paper-slider-height, 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ring #sliderBar {
|
.ring #sliderBar {
|
||||||
|
|
@ -17450,7 +17714,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
.slider-input {
|
.slider-input {
|
||||||
--paper-input-container-input: {
|
--paper-input-container-input: {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -17479,7 +17743,7 @@ paper-ripple {
|
||||||
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
||||||
|
|
||||||
<div class="bar-container">
|
<div class="bar-container">
|
||||||
<paper-progress class$="[[_getProgressClass(transiting)]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
|
<paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
|
||||||
</paper-progress>
|
</paper-progress>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -17494,7 +17758,7 @@ paper-ripple {
|
||||||
<div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
|
<div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
|
||||||
<paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFocusFromKeyboard]]">
|
<paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFocusFromKeyboard]]">
|
||||||
</paper-ripple>
|
</paper-ripple>
|
||||||
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
|
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -17565,7 +17829,8 @@ paper-ripple {
|
||||||
immediateValue: {
|
immediateValue: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
readOnly: true
|
readOnly: true,
|
||||||
|
notify: true
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -17696,7 +17961,6 @@ paper-ripple {
|
||||||
|
|
||||||
_positionKnob: function(ratio) {
|
_positionKnob: function(ratio) {
|
||||||
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
|
||||||
this._setPinValue(this.immediateValue);
|
|
||||||
this._setRatio(this._calcRatio(this.immediateValue));
|
this._setRatio(this._calcRatio(this.immediateValue));
|
||||||
|
|
||||||
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
|
||||||
|
|
@ -17751,7 +18015,6 @@ paper-ripple {
|
||||||
// update knob's position
|
// update knob's position
|
||||||
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
||||||
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
||||||
this._setPinValue(immediateValue);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_trackEnd: function() {
|
_trackEnd: function() {
|
||||||
|
|
@ -17828,23 +18091,15 @@ paper-ripple {
|
||||||
},
|
},
|
||||||
|
|
||||||
_getClassNames: function() {
|
_getClassNames: function() {
|
||||||
var classes = {};
|
|
||||||
|
|
||||||
classes.disabled = this.disabled;
|
|
||||||
classes.pin = this.pin;
|
|
||||||
classes.snaps = this.snaps;
|
|
||||||
classes.ring = this.immediateValue <= this.min;
|
|
||||||
classes.expand = this.expand;
|
|
||||||
classes.dragging = this.dragging;
|
|
||||||
classes.transiting = this.transiting;
|
|
||||||
classes.editable = this.editable;
|
|
||||||
|
|
||||||
return this._mergeClasses(classes);
|
|
||||||
},
|
|
||||||
|
|
||||||
_getProgressClass: function() {
|
|
||||||
return this._mergeClasses({
|
return this._mergeClasses({
|
||||||
transiting: this.transiting
|
disabled: this.disabled,
|
||||||
|
pin: this.pin,
|
||||||
|
snaps: this.snaps,
|
||||||
|
ring: this.immediateValue <= this.min,
|
||||||
|
expand: this.expand,
|
||||||
|
dragging: this.dragging,
|
||||||
|
transiting: this.transiting,
|
||||||
|
editable: this.editable
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -17864,9 +18119,6 @@ paper-ripple {
|
||||||
this.decrement();
|
this.decrement();
|
||||||
}
|
}
|
||||||
this.fire('change');
|
this.fire('change');
|
||||||
},
|
|
||||||
_setPinValue: function (value) {
|
|
||||||
this.pinValue = value;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -18231,7 +18483,7 @@ paper-ripple {
|
||||||
|
|
||||||
<label hidden$="[[!label]]">[[label]]</label>
|
<label hidden$="[[!label]]">[[label]]</label>
|
||||||
|
|
||||||
<iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]"></iron-autogrow-textarea>
|
<iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]" rows$="[[rows]]" max-rows$="[[maxRows]]" on-change="_onChange"></iron-autogrow-textarea>
|
||||||
|
|
||||||
<template is="dom-if" if="[[errorMessage]]">
|
<template is="dom-if" if="[[errorMessage]]">
|
||||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue