1
0
Fork 0
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 2015-09-23 22:31:40 -04:00
parent 8dd2c5d717
commit cc428aac1d
34 changed files with 814 additions and 549 deletions

View file

@ -1,6 +1,6 @@
{
"name": "iron-menu-behavior",
"version": "1.0.3",
"version": "1.0.4",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [
@ -30,11 +30,11 @@
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.3",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.3",
"commit": "04cc87b1f6551383b1896f13df24ff1d01a9796f"
"tag": "v1.0.4",
"commit": "4ea050f534e5c418f901d432116762d0c7cb65dd"
},
"_source": "git://github.com/polymerelements/iron-menu-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-menu-behavior",
"version": "1.0.3",
"version": "1.0.4",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [

View file

@ -31,17 +31,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
width: 100%;
}
simple-menu li {
simple-menu a {
display: block;
padding: 15px 20px;
}
simple-menubar li {
simple-menubar a,
simple-menu a {
padding: 15px 20px;
color: var(--primary-text-color);
text-decoration: none;
}
simple-menu li[disabled],
simple-menubar li[disabled] {
simple-menu a[disabled],
simple-menubar a[disabled] {
color: var(--google-grey-300);
}
@ -55,17 +57,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
</style>
</head>
<body>
<body unresolved>
<div class="horizontal center-justified layout">
<div>
<h3>Simple menu</h3>
<div class="horizontal-section">
<simple-menu>
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
<a href="javascript:void(0)">Item 0</a>
<a href="javascript:void(0)">Item 1</a>
<a href="javascript:void(0)" disabled>Item 2</a>
<a href="javascript:void(0)">Item 3</a>
</simple-menu>
</div>
</div>
@ -74,10 +76,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<h3>Multi-select menu</h3>
<div class="horizontal-section">
<simple-menu multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<a href="javascript:void(0)">Item 0</a>
<a href="javascript:void(0)">Item 1</a>
<a href="javascript:void(0)">Item 2</a>
<a href="javascript:void(0)">Item 3</a>
</simple-menu>
</div>
</div>
@ -87,10 +89,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<h3>Simple menubar</h3>
<div class="horizontal-section">
<simple-menubar>
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
<a href="javascript:void(0)">Item 0</a>
<a href="javascript:void(0)">Item 1</a>
<a href="javascript:void(0)" disabled>Item 2</a>
<a href="javascript:void(0)">Item 3</a>
</simple-menubar>
</div>
</div>
@ -98,10 +100,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<h3>Multi-select menubar</h3>
<div class="horizontal-section">
<simple-menubar multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<a href="javascript:void(0)">Item 0</a>
<a href="javascript:void(0)">Item 1</a>
<a href="javascript:void(0)">Item 2</a>
<a href="javascript:void(0)">Item 3</a>
</simple-menubar>
</div>
</div>

View file

@ -55,59 +55,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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);
@ -119,6 +87,152 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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;
@ -140,62 +254,48 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}, 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;

View file

@ -30,11 +30,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_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() {
@ -46,7 +48,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_onKeydown: function(event) {
if (this.keyboardEventMatchesKeys(event, 'up down left right esc enter')) {
if (this.keyboardEventMatchesKeys(event, 'up down left right esc')) {
return;
}