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": "*",
|
||||
"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": "iron-selector",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "Manages a set of elements that can be selected",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
|
|
@ -19,21 +19,23 @@
|
|||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-selector.git"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.4",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||
"_release": "1.0.2",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "ea22d91d11ba6f72c01faa952d5e600f9d1773cf"
|
||||
"tag": "v1.0.3",
|
||||
"commit": "d93b02871f790b6bcb1fff52f24757e9c2eb04a5"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-selector",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "Manages a set of elements that can be selected",
|
||||
"private": true,
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
|
|
@ -19,10 +19,13 @@
|
|||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-selector.git"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.4",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
|
|
|
|||
|
|
@ -17,25 +17,34 @@ 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">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../iron-selector.html">
|
||||
|
||||
<style>
|
||||
<style is="custom-style">
|
||||
|
||||
iron-selector > * {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.horizontal-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.iron-selected {
|
||||
background-color: #ddd;
|
||||
background-color: var(--google-blue-500);
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body unresolved>
|
||||
|
||||
<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>
|
||||
|
|
@ -43,9 +52,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div>Item 3</div>
|
||||
<div>Item 4</div>
|
||||
</iron-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Multi-select</h3>
|
||||
|
||||
<div class="horizontal-section">
|
||||
<iron-selector multi selected-values='[0,2]'>
|
||||
<div>Item 0</div>
|
||||
<div>Item 1</div>
|
||||
|
|
@ -53,14 +65,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div>Item 3</div>
|
||||
<div>Item 4</div>
|
||||
</iron-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Example</h3>
|
||||
|
||||
<div class="horizontal-section">
|
||||
<iron-selector selected="foo" attr-for-selected="name">
|
||||
<div name="foo">Foo</div>
|
||||
<div name="bar">Bar</div>
|
||||
<div name="zot">Zot</div>
|
||||
<div name="baz">Baz</div>
|
||||
<div name="qux">Qux</div>
|
||||
<div name="quux">Quux</div>
|
||||
</iron-selector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
/** @polymerBehavior */
|
||||
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: {
|
||||
|
||||
/**
|
||||
|
|
@ -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.
|
||||
*
|
||||
* @attribute selectable
|
||||
|
|
@ -96,18 +117,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
selectedAttribute: {
|
||||
type: String,
|
||||
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: [
|
||||
'_updateSelected(attrForSelected, selected)'
|
||||
],
|
||||
|
||||
excludedLocalNames: {
|
||||
'template': 1
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.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) {
|
||||
// There is no unlisten yet...
|
||||
// https://github.com/Polymer/polymer/issues/1639
|
||||
//this.removeEventListener(eventName, this._bindActivateHandler);
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_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) {
|
||||
// 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 items = this.items;
|
||||
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',
|
||||
'selected-attribute.html',
|
||||
'template-repeat.html',
|
||||
'content.html'
|
||||
'content.html',
|
||||
'excluded-local-names.html'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
"tag": "v1.0.3",
|
||||
"commit": "90b54de14264c19693601b9fc16af6b68a9d48e4"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
|
||||
"_source": "git://github.com/polymerelements/paper-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-behaviors"
|
||||
"_originalSource": "polymerelements/paper-behaviors"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.13",
|
||||
"version": "1.0.14",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"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",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^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",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.13",
|
||||
"_release": "1.0.14",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.13",
|
||||
"commit": "3f3d09f47b77e33ea4a0c531a1b95567563528a0"
|
||||
"tag": "v1.0.14",
|
||||
"commit": "120a0610aca5c86194977e30f696b09716f93bbc"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.13",
|
||||
"version": "1.0.14",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"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",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^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 = {
|
||||
|
||||
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.
|
||||
|
|
@ -395,6 +400,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
label.id = 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]]"
|
||||
size$="[[size]]"
|
||||
autocapitalize$="[[autocapitalize]]"
|
||||
autocorrect$="[[autocorrect]]">
|
||||
autocorrect$="[[autocorrect]]"
|
||||
on-change="_onChange">
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ style this element.
|
|||
maxlength$="[[maxlength]]"
|
||||
autocapitalize$="[[autocapitalize]]"
|
||||
rows$="[[rows]]"
|
||||
max-rows$="[[maxRows]]"></iron-autogrow-textarea>
|
||||
max-rows$="[[maxRows]]"
|
||||
on-change="_onChange"></iron-autogrow-textarea>
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-progress",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design progress bar",
|
||||
"authors": "The Polymer Authors",
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/paper-progress",
|
||||
"_release": "1.0.3",
|
||||
"_release": "1.0.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "a8ae3f94aa3727793d43396758a444a2e781e9a8"
|
||||
"tag": "v1.0.4",
|
||||
"commit": "3bef91b5f9479b8b85c4725b441acf8fb433e008"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-progress",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design progress bar",
|
||||
"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="../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-flex-layout/classes/iron-flex-layout.html">
|
||||
|
||||
<!--
|
||||
The progress bars are for situations where the percentage completed can be
|
||||
|
|
@ -61,13 +61,16 @@ the value changed. You can also customize the transition:
|
|||
The following mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
--------------------------------------------|----------------------------------------|----------
|
||||
--------------------------------------------|---------------------------------------------|----------
|
||||
--paper-progress-container-color | Mixin applied to container | --google-grey-300
|
||||
--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-delay | delay for the transition | 0s
|
||||
--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-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
|
||||
@element paper-progress
|
||||
|
|
@ -80,21 +83,31 @@ Custom property | Description
|
|||
:host {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host,
|
||||
#primaryProgress.indeterminate:after {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
#progressContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host > *,
|
||||
#primaryProgress.indeterminate:after {
|
||||
#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;
|
||||
transition-property: transform;
|
||||
|
|
@ -114,10 +127,12 @@ Custom property | Description
|
|||
|
||||
#primaryProgress,
|
||||
#secondaryProgress {
|
||||
@apply(--layout-fit);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#primaryProgress {
|
||||
|
|
@ -125,20 +140,27 @@ Custom property | Description
|
|||
}
|
||||
|
||||
#secondaryProgress {
|
||||
position: relative;
|
||||
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;
|
||||
transform-origin: right center;
|
||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||
animation: indeterminate-bar 2s linear infinite;
|
||||
}
|
||||
|
||||
#primaryProgress.indeterminate:after {
|
||||
:host(:not([disabled])) #primaryProgress.indeterminate:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
|
||||
|
|
@ -211,8 +233,10 @@ Custom property | Description
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="secondaryProgress" hidden$="[[!_hasSecondaryProgress(secondaryRatio)]]"></div>
|
||||
<div id="progressContainer">
|
||||
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||||
<div id="primaryProgress"></div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
|
@ -225,10 +249,6 @@ Custom property | Description
|
|||
Polymer.IronRangeBehavior
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'progressbar'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
|
|
@ -253,15 +273,29 @@ Custom property | Description
|
|||
*/
|
||||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
value: false,
|
||||
observer: '_toggleIndeterminate'
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the progress is disabled.
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_disabledChanged'
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_progressChanged(secondaryProgress, value, min, max)',
|
||||
'_toggleIndeterminate(indeterminate)'
|
||||
'_progressChanged(secondaryProgress, value, min, max)'
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'progressbar'
|
||||
},
|
||||
|
||||
_toggleIndeterminate: function(indeterminate) {
|
||||
// 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.
|
||||
|
|
@ -295,8 +329,12 @@ Custom property | Description
|
|||
this.setAttribute('aria-valuemax', max);
|
||||
},
|
||||
|
||||
_hasSecondaryProgress: function(secondaryRatio) {
|
||||
return secondaryRatio > 0
|
||||
_disabledChanged: function(disabled) {
|
||||
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||
},
|
||||
|
||||
_hideSecondaryProgress: function(secondaryRatio) {
|
||||
return secondaryRatio === 0;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-slider",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"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.5",
|
||||
"_release": "1.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "8672cf9466fe8387f04ef5065ea83a4a18f8b06d"
|
||||
"tag": "v1.0.6",
|
||||
"commit": "4ae2e000dcbbfda4e12611f07c21fea3c0a9270d"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-slider.git",
|
||||
"_target": "~1.0.3",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-slider",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"description": "A material design-style slider",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"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>
|
||||
<div class="vertical-section">
|
||||
<div>Oxygen</div>
|
||||
<paper-slider value="21"></paper-slider><br><br>
|
||||
<paper-slider value="21" id="test"></paper-slider><br><br>
|
||||
<div>Argon</div>
|
||||
<paper-slider value="1"></paper-slider><br><br>
|
||||
<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;
|
||||
});
|
||||
|
||||
test.addEventListener('value-changed', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -17,24 +17,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-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);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) #sliderBar {
|
||||
--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 {
|
||||
--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);
|
||||
}
|
||||
|
||||
/* focus shows the ripple */
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -83,7 +72,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
padding: 8px 0;
|
||||
margin: -8px 0;
|
||||
background-color: var(--paper-slider-bar-color, transparent);
|
||||
--paper-progress-height: 2px;
|
||||
--paper-progress-height: var(--paper-slider-height, 2px);
|
||||
}
|
||||
|
||||
.ring #sliderBar {
|
||||
|
|
|
|||
|
|
@ -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-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-height` | Height of the progress bar | `2px`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-slider
|
||||
|
|
@ -69,7 +70,7 @@ Custom property | Description | Default
|
|||
|
||||
<div class="bar-container">
|
||||
<paper-progress
|
||||
class$="[[_getProgressClass(transiting)]]"
|
||||
disabled$="[[disabled]]"
|
||||
id="sliderBar"
|
||||
aria-hidden="true"
|
||||
min="[[min]]"
|
||||
|
|
@ -103,7 +104,7 @@ Custom property | Description | Default
|
|||
class="circle"
|
||||
hidden$="[[!receivedFocusFromKeyboard]]">
|
||||
</paper-ripple>
|
||||
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
|
||||
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -180,7 +181,8 @@ Custom property | Description | Default
|
|||
immediateValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -311,7 +313,6 @@ 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) + '%';
|
||||
|
|
@ -366,7 +367,6 @@ 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);
|
||||
},
|
||||
|
||||
_trackEnd: function() {
|
||||
|
|
@ -443,23 +443,15 @@ Custom property | Description | Default
|
|||
},
|
||||
|
||||
_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({
|
||||
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.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>
|
||||
|
|
|
|||
|
|
@ -10803,6 +10803,27 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
/** @polymerBehavior */
|
||||
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: {
|
||||
|
||||
/**
|
||||
|
|
@ -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.
|
||||
*
|
||||
* @attribute selectable
|
||||
|
|
@ -10884,18 +10905,30 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
selectedAttribute: {
|
||||
type: String,
|
||||
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: [
|
||||
'_updateSelected(attrForSelected, selected)'
|
||||
],
|
||||
|
||||
excludedLocalNames: {
|
||||
'template': 1
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.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) {
|
||||
// There is no unlisten yet...
|
||||
// https://github.com/Polymer/polymer/issues/1639
|
||||
//this.removeEventListener(eventName, this._bindActivateHandler);
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_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) {
|
||||
// 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 items = this.items;
|
||||
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>
|
||||
|
||||
/**
|
||||
|
|
@ -12308,6 +12522,11 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
Polymer.PaperInputBehaviorImpl = {
|
||||
|
||||
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.
|
||||
|
|
@ -12678,6 +12897,19 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
label.id = 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/">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host(.transiting) #activeProgress,
|
||||
:host(.transiting) #secondaryProgress {
|
||||
#progressContainer {
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
#progressContainer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@apply(--paper-progress-container);
|
||||
}
|
||||
|
||||
#progressContainer, #indeterminateSplitter {
|
||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||
}
|
||||
|
||||
#activeProgress,
|
||||
#primaryProgress,
|
||||
#secondaryProgress {
|
||||
@apply(--layout-fit);
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#activeProgress {
|
||||
#primaryProgress {
|
||||
background-color: var(--paper-progress-active-color, --google-green-500);
|
||||
}
|
||||
|
||||
#secondaryProgress {
|
||||
position: relative;
|
||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||
}
|
||||
|
||||
#indeterminateSplitter {
|
||||
display: none;
|
||||
:host([disabled]) #primaryProgress {
|
||||
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;
|
||||
transform-origin: right center;
|
||||
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||
animation: indeterminate-bar 2s linear infinite;
|
||||
}
|
||||
|
||||
#indeterminateSplitter.indeterminate {
|
||||
display: block;
|
||||
:host(:not([disabled])) #primaryProgress.indeterminate:after {
|
||||
content: "";
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
|
||||
-webkit-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>
|
||||
<template>
|
||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
||||
<div id="secondaryProgress" class="fit"></div>
|
||||
<div id="activeProgress" class="fit"></div>
|
||||
<div id="indeterminateSplitter" class="fit"></div>
|
||||
<div id="progressContainer">
|
||||
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
||||
<div id="primaryProgress"></div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
@ -16513,8 +16762,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
*/
|
||||
secondaryProgress: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
value: 0
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16523,8 +16771,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
secondaryRatio: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true,
|
||||
observer: '_secondaryRatioChanged'
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -16533,21 +16780,32 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
indeterminate: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true,
|
||||
observer: '_toggleIndeterminate'
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the progress is disabled.
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_disabledChanged'
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_ratioChanged(ratio)',
|
||||
'_secondaryProgressChanged(secondaryProgress, min, max)'
|
||||
'_progressChanged(secondaryProgress, value, min, max)'
|
||||
],
|
||||
|
||||
_toggleIndeterminate: function() {
|
||||
hostAttributes: {
|
||||
role: 'progressbar'
|
||||
},
|
||||
|
||||
_toggleIndeterminate: function(indeterminate) {
|
||||
// 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.
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
||||
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
||||
this.toggleClass('indeterminate', indeterminate, this.$.primaryProgress);
|
||||
},
|
||||
|
||||
_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;
|
||||
},
|
||||
|
||||
_ratioChanged: function(ratio) {
|
||||
this._transformProgress(this.$.activeProgress, ratio);
|
||||
_mainRatioChanged: function(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.$.primaryProgress, mainRatio);
|
||||
|
||||
this.secondaryProgress = secondaryProgress;
|
||||
|
||||
this.setAttribute('aria-valuenow', value);
|
||||
this.setAttribute('aria-valuemin', min);
|
||||
this.setAttribute('aria-valuemax', max);
|
||||
},
|
||||
|
||||
_secondaryProgressChanged: function() {
|
||||
this.secondaryProgress = this._clampValue(this.secondaryProgress);
|
||||
this._setSecondaryRatio(this._calcRatio(this.secondaryProgress) * 100);
|
||||
_disabledChanged: function(disabled) {
|
||||
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
||||
},
|
||||
|
||||
_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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -17233,24 +17508,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-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);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) #sliderBar {
|
||||
--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 {
|
||||
--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);
|
||||
}
|
||||
|
||||
/* focus shows the ripple */
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -17295,11 +17559,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
position: absolute;
|
||||
top: 15px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
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 {
|
||||
|
|
@ -17479,7 +17743,7 @@ paper-ripple {
|
|||
<div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
|
||||
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
|
|
@ -17565,7 +17829,8 @@ paper-ripple {
|
|||
immediateValue: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
readOnly: true
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -17696,7 +17961,6 @@ paper-ripple {
|
|||
|
||||
_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) + '%';
|
||||
|
|
@ -17751,7 +18015,6 @@ paper-ripple {
|
|||
// update knob's position
|
||||
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
|
||||
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
|
||||
this._setPinValue(immediateValue);
|
||||
},
|
||||
|
||||
_trackEnd: function() {
|
||||
|
|
@ -17828,23 +18091,15 @@ paper-ripple {
|
|||
},
|
||||
|
||||
_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({
|
||||
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.fire('change');
|
||||
},
|
||||
_setPinValue: function (value) {
|
||||
this.pinValue = value;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -18231,7 +18483,7 @@ paper-ripple {
|
|||
|
||||
<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]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue