mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update search
This commit is contained in:
Luke Pulverenti
parent
8dd2c5d717
commit
cc428aac1d
34 changed files with 814 additions and 549 deletions
|
|
@ -1,12 +1,4 @@
|
|||
<html><head><meta charset="UTF-8"><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||||
|
|
@ -11408,59 +11400,27 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
|
||||
listeners: {
|
||||
'focus': '_onFocus',
|
||||
'keydown': '_onKeydown'
|
||||
'keydown': '_onKeydown',
|
||||
'iron-items-changed': '_onIronItemsChanged'
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'up': '_onUpKey',
|
||||
'down': '_onDownKey',
|
||||
'esc': '_onEscKey',
|
||||
'enter': '_onEnterKey',
|
||||
'shift+tab:keydown': '_onShiftTabDown'
|
||||
},
|
||||
|
||||
_updateMultiselectable: function(multi) {
|
||||
if (multi) {
|
||||
this.setAttribute('aria-multiselectable', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-multiselectable');
|
||||
}
|
||||
},
|
||||
|
||||
_onShiftTabDown: function() {
|
||||
var oldTabIndex;
|
||||
|
||||
Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
|
||||
|
||||
oldTabIndex = this.getAttribute('tabindex');
|
||||
|
||||
this.setAttribute('tabindex', '-1');
|
||||
|
||||
this.async(function() {
|
||||
this.setAttribute('tabindex', oldTabIndex);
|
||||
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
|
||||
// Note: polymer/polymer#1305
|
||||
}, 1);
|
||||
},
|
||||
|
||||
_applySelection: function(item, isSelected) {
|
||||
if (isSelected) {
|
||||
item.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
item.removeAttribute('aria-selected');
|
||||
}
|
||||
|
||||
Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
|
||||
},
|
||||
|
||||
_focusedItemChanged: function(focusedItem, old) {
|
||||
old && old.setAttribute('tabindex', '-1');
|
||||
if (focusedItem) {
|
||||
focusedItem.setAttribute('tabindex', '0');
|
||||
focusedItem.focus();
|
||||
}
|
||||
attached: function() {
|
||||
this._resetTabindices();
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given value. If the `multi` property is true, then the selected state of the
|
||||
* `value` will be toggled; otherwise the `value` will be selected.
|
||||
*
|
||||
* @param {string} value the value to select.
|
||||
*/
|
||||
select: function(value) {
|
||||
if (this._defaultFocusAsync) {
|
||||
this.cancelAsync(this._defaultFocusAsync);
|
||||
|
|
@ -11472,6 +11432,152 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets all tabindex attributes to the appropriate value based on the
|
||||
* current selection state. The appropriate value is `0` (focusable) for
|
||||
* the default selected item, and `-1` (not keyboard focusable) for all
|
||||
* other items.
|
||||
*/
|
||||
_resetTabindices: function() {
|
||||
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
|
||||
|
||||
this.items.forEach(function(item) {
|
||||
item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
|
||||
}, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets appropriate ARIA based on whether or not the menu is meant to be
|
||||
* multi-selectable.
|
||||
*
|
||||
* @param {boolean} multi True if the menu should be multi-selectable.
|
||||
*/
|
||||
_updateMultiselectable: function(multi) {
|
||||
if (multi) {
|
||||
this.setAttribute('aria-multiselectable', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-multiselectable');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a KeyboardEvent, this method will focus the appropriate item in the
|
||||
* menu (if there is a relevant item, and it is possible to focus it).
|
||||
*
|
||||
* @param {KeyboardEvent} event A KeyboardEvent.
|
||||
*/
|
||||
_focusWithKeyboardEvent: function(event) {
|
||||
for (var i = 0, item; item = this.items[i]; i++) {
|
||||
var attr = this.attrForItemTitle || 'textContent';
|
||||
var title = item[attr] || item.getAttribute(attr);
|
||||
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
|
||||
this._setFocusedItem(item);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Focuses the previous item (relative to the currently focused item) in the
|
||||
* menu.
|
||||
*/
|
||||
_focusPrevious: function() {
|
||||
var length = this.items.length;
|
||||
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
|
||||
this._setFocusedItem(this.items[index]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Focuses the next item (relative to the currently focused item) in the
|
||||
* menu.
|
||||
*/
|
||||
_focusNext: function() {
|
||||
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
|
||||
this._setFocusedItem(this.items[index]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Mutates items in the menu based on provided selection details, so that
|
||||
* all items correctly reflect selection state.
|
||||
*
|
||||
* @param {Element} item An item in the menu.
|
||||
* @param {boolean} isSelected True if the item should be shown in a
|
||||
* selected state, otherwise false.
|
||||
*/
|
||||
_applySelection: function(item, isSelected) {
|
||||
if (isSelected) {
|
||||
item.setAttribute('aria-selected', 'true');
|
||||
} else {
|
||||
item.removeAttribute('aria-selected');
|
||||
}
|
||||
|
||||
Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Discretely updates tabindex values among menu items as the focused item
|
||||
* changes.
|
||||
*
|
||||
* @param {Element} focusedItem The element that is currently focused.
|
||||
* @param {?Element} old The last element that was considered focused, if
|
||||
* applicable.
|
||||
*/
|
||||
_focusedItemChanged: function(focusedItem, old) {
|
||||
old && old.setAttribute('tabindex', '-1');
|
||||
if (focusedItem) {
|
||||
focusedItem.setAttribute('tabindex', '0');
|
||||
focusedItem.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that responds to mutation changes related to the list of items
|
||||
* in the menu.
|
||||
*
|
||||
* @param {CustomEvent} event An event containing mutation records as its
|
||||
* detail.
|
||||
*/
|
||||
_onIronItemsChanged: function(event) {
|
||||
var mutations = event.detail;
|
||||
var mutation;
|
||||
var index;
|
||||
|
||||
for (index = 0; index < mutations.length; ++index) {
|
||||
mutation = mutations[index];
|
||||
|
||||
if (mutation.addedNodes.length) {
|
||||
this._resetTabindices();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler that is called when a shift+tab keypress is detected by the menu.
|
||||
*
|
||||
* @param {CustomEvent} event A key combination event.
|
||||
*/
|
||||
_onShiftTabDown: function(event) {
|
||||
var oldTabIndex;
|
||||
|
||||
Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
|
||||
|
||||
oldTabIndex = this.getAttribute('tabindex');
|
||||
|
||||
this.setAttribute('tabindex', '-1');
|
||||
|
||||
this.async(function() {
|
||||
this.setAttribute('tabindex', oldTabIndex);
|
||||
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
|
||||
// NOTE(cdata): polymer/polymer#1305
|
||||
}, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler that is called when the menu receives focus.
|
||||
*
|
||||
* @param {FocusEvent} event A focus event.
|
||||
*/
|
||||
_onFocus: function(event) {
|
||||
if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
|
||||
return;
|
||||
|
|
@ -11493,62 +11599,48 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
}, 100);
|
||||
},
|
||||
|
||||
_onUpKey: function() {
|
||||
/**
|
||||
* Handler that is called when the up key is pressed.
|
||||
*
|
||||
* @param {CustomEvent} event A key combination event.
|
||||
*/
|
||||
_onUpKey: function(event) {
|
||||
// up and down arrows moves the focus
|
||||
this._focusPrevious();
|
||||
},
|
||||
|
||||
_onDownKey: function() {
|
||||
/**
|
||||
* Handler that is called when the down key is pressed.
|
||||
*
|
||||
* @param {CustomEvent} event A key combination event.
|
||||
*/
|
||||
_onDownKey: function(event) {
|
||||
this._focusNext();
|
||||
},
|
||||
|
||||
_onEscKey: function() {
|
||||
/**
|
||||
* Handler that is called when the esc key is pressed.
|
||||
*
|
||||
* @param {CustomEvent} event A key combination event.
|
||||
*/
|
||||
_onEscKey: function(event) {
|
||||
// esc blurs the control
|
||||
this.focusedItem.blur();
|
||||
},
|
||||
|
||||
_onEnterKey: function(event) {
|
||||
// enter activates the item unless it is disabled
|
||||
this._activateFocused(event.detail.keyboardEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler that is called when a keydown event is detected.
|
||||
*
|
||||
* @param {KeyboardEvent} event A keyboard event.
|
||||
*/
|
||||
_onKeydown: function(event) {
|
||||
if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) {
|
||||
if (this.keyboardEventMatchesKeys(event, 'up down esc')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// all other keys focus the menu item starting with that character
|
||||
this._focusWithKeyboardEvent(event);
|
||||
},
|
||||
|
||||
_focusWithKeyboardEvent: function(event) {
|
||||
for (var i = 0, item; item = this.items[i]; i++) {
|
||||
var attr = this.attrForItemTitle || 'textContent';
|
||||
var title = item[attr] || item.getAttribute(attr);
|
||||
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
|
||||
this._setFocusedItem(item);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_activateFocused: function(event) {
|
||||
if (!this.focusedItem.hasAttribute('disabled')) {
|
||||
this._activateHandler(event);
|
||||
}
|
||||
},
|
||||
|
||||
_focusPrevious: function() {
|
||||
var length = this.items.length;
|
||||
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
|
||||
this._setFocusedItem(this.items[index]);
|
||||
},
|
||||
|
||||
_focusNext: function() {
|
||||
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
|
||||
this._setFocusedItem(this.items[index]);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
|
||||
|
|
@ -11580,11 +11672,13 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
},
|
||||
|
||||
_onUpKey: function(event) {
|
||||
this._activateFocused(event.detail.keyboardEvent);
|
||||
this.focusedItem.click();
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
_onDownKey: function(event) {
|
||||
this._activateFocused(event.detail.keyboardEvent);
|
||||
this.focusedItem.click();
|
||||
event.detail.keyboardEvent.preventDefault();
|
||||
},
|
||||
|
||||
_onLeftKey: function() {
|
||||
|
|
@ -11596,7 +11690,7 @@ The `aria-labelledby` attribute will be set to the header element, if one exists
|
|||
},
|
||||
|
||||
_onKeydown: function(event) {
|
||||
if (this.keyboardEventMatchesKeys(event, 'up down left right esc enter')) {
|
||||
if (this.keyboardEventMatchesKeys(event, 'up down left right esc')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -18799,128 +18893,102 @@ paper-ripple {
|
|||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
<dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
|
||||
|
||||
<style>
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
:host > ::content > *:not(:first-child):not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
@apply(--paper-icon-item);
|
||||
}
|
||||
|
||||
.content-icon {
|
||||
width: var(--paper-item-icon-width, 56px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<dom-module id="paper-item-shared-styles" assetpath="bower_components/paper-item/">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
:host > ::content > *:not(:first-child):not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
<dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
|
||||
<template>
|
||||
<style include="paper-item-shared-styles"></style>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
@apply(--paper-icon-item);
|
||||
}
|
||||
|
||||
.content-icon {
|
||||
width: var(--paper-item-icon-width, 56px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="contentIcon" class="content-icon layout horizontal center">
|
||||
<content select="[item-icon]"></content>
|
||||
</div>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-icon-item',
|
||||
|
||||
hostAttributes: {
|
||||
'role': 'listitem',
|
||||
'tabindex': '0'
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronButtonState
|
||||
]
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-icon-item',
|
||||
|
||||
hostAttributes: {
|
||||
'role': 'listitem'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="paper-item-body" assetpath="bower_components/paper-item/">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-justified);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
:host([two-line]) {
|
||||
min-height: var(--paper-item-body-two-line-min-height, 72px);
|
||||
}
|
||||
|
||||
:host([three-line]) {
|
||||
min-height: var(--paper-item-body-three-line-min-height, 88px);
|
||||
}
|
||||
|
||||
:host > ::content > * {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:host > ::content [secondary] {
|
||||
color: var(--paper-item-body-secondary-color, --secondary-text-color);
|
||||
@apply(--paper-font-body1);
|
||||
|
||||
@apply(--paper-item-body-secondary);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-justified);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
:host([two-line]) {
|
||||
min-height: var(--paper-item-body-two-line-min-height, 72px);
|
||||
}
|
||||
|
||||
:host([three-line]) {
|
||||
min-height: var(--paper-item-body-three-line-min-height, 88px);
|
||||
}
|
||||
|
||||
:host > ::content > * {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:host > ::content [secondary] {
|
||||
color: var(--paper-item-body-secondary-color, --secondary-text-color);
|
||||
@apply(--paper-font-body1);
|
||||
|
||||
@apply(--paper-item-body-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-item-body'
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-item-body'
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="paper-radio-button" assetpath="bower_components/paper-radio-button/">
|
||||
<template>
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue