1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2015-08-04 10:26:36 -04:00
parent 0b450116a5
commit 1a84e71a95
31 changed files with 646 additions and 495 deletions

View file

@ -27,14 +27,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-behaviors", "homepage": "https://github.com/polymerelements/iron-behaviors",
"_release": "1.0.5", "_release": "1.0.5",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.5", "tag": "v1.0.5",
"commit": "bdae66f398838eda78c203b3ae979dcb5cd2a60e" "commit": "bdae66f398838eda78c203b3ae979dcb5cd2a60e"
}, },
"_source": "git://github.com/PolymerElements/iron-behaviors.git", "_source": "git://github.com/polymerelements/iron-behaviors.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors" "_originalSource": "polymerelements/iron-behaviors"
} }

View file

@ -23,14 +23,14 @@
"paper-styles": "polymerelements/paper-styles#^1.0.0", "paper-styles": "polymerelements/paper-styles#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"homepage": "https://github.com/PolymerElements/iron-flex-layout", "homepage": "https://github.com/polymerelements/iron-flex-layout",
"_release": "1.0.2", "_release": "1.0.2",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.2", "tag": "v1.0.2",
"commit": "50bcecf40ab23caa7c2cd90030555e00c5ba7154" "commit": "50bcecf40ab23caa7c2cd90030555e00c5ba7154"
}, },
"_source": "git://github.com/PolymerElements/iron-flex-layout.git", "_source": "git://github.com/polymerelements/iron-flex-layout.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-flex-layout" "_originalSource": "polymerelements/iron-flex-layout"
} }

View file

@ -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"
} }

View file

@ -27,14 +27,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-resizable-behavior", "homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
"_release": "1.0.2", "_release": "1.0.2",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.2", "tag": "v1.0.2",
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674" "commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
}, },
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git", "_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-resizable-behavior" "_originalSource": "PolymerElements/iron-resizable-behavior"
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-input", "name": "paper-input",
"version": "1.0.7", "version": "1.0.8",
"description": "Material design text fields", "description": "Material design text fields",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -40,13 +40,15 @@
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^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",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}, },
"_release": "1.0.7", "_release": "1.0.8",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.7", "tag": "v1.0.8",
"commit": "b3150c105a4599d50a2da0789789fa50fa73e644" "commit": "558a5637b544cca69a272a3dd1eb99e03284c396"
}, },
"_source": "git://github.com/PolymerElements/paper-input.git", "_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.0.0", "_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-input", "name": "paper-input",
"version": "1.0.7", "version": "1.0.8",
"description": "Material design text fields", "description": "Material design text fields",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -40,6 +40,8 @@
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0", "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^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",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
} }
} }

View file

@ -25,15 +25,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-input-char-counter.html"> <link rel="import" href="../paper-input-char-counter.html">
<link rel="import" href="../paper-textarea.html"> <link rel="import" href="../paper-textarea.html">
<link rel="import" href="../../iron-input/iron-input.html"> <link rel="import" href="../../iron-input/iron-input.html">
<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="ssn-input.html"> <link rel="import" href="ssn-input.html">
<link rel="stylesheet" href="../../paper-styles/paper-styles.html"> <link rel="stylesheet" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/demo-pages.html"> <link rel="import" href="../../paper-styles/demo-pages.html">
<style> <style is="custom-style">
body { body {
padding: 40px; padding: 40px;
} }
paper-input.short {
width: 200px;
}
paper-icon-button {
color: var(--paper-red-300);
--paper-icon-button-ink-color: var(--paper-red-a100);
--iron-icon-width: 15px;
--iron-icon-height: 15px;
padding: 0px 4px;
}
</style> </style>
</head> </head>
@ -78,6 +93,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"><paper-textarea> <paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"><paper-textarea>
</div> </div>
<h4>Prefixes and Suffixes</h4>
<div class="vertical-section">
<paper-input class="short" label="total" type="number">
<div prefix>$</div>
</paper-input>
<paper-input class="short" label="username">
<div suffix>@email.com</div>
</paper-input>
<paper-input class="short" label="icons and buttons" id="inputWithButton">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix onclick="clearInput()"
icon="clear" alt="clear" title="clear" tabindex="0">
</paper-icon-button>
</paper-input>
</div>
<h4>Complex inputs</h4> <h4>Complex inputs</h4>
<div class="vertical-section"> <div class="vertical-section">
<template is="dom-bind"> <template is="dom-bind">
@ -93,6 +126,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
function validate() { function validate() {
document.getElementById('inputForValidation').validate(); document.getElementById('inputForValidation').validate();
} }
function clearInput() {
document.getElementById('inputWithButton').value = '';
}
</script> </script>
</body> </body>
</html> </html>

View file

@ -34,7 +34,7 @@ the attribute it listens to with the `attr-for-value` attribute.
You can use a custom input element in a `<paper-input-container>`, for example to implement a You can use a custom input element in a `<paper-input-container>`, for example to implement a
compound input field like a social security number input. The custom input element should have the compound input field like a social security number input. The custom input element should have the
`paper-input-input` class, have a `notify:true` value property and optionally implements `paper-input-input` class, have a `notify:true` value property and optionally implements
`Polymer.IronValidatableBehavior` if it is validatble. `Polymer.IronValidatableBehavior` if it is validatable.
<paper-input-container attr-for-value="ssn-value"> <paper-input-container attr-for-value="ssn-value">
<label>Social security number</label> <label>Social security number</label>
@ -53,6 +53,17 @@ implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe
or validity changes, and may implement functionality such as error messages or character counters. or validity changes, and may implement functionality such as error messages or character counters.
They appear at the bottom of the input. They appear at the bottom of the input.
### Prefixes and suffixes
These are child elements of a `<paper-input-container>` with the `prefix`
or `suffix` attribute, and are displayed inline with the input, before or after.
<paper-input-container>
<div prefix>$</div>
<label>Total</label>
<input is="iron-input">
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input-container>
### Styling ### Styling
The following custom properties and mixins are available for styling: The following custom properties and mixins are available for styling:
@ -150,8 +161,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
@apply(--paper-input-container-underline-disabled); @apply(--paper-input-container-underline-disabled);
} }
.label-and-input-container {
@apply(--layout-flex);
@apply(--layout-relative);
}
.input-content { .input-content {
position: relative; position: relative;
@apply(--layout-horizontal);
@apply(--layout-end);
} }
.input-content ::content label, .input-content ::content label,
@ -213,6 +231,12 @@ This element is `display:block` by default, but you can set the `inline` attribu
@apply(--paper-input-container-input); @apply(--paper-input-container-input);
} }
::content [prefix],
::content [suffix] {
@apply(--paper-font-subhead);
@apply(--paper-input-container-input);
}
/* Firefox sets a min-width on the input, which can cause layout issues */ /* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::content input { .input-content ::content input {
min-width: 0; min-width: 0;
@ -239,7 +263,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
</template> </template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]"> <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
<content select=":not([add-on])"></content> <content select="[prefix]" id="prefix"></content>
<div class="label-and-input-container">
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
</div>
<content select="[suffix]"></content>
</div> </div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]"> <div class$="[[_computeUnderlineClass(focused,invalid)]]">
@ -476,6 +504,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) { _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content'; var cls = 'input-content';
if (!noLabelFloat) { if (!noLabelFloat) {
var label = this.querySelector('label');
if (alwaysFloatLabel || _inputHasContent) { if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating'; cls += ' label-is-floating';
if (invalid) { if (invalid) {
@ -483,6 +513,16 @@ This element is `display:block` by default, but you can set the `inline` attribu
} else if (focused) { } else if (focused) {
cls += " label-is-highlighted"; cls += " label-is-highlighted";
} }
// The label might have a horizontal offset if a prefix element exists
// which needs to be undone when displayed as a floating label.
if (this.$.prefix && label && label.offsetParent) {
label.style.left = -label.offsetParent.offsetLeft + 'px';
}
} else {
// When the label is not floating, it should overlap the input element.
if (label) {
label.style.left = 0;
}
} }
} else { } else {
if (_inputHasContent) { if (_inputHasContent) {

View file

@ -25,6 +25,16 @@ It may include an optional error message or character counter.
<paper-input error-message="Invalid input!" label="Input label"></paper-input> <paper-input error-message="Invalid input!" label="Input label"></paper-input>
<paper-input char-counter label="Input label"></paper-input> <paper-input char-counter label="Input label"></paper-input>
It can also include custom prefix or suffix elements, which are displayed
before or after the text input itself. In order for an element to be
considered as a prefix, it must have the `prefix` attribute (and similarly
for `suffix`).
<paper-input label="total">
<div prefix>$</div>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
See `Polymer.PaperInputBehavior` for more API docs. See `Polymer.PaperInputBehavior` for more API docs.
### Styling ### Styling
@ -68,6 +78,8 @@ style this element.
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<content select="[prefix]"></content>
<label hidden$="[[!label]]">[[label]]</label> <label hidden$="[[!label]]">[[label]]</label>
<input is="iron-input" id="input" <input is="iron-input" id="input"
@ -95,6 +107,8 @@ style this element.
autocapitalize$="[[autocapitalize]]" autocapitalize$="[[autocapitalize]]"
autocorrect$="[[autocorrect]]"> autocorrect$="[[autocorrect]]">
<content select="[suffix]"></content>
<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>
</template> </template>

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-slider", "name": "paper-slider",
"version": "1.0.3", "version": "1.0.4",
"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,14 +37,13 @@
"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.3", "_release": "1.0.4",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.3", "tag": "v1.0.4",
"commit": "d2b1542b6f02595fa124359945a4cc00cb0fca44" "commit": "e1307d8323c2f91a3f2a514c210b4d7dd498e3ac"
}, },
"_source": "git://github.com/PolymerElements/paper-slider.git", "_source": "git://github.com/PolymerElements/paper-slider.git",
"_target": "~1.0.3", "_target": "~1.0.3",
"_originalSource": "PolymerElements/paper-slider", "_originalSource": "PolymerElements/paper-slider"
"_direct": true
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-slider", "name": "paper-slider",
"version": "1.0.3", "version": "1.0.4",
"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",

View file

@ -19,20 +19,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
:host(:not([disabled])) #sliderBar::shadow #activeProgress { :host(:not([disabled])) #sliderBar {
background-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::shadow #secondaryProgress { :host(:not([disabled])) #sliderBar {
background-color: var(--paper-slider-secondary-color, --google-blue-300); --paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
} }
:host([disabled]) #sliderBar::shadow #activeProgress { :host([disabled]) #sliderBar {
background-color: var(--paper-slider-disabled-active-color, --google-grey-500); --paper-progress-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
} }
:host([disabled]) #sliderBar::shadow #secondaryProgress { :host([disabled]) #sliderBar {
background-color: var(--paper-slider-disabled-secondary-color, --google-grey-300); --paper-progress-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
} }
:host(:focus) { :host(:focus) {
@ -116,11 +116,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
background-color: black; background-color: black;
} }
.transiting #sliderBar::shadow #activeProgress {
-webkit-transition: -webkit-transform 0.08s ease;
transition: transform 0.08s ease;
}
#sliderKnob { #sliderKnob {
@apply(--layout-center-justified); @apply(--layout-center-justified);
@apply(--layout-center); @apply(--layout-center);
@ -153,10 +148,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
#sliderKnobInner { #sliderKnobInner {
width: 12px; width: 12px;
height: 12px; height: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
background-color: var(--paper-slider-knob-color, --google-blue-700); background-color: var(--paper-slider-knob-color, --google-blue-700);
-moz-box-sizing: border-box;
box-sizing: border-box;
transition-property: height, width, background-color, border; transition-property: height, width, background-color, border;
transition-duration: 0.1s; transition-duration: 0.1s;
transition-timing-function: ease; transition-timing-function: ease;
@ -165,13 +162,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
.expand:not(.pin) > #sliderKnob > #sliderKnobInner { .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.ring > #sliderKnob > #sliderKnobInner { .ring > #sliderKnob > #sliderKnobInner {
background-color: transparent; background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid #c8c8c8; border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
} }
#sliderKnobInner::before { #sliderKnobInner::before {
@ -187,6 +185,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
height: 26px; height: 26px;
margin-left: 3px; margin-left: 3px;
border-radius: 50% 50% 50% 0; border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg) scale(0) translate(0); -webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0); transform: rotate(-45deg) scale(0) translate(0);
} }
@ -198,7 +197,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
} }
.pin.ring > #sliderKnob > #sliderKnobInner::before { .pin.ring > #sliderKnob > #sliderKnobInner::before {
background-color: #c8c8c8; background-color: var(--paper-slider-pin-start-color, #c8c8c8);
} }
.pin.expand > #sliderKnob > #sliderKnobInner::before { .pin.expand > #sliderKnob > #sliderKnobInner::before {
@ -216,6 +215,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
text-align: center; text-align: center;
color: var(--paper-slider-font-color, #fff); color: var(--paper-slider-font-color, #fff);
font-size: 10px; font-size: 10px;
-webkit-transform: scale(0) translate(0); -webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0); transform: scale(0) translate(0);
} }
@ -232,9 +232,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
overflow: hidden; overflow: hidden;
} }
.slider-input::shadow input { .slider-input {
/* FIXME(ffu): should one be able set text-align directly on paper-input? */ --paper-input-container-input: {
text-align: center; text-align: center;
};
} }
/* disabled state */ /* disabled state */

View file

@ -49,6 +49,9 @@ Custom property | Description | Default
`--paper-slider-font-color` | The pin's text color | `#fff` `--paper-slider-font-color` | The pin's text color | `#fff`
`--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500` `--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
`--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300` `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
`--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`
@group Paper Elements @group Paper Elements
@element paper-slider @element paper-slider
@ -65,7 +68,9 @@ Custom property | Description | Default
class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]"> class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
<div class="bar-container"> <div class="bar-container">
<paper-progress id="sliderBar" <paper-progress
class$="[[_getProgressClass(transiting)]]"
id="sliderBar"
aria-hidden="true" aria-hidden="true"
min="[[min]]" min="[[min]]"
max="[[max]]" max="[[max]]"
@ -92,16 +97,24 @@ Custom property | Description | Default
on-up="_resetKnob" on-up="_resetKnob"
on-track="_onTrack" on-track="_onTrack"
on-transitionend="_knobTransitionEnd"> on-transitionend="_knobTransitionEnd">
<paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple> <paper-ripple
<div id="sliderKnobInner" value$="[[pinValue]]"></div> center
id="ink"
class="circle"
hidden$="[[!receivedFocusFromKeyboard]]">
</paper-ripple>
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
</div> </div>
</div> </div>
<template is="dom-if" if="[[editable]]"> <template is="dom-if" if="[[editable]]">
<paper-input id="input" <paper-input
id="input"
class="slider-input" class="slider-input"
disabled$="[[disabled]]" disabled$="[[disabled]]"
on-change="_inputChange"> on-change="_inputChange"
value="[[_fixForInput(immediateValue)]]"
>
</paper-input> </paper-input>
</template> </template>
</template> </template>
@ -114,9 +127,8 @@ Custom property | Description | Default
is: 'paper-slider', is: 'paper-slider',
behaviors: [ behaviors: [
Polymer.IronA11yKeysBehavior,
Polymer.PaperInkyFocusBehavior,
Polymer.IronFormElementBehavior, Polymer.IronFormElementBehavior,
Polymer.PaperInkyFocusBehavior,
Polymer.IronRangeBehavior Polymer.IronRangeBehavior
], ],
@ -232,9 +244,9 @@ Custom property | Description | Default
ready: function() { ready: function() {
// issue polymer/polymer#1305 // issue polymer/polymer#1305
this.async(function() { this.async(function() {
this._updateKnob(this.value); this._updateKnob(this.value);
this._updateInputValue();
}, 1); }, 1);
}, },
@ -277,17 +289,15 @@ Custom property | Description | Default
} else { } else {
this.value = this.immediateValue; this.value = this.immediateValue;
} }
this._updateInputValue();
}, },
_secondaryProgressChanged: function() { _secondaryProgressChanged: function() {
this.secondaryProgress = this._clampValue(this.secondaryProgress); this.secondaryProgress = this._clampValue(this.secondaryProgress);
}, },
_updateInputValue: function () { _fixForInput: function(immediateValue) {
if (this.editable) { // paper-input/issues/114
this.$$('#input').value = this.immediateValue.toString(); return this.immediateValue.toString();
}
}, },
_expandKnob: function() { _expandKnob: function() {
@ -301,8 +311,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) + '%';
@ -318,6 +326,7 @@ Custom property | Description | Default
}, },
_onTrack: function(event) { _onTrack: function(event) {
event.stopPropagation();
switch (event.detail.state) { switch (event.detail.state) {
case 'start': case 'start':
this._trackStart(event); this._trackStart(event);
@ -352,7 +361,6 @@ Custom property | Description | Default
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w)); var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
this._setImmediateValue(immediateValue); this._setImmediateValue(immediateValue);
this._setPinValue(immediateValue);
// 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);
@ -376,7 +384,7 @@ Custom property | Description | Default
this._expandKnob(); this._expandKnob();
// cancel selection // cancel selection
event.detail.sourceEvent.preventDefault(); event.preventDefault();
// set the focus manually because we will called prevent default // set the focus manually because we will called prevent default
this.focus(); this.focus();
@ -407,7 +415,7 @@ Custom property | Description | Default
}); });
// cancel selection // cancel selection
event.detail.sourceEvent.preventDefault(); event.preventDefault();
}, },
_knobTransitionEnd: function(event) { _knobTransitionEnd: function(event) {
@ -425,6 +433,13 @@ Custom property | Description | Default
} }
}, },
_mergeClasses: function(classes) {
return Object.keys(classes).filter(
function(className) {
return classes[className];
}).join(' ');
},
_getClassNames: function() { _getClassNames: function() {
var classes = {}; var classes = {};
@ -437,10 +452,13 @@ Custom property | Description | Default
classes.transiting = this.transiting; classes.transiting = this.transiting;
classes.editable = this.editable; classes.editable = this.editable;
return Object.keys(classes).filter( return this._mergeClasses(classes);
function (className) { },
return classes[className];
}).join(' '); _getProgressClass: function() {
return this._mergeClasses({
transiting: this.transiting
});
}, },
_incrementKey: function(event) { _incrementKey: function(event) {
@ -459,10 +477,6 @@ Custom property | Description | Default
this.decrement(); this.decrement();
} }
this.fire('change'); this.fire('change');
},
_setPinValue: function (value) {
this.pinValue = value;
} }
}); });

View file

@ -34,7 +34,7 @@
"tag": "v1.0.11", "tag": "v1.0.11",
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c" "commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
}, },
"_source": "git://github.com/PolymerLabs/paper-styles.git", "_source": "git://github.com/PolymerElements/paper-styles.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "PolymerLabs/paper-styles" "_originalSource": "PolymerElements/paper-styles"
} }

View file

@ -1,7 +1,7 @@
{ {
"name": "webcomponentsjs", "name": "webcomponentsjs",
"main": "webcomponents.js", "main": "webcomponents.js",
"version": "0.7.8", "version": "0.7.9",
"homepage": "http://webcomponents.org", "homepage": "http://webcomponents.org",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -15,11 +15,11 @@
], ],
"license": "BSD", "license": "BSD",
"ignore": [], "ignore": [],
"_release": "0.7.8", "_release": "0.7.9",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v0.7.8", "tag": "v0.7.9",
"commit": "efaefb6584770f596f75f4e3ed3fda3ffc4bd780" "commit": "4565cfff47986661f0187e4ca27d1cdb55a24991"
}, },
"_source": "git://github.com/Polymer/webcomponentsjs.git", "_source": "git://github.com/Polymer/webcomponentsjs.git",
"_target": "^0.7.2", "_target": "^0.7.2",

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;

File diff suppressed because one or more lines are too long

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;
@ -692,7 +692,7 @@ window.HTMLImports.addModule(function(scope) {
var path = scope.path; var path = scope.path;
var rootDocument = scope.rootDocument; var rootDocument = scope.rootDocument;
var flags = scope.flags; var flags = scope.flags;
var isIE11OrOlder = scope.isIE11OrOlder; var isIE = scope.isIE;
var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE; var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE;
var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]"; var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]";
var importParser = { var importParser = {
@ -821,7 +821,7 @@ window.HTMLImports.addModule(function(scope) {
}; };
elt.addEventListener("load", done); elt.addEventListener("load", done);
elt.addEventListener("error", done); elt.addEventListener("error", done);
if (isIE11OrOlder && elt.localName === "style") { if (isIE && elt.localName === "style") {
var fakeLoad = false; var fakeLoad = false;
if (elt.textContent.indexOf("@import") == -1) { if (elt.textContent.indexOf("@import") == -1) {
fakeLoad = true; fakeLoad = true;

File diff suppressed because one or more lines are too long

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;

File diff suppressed because one or more lines are too long

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
if (typeof WeakMap === "undefined") { if (typeof WeakMap === "undefined") {
(function() { (function() {
var defineProperty = Object.defineProperty; var defineProperty = Object.defineProperty;

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,7 @@
{ {
"name": "webcomponentsjs", "name": "webcomponentsjs",
"main": "webcomponents.js", "main": "webcomponents.js",
"version": "0.7.8", "version": "0.7.9",
"homepage": "http://webcomponents.org", "homepage": "http://webcomponents.org",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"

View file

@ -1,6 +1,6 @@
{ {
"name": "webcomponents.js", "name": "webcomponents.js",
"version": "0.7.8", "version": "0.7.9",
"description": "webcomponents.js", "description": "webcomponents.js",
"main": "webcomponents.js", "main": "webcomponents.js",
"directories": { "directories": {

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
window.WebComponents = window.WebComponents || {}; window.WebComponents = window.WebComponents || {};
(function(scope) { (function(scope) {
@ -1260,7 +1260,7 @@ window.HTMLImports.addModule(function(scope) {
var path = scope.path; var path = scope.path;
var rootDocument = scope.rootDocument; var rootDocument = scope.rootDocument;
var flags = scope.flags; var flags = scope.flags;
var isIE11OrOlder = scope.isIE11OrOlder; var isIE = scope.isIE;
var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE; var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE;
var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]"; var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]";
var importParser = { var importParser = {
@ -1389,7 +1389,7 @@ window.HTMLImports.addModule(function(scope) {
}; };
elt.addEventListener("load", done); elt.addEventListener("load", done);
elt.addEventListener("error", done); elt.addEventListener("error", done);
if (isIE11OrOlder && elt.localName === "style") { if (isIE && elt.localName === "style") {
var fakeLoad = false; var fakeLoad = false;
if (elt.textContent.indexOf("@import") == -1) { if (elt.textContent.indexOf("@import") == -1) {
fakeLoad = true; fakeLoad = true;
@ -2285,6 +2285,7 @@ if (typeof HTMLTemplateElement === "undefined") {
(function() { (function() {
var TEMPLATE_TAG = "template"; var TEMPLATE_TAG = "template";
var contentDoc = document.implementation.createHTMLDocument("template"); var contentDoc = document.implementation.createHTMLDocument("template");
var canDecorate = true;
HTMLTemplateElement = function() {}; HTMLTemplateElement = function() {};
HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype); HTMLTemplateElement.prototype = Object.create(HTMLElement.prototype);
HTMLTemplateElement.decorate = function(template) { HTMLTemplateElement.decorate = function(template) {
@ -2295,6 +2296,8 @@ if (typeof HTMLTemplateElement === "undefined") {
while (child = template.firstChild) { while (child = template.firstChild) {
template.content.appendChild(child); template.content.appendChild(child);
} }
if (canDecorate) {
try {
Object.defineProperty(template, "innerHTML", { Object.defineProperty(template, "innerHTML", {
get: function() { get: function() {
var o = ""; var o = "";
@ -2314,6 +2317,10 @@ if (typeof HTMLTemplateElement === "undefined") {
}, },
configurable: true configurable: true
}); });
} catch (err) {
canDecorate = false;
}
}
}; };
HTMLTemplateElement.bootstrap = function(doc) { HTMLTemplateElement.bootstrap = function(doc) {
var templates = doc.querySelectorAll(TEMPLATE_TAG); var templates = doc.querySelectorAll(TEMPLATE_TAG);

File diff suppressed because one or more lines are too long

View file

@ -7,7 +7,7 @@
* Code distributed by Google as part of the polymer project is also * 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 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
// @version 0.7.8 // @version 0.7.9
window.WebComponents = window.WebComponents || {}; window.WebComponents = window.WebComponents || {};
(function(scope) { (function(scope) {
@ -6029,7 +6029,7 @@ window.HTMLImports.addModule(function(scope) {
var path = scope.path; var path = scope.path;
var rootDocument = scope.rootDocument; var rootDocument = scope.rootDocument;
var flags = scope.flags; var flags = scope.flags;
var isIE11OrOlder = scope.isIE11OrOlder; var isIE = scope.isIE;
var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE; var IMPORT_LINK_TYPE = scope.IMPORT_LINK_TYPE;
var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]"; var IMPORT_SELECTOR = "link[rel=" + IMPORT_LINK_TYPE + "]";
var importParser = { var importParser = {
@ -6158,7 +6158,7 @@ window.HTMLImports.addModule(function(scope) {
}; };
elt.addEventListener("load", done); elt.addEventListener("load", done);
elt.addEventListener("error", done); elt.addEventListener("error", done);
if (isIE11OrOlder && elt.localName === "style") { if (isIE && elt.localName === "style") {
var fakeLoad = false; var fakeLoad = false;
if (elt.textContent.indexOf("@import") == -1) { if (elt.textContent.indexOf("@import") == -1) {
fakeLoad = true; fakeLoad = true;

File diff suppressed because one or more lines are too long

View file

@ -46,7 +46,9 @@
HasAired: false, HasAired: false,
limit: 8, limit: 8,
IsMovie: false, IsMovie: false,
IsSports: false IsSports: false,
IsKids: false,
IsSeries: true
}).done(function (result) { }).done(function (result) {

View file

@ -16187,8 +16187,15 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
@apply(--paper-input-container-underline-disabled); @apply(--paper-input-container-underline-disabled);
} }
.label-and-input-container {
@apply(--layout-flex);
@apply(--layout-relative);
}
.input-content { .input-content {
position: relative; position: relative;
@apply(--layout-horizontal);
@apply(--layout-end);
} }
.input-content ::content label, .input-content ::content label,
@ -16250,6 +16257,12 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
@apply(--paper-input-container-input); @apply(--paper-input-container-input);
} }
::content [prefix],
::content [suffix] {
@apply(--paper-font-subhead);
@apply(--paper-input-container-input);
}
/* Firefox sets a min-width on the input, which can cause layout issues */ /* Firefox sets a min-width on the input, which can cause layout issues */
.input-content ::content input { .input-content ::content input {
min-width: 0; min-width: 0;
@ -16276,7 +16289,11 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
</template> </template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]"> <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
<content select=":not([add-on])"></content> <content select="[prefix]" id="prefix"></content>
<div class="label-and-input-container">
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
</div>
<content select="[suffix]"></content>
</div> </div>
<div class$="[[_computeUnderlineClass(focused,invalid)]]"> <div class$="[[_computeUnderlineClass(focused,invalid)]]">
@ -16513,6 +16530,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) { _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content'; var cls = 'input-content';
if (!noLabelFloat) { if (!noLabelFloat) {
var label = this.querySelector('label');
if (alwaysFloatLabel || _inputHasContent) { if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating'; cls += ' label-is-floating';
if (invalid) { if (invalid) {
@ -16520,6 +16539,16 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} else if (focused) { } else if (focused) {
cls += " label-is-highlighted"; cls += " label-is-highlighted";
} }
// The label might have a horizontal offset if a prefix element exists
// which needs to be undone when displayed as a floating label.
if (this.$.prefix && label && label.offsetParent) {
label.style.left = -label.offsetParent.offsetLeft + 'px';
}
} else {
// When the label is not floating, it should overlap the input element.
if (label) {
label.style.left = 0;
}
} }
} else { } else {
if (_inputHasContent) { if (_inputHasContent) {
@ -16710,10 +16739,14 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<content select="[prefix]"></content>
<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]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" 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]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]">
<content select="[suffix]"></content>
<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>
</template> </template>