From 69507a0bd99f403d34531241fe1c9de4a25092f6 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 16:32:57 +0100 Subject: [PATCH 1/7] Migration of emby-checkbox, textarea, toggle to ES6 Modules --- package.json | 3 +++ src/elements/emby-checkbox/emby-checkbox.js | 11 ++++++++--- src/elements/emby-textarea/emby-textarea.js | 12 +++++++++--- src/elements/emby-toggle/emby-toggle.js | 9 ++++++--- 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 230eee3f21..e65c362ae0 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,9 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/elements/emby-checkbox/emby-checkbox.js", + "src/elements/emby-textarea/emby-textarea.js", + "src/elements/emby-toggle/emby-toggle.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index 4d02d56163..3ba35ff8a6 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -1,5 +1,9 @@ -define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-checkbox'; +import 'registerElement'; + +/* eslint-disable indent */ var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); @@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b prototype: EmbyCheckboxPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js index 87a3d7fcee..9e813ad045 100644 --- a/src/elements/emby-textarea/emby-textarea.js +++ b/src/elements/emby-textarea/emby-textarea.js @@ -1,5 +1,10 @@ -define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'emby-input'], function (layoutManager, browser) { - 'use strict'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import 'css!./emby-textarea'; +import 'registerElement'; +import 'emby-input'; + +/* eslint-disable indent */ function autoGrow(textarea, maxLines) { var self = this; @@ -136,4 +141,5 @@ define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement', 'e prototype: EmbyTextAreaPrototype, extends: 'textarea' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-toggle/emby-toggle.js b/src/elements/emby-toggle/emby-toggle.js index bd7eba3078..5b9ab35394 100644 --- a/src/elements/emby-toggle/emby-toggle.js +++ b/src/elements/emby-toggle/emby-toggle.js @@ -1,5 +1,7 @@ -define(['css!./emby-toggle', 'registerElement'], function () { - 'use strict'; +import 'css!./emby-toggle'; +import 'registerElement'; + +/* eslint-disable indent */ var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype); @@ -47,4 +49,5 @@ define(['css!./emby-toggle', 'registerElement'], function () { prototype: EmbyTogglePrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ From 8d17c6fc6f533eceb55eeb8f1805d675d4513481 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 16:44:47 +0100 Subject: [PATCH 2/7] fix lint --- src/elements/emby-checkbox/emby-checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index 3ba35ff8a6..1f7d70e7ec 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -2,7 +2,7 @@ import browser from 'browser'; import dom from 'dom'; import 'css!./emby-checkbox'; import 'registerElement'; - + /* eslint-disable indent */ var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); From f2669cd53006bd694bff4d8c2516deadf7bf34b0 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 17:41:33 +0100 Subject: [PATCH 3/7] migrate emby-radio, scroller and tabs to ES6 modules --- package.json | 3 +++ src/elements/emby-radio/emby-radio.js | 10 +++++++--- src/elements/emby-scroller/emby-scroller.js | 15 ++++++++++++--- src/elements/emby-tabs/emby-tabs.js | 15 ++++++++++++--- 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 230eee3f21..679e39f481 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,9 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/elements/emby-tabs/emby-tabs.js", + "src/elements/emby-scroller/emby-scroller.js", + "src/elements/emby-radio/emby-radio.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 46a3e3826c..7e30b2796f 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,5 +1,8 @@ -define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-radio'; +import 'registerElement'; + +/* eslint-disable indent */ var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); @@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou prototype: EmbyRadioPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js index 3df40fa6c2..b9ea7ecd4c 100644 --- a/src/elements/emby-scroller/emby-scroller.js +++ b/src/elements/emby-scroller/emby-scroller.js @@ -1,5 +1,13 @@ -define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) { - 'use strict'; +import scroller from 'scroller'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import inputManager from 'inputManager'; +import focusManager from 'focusManager'; +import browser from 'browser'; +import 'registerElement'; +import 'css!./emby-scroller'; + +/* eslint-disable indent */ var ScrollerPrototype = Object.create(HTMLDivElement.prototype); @@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro prototype: ScrollerPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index 5e03c3f096..4c55962783 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -1,5 +1,13 @@ -define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) { - 'use strict'; +import dom from 'dom'; +import scroller from 'scroller'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import 'registerElement'; +import 'css!./emby-tabs'; +import 'scrollStyles'; + +/* eslint-disable indent */ var EmbyTabs = Object.create(HTMLDivElement.prototype); var buttonClass = 'emby-tab-button'; @@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register prototype: EmbyTabs, extends: 'div' }); -}); + +/* eslint-enable indent */ From 85b86712949ddb999678e044aef1f6c98add38f6 Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 10 Jul 2020 20:05:00 +0100 Subject: [PATCH 4/7] update var declerations --- src/elements/emby-checkbox/emby-checkbox.js | 22 ++++++++-------- src/elements/emby-textarea/emby-textarea.js | 28 ++++++++++----------- src/elements/emby-toggle/emby-toggle.js | 6 ++--- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index 1f7d70e7ec..af611917ab 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -5,7 +5,7 @@ import 'registerElement'; /* eslint-disable indent */ - var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); + let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { // Don't submit form on enter @@ -23,10 +23,10 @@ import 'registerElement'; } } - var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; + const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; function forceRefresh(loading) { - var elem = this.parentNode; + let elem = this.parentNode; elem.style.webkitAnimationName = 'repaintChrome'; elem.style.webkitAnimationDelay = (loading === true ? '500ms' : ''); @@ -47,22 +47,22 @@ import 'registerElement'; this.classList.add('emby-checkbox'); - var labelElement = this.parentNode; + const labelElement = this.parentNode; labelElement.classList.add('emby-checkbox-label'); - var labelTextElement = labelElement.querySelector('span'); + const labelTextElement = labelElement.querySelector('span'); - var outlineClass = 'checkboxOutline'; + const outlineClass = 'checkboxOutline'; - var customClass = this.getAttribute('data-outlineclass'); + const customClass = this.getAttribute('data-outlineclass'); if (customClass) { outlineClass += ' ' + customClass; } - var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; - var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; - var checkHtml = ''; - var uncheckedHtml = ''; + const checkedIcon = this.getAttribute('data-checkedicon') || 'check'; + const uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; + const checkHtml = ''; + const uncheckedHtml = ''; labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); labelTextElement.classList.add('checkboxLabel'); diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js index 9e813ad045..3b7624e74a 100644 --- a/src/elements/emby-textarea/emby-textarea.js +++ b/src/elements/emby-textarea/emby-textarea.js @@ -7,7 +7,7 @@ import 'emby-input'; /* eslint-disable indent */ function autoGrow(textarea, maxLines) { - var self = this; + const self = this; if (maxLines === undefined) { maxLines = 999; @@ -19,17 +19,17 @@ import 'emby-input'; * @returns {number} */ self.getOffset = function (textarea) { - var style = window.getComputedStyle(textarea, null); - var props = ['paddingTop', 'paddingBottom']; - var offset = 0; + const style = window.getComputedStyle(textarea, null); + const props = ['paddingTop', 'paddingBottom']; + let offset = 0; - for (var i = 0; i < props.length; i++) { + for (let i = 0; i < props.length; i++) { offset += parseInt(style[props[i]]); } return offset; }; - var offset; + let offset; function reset() { textarea.rows = 1; offset = self.getOffset(textarea); @@ -48,8 +48,8 @@ import 'emby-input'; textarea.rows = 3; return; } - var newHeight = 0; - var hasGrown = false; + let newHeight = 0; + let hasGrown = false; if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) { textarea.style.overflowY = 'scroll'; @@ -72,17 +72,17 @@ import 'emby-input'; autogrowFn(); } - var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype); + const EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype); - var elementId = 0; + let elementId = 0; if (Object.getOwnPropertyDescriptor && Object.defineProperty) { - var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value'); + const descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.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); @@ -113,8 +113,8 @@ import 'emby-input'; this.rows = 1; this.classList.add('emby-textarea'); - var parentNode = this.parentNode; - var label = this.ownerDocument.createElement('label'); + const parentNode = this.parentNode; + const label = this.ownerDocument.createElement('label'); label.innerHTML = this.getAttribute('label') || ''; label.classList.add('textareaLabel'); diff --git a/src/elements/emby-toggle/emby-toggle.js b/src/elements/emby-toggle/emby-toggle.js index 5b9ab35394..99856923e9 100644 --- a/src/elements/emby-toggle/emby-toggle.js +++ b/src/elements/emby-toggle/emby-toggle.js @@ -3,7 +3,7 @@ import 'registerElement'; /* eslint-disable indent */ - var EmbyTogglePrototype = Object.create(HTMLInputElement.prototype); + const EmbyTogglePrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { @@ -31,11 +31,11 @@ import 'registerElement'; this.classList.add('mdl-switch__input'); - var labelElement = this.parentNode; + const labelElement = this.parentNode; labelElement.classList.add('mdl-switch'); labelElement.classList.add('mdl-js-switch'); - var labelTextElement = labelElement.querySelector('span'); + const labelTextElement = labelElement.querySelector('span'); labelElement.insertAdjacentHTML('beforeend', '
'); From abcc8b6c60449d0bda80f1269ce54101d947b520 Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 10 Jul 2020 20:07:32 +0100 Subject: [PATCH 5/7] fix lint --- src/elements/emby-checkbox/emby-checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index af611917ab..b22ff151af 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -52,7 +52,7 @@ import 'registerElement'; const labelTextElement = labelElement.querySelector('span'); - const outlineClass = 'checkboxOutline'; + let outlineClass = 'checkboxOutline'; const customClass = this.getAttribute('data-outlineclass'); if (customClass) { From 61af6779e52a71bfbb58775ab50d51e593e56fc7 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 16:55:53 +0100 Subject: [PATCH 6/7] migrate emby-progressbar, itemrefreshindicator, progressring and slider to ES6 modules --- package.json | 4 + .../emby-itemrefreshindicator.js | 22 +++-- .../emby-progressbar/emby-progressbar.js | 20 ++-- .../emby-progressring/emby-progressring.js | 20 ++-- src/elements/emby-slider/emby-slider.js | 94 ++++++++++--------- 5 files changed, 91 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 230eee3f21..de1c2e1fef 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,10 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/elements/emby-progressbar/emby-progressbar.js", + "src/elements/emby-progressring/emby-progressring.js", + "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", + "src/elements/emby-slider/emby-slider.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js index 9864dbbb67..493d291ce0 100644 --- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js +++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js @@ -1,16 +1,21 @@ -define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) { - 'use strict'; +import EmbyProgressRing from 'emby-progressring'; +import dom from 'dom'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'registerElement'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl function onRefreshProgress(e, apiClient, info) { - var indicator = this; + const indicator = this; if (!indicator.itemId) { indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id'); @@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl if (info.ItemId === indicator.itemId) { - var progress = parseFloat(info.Progress); + const progress = parseFloat(info.Progress); if (progress && progress < 100) { this.classList.remove('hide'); @@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl } } - var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); + let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); EmbyItemRefreshIndicatorPrototype.createdCallback = function () { @@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl prototype: EmbyItemRefreshIndicatorPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-progressbar/emby-progressbar.js b/src/elements/emby-progressbar/emby-progressbar.js index a799f82bdd..54fcb1999e 100644 --- a/src/elements/emby-progressbar/emby-progressbar.js +++ b/src/elements/emby-progressbar/emby-progressbar.js @@ -1,20 +1,19 @@ -define([], function() { - 'use strict'; +/* eslint-disable indent */ - var ProgressBarPrototype = Object.create(HTMLDivElement.prototype); + let ProgressBarPrototype = Object.create(HTMLDivElement.prototype); function onAutoTimeProgress() { - var start = parseInt(this.getAttribute('data-starttime')); - var end = parseInt(this.getAttribute('data-endtime')); + const start = parseInt(this.getAttribute('data-starttime')); + const end = parseInt(this.getAttribute('data-endtime')); - var now = new Date().getTime(); - var total = end - start; - var pct = 100 * ((now - start) / total); + const now = new Date().getTime(); + const total = end - start; + let pct = 100 * ((now - start) / total); pct = Math.min(100, pct); pct = Math.max(0, pct); - var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); + const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); itemProgressBarForeground.style.width = pct + '%'; } @@ -39,4 +38,5 @@ define([], function() { prototype: ProgressBarPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index edc635947c..698a8b3cd7 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,12 +1,15 @@ -define(['require', 'css!./emby-progressring', 'registerElement'], function (require) { - 'use strict'; +import require from 'require'; +import 'css!./emby-progressring'; +import 'webcomponents'; - var EmbyProgressRing = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + let EmbyProgressRing = Object.create(HTMLDivElement.prototype); EmbyProgressRing.createdCallback = function () { this.classList.add('progressring'); - var instance = this; + const instance = this; require(['text!./emby-progressring.template.html'], function (template) { instance.innerHTML = template; @@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ progress = Math.floor(progress); - var angle; + let angle; if (progress < 25) { angle = -90 + (progress / 100) * 360; @@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ EmbyProgressRing.detachedCallback = function () { - var observer = this.observer; + let observer = this.observer; if (observer) { // later, you can stop observing @@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ extends: 'div' }); - return EmbyProgressRing; -}); + export default EmbyProgressRing; + +/* eslint-enable indent */ diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 1b78fca0ae..e872f6c78b 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -1,15 +1,22 @@ -define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import keyboardnavigation from 'keyboardnavigation'; +import 'css!./emby-slider'; +import 'webcomponents'; +import 'emby-input'; - var EmbySliderPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ - var supportsValueSetOverride = false; + let EmbySliderPrototype = Object.create(HTMLInputElement.prototype); - var enableWidthWithTransform; + let supportsValueSetOverride = false; + + let enableWidthWithTransform; 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) { supportsValueSetOverride = true; @@ -24,14 +31,14 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli * @return {number} slider fraction */ function mapClientToFraction(range, clientX) { - var rect = range.sliderBubbleTrack.getBoundingClientRect(); + const rect = range.sliderBubbleTrack.getBoundingClientRect(); - var fraction = (clientX - rect.left) / rect.width; + let fraction = (clientX - rect.left) / rect.width; // Snap to step - var valueRange = range.max - range.min; + const valueRange = range.max - range.min; if (range.step !== 'any' && valueRange !== 0) { - var step = (range.step || 1) / valueRange; + const step = (range.step || 1) / valueRange; fraction = Math.round(fraction / step) * step; } @@ -46,7 +53,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli * @return {number} slider value */ function mapFractionToValue(range, fraction) { - var value = (range.max - range.min) * fraction; + let value = (range.max - range.min) * fraction; // Snap to step if (range.step !== 'any') { @@ -67,8 +74,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli * @return {number} slider fraction */ function mapValueToFraction(range, value) { - var valueRange = range.max - range.min; - var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0; + const valueRange = range.max - range.min; + const fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0; return Math.min(Math.max(fraction, 0), 1); } @@ -84,18 +91,18 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli return; } - var range = this; - var value = range.value; + const range = this; + const value = range.value; // put this on a callback. Doing it within the event sometimes causes the slider to get hung up and not respond // Keep only one per slider frame request cancelAnimationFrame(range.updateValuesFrame); range.updateValuesFrame = requestAnimationFrame(function () { - var backgroundLower = range.backgroundLower; + let backgroundLower = range.backgroundLower; if (backgroundLower) { - var fraction = (value - range.min) / (range.max - range.min); + let fraction = (value - range.min) / (range.max - range.min); if (enableWidthWithTransform) { backgroundLower.style.transform = 'scaleX(' + (fraction) + ')'; @@ -110,10 +117,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli function updateBubble(range, value, bubble, bubbleText) { requestAnimationFrame(function () { - var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect(); - var bubbleRect = bubble.getBoundingClientRect(); + const bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect(); + const bubbleRect = bubble.getBoundingClientRect(); - var bubblePos = bubbleTrackRect.width * value / 100; + let bubblePos = bubbleTrackRect.width * value / 100; bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2); bubble.style.left = bubblePos + 'px'; @@ -158,10 +165,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli this.classList.add('show-focus'); } - var containerElement = this.parentNode; + const containerElement = this.parentNode; containerElement.classList.add('mdl-slider-container'); - var htmlToInsert = ''; + let htmlToInsert = ''; htmlToInsert += '
'; htmlToInsert += '
'; @@ -187,9 +194,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack'); this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower'); this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper'); - var sliderBubble = containerElement.querySelector('.sliderBubble'); + const sliderBubble = containerElement.querySelector('.sliderBubble'); - var hasHideClass = sliderBubble.classList.contains('hide'); + let hasHideClass = sliderBubble.classList.contains('hide'); dom.addEventListener(this, 'input', function (e) { this.dragging = true; @@ -198,7 +205,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli updateValues.call(this); } - var bubbleValue = mapValueToFraction(this, this.value) * 100; + const bubbleValue = mapValueToFraction(this, this.value) * 100; updateBubble(this, bubbleValue, sliderBubble); if (hasHideClass) { @@ -223,10 +230,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli passive: true }); + /* eslint-disable-next-line compat/compat */ dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) { if (!this.dragging) { - var bubbleValue = mapClientToFraction(this, e.clientX) * 100; + const bubbleValue = mapClientToFraction(this, e.clientX) * 100; updateBubble(this, bubbleValue, sliderBubble); @@ -240,6 +248,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli passive: true }); + /* eslint-disable-next-line compat/compat */ dom.addEventListener(this, (window.PointerEvent ? 'pointerleave' : 'mouseleave'), function () { sliderBubble.classList.add('hide'); hasHideClass = true; @@ -256,7 +265,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli this.touched = true; - var fraction = mapClientToFraction(this, e.targetTouches[0].clientX); + const fraction = mapClientToFraction(this, e.targetTouches[0].clientX); this.value = mapFractionToValue(this, fraction); this.dispatchEvent(new Event('input', { @@ -276,7 +285,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli return; } - var fraction = mapClientToFraction(this, e.targetTouches[0].clientX); + const fraction = mapClientToFraction(this, e.targetTouches[0].clientX); this.value = mapFractionToValue(this, fraction); this.dispatchEvent(new Event('input', { @@ -288,7 +297,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli }); dom.addEventListener(this, 'touchend', function (e) { - var range = this; + const range = this; setTimeout(function () { range.touched = false; @@ -314,12 +323,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli * Keyboard dragging timeout. * After this delay "change" event will be fired. */ - var KeyboardDraggingTimeout = 1000; + const KeyboardDraggingTimeout = 1000; /** * Keyboard dragging timer. */ - var keyboardDraggingTimer; + let keyboardDraggingTimer; /** * Start keyboard dragging. @@ -346,7 +355,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli elem.keyboardDragging = false; - var event = new Event('change', { + const event = new Event('change', { bubbles: true, cancelable: false }); @@ -364,7 +373,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli elem.value = Math.max(elem.min, Math.min(elem.max, parseFloat(elem.value) + delta)); - var event = new Event('input', { + const event = new Event('input', { bubbles: true, cancelable: false }); @@ -414,10 +423,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli function setRange(elem, startPercent, endPercent) { - var style = elem.style; + const style = elem.style; style.left = Math.max(startPercent, 0) + '%'; - var widthPercent = endPercent - startPercent; + const widthPercent = endPercent - startPercent; style.width = Math.max(Math.min(widthPercent, 100), 0) + '%'; } @@ -438,7 +447,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli EmbySliderPrototype.setBufferedRanges = function (ranges, runtime, position) { - var elem = this.backgroundUpper; + const elem = this.backgroundUpper; if (!elem) { return; } @@ -449,9 +458,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli position = (position / runtime) * 100; } - for (var i = 0, length = ranges.length; i < length; i++) { - - var range = ranges[i]; + for (const range in ranges) { if (position != null) { if (position >= range.end) { @@ -468,7 +475,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli EmbySliderPrototype.setIsClear = function (isClear) { - var backgroundLower = this.backgroundLower; + const backgroundLower = this.backgroundLower; if (backgroundLower) { if (isClear) { backgroundLower.classList.add('mdl-slider-background-lower-clear'); @@ -479,7 +486,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli }; function startInterval(range) { - var interval = range.interval; + const interval = range.interval; if (interval) { clearInterval(interval); } @@ -488,7 +495,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli EmbySliderPrototype.detachedCallback = function () { - var interval = this.interval; + const interval = this.interval; if (interval) { clearInterval(interval); } @@ -501,4 +508,5 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli prototype: EmbySliderPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ From 5bc2a439fd259ad41e1281a8bce4bc03d3f1e615 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 11 Jul 2020 11:23:28 +0100 Subject: [PATCH 7/7] update var declerations --- src/elements/emby-radio/emby-radio.js | 10 ++-- src/elements/emby-scroller/emby-scroller.js | 24 ++++---- src/elements/emby-tabs/emby-tabs.js | 64 ++++++++++----------- 3 files changed, 49 insertions(+), 49 deletions(-) diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 7e30b2796f..d989326d25 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -4,7 +4,7 @@ import 'registerElement'; /* eslint-disable indent */ - var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); + let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { @@ -26,7 +26,7 @@ import 'registerElement'; } EmbyRadioPrototype.attachedCallback = function () { - var showFocus = !layoutManager.mobile; + const showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -36,7 +36,7 @@ import 'registerElement'; this.classList.add('mdl-radio__button'); - var labelElement = this.parentNode; + let labelElement = this.parentNode; //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect'); labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); @@ -45,12 +45,12 @@ import 'registerElement'; labelElement.classList.add('show-focus'); } - var labelTextElement = labelElement.querySelector('span'); + let labelTextElement = labelElement.querySelector('span'); labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('mdl-radio__label'); - var html = ''; + let html = ''; html += '
'; diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js index b9ea7ecd4c..407031a55f 100644 --- a/src/elements/emby-scroller/emby-scroller.js +++ b/src/elements/emby-scroller/emby-scroller.js @@ -9,7 +9,7 @@ import 'css!./emby-scroller'; /* eslint-disable indent */ - var ScrollerPrototype = Object.create(HTMLDivElement.prototype); + let ScrollerPrototype = Object.create(HTMLDivElement.prototype); ScrollerPrototype.createdCallback = function () { this.classList.add('emby-scroller'); @@ -17,7 +17,7 @@ import 'css!./emby-scroller'; function initCenterFocus(elem, scrollerInstance) { dom.addEventListener(elem, 'focus', function (e) { - var focused = focusManager.focusableParent(e.target); + const focused = focusManager.focusableParent(e.target); if (focused) { scrollerInstance.toCenter(focused); } @@ -88,7 +88,7 @@ import 'css!./emby-scroller'; }; function onInputCommand(e) { - var cmd = e.detail.command; + const cmd = e.detail.command; if (cmd === 'end') { focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands')); e.preventDefault(); @@ -109,18 +109,18 @@ import 'css!./emby-scroller'; inputManager.on(this, onInputCommand); } - var horizontal = this.getAttribute('data-horizontal') !== 'false'; + const horizontal = this.getAttribute('data-horizontal') !== 'false'; - var slider = this.querySelector('.scrollSlider'); + const slider = this.querySelector('.scrollSlider'); if (horizontal) { slider.style['white-space'] = 'nowrap'; } - var scrollFrame = this; - var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false'; + const scrollFrame = this; + const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false'; - var options = { + const options = { horizontal: horizontal, mouseDragging: 1, mouseWheel: this.getAttribute('data-mousewheel') !== 'false', @@ -162,14 +162,14 @@ import 'css!./emby-scroller'; } ScrollerPrototype.pause = function () { - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.pause(); } }; ScrollerPrototype.resume = function () { - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.resume(); } @@ -180,13 +180,13 @@ import 'css!./emby-scroller'; inputManager.off(this, onInputCommand); } - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.destroy(); this.headroom = null; } - var scrollerInstance = this.scroller; + const scrollerInstance = this.scroller; if (scrollerInstance) { scrollerInstance.destroy(); this.scroller = null; diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index 4c55962783..c36a5c7f06 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -9,9 +9,9 @@ import 'scrollStyles'; /* eslint-disable indent */ - var EmbyTabs = Object.create(HTMLDivElement.prototype); - var buttonClass = 'emby-tab-button'; - var activeButtonClass = buttonClass + '-active'; + let EmbyTabs = Object.create(HTMLDivElement.prototype); + const buttonClass = 'emby-tab-button'; + const activeButtonClass = buttonClass + '-active'; function setActiveTabButton(tabs, newButton, oldButton, animate) { @@ -24,14 +24,14 @@ import 'scrollStyles'; } function removeActivePanelClass(tabs, index) { - var tabPanel = getTabPanel(tabs, index); + let tabPanel = getTabPanel(tabs, index); if (tabPanel) { tabPanel.classList.remove('is-active'); } } function addActivePanelClass(tabs, index) { - var tabPanel = getTabPanel(tabs, index); + let tabPanel = getTabPanel(tabs, index); if (tabPanel) { tabPanel.classList.add('is-active'); } @@ -39,9 +39,9 @@ import 'scrollStyles'; function fadeInRight(elem) { - var pct = browser.mobile ? '4%' : '0.5%'; + const pct = browser.mobile ? '4%' : '0.5%'; - var keyframes = [ + const keyframes = [ { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '1', transform: 'none', offset: 1 }]; @@ -64,7 +64,7 @@ import 'scrollStyles'; removeActivePanelClass(tabs, previousIndex); } - var newPanel = getTabPanel(tabs, index); + let newPanel = getTabPanel(tabs, index); if (newPanel) { // animate new panel ? @@ -78,10 +78,10 @@ import 'scrollStyles'; function onClick(e) { - var tabs = this; + const tabs = this; - var current = tabs.querySelector('.' + activeButtonClass); - var tabButton = dom.parentWithClass(e.target, buttonClass); + const current = tabs.querySelector('.' + activeButtonClass); + const tabButton = dom.parentWithClass(e.target, buttonClass); if (tabButton && tabButton !== current) { @@ -89,11 +89,11 @@ import 'scrollStyles'; current.classList.remove(activeButtonClass); } - var previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; + const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; setActiveTabButton(tabs, tabButton, current, true); - var index = parseInt(tabButton.getAttribute('data-index')); + const index = parseInt(tabButton.getAttribute('data-index')); triggerBeforeTabChange(tabs, index, previousIndex); @@ -123,7 +123,7 @@ import 'scrollStyles'; return; } - var contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); + const contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); if (contentScrollSlider) { tabs.scroller = new scroller(tabs, { horizontal: 1, @@ -168,7 +168,7 @@ import 'scrollStyles'; EmbyTabs.focus = function () { - var selected = this.querySelector('.' + activeButtonClass); + const selected = this.querySelector('.' + activeButtonClass); if (selected) { focusManager.focus(selected); @@ -188,16 +188,16 @@ import 'scrollStyles'; initScroller(this); - var current = this.querySelector('.' + activeButtonClass); - var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0'); + 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; - var tabButtons = this.querySelectorAll('.' + buttonClass); + const tabButtons = this.querySelectorAll('.' + buttonClass); - var newTabButton = tabButtons[currentIndex]; + const newTabButton = tabButtons[currentIndex]; if (newTabButton) { setActiveTabButton(this, newTabButton, current, false); @@ -229,18 +229,18 @@ import 'scrollStyles'; EmbyTabs.selectedIndex = function (selected, triggerEvent) { - var tabs = this; + const tabs = this; if (selected == null) { return tabs.selectedTabIndex || 0; } - var current = tabs.selectedIndex(); + const current = tabs.selectedIndex(); tabs.selectedTabIndex = selected; - var tabButtons = tabs.querySelectorAll('.' + buttonClass); + const tabButtons = tabs.querySelectorAll('.' + buttonClass); if (current === selected || triggerEvent === false) { @@ -252,7 +252,7 @@ import 'scrollStyles'; } })); - var currentTabButton = tabButtons[current]; + let currentTabButton = tabButtons[current]; setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false); if (current !== selected && currentTabButton) { @@ -270,7 +270,7 @@ import 'scrollStyles'; function getSibling(elem, method) { - var sibling = elem[method]; + let sibling = elem[method]; while (sibling) { if (sibling.classList.contains(buttonClass)) { @@ -288,9 +288,9 @@ import 'scrollStyles'; EmbyTabs.selectNext = function () { - var current = getSelectedTabButton(this); + const current = getSelectedTabButton(this); - var sibling = getSibling(current, 'nextSibling'); + const sibling = getSibling(current, 'nextSibling'); if (sibling) { onClick.call(this, { @@ -301,9 +301,9 @@ import 'scrollStyles'; EmbyTabs.selectPrevious = function () { - var current = getSelectedTabButton(this); + const current = getSelectedTabButton(this); - var sibling = getSibling(current, 'previousSibling'); + const sibling = getSibling(current, 'previousSibling'); if (sibling) { onClick.call(this, { @@ -314,14 +314,14 @@ import 'scrollStyles'; EmbyTabs.triggerBeforeTabChange = function (selected) { - var tabs = this; + const tabs = this; triggerBeforeTabChange(tabs, tabs.selectedIndex()); }; EmbyTabs.triggerTabChange = function (selected) { - var tabs = this; + const tabs = this; tabs.dispatchEvent(new CustomEvent('tabchange', { detail: { @@ -332,8 +332,8 @@ import 'scrollStyles'; EmbyTabs.setTabEnabled = function (index, enabled) { - var tabs = this; - var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); + const tabs = this; + const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); if (enabled) { btn.classList.remove('hide');