Revert emby-button and emby-tabs changes

src/elements/emby-button/emby-button.js

@@ -1,3 +1,4 @@
+import 'webcomponents.js/webcomponents-lite';
 import { removeEventListener, addEventListener } from '../../scripts/dom';
 import layoutManager from '../../components/layoutManager';
 import shell from '../../scripts/shell';
@@ -5,61 +6,8 @@ import { appRouter } from '../../components/appRouter';
 import { appHost } from '../../components/apphost';
 import './emby-button.css';
 
-class EmbyButton extends HTMLButtonElement {
-    createdCallback() {
-        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, {});
-    }
-}
+const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
+const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
 
 function onAnchorClick(e) {
     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;

src/elements/emby-tabs/emby-tabs.js

@@ -1,12 +1,13 @@
+import 'webcomponents.js/webcomponents-lite';
 import dom from '../../scripts/dom';
 import scroller from '../../libraries/scroller';
 import browser from '../../scripts/browser';
 import focusManager from '../../components/focusManager';
-import 'webcomponents.js/webcomponents-lite';
 import './emby-tabs.css';
 import '../../assets/css/scrollstyles.css';
 
 /* eslint-disable indent */
+    const EmbyTabs = Object.create(HTMLDivElement.prototype);
     const buttonClass = 'emby-tab-button';
     const activeButtonClass = buttonClass + '-active';
 
@@ -143,8 +144,7 @@ import '../../assets/css/scrollstyles.css';
         }
     }
 
-    class EmbyTabs extends HTMLDivElement {
-        createdCallback() {
+    EmbyTabs.createdCallback = function () {
         if (this.classList.contains('emby-tabs')) {
             return;
         }
@@ -156,28 +156,28 @@ import '../../assets/css/scrollstyles.css';
         });
 
         dom.addEventListener(this, 'focusout', onFocusOut);
-        }
+    };
 
-        focus() {
-            const selected = this.querySelector('.' + activeButtonClass);
+    EmbyTabs.focus = function onFocusIn() {
+        const selectedTab = this.querySelector('.' + activeButtonClass);
+        const lastFocused = this.querySelector('.lastFocused');
 
-            if (this.lastFocused) {
-                focusManager.focus(this.lastFocused);
-            } else if (this.selectedTab) {
-                focusManager.focus(this.selectedTab);
+        if (lastFocused) {
+            focusManager.focus(lastFocused);
+        } else if (selectedTab) {
+            focusManager.focus(selectedTab);
         } else {
             focusManager.autoFocus(this);
         }
-        }
+    };
 
-        refresh() {
+    EmbyTabs.refresh = function () {
         if (this.scroller) {
             this.scroller.reload();
         }
-        }
+    };
 
-        attachedCallback() {
-            console.warn(this);
+    EmbyTabs.attachedCallback = function () {
         initScroller(this);
 
         const current = this.querySelector('.' + activeButtonClass);
@@ -199,9 +199,9 @@ import '../../assets/css/scrollstyles.css';
             this.readyFired = true;
             this.dispatchEvent(new CustomEvent('ready', {}));
         }
-        }
+    };
 
-        detachedCallback() {
+    EmbyTabs.detachedCallback = function () {
         if (this.scroller) {
             this.scroller.destroy();
             this.scroller = null;
@@ -210,13 +210,13 @@ import '../../assets/css/scrollstyles.css';
         dom.removeEventListener(this, 'click', onClick, {
             passive: true
         });
-        }
+    };
 
-        getSelectedTabButton(elem) {
+    function getSelectedTabButton(elem) {
         return elem.querySelector('.' + activeButtonClass);
     }
 
-        selectedIndex(selected, triggerEvent) {
+    EmbyTabs.selectedIndex = function (selected, triggerEvent) {
         const tabs = this;
 
         if (selected == null) {
@@ -249,9 +249,9 @@ import '../../assets/css/scrollstyles.css';
                 target: tabButtons[selected]
             });
         }
-        }
+    };
 
-        getSibling(elem, method) {
+    function getSibling(elem, method) {
         let sibling = elem[method];
 
         while (sibling) {
@@ -267,37 +267,37 @@ import '../../assets/css/scrollstyles.css';
         return null;
     }
 
-        selectNext() {
-            const current = this.getSelectedTabButton(this);
+    EmbyTabs.selectNext = function () {
+        const current = getSelectedTabButton(this);
 
-            const sibling = this.getSibling(current, 'nextSibling');
+        const sibling = getSibling(current, 'nextSibling');
 
         if (sibling) {
             onClick.call(this, {
                 target: sibling
             });
         }
-        }
+    };
 
-        selectPrevious() {
-            const current = this.getSelectedTabButton(this);
+    EmbyTabs.selectPrevious = function () {
+        const current = getSelectedTabButton(this);
 
-            const sibling = this.getSibling(current, 'previousSibling');
+        const sibling = getSibling(current, 'previousSibling');
 
         if (sibling) {
             onClick.call(this, {
                 target: sibling
             });
         }
-        }
+    };
 
-        triggerBeforeTabChange(selected) {
+    EmbyTabs.triggerBeforeTabChange = function (selected) {
         const tabs = this;
 
         triggerBeforeTabChange(tabs, tabs.selectedIndex());
-        }
+    };
 
-        triggerTabChange(selected) {
+    EmbyTabs.triggerTabChange = function (selected) {
         const tabs = this;
 
         tabs.dispatchEvent(new CustomEvent('tabchange', {
@@ -305,9 +305,9 @@ import '../../assets/css/scrollstyles.css';
                 selectedTabIndex: tabs.selectedIndex()
             }
         }));
-        }
+    };
 
-        setTabEnabled(index, enabled) {
+    EmbyTabs.setTabEnabled = function (index, enabled) {
         const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
 
         if (enabled) {
@@ -315,9 +315,11 @@ import '../../assets/css/scrollstyles.css';
         } else {
             btn.classList.remove('add');
         }
-        }
-    }
+    };
 
-    customElements.define('emby-tabs', EmbyTabs, { extends: 'div' });
+    document.registerElement('emby-tabs', {
+        prototype: EmbyTabs,
+        extends: 'div'
+    });
 
 /* eslint-enable indent */