Revert emby-button and emby-tabs changes
This commit is contained in:
Bill Thornton
vitorsemeano
parent
97699d513b
commit
85acdb3868
2 changed files with 200 additions and 208 deletions
|
|
@ -1,3 +1,4 @@
|
||||||
|
import 'webcomponents.js/webcomponents-lite';
|
||||||
import { removeEventListener, addEventListener } from '../../scripts/dom';
|
import { removeEventListener, addEventListener } from '../../scripts/dom';
|
||||||
import layoutManager from '../../components/layoutManager';
|
import layoutManager from '../../components/layoutManager';
|
||||||
import shell from '../../scripts/shell';
|
import shell from '../../scripts/shell';
|
||||||
|
|
@ -5,61 +6,8 @@ import { appRouter } from '../../components/appRouter';
|
||||||
import { appHost } from '../../components/apphost';
|
import { appHost } from '../../components/apphost';
|
||||||
import './emby-button.css';
|
import './emby-button.css';
|
||||||
|
|
||||||
class EmbyButton extends HTMLButtonElement {
|
const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||||
createdCallback() {
|
const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
|
||||||
if (this.classList.contains('emby-button')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.classList.add('emby-button');
|
|
||||||
// TODO replace all instances of element-showfocus with this method
|
|
||||||
if (layoutManager.tv) {
|
|
||||||
// handles all special css for tv layout
|
|
||||||
// this method utilizes class chaining
|
|
||||||
this.classList.add('show-focus');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
attachedCallback() {
|
|
||||||
if (this.tagName === 'A') {
|
|
||||||
removeEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
addEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
|
|
||||||
if (this.getAttribute('data-autohide') === 'true') {
|
|
||||||
if (appHost.supports('externallinks')) {
|
|
||||||
this.classList.remove('hide');
|
|
||||||
} else {
|
|
||||||
this.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
detachedCallback() {
|
|
||||||
removeEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class EmbyLinkButton extends HTMLAnchorElement {
|
|
||||||
attachedCallback() {
|
|
||||||
if (this.tagName === 'A') {
|
|
||||||
removeEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
addEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
|
|
||||||
if (this.getAttribute('data-autohide') === 'true') {
|
|
||||||
if (appHost.supports('externallinks')) {
|
|
||||||
this.classList.remove('hide');
|
|
||||||
} else {
|
|
||||||
this.classList.add('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
detachedCallback() {
|
|
||||||
removeEventListener(this, 'click', onAnchorClick, {});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onAnchorClick(e) {
|
function onAnchorClick(e) {
|
||||||
const href = this.getAttribute('href') || '';
|
const href = this.getAttribute('href') || '';
|
||||||
|
|
@ -77,8 +25,50 @@ function onAnchorClick(e) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('emby-button', EmbyButton, { extends: 'button' });
|
EmbyButtonPrototype.createdCallback = function () {
|
||||||
|
if (this.classList.contains('emby-button')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
customElements.define('emby-linkbutton', EmbyLinkButton, { extends: 'a' });
|
this.classList.add('emby-button');
|
||||||
|
// TODO replace all instances of element-showfocus with this method
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
// handles all special css for tv layout
|
||||||
|
// this method utilizes class chaining
|
||||||
|
this.classList.add('show-focus');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
export default EmbyButton;
|
EmbyButtonPrototype.attachedCallback = function () {
|
||||||
|
if (this.tagName === 'A') {
|
||||||
|
removeEventListener(this, 'click', onAnchorClick, {});
|
||||||
|
addEventListener(this, 'click', onAnchorClick, {});
|
||||||
|
|
||||||
|
if (this.getAttribute('data-autohide') === 'true') {
|
||||||
|
if (appHost.supports('externallinks')) {
|
||||||
|
this.classList.remove('hide');
|
||||||
|
} else {
|
||||||
|
this.classList.add('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyButtonPrototype.detachedCallback = function () {
|
||||||
|
removeEventListener(this, 'click', onAnchorClick, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
|
||||||
|
EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
|
||||||
|
|
||||||
|
document.registerElement('emby-button', {
|
||||||
|
prototype: EmbyButtonPrototype,
|
||||||
|
extends: 'button'
|
||||||
|
});
|
||||||
|
|
||||||
|
document.registerElement('emby-linkbutton', {
|
||||||
|
prototype: EmbyLinkButtonPrototype,
|
||||||
|
extends: 'a'
|
||||||
|
});
|
||||||
|
|
||||||
|
export default EmbyButtonPrototype;
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
|
import 'webcomponents.js/webcomponents-lite';
|
||||||
import dom from '../../scripts/dom';
|
import dom from '../../scripts/dom';
|
||||||
import scroller from '../../libraries/scroller';
|
import scroller from '../../libraries/scroller';
|
||||||
import browser from '../../scripts/browser';
|
import browser from '../../scripts/browser';
|
||||||
import focusManager from '../../components/focusManager';
|
import focusManager from '../../components/focusManager';
|
||||||
import 'webcomponents.js/webcomponents-lite';
|
|
||||||
import './emby-tabs.css';
|
import './emby-tabs.css';
|
||||||
import '../../assets/css/scrollstyles.css';
|
import '../../assets/css/scrollstyles.css';
|
||||||
|
|
||||||
/* eslint-disable indent */
|
/* eslint-disable indent */
|
||||||
|
const EmbyTabs = Object.create(HTMLDivElement.prototype);
|
||||||
const buttonClass = 'emby-tab-button';
|
const buttonClass = 'emby-tab-button';
|
||||||
const activeButtonClass = buttonClass + '-active';
|
const activeButtonClass = buttonClass + '-active';
|
||||||
|
|
||||||
|
|
@ -143,181 +144,182 @@ import '../../assets/css/scrollstyles.css';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class EmbyTabs extends HTMLDivElement {
|
EmbyTabs.createdCallback = function () {
|
||||||
createdCallback() {
|
if (this.classList.contains('emby-tabs')) {
|
||||||
if (this.classList.contains('emby-tabs')) {
|
return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.classList.add('emby-tabs');
|
|
||||||
this.classList.add('focusable');
|
|
||||||
|
|
||||||
dom.addEventListener(this, 'click', onClick, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
|
|
||||||
dom.addEventListener(this, 'focusout', onFocusOut);
|
|
||||||
}
|
}
|
||||||
|
this.classList.add('emby-tabs');
|
||||||
|
this.classList.add('focusable');
|
||||||
|
|
||||||
focus() {
|
dom.addEventListener(this, 'click', onClick, {
|
||||||
const selected = this.querySelector('.' + activeButtonClass);
|
passive: true
|
||||||
|
});
|
||||||
|
|
||||||
if (this.lastFocused) {
|
dom.addEventListener(this, 'focusout', onFocusOut);
|
||||||
focusManager.focus(this.lastFocused);
|
};
|
||||||
} else if (this.selectedTab) {
|
|
||||||
focusManager.focus(this.selectedTab);
|
EmbyTabs.focus = function onFocusIn() {
|
||||||
} else {
|
const selectedTab = this.querySelector('.' + activeButtonClass);
|
||||||
focusManager.autoFocus(this);
|
const lastFocused = this.querySelector('.lastFocused');
|
||||||
|
|
||||||
|
if (lastFocused) {
|
||||||
|
focusManager.focus(lastFocused);
|
||||||
|
} else if (selectedTab) {
|
||||||
|
focusManager.focus(selectedTab);
|
||||||
|
} else {
|
||||||
|
focusManager.autoFocus(this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.refresh = function () {
|
||||||
|
if (this.scroller) {
|
||||||
|
this.scroller.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.attachedCallback = function () {
|
||||||
|
initScroller(this);
|
||||||
|
|
||||||
|
const current = this.querySelector('.' + activeButtonClass);
|
||||||
|
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
||||||
|
|
||||||
|
if (currentIndex !== -1) {
|
||||||
|
this.selectedTabIndex = currentIndex;
|
||||||
|
|
||||||
|
const tabButtons = this.querySelectorAll('.' + buttonClass);
|
||||||
|
|
||||||
|
const newTabButton = tabButtons[currentIndex];
|
||||||
|
|
||||||
|
if (newTabButton) {
|
||||||
|
setActiveTabButton(newTabButton);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
if (!this.readyFired) {
|
||||||
if (this.scroller) {
|
this.readyFired = true;
|
||||||
this.scroller.reload();
|
this.dispatchEvent(new CustomEvent('ready', {}));
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.detachedCallback = function () {
|
||||||
|
if (this.scroller) {
|
||||||
|
this.scroller.destroy();
|
||||||
|
this.scroller = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
attachedCallback() {
|
dom.removeEventListener(this, 'click', onClick, {
|
||||||
console.warn(this);
|
passive: true
|
||||||
initScroller(this);
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const current = this.querySelector('.' + activeButtonClass);
|
function getSelectedTabButton(elem) {
|
||||||
const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
|
return elem.querySelector('.' + activeButtonClass);
|
||||||
|
}
|
||||||
|
|
||||||
if (currentIndex !== -1) {
|
EmbyTabs.selectedIndex = function (selected, triggerEvent) {
|
||||||
this.selectedTabIndex = currentIndex;
|
const tabs = this;
|
||||||
|
|
||||||
const tabButtons = this.querySelectorAll('.' + buttonClass);
|
if (selected == null) {
|
||||||
|
return tabs.selectedTabIndex || 0;
|
||||||
const newTabButton = tabButtons[currentIndex];
|
|
||||||
|
|
||||||
if (newTabButton) {
|
|
||||||
setActiveTabButton(newTabButton);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.readyFired) {
|
|
||||||
this.readyFired = true;
|
|
||||||
this.dispatchEvent(new CustomEvent('ready', {}));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
detachedCallback() {
|
const current = tabs.selectedIndex();
|
||||||
if (this.scroller) {
|
|
||||||
this.scroller.destroy();
|
|
||||||
this.scroller = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
dom.removeEventListener(this, 'click', onClick, {
|
tabs.selectedTabIndex = selected;
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getSelectedTabButton(elem) {
|
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
||||||
return elem.querySelector('.' + activeButtonClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedIndex(selected, triggerEvent) {
|
if (current === selected || triggerEvent === false) {
|
||||||
const tabs = this;
|
triggerBeforeTabChange(tabs, selected, current);
|
||||||
|
|
||||||
if (selected == null) {
|
|
||||||
return tabs.selectedTabIndex || 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
const current = tabs.selectedIndex();
|
|
||||||
|
|
||||||
tabs.selectedTabIndex = selected;
|
|
||||||
|
|
||||||
const tabButtons = tabs.querySelectorAll('.' + buttonClass);
|
|
||||||
|
|
||||||
if (current === selected || triggerEvent === false) {
|
|
||||||
triggerBeforeTabChange(tabs, selected, current);
|
|
||||||
|
|
||||||
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
|
||||||
detail: {
|
|
||||||
selectedTabIndex: selected
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
const currentTabButton = tabButtons[current];
|
|
||||||
setActiveTabButton(tabButtons[selected]);
|
|
||||||
|
|
||||||
if (current !== selected && currentTabButton) {
|
|
||||||
currentTabButton.classList.remove(activeButtonClass);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
onClick.call(tabs, {
|
|
||||||
target: tabButtons[selected]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getSibling(elem, method) {
|
|
||||||
let sibling = elem[method];
|
|
||||||
|
|
||||||
while (sibling) {
|
|
||||||
if (sibling.classList.contains(buttonClass)) {
|
|
||||||
if (!sibling.classList.contains('hide')) {
|
|
||||||
return sibling;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sibling = sibling[method];
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectNext() {
|
|
||||||
const current = this.getSelectedTabButton(this);
|
|
||||||
|
|
||||||
const sibling = this.getSibling(current, 'nextSibling');
|
|
||||||
|
|
||||||
if (sibling) {
|
|
||||||
onClick.call(this, {
|
|
||||||
target: sibling
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
selectPrevious() {
|
|
||||||
const current = this.getSelectedTabButton(this);
|
|
||||||
|
|
||||||
const sibling = this.getSibling(current, 'previousSibling');
|
|
||||||
|
|
||||||
if (sibling) {
|
|
||||||
onClick.call(this, {
|
|
||||||
target: sibling
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
triggerBeforeTabChange(selected) {
|
|
||||||
const tabs = this;
|
|
||||||
|
|
||||||
triggerBeforeTabChange(tabs, tabs.selectedIndex());
|
|
||||||
}
|
|
||||||
|
|
||||||
triggerTabChange(selected) {
|
|
||||||
const tabs = this;
|
|
||||||
|
|
||||||
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
||||||
detail: {
|
detail: {
|
||||||
selectedTabIndex: tabs.selectedIndex()
|
selectedTabIndex: selected
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
}
|
|
||||||
|
|
||||||
setTabEnabled(index, enabled) {
|
const currentTabButton = tabButtons[current];
|
||||||
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
setActiveTabButton(tabButtons[selected]);
|
||||||
|
|
||||||
if (enabled) {
|
if (current !== selected && currentTabButton) {
|
||||||
btn.classList.remove('hide');
|
currentTabButton.classList.remove(activeButtonClass);
|
||||||
} else {
|
|
||||||
btn.classList.remove('add');
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
onClick.call(tabs, {
|
||||||
|
target: tabButtons[selected]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSibling(elem, method) {
|
||||||
|
let sibling = elem[method];
|
||||||
|
|
||||||
|
while (sibling) {
|
||||||
|
if (sibling.classList.contains(buttonClass)) {
|
||||||
|
if (!sibling.classList.contains('hide')) {
|
||||||
|
return sibling;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sibling = sibling[method];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('emby-tabs', EmbyTabs, { extends: 'div' });
|
EmbyTabs.selectNext = function () {
|
||||||
|
const current = getSelectedTabButton(this);
|
||||||
|
|
||||||
|
const sibling = getSibling(current, 'nextSibling');
|
||||||
|
|
||||||
|
if (sibling) {
|
||||||
|
onClick.call(this, {
|
||||||
|
target: sibling
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.selectPrevious = function () {
|
||||||
|
const current = getSelectedTabButton(this);
|
||||||
|
|
||||||
|
const sibling = getSibling(current, 'previousSibling');
|
||||||
|
|
||||||
|
if (sibling) {
|
||||||
|
onClick.call(this, {
|
||||||
|
target: sibling
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.triggerBeforeTabChange = function (selected) {
|
||||||
|
const tabs = this;
|
||||||
|
|
||||||
|
triggerBeforeTabChange(tabs, tabs.selectedIndex());
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.triggerTabChange = function (selected) {
|
||||||
|
const tabs = this;
|
||||||
|
|
||||||
|
tabs.dispatchEvent(new CustomEvent('tabchange', {
|
||||||
|
detail: {
|
||||||
|
selectedTabIndex: tabs.selectedIndex()
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
EmbyTabs.setTabEnabled = function (index, enabled) {
|
||||||
|
const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
|
||||||
|
|
||||||
|
if (enabled) {
|
||||||
|
btn.classList.remove('hide');
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('add');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.registerElement('emby-tabs', {
|
||||||
|
prototype: EmbyTabs,
|
||||||
|
extends: 'div'
|
||||||
|
});
|
||||||
|
|
||||||
/* eslint-enable indent */
|
/* eslint-enable indent */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue