From 9e2d2892654f2f019131533bcb8f0f2c96271b5e Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 15 Jul 2020 11:41:59 +0100 Subject: [PATCH 1/2] Migration of emby-buttton, paper-icon-button-light, emby-collapse, emby-imput to ES6 modules --- package.json | 4 +++ src/elements/emby-button/emby-button.js | 23 ++++++++---- .../emby-button/paper-icon-button-light.js | 12 ++++--- src/elements/emby-collapse/emby-collapse.js | 35 +++++++++++-------- src/elements/emby-input/emby-input.js | 32 ++++++++++------- 5 files changed, 67 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 51f1ae10d..bc3847441 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,10 @@ "src/elements/emby-checkbox/emby-checkbox.js", "src/elements/emby-textarea/emby-textarea.js", "src/elements/emby-toggle/emby-toggle.js", + "src/elements/emby-button/emby-button.js", + "src/elements/emby-button/paper-icon-button-light.js", + "src/elements/emby-collapse/emby-collapse.js", + "src/elements/emby-input/emby-input.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js index be52b1d51..4848f4751 100644 --- a/src/elements/emby-button/emby-button.js +++ b/src/elements/emby-button/emby-button.js @@ -1,11 +1,19 @@ -define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import shell from 'shell'; +import appRouter from 'appRouter'; +import appHost from 'apphost'; +import 'css!./emby-button'; +import 'registerElement'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); +/* eslint-disable indent */ + + const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); + const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); function onAnchorClick(e) { - var href = this.getAttribute('href') || ''; + const href = this.getAttribute('href') || ''; if (href !== '#') { if (this.getAttribute('target')) { if (!appHost.supports('targetblank')) { @@ -66,5 +74,6 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css extends: 'a' }); - return EmbyButtonPrototype; -}); + export default EmbyButtonPrototype; + +/* eslint-enable indent */ diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js index 7eda76bae..5226f13db 100644 --- a/src/elements/emby-button/paper-icon-button-light.js +++ b/src/elements/emby-button/paper-icon-button-light.js @@ -1,7 +1,10 @@ -define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-button'; +import 'registerElement'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +/* eslint-disable indent */ + + const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); EmbyButtonPrototype.createdCallback = function () { this.classList.add('paper-icon-button-light'); @@ -15,4 +18,5 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo prototype: EmbyButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js index 707e81a78..805e40afd 100644 --- a/src/elements/emby-collapse/emby-collapse.js +++ b/src/elements/emby-collapse/emby-collapse.js @@ -1,18 +1,22 @@ -define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) { - 'use strict'; +import browser from 'browser'; +import 'css!./emby-collapse'; +import 'registerElement'; +import 'emby-button'; - var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); function slideDownToShow(button, elem) { elem.classList.remove('hide'); elem.classList.add('expanded'); elem.style.height = 'auto'; - var height = elem.offsetHeight + 'px'; + const height = elem.offsetHeight + 'px'; elem.style.height = '0'; // trigger reflow - var newHeight = elem.offsetHeight; + const newHeight = elem.offsetHeight; elem.style.height = height; setTimeout(function () { @@ -24,7 +28,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun elem.style.height = 'auto'; }, 300); - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); //icon.innerHTML = 'expand_less'; icon.classList.add('emby-collapse-expandIconExpanded'); } @@ -33,7 +37,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun elem.style.height = elem.offsetHeight + 'px'; // trigger reflow - var newHeight = elem.offsetHeight; + const newHeight = elem.offsetHeight; elem.classList.remove('expanded'); elem.style.height = '0'; @@ -46,15 +50,15 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun } }, 300); - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); //icon.innerHTML = 'expand_more'; icon.classList.remove('emby-collapse-expandIconExpanded'); } function onButtonClick(e) { - var button = this; - var collapseContent = button.parentNode.querySelector('.collapseContent'); + const button = this; + const collapseContent = button.parentNode.querySelector('.collapseContent'); if (collapseContent.expanded) { collapseContent.expanded = false; @@ -73,18 +77,18 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun this.classList.add('emby-collapse'); - var collapseContent = this.querySelector('.collapseContent'); + const collapseContent = this.querySelector('.collapseContent'); if (collapseContent) { collapseContent.classList.add('hide'); } - var title = this.getAttribute('title'); + const title = this.getAttribute('title'); - var html = ''; + const html = ''; this.insertAdjacentHTML('afterbegin', html); - var button = this.querySelector('.emby-collapsible-button'); + const button = this.querySelector('.emby-collapsible-button'); button.addEventListener('click', onButtonClick); @@ -97,4 +101,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun prototype: EmbyButtonPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js index 1cef349bf..f5c60ca92 100644 --- a/src/elements/emby-input/emby-input.js +++ b/src/elements/emby-input/emby-input.js @@ -1,18 +1,23 @@ -define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-input'; +import 'registerElement'; - var EmbyInputPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ - var inputId = 0; - var supportsFloatingLabel = false; + const EmbyInputPrototype = Object.create(HTMLInputElement.prototype); + + let inputId = 0; + let supportsFloatingLabel = false; if (Object.getOwnPropertyDescriptor && Object.defineProperty) { - var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); + const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); // descriptor returning null in webos if (descriptor && descriptor.configurable) { - var baseSetMethod = descriptor.set; + const baseSetMethod = descriptor.set; descriptor.set = function (value) { baseSetMethod.call(this, value); @@ -39,9 +44,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' this.classList.add('emby-input'); - var parentNode = this.parentNode; - var document = this.ownerDocument; - var label = document.createElement('label'); + const parentNode = this.parentNode; + const document = this.ownerDocument; + const label = document.createElement('label'); label.innerHTML = this.getAttribute('label') || ''; label.classList.add('inputLabel'); label.classList.add('inputLabelUnfocused'); @@ -95,12 +100,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' function onChange() { - var label = this.labelElement; + const label = this.labelElement; if (this.value) { label.classList.remove('inputLabel-float'); } else { - var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; + const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; if (instanceSupportsFloat) { label.classList.add('inputLabel-float'); @@ -121,4 +126,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' prototype: EmbyInputPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ From 93fcca6965d99c017cd8389c68cce105970663d6 Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 17 Jul 2020 17:02:49 +0100 Subject: [PATCH 2/2] update paper button and button --- src/elements/emby-button/emby-button.js | 106 +++++++++--------- .../emby-button/paper-icon-button-light.js | 26 ++--- 2 files changed, 62 insertions(+), 70 deletions(-) diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js index 4848f4751..683c59cca 100644 --- a/src/elements/emby-button/emby-button.js +++ b/src/elements/emby-button/emby-button.js @@ -7,73 +7,69 @@ import appHost from 'apphost'; import 'css!./emby-button'; import 'registerElement'; -/* eslint-disable indent */ +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); - const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); - - function onAnchorClick(e) { - const href = this.getAttribute('href') || ''; - if (href !== '#') { - if (this.getAttribute('target')) { - if (!appHost.supports('targetblank')) { - e.preventDefault(); - shell.openUrl(href); - } - } else { - appRouter.handleAnchorClick(e); +function onAnchorClick(e) { + const href = this.getAttribute('href') || ''; + if (href !== '#') { + if (this.getAttribute('target')) { + if (!appHost.supports('targetblank')) { + e.preventDefault(); + shell.openUrl(href); } } else { - e.preventDefault(); + appRouter.handleAnchorClick(e); } + } else { + e.preventDefault(); + } +} + +EmbyButtonPrototype.createdCallback = function () { + if (this.classList.contains('emby-button')) { + return; } - EmbyButtonPrototype.createdCallback = function () { - 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'); + } +}; - 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'); - } - }; +EmbyButtonPrototype.attachedCallback = function () { + if (this.tagName === 'A') { + dom.removeEventListener(this, 'click', onAnchorClick, {}); + dom.addEventListener(this, 'click', onAnchorClick, {}); - EmbyButtonPrototype.attachedCallback = function () { - if (this.tagName === 'A') { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - dom.addEventListener(this, 'click', onAnchorClick, {}); - - if (this.getAttribute('data-autohide') === 'true') { - if (appHost.supports('externallinks')) { - this.classList.remove('hide'); - } else { - this.classList.add('hide'); - } + if (this.getAttribute('data-autohide') === 'true') { + if (appHost.supports('externallinks')) { + this.classList.remove('hide'); + } else { + this.classList.add('hide'); } } - }; + } +}; - EmbyButtonPrototype.detachedCallback = function () { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - }; +EmbyButtonPrototype.detachedCallback = function () { + dom.removeEventListener(this, 'click', onAnchorClick, {}); +}; - EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; - EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; +EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; +EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; - document.registerElement('emby-button', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); +document.registerElement('emby-button', { + prototype: EmbyButtonPrototype, + extends: 'button' +}); - document.registerElement('emby-linkbutton', { - prototype: EmbyLinkButtonPrototype, - extends: 'a' - }); +document.registerElement('emby-linkbutton', { + prototype: EmbyLinkButtonPrototype, + extends: 'a' +}); - export default EmbyButtonPrototype; - -/* eslint-enable indent */ +export default EmbyButtonPrototype; diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js index 5226f13db..609dec296 100644 --- a/src/elements/emby-button/paper-icon-button-light.js +++ b/src/elements/emby-button/paper-icon-button-light.js @@ -2,21 +2,17 @@ import layoutManager from 'layoutManager'; import 'css!./emby-button'; import 'registerElement'; -/* eslint-disable indent */ +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +EmbyButtonPrototype.createdCallback = function () { + this.classList.add('paper-icon-button-light'); - EmbyButtonPrototype.createdCallback = function () { - this.classList.add('paper-icon-button-light'); + if (layoutManager.tv) { + this.classList.add('show-focus'); + } +}; - if (layoutManager.tv) { - this.classList.add('show-focus'); - } - }; - - document.registerElement('paper-icon-button-light', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); - -/* eslint-enable indent */ +document.registerElement('paper-icon-button-light', { + prototype: EmbyButtonPrototype, + extends: 'button' +});