mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update vulcan build
This commit is contained in:
Luke Pulverenti
parent
02ae9ec81e
commit
59a3cada00
1 changed files with 160 additions and 123 deletions
|
|
@ -11490,7 +11490,11 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
* @return {boolean} True if `values` is valid.
|
||||
*/
|
||||
validate: function(values) {
|
||||
var valid = this._validator && this._validator.validate(values);
|
||||
var valid = true;
|
||||
if (this.hasValidator()) {
|
||||
valid = this._validator.validate(values);
|
||||
}
|
||||
|
||||
this.invalid = !valid;
|
||||
return valid;
|
||||
}
|
||||
|
|
@ -12004,6 +12008,24 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
type: Number
|
||||
},
|
||||
|
||||
// Nonstandard attributes for binding if needed
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autocapitalize` property.
|
||||
*/
|
||||
autocapitalize: {
|
||||
type: String,
|
||||
value: 'none'
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind this to the `<input is="iron-input">`'s `autocorrect` property.
|
||||
*/
|
||||
autocorrect: {
|
||||
type: String,
|
||||
value: 'off'
|
||||
},
|
||||
|
||||
_ariaDescribedBy: {
|
||||
type: String,
|
||||
value: ''
|
||||
|
|
@ -12015,6 +12037,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
'addon-attached': '_onAddonAttached'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_focusedControlStateChanged(focused)'
|
||||
],
|
||||
|
||||
/**
|
||||
* Returns a reference to the input element.
|
||||
*/
|
||||
|
|
@ -12079,6 +12105,24 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
return placeholder || alwaysFloatLabel;
|
||||
},
|
||||
|
||||
_focusedControlStateChanged: function(focused) {
|
||||
// IronControlState stops the focus and blur events in order to redispatch them on the host
|
||||
// element, but paper-input-container listens to those events. Since there are more
|
||||
// pending work on focus/blur in IronControlState, I'm putting in this hack to get the
|
||||
// input focus state working for now.
|
||||
if (!this.$.container) {
|
||||
this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
|
||||
if (!this.$.container) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (focused) {
|
||||
this.$.container._onFocus();
|
||||
} else {
|
||||
this.$.container._onBlur();
|
||||
}
|
||||
},
|
||||
|
||||
_updateAriaLabelledBy: function() {
|
||||
var label = Polymer.dom(this.root).querySelector('label');
|
||||
if (!label) {
|
||||
|
|
@ -12097,6 +12141,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
|
||||
};
|
||||
|
||||
/** @polymerBehavior */
|
||||
Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBehaviorImpl];
|
||||
|
||||
</script>
|
||||
|
|
@ -13215,7 +13260,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
|
|
@ -13225,6 +13270,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
#spinnerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* The spinner does not have any contents that would have to be
|
||||
* flipped if the direction changes. Always use ltr so that the
|
||||
* style works out correctly in both cases. */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#spinnerContainer.active {
|
||||
|
|
@ -13563,123 +13613,101 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
Polymer({
|
||||
|
||||
'use strict';
|
||||
is: 'paper-spinner',
|
||||
|
||||
function classNames(obj) {
|
||||
var classNames = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classNames.push(key);
|
||||
}
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
observer: '_activeChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
type: String,
|
||||
value: 'loading',
|
||||
observer: '_altChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
return classNames.join(' ');
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, coolingDown) {
|
||||
return [
|
||||
active || coolingDown ? 'active' : '',
|
||||
coolingDown ? 'cooldown' : ''
|
||||
].join(' ');
|
||||
},
|
||||
|
||||
_activeChanged: function(active, old) {
|
||||
this._setAriaHidden(!active);
|
||||
if (!active && old) {
|
||||
this._coolingDown = true;
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function(alt) {
|
||||
// user-provided `aria-label` takes precedence over prototype default
|
||||
if (alt === this.getPropertyInfo('alt').value) {
|
||||
this.alt = this.getAttribute('aria-label') || alt;
|
||||
} else {
|
||||
this._setAriaHidden(alt==='');
|
||||
this.setAttribute('aria-label', alt);
|
||||
}
|
||||
},
|
||||
|
||||
_setAriaHidden: function(hidden) {
|
||||
var attr = 'aria-hidden';
|
||||
if (hidden) {
|
||||
this.setAttribute(attr, 'true');
|
||||
} else {
|
||||
this.removeAttribute(attr);
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-spinner',
|
||||
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
observer: '_activeChanged',
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
observer: '_altChanged',
|
||||
type: String,
|
||||
value: 'loading'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, _coolingDown) {
|
||||
return classNames({
|
||||
active: active || _coolingDown,
|
||||
cooldown: _coolingDown
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Allow user-provided `aria-label` take preference to any other text alternative.
|
||||
if (this.hasAttribute('aria-label')) {
|
||||
this.alt = this.getAttribute('aria-label');
|
||||
} else {
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
}
|
||||
|
||||
if (!this.active) {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_activeChanged: function() {
|
||||
if (this.active) {
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this._coolingDown = true;
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function() {
|
||||
if (this.alt === '') {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-hidden');
|
||||
}
|
||||
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -14439,6 +14467,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
position: relative;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
|
@ -15660,6 +15689,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
},
|
||||
|
||||
_positionBar: function(width, left) {
|
||||
width = width || 0;
|
||||
left = left || 0;
|
||||
|
||||
this._width = width;
|
||||
this._left = left;
|
||||
this.transform(
|
||||
|
|
@ -15863,6 +15895,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
transform: scale3d(0,1,1);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
|
||||
@apply(--paper-input-container-underline-focus);
|
||||
}
|
||||
|
||||
.underline.is-highlighted .focused-line {
|
||||
|
|
@ -15888,12 +15922,16 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
.unfocused-line {
|
||||
height: 1px;
|
||||
background: var(--paper-input-container-color, --secondary-text-color);
|
||||
|
||||
@apply(--paper-input-container-underline);
|
||||
}
|
||||
|
||||
:host([disabled]) .unfocused-line {
|
||||
border-bottom: 1px dashed;
|
||||
border-color: var(--paper-input-container-color, --secondary-text-color);
|
||||
background: transparent;
|
||||
|
||||
@apply(--paper-input-container-underline-disabled);
|
||||
}
|
||||
|
||||
.input-content {
|
||||
|
|
@ -15928,6 +15966,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
.input-content.label-is-highlighted ::content label,
|
||||
.input-content.label-is-highlighted ::content .paper-input-label {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
|
||||
@apply(--paper-input-container-label-focus);
|
||||
}
|
||||
|
||||
.input-content.is-invalid ::content label,
|
||||
|
|
@ -16265,8 +16305,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
<style>
|
||||
|
||||
:host {
|
||||
/* need to use display: none for role="alert" */
|
||||
display: none;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
float: left;
|
||||
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
|
|
@ -16276,7 +16316,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
}
|
||||
|
||||
:host([invalid]) {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
};
|
||||
|
||||
</style>
|
||||
|
|
@ -16301,10 +16341,6 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
Polymer.PaperInputAddonBehavior
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
'role': 'alert'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
|
|
@ -16423,7 +16459,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]">
|
||||
<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]]">
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
|
|
@ -16448,6 +16484,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
is: 'paper-input',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.PaperInputBehavior,
|
||||
Polymer.IronControlState
|
||||
]
|
||||
|
|
@ -17159,7 +17196,7 @@ paper-ripple {
|
|||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
@apply(--paper-menu-colored-focused-item);
|
||||
@apply(--paper-menu-focused-item);
|
||||
}
|
||||
|
||||
.content > ::content > *:focus:after {
|
||||
|
|
@ -17169,7 +17206,7 @@ paper-ripple {
|
|||
opacity: 0.12;
|
||||
content: '';
|
||||
|
||||
@apply(--paper-menu-colored-focused-item-after);
|
||||
@apply(--paper-menu-focused-item-after);
|
||||
}
|
||||
|
||||
.content > ::content > *[colored]:focus:after {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue