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
@ -58,433 +61,444 @@ Custom property | Description | Default
<dom-module id="paper-slider"> <dom-module id="paper-slider">
<link rel="import" type="css" href="paper-slider.css"> <link rel="import" type="css" href="paper-slider.css">
<template> <template>
<div id="sliderContainer" <div id="sliderContainer"
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
aria-hidden="true" class$="[[_getProgressClass(transiting)]]"
min="[[min]]" id="sliderBar"
max="[[max]]" aria-hidden="true"
step="[[step]]" min="[[min]]"
value="[[immediateValue]]" max="[[max]]"
secondary-progress="[[secondaryProgress]]" step="[[step]]"
on-down="_bardown" value="[[immediateValue]]"
on-up="_resetKnob" secondary-progress="[[secondaryProgress]]"
on-track="_onTrack"> on-down="_bardown"
</paper-progress> on-up="_resetKnob"
</div> on-track="_onTrack">
</paper-progress>
</div>
<template is="dom-if" if="[[snaps]]"> <template is="dom-if" if="[[snaps]]">
<div class="slider-markers horizontal layout"> <div class="slider-markers horizontal layout">
<template is="dom-repeat" items="[[markers]]"> <template is="dom-repeat" items="[[markers]]">
<div class="slider-marker flex"></div> <div class="slider-marker flex"></div>
</template> </template>
</div>
</template>
<div id="sliderKnob"
class="center-justified center horizontal layout"
on-down="_knobdown"
on-up="_resetKnob"
on-track="_onTrack"
on-transitionend="_knobTransitionEnd">
<paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
<div id="sliderKnobInner" value$="[[pinValue]]"></div>
</div>
</div> </div>
</template>
<template is="dom-if" if="[[editable]]"> <div id="sliderKnob"
<paper-input id="input" class="center-justified center horizontal layout"
class="slider-input" on-down="_knobdown"
disabled$="[[disabled]]" on-up="_resetKnob"
on-change="_inputChange"> on-track="_onTrack"
</paper-input> on-transitionend="_knobTransitionEnd">
</template> <paper-ripple
center
id="ink"
class="circle"
hidden$="[[!receivedFocusFromKeyboard]]">
</paper-ripple>
<div id="sliderKnobInner" value$="[[immediateValue]]"></div>
</div>
</div>
<template is="dom-if" if="[[editable]]">
<paper-input
id="input"
class="slider-input"
disabled$="[[disabled]]"
on-change="_inputChange"
value="[[_fixForInput(immediateValue)]]"
>
</paper-input>
</template> </template>
</template>
</dom-module> </dom-module>
<script> <script>
Polymer({ Polymer({
is: 'paper-slider', is: 'paper-slider',
behaviors: [ behaviors: [
Polymer.IronA11yKeysBehavior, Polymer.IronFormElementBehavior,
Polymer.PaperInkyFocusBehavior, Polymer.PaperInkyFocusBehavior,
Polymer.IronFormElementBehavior, Polymer.IronRangeBehavior
Polymer.IronRangeBehavior ],
],
properties: { properties: {
/** /**
* If true, the slider thumb snaps to tick marks evenly spaced based * If true, the slider thumb snaps to tick marks evenly spaced based
* on the `step` property value. * on the `step` property value.
*/ */
snaps: { snaps: {
type: Boolean, type: Boolean,
value: false, value: false,
notify: true notify: true
}, },
/** /**
* If true, a pin with numeric value label is shown when the slider thumb * If true, a pin with numeric value label is shown when the slider thumb
* is pressed. Use for settings for which users need to know the exact * is pressed. Use for settings for which users need to know the exact
* value of the setting. * value of the setting.
*/ */
pin: { pin: {
type: Boolean, type: Boolean,
value: false, value: false,
notify: true notify: true
}, },
/** /**
* The number that represents the current secondary progress. * The number that represents the current secondary progress.
*/ */
secondaryProgress: { secondaryProgress: {
type: Number, type: Number,
value: 0, value: 0,
notify: true, notify: true,
observer: '_secondaryProgressChanged' observer: '_secondaryProgressChanged'
}, },
/** /**
* If true, an input is shown and user can use it to set the slider value. * If true, an input is shown and user can use it to set the slider value.
*/ */
editable: { editable: {
type: Boolean, type: Boolean,
value: false value: false
}, },
/** /**
* The immediate value of the slider. This value is updated while the user * The immediate value of the slider. This value is updated while the user
* is dragging the slider. * is dragging the slider.
*/ */
immediateValue: { immediateValue: {
type: Number, type: Number,
value: 0, value: 0,
readOnly: true readOnly: true
}, },
/** /**
* The maximum number of markers * The maximum number of markers
*/ */
maxMarkers: { maxMarkers: {
type: Number, type: Number,
value: 0, value: 0,
notify: true, notify: true,
observer: '_maxMarkersChanged' observer: '_maxMarkersChanged'
}, },
/** /**
* If true, the knob is expanded * If true, the knob is expanded
*/ */
expand: { expand: {
type: Boolean, type: Boolean,
value: false, value: false,
readOnly: true readOnly: true
}, },
/** /**
* True when the user is dragging the slider. * True when the user is dragging the slider.
*/ */
dragging: { dragging: {
type: Boolean, type: Boolean,
value: false, value: false,
readOnly: true readOnly: true
}, },
transiting: { transiting: {
type: Boolean, type: Boolean,
value: false, value: false,
readOnly: true readOnly: true
}, },
markers: { markers: {
type: Array, type: Array,
readOnly: true, readOnly: true,
value: [] value: []
}, },
}, },
observers: [ observers: [
'_updateKnob(value, min, max, snaps, step)', '_updateKnob(value, min, max, snaps, step)',
'_minChanged(min)', '_minChanged(min)',
'_maxChanged(max)', '_maxChanged(max)',
'_valueChanged(value)', '_valueChanged(value)',
'_immediateValueChanged(immediateValue)' '_immediateValueChanged(immediateValue)'
], ],
hostAttributes: { hostAttributes: {
role: 'slider', role: 'slider',
tabindex: 0 tabindex: 0
}, },
keyBindings: { keyBindings: {
'left down pagedown home': '_decrementKey', 'left down pagedown home': '_decrementKey',
'right up pageup end': '_incrementKey' 'right up pageup end': '_incrementKey'
}, },
ready: function () { ready: function() {
// issue polymer/polymer#1305 // issue polymer/polymer#1305
this.async(function () {
this._updateKnob(this.value);
this._updateInputValue();
}, 1);
},
/** this.async(function() {
* Increases value by `step` but not above `max`. this._updateKnob(this.value);
* @method increment }, 1);
*/ },
increment: function () {
this.value = this._clampValue(this.value + this.step);
},
/**
* Decreases value by `step` but not below `min`.
* @method decrement
*/
decrement: function () {
this.value = this._clampValue(this.value - this.step);
},
_updateKnob: function (value) {
this._positionKnob(this._calcRatio(value));
},
_minChanged: function () {
this.setAttribute('aria-valuemin', this.min);
},
_maxChanged: function () {
this.setAttribute('aria-valuemax', this.max);
},
_valueChanged: function () {
this.setAttribute('aria-valuenow', this.value);
this.fire('value-change');
},
_immediateValueChanged: function () {
if (this.dragging) {
this.fire('immediate-value-change');
} else {
this.value = this.immediateValue;
}
this._updateInputValue();
},
_secondaryProgressChanged: function () {
this.secondaryProgress = this._clampValue(this.secondaryProgress);
},
_updateInputValue: function () {
if (this.editable) {
this.$$('#input').value = this.immediateValue.toString();
}
},
_expandKnob: function () {
this._setExpand(true);
},
_resetKnob: function () {
this.cancelDebouncer('expandKnob');
this._setExpand(false);
},
_positionKnob: function (ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setPinValue(this.immediateValue);
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
},
_inputChange: function () {
this.value = this.$$('#input').value;
this.fire('change');
},
_calcKnobPosition: function (ratio) {
return (this.max - this.min) * ratio + this.min;
},
_onTrack: function (event) {
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd();
break;
}
},
_trackStart: function (event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x || 0;
this._minx = -this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
this._setDragging(true);
},
_trackX: function (e) {
if (!this.dragging) {
this._trackStart(e);
}
var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
this._setImmediateValue(immediateValue);
this._setPinValue(immediateValue);
// update knob's position
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
},
_trackEnd: function () {
var s = this.$.sliderKnob.style;
this.$.sliderKnob.classList.remove('dragging');
this._setDragging(false);
this._resetKnob();
this.value = this.immediateValue;
s.transform = s.webkitTransform = '';
this.fire('change');
},
_knobdown: function (event) {
this._expandKnob();
// cancel selection
event.detail.sourceEvent.preventDefault();
// set the focus manually because we will called prevent default
this.focus();
},
_bardown: function (event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w;
var prevRatio = this.ratio;
this._setTransiting(true);
this._positionKnob(ratio);
this.debounce('expandKnob', this._expandKnob, 60);
// if the ratio doesn't change, sliderKnob's animation won't start
// and `_knobTransitionEnd` won't be called
// Therefore, we need to manually update the `transiting` state
if (prevRatio === this.ratio) {
this._setTransiting(false);
}
this.async(function () {
this.fire('change');
});
// cancel selection
event.detail.sourceEvent.preventDefault();
},
_knobTransitionEnd: function (event) {
if (event.target === this.$.sliderKnob) {
this._setTransiting(false);
}
},
_maxMarkersChanged: function (maxMarkers) {
var l = (this.max - this.min) / this.step;
if (!this.snaps && l > maxMarkers) {
this._setMarkers([]);
} else {
this._setMarkers(new Array(l));
}
},
_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 Object.keys(classes).filter(
function (className) {
return classes[className];
}).join(' ');
},
_incrementKey: function (event) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
}
this.fire('change');
},
_decrementKey: function (event) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
}
this.fire('change');
},
_setPinValue: function (value) {
this.pinValue = value;
}
});
/** /**
* Fired when the slider's value changes. * Increases value by `step` but not above `max`.
* * @method increment
* @event value-change
*/ */
increment: function() {
this.value = this._clampValue(this.value + this.step);
},
/** /**
* Fired when the slider's immediateValue changes. * Decreases value by `step` but not below `min`.
* * @method decrement
* @event immediate-value-change
*/ */
decrement: function() {
this.value = this._clampValue(this.value - this.step);
},
/** _updateKnob: function(value) {
* Fired when the slider's value changes due to user interaction. this._positionKnob(this._calcRatio(value));
* },
* Changes to the slider's value due to changes in an underlying
* bound variable will not trigger this event. _minChanged: function() {
* this.setAttribute('aria-valuemin', this.min);
* @event change },
*/
_maxChanged: function() {
this.setAttribute('aria-valuemax', this.max);
},
_valueChanged: function() {
this.setAttribute('aria-valuenow', this.value);
this.fire('value-change');
},
_immediateValueChanged: function() {
if (this.dragging) {
this.fire('immediate-value-change');
} else {
this.value = this.immediateValue;
}
},
_secondaryProgressChanged: function() {
this.secondaryProgress = this._clampValue(this.secondaryProgress);
},
_fixForInput: function(immediateValue) {
// paper-input/issues/114
return this.immediateValue.toString();
},
_expandKnob: function() {
this._setExpand(true);
},
_resetKnob: function() {
this.cancelDebouncer('expandKnob');
this._setExpand(false);
},
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setRatio(this._calcRatio(this.immediateValue));
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
},
_inputChange: function() {
this.value = this.$$('#input').value;
this.fire('change');
},
_calcKnobPosition: function(ratio) {
return (this.max - this.min) * ratio + this.min;
},
_onTrack: function(event) {
event.stopPropagation();
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd();
break;
}
},
_trackStart: function(event) {
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._startx = this._x || 0;
this._minx = - this._startx;
this._maxx = this._w - this._startx;
this.$.sliderKnob.classList.add('dragging');
this._setDragging(true);
},
_trackX: function(e) {
if (!this.dragging) {
this._trackStart(e);
}
var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
this._setImmediateValue(immediateValue);
// update knob's position
var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
},
_trackEnd: function() {
var s = this.$.sliderKnob.style;
this.$.sliderKnob.classList.remove('dragging');
this._setDragging(false);
this._resetKnob();
this.value = this.immediateValue;
s.transform = s.webkitTransform = '';
this.fire('change');
},
_knobdown: function(event) {
this._expandKnob();
// cancel selection
event.preventDefault();
// set the focus manually because we will called prevent default
this.focus();
},
_bardown: function(event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w;
var prevRatio = this.ratio;
this._setTransiting(true);
this._positionKnob(ratio);
this.debounce('expandKnob', this._expandKnob, 60);
// if the ratio doesn't change, sliderKnob's animation won't start
// and `_knobTransitionEnd` won't be called
// Therefore, we need to manually update the `transiting` state
if (prevRatio === this.ratio) {
this._setTransiting(false);
}
this.async(function() {
this.fire('change');
});
// cancel selection
event.preventDefault();
},
_knobTransitionEnd: function(event) {
if (event.target === this.$.sliderKnob) {
this._setTransiting(false);
}
},
_maxMarkersChanged: function(maxMarkers) {
var l = (this.max - this.min) / this.step;
if (!this.snaps && l > maxMarkers) {
this._setMarkers([]);
} else {
this._setMarkers(new Array(l));
}
},
_mergeClasses: function(classes) {
return Object.keys(classes).filter(
function(className) {
return classes[className];
}).join(' ');
},
_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
});
},
_incrementKey: function(event) {
if (event.detail.key === 'end') {
this.value = this.max;
} else {
this.increment();
}
this.fire('change');
},
_decrementKey: function(event) {
if (event.detail.key === 'home') {
this.value = this.min;
} else {
this.decrement();
}
this.fire('change');
}
});
/**
* Fired when the slider's value changes.
*
* @event value-change
*/
/**
* Fired when the slider's immediateValue changes.
*
* @event immediate-value-change
*/
/**
* Fired when the slider's value changes due to user interaction.
*
* Changes to the slider's value due to changes in an underlying
* bound variable will not trigger this event.
*
* @event change
*/
</script> </script>

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,25 +2296,31 @@ if (typeof HTMLTemplateElement === "undefined") {
while (child = template.firstChild) { while (child = template.firstChild) {
template.content.appendChild(child); template.content.appendChild(child);
} }
Object.defineProperty(template, "innerHTML", { if (canDecorate) {
get: function() { try {
var o = ""; Object.defineProperty(template, "innerHTML", {
for (var e = this.content.firstChild; e; e = e.nextSibling) { get: function() {
o += e.outerHTML || escapeData(e.data); var o = "";
} for (var e = this.content.firstChild; e; e = e.nextSibling) {
return o; o += e.outerHTML || escapeData(e.data);
}, }
set: function(text) { return o;
contentDoc.body.innerHTML = text; },
while (this.content.firstChild) { set: function(text) {
this.content.removeChild(this.content.firstChild); contentDoc.body.innerHTML = text;
} while (this.content.firstChild) {
while (contentDoc.body.firstChild) { this.content.removeChild(this.content.firstChild);
this.content.appendChild(contentDoc.body.firstChild); }
} while (contentDoc.body.firstChild) {
}, this.content.appendChild(contentDoc.body.firstChild);
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>