mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
use shared alpha picker
This commit is contained in:
Luke Pulverenti
parent
0f7541beda
commit
d8cde41200
26 changed files with 444 additions and 331 deletions
|
|
@ -15,12 +15,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.31",
|
||||
"_release": "1.4.31",
|
||||
"version": "1.4.32",
|
||||
"_release": "1.4.32",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.31",
|
||||
"commit": "c2a74911a4ce0de5a826fac66213e7309121d475"
|
||||
"tag": "1.4.32",
|
||||
"commit": "426134a6a3e7ac58f429862eb998e0f20c23e38f"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
258
dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js
vendored
Normal file
258
dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js
vendored
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
define(['focusManager', 'layoutManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light'], function (focusManager, layoutManager) {
|
||||
|
||||
function focus() {
|
||||
var selected = this.querySelector('.selected');
|
||||
|
||||
if (selected) {
|
||||
focusManager.focus(selected);
|
||||
} else {
|
||||
focusManager.autoFocus(this, true);
|
||||
}
|
||||
}
|
||||
|
||||
function getLetterButton(l) {
|
||||
return '<button data-value="' + l + '" class="clearButton alphaPickerButton">' + l + '</button>';
|
||||
}
|
||||
|
||||
function render(element, options) {
|
||||
|
||||
element.classList.add('alphaPicker');
|
||||
element.classList.add('focuscontainer-x');
|
||||
|
||||
var html = '';
|
||||
var letters;
|
||||
|
||||
html += '<div class="alphaPickerRow">';
|
||||
if (options.mode == 'keyboard') {
|
||||
html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton">\
|
||||
<iron-icon icon="space-bar"></iron-icon>\
|
||||
</button>';
|
||||
} else {
|
||||
letters = ['#'];
|
||||
html += letters.map(getLetterButton).join('');
|
||||
}
|
||||
|
||||
letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
|
||||
html += letters.map(getLetterButton).join('');
|
||||
|
||||
if (options.mode == 'keyboard') {
|
||||
html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton">\
|
||||
<iron-icon icon="backspace"></iron-icon>\
|
||||
</button>';
|
||||
html += '</div>';
|
||||
|
||||
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||
html += '<div class="alphaPickerRow">';
|
||||
html += '<br/>';
|
||||
html += letters.map(getLetterButton).join('');
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
element.innerHTML = html;
|
||||
|
||||
if (options.mode != 'keyboard') {
|
||||
element.querySelector('.alphaPickerButton').classList.add('selected');
|
||||
}
|
||||
|
||||
element.classList.add('focusable');
|
||||
element.focus = focus;
|
||||
}
|
||||
|
||||
function alphaPicker(options) {
|
||||
|
||||
var self = this;
|
||||
|
||||
var element = options.element;
|
||||
var itemsContainer = options.itemsContainer;
|
||||
var itemClass = options.itemClass;
|
||||
|
||||
var itemFocusValue;
|
||||
var itemFocusTimeout;
|
||||
|
||||
function onItemFocusTimeout() {
|
||||
itemFocusTimeout = null;
|
||||
self.value(itemFocusValue);
|
||||
}
|
||||
|
||||
var alphaFocusedElement;
|
||||
var alphaFocusTimeout;
|
||||
|
||||
function onAlphaFocusTimeout() {
|
||||
|
||||
alphaFocusTimeout = null;
|
||||
|
||||
if (document.activeElement == alphaFocusedElement) {
|
||||
var value = alphaFocusedElement.getAttribute('data-value');
|
||||
|
||||
self.value(value, true);
|
||||
}
|
||||
}
|
||||
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function onAlphaPickerClick(e) {
|
||||
|
||||
var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (alphaPickerButton) {
|
||||
var value = alphaPickerButton.getAttribute('data-value');
|
||||
|
||||
element.dispatchEvent(new CustomEvent("alphavalueclicked", {
|
||||
detail: {
|
||||
value: value
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function onAlphaPickerFocusIn(e) {
|
||||
|
||||
if (alphaFocusTimeout) {
|
||||
clearTimeout(alphaFocusTimeout);
|
||||
alphaFocusTimeout = null;
|
||||
}
|
||||
|
||||
var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton');
|
||||
|
||||
if (alphaPickerButton) {
|
||||
alphaFocusedElement = alphaPickerButton;
|
||||
alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function onItemsFocusIn(e) {
|
||||
|
||||
var item = parentWithClass(e.target, itemClass);
|
||||
|
||||
if (item) {
|
||||
var prefix = item.getAttribute('data-prefix');
|
||||
if (prefix && prefix.length) {
|
||||
|
||||
itemFocusValue = prefix[0];
|
||||
if (itemFocusTimeout) {
|
||||
clearTimeout(itemFocusTimeout);
|
||||
}
|
||||
itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.enabled = function (enabled) {
|
||||
|
||||
if (enabled) {
|
||||
|
||||
if (itemsContainer) {
|
||||
itemsContainer.addEventListener('focus', onItemsFocusIn, true);
|
||||
}
|
||||
|
||||
if (options.mode == 'keyboard') {
|
||||
element.addEventListener('click', onAlphaPickerClick);
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
element.addEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
} else {
|
||||
element.addEventListener('click', onAlphaPickerFocusIn);
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if (itemsContainer) {
|
||||
itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
|
||||
}
|
||||
|
||||
element.removeEventListener('click', onAlphaPickerClick);
|
||||
element.removeEventListener('focus', onAlphaPickerFocusIn, true);
|
||||
element.removeEventListener('click', onAlphaPickerFocusIn);
|
||||
}
|
||||
};
|
||||
|
||||
self.on = function (name, fn) {
|
||||
element.addEventListener(name, fn);
|
||||
};
|
||||
|
||||
self.off = function (name, fn) {
|
||||
element.removeEventListener(name, fn);
|
||||
};
|
||||
|
||||
self.destroy = function () {
|
||||
|
||||
self.enabled(false);
|
||||
element.classList.remove('focuscontainer-x');
|
||||
};
|
||||
|
||||
self.visible = function (visible) {
|
||||
|
||||
element.style.visibility = visible ? 'visible' : 'hidden';
|
||||
};
|
||||
|
||||
var currentValue;
|
||||
self.value = function (value, applyValue) {
|
||||
|
||||
if (value != null) {
|
||||
|
||||
value = value.toUpperCase();
|
||||
currentValue = value;
|
||||
|
||||
if (options.mode != 'keyboard') {
|
||||
var selected = element.querySelector('.selected');
|
||||
var btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
|
||||
|
||||
if (btn && btn != selected) {
|
||||
btn.classList.add('selected');
|
||||
}
|
||||
if (selected && selected != btn) {
|
||||
selected.classList.remove('selected');
|
||||
}
|
||||
}
|
||||
|
||||
if (applyValue) {
|
||||
element.dispatchEvent(new CustomEvent("alphavaluechanged", {
|
||||
detail: {
|
||||
value: value
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
return currentValue;
|
||||
};
|
||||
|
||||
self.values = function () {
|
||||
|
||||
var elems = element.querySelectorAll('.alphaPickerButton');
|
||||
var values = [];
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
|
||||
values.push(elems[i].getAttribute('data-value'));
|
||||
|
||||
}
|
||||
|
||||
return values;
|
||||
};
|
||||
|
||||
self.focus = function () {
|
||||
focusManager.autoFocus(element, true);
|
||||
};
|
||||
|
||||
render(element, options);
|
||||
|
||||
self.enabled(true);
|
||||
self.visible(true);
|
||||
}
|
||||
|
||||
return alphaPicker;
|
||||
});
|
||||
52
dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css
vendored
Normal file
52
dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.alphaPicker {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.alphaPickerRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.alphaPicker.vertical .alphaPickerRow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button.alphaPickerButton {
|
||||
min-width: initial;
|
||||
margin: 0;
|
||||
padding: .1em .4em !important;
|
||||
width: auto;
|
||||
border-radius: .1em;
|
||||
font-weight: normal;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.vertical .alphaPickerButton {
|
||||
padding: .25em .4em !important;
|
||||
}
|
||||
|
||||
.layout-desktop .alphaPickerButton {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light].alphaPickerButton {
|
||||
opacity: .25;
|
||||
width: 4.4vh;
|
||||
height: 4.4vh;
|
||||
}
|
||||
|
||||
.alphaPickerButton.selected {
|
||||
color: #000;
|
||||
background-color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.alphaPickerButton:focus {
|
||||
background-color: #52B54B;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -4,25 +4,6 @@
|
|||
align-items: initial;
|
||||
}
|
||||
|
||||
.tvguide ::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.tvguide ::-webkit-scrollbar-button:start:decrement,
|
||||
.tvguide ::-webkit-scrollbar-button:end:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tvguide ::-webkit-scrollbar-track-piece {
|
||||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.tvguide ::-webkit-scrollbar-thumb:vertical, .tvguide ::-webkit-scrollbar-thumb:horizontal {
|
||||
-webkit-border-radius: 2px;
|
||||
background: #888 no-repeat center;
|
||||
}
|
||||
|
||||
.tvGuideHeader {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
|
@ -144,7 +125,7 @@
|
|||
|
||||
.currentTimeIndicatorArrowContainer {
|
||||
position: absolute;
|
||||
bottom: -1.35vh;
|
||||
bottom: -1.3vh;
|
||||
width: 100%;
|
||||
color: #52B54B;
|
||||
margin-left: .65vh;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue