From 7296dbc28428690386e7f873a7feda70f46d63b1 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 9 Jun 2020 22:40:39 +0300 Subject: [PATCH 01/15] Migration imageUploader, itemidentifier and itemMediaInfo to es6 --- package.json | 3 + src/components/imageUploader/imageUploader.js | 93 +++++--- src/components/itemMediaInfo/itemMediaInfo.js | 96 +++++--- .../itemidentifier/itemidentifier.js | 225 ++++++++++-------- 4 files changed, 241 insertions(+), 176 deletions(-) diff --git a/package.json b/package.json index d9b2ed7616..41bbc013ee 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,10 @@ "src/components/autoFocuser.js", "src/components/cardbuilder/cardBuilder.js", "src/components/images/imageLoader.js", + "src/components/imageUploader/imageUploader.js", "src/components/indicators/indicators.js", + "src/components/itemidentifier/itemidentifier.js", + "src/components/itemMediaInfo/itemMediaInfo.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/playback/brightnessosd.js", "src/components/playback/mediasession.js", diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index e078a9fa30..e2d2c60f1b 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -1,10 +1,26 @@ -define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) { - 'use strict'; +/* eslint-disable indent */ - var currentItemId; - var currentServerId; - var currentFile; - var hasChanges = false; +/** + * Module for imageUploader. + * @module components/imageUploader/imageUploader + */ + +import dialogHelper from 'dialogHelper'; +import connectionManager from 'connectionManager'; +import dom from 'dom'; +import loading from 'loading'; +import scrollHelper from 'scrollHelper'; +import layoutManager from 'layoutManager'; +import globalize from 'globalize'; +import 'emby-button'; +import 'emby-select'; +import 'formDialogStyle'; +import 'css!./style'; + + let currentItemId; + let currentServerId; + let currentFile; + let hasChanges = false; function onFileReaderError(evt) { @@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' switch (evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageFileReadError')); }); break; case evt.target.error.ABORT_ERR: break; // noop default: - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageFileReadError')); }); break; @@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' function setFiles(page, files) { - var file = files[0]; + const file = files[0]; if (!file || !file.type.match('image.*')) { page.querySelector('#imageOutput').innerHTML = ''; @@ -39,23 +55,23 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' currentFile = file; - var reader = new FileReader(); + const reader = new FileReader(); reader.onerror = onFileReaderError; - reader.onloadstart = function () { + reader.onloadstart = () => { page.querySelector('#fldUpload').classList.add('hide'); }; - reader.onabort = function () { + reader.onabort = () => { loading.hide(); console.debug('File read cancelled'); }; // Closure to capture the file information. - reader.onload = (function (theFile) { - return function (e) { + reader.onload = (theFile => { + return e => { // Render thumbnail. - var html = [''].join(''); + const html = [''].join(''); page.querySelector('#imageOutput').innerHTML = html; page.querySelector('#fldUpload').classList.remove('hide'); @@ -68,14 +84,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' function onSubmit(e) { - var file = currentFile; + const file = currentFile; if (!file) { return false; } if (!file.type.startsWith('image/')) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageImageFileTypeAllowed')); }); e.preventDefault(); @@ -84,18 +100,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' loading.show(); - var dlg = dom.parentWithClass(this, 'dialog'); + const dlg = dom.parentWithClass(this, 'dialog'); - var imageType = dlg.querySelector('#selectImageType').value; + const imageType = dlg.querySelector('#selectImageType').value; if (imageType === 'None') { - require(['toast'], function(toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageImageTypeNotSelected')); }); e.preventDefault(); return false; } - connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () { + connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => { dlg.querySelector('#uploadImage').value = ''; @@ -116,21 +132,22 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' setFiles(page, this.files); }); - page.querySelector('.btnBrowse').addEventListener('click', function () { + page.querySelector('.btnBrowse').addEventListener('click', () => { page.querySelector('#uploadImage').click(); }); } - function showEditor(options, resolve, reject) { + function showEditor(options, resolve) { options = options || {}; - require(['text!./imageUploader.template.html'], function (template) { + // TODO: remove require + require(['text!./components/imageUploader/imageUploader.template.html'], template => { currentItemId = options.itemId; currentServerId = options.serverId; - var dialogOptions = { + const dialogOptions = { removeOnClose: true }; @@ -140,7 +157,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' dialogOptions.size = 'small'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); @@ -151,7 +168,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' } // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', function () { + dlg.addEventListener('close', () => { if (layoutManager.tv) { scrollHelper.centerFocus.off(dlg, false); @@ -167,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; - dlg.querySelector('.btnCancel').addEventListener('click', function () { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); }); } - return { - show: function (options) { + export function show(options) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - hasChanges = false; + hasChanges = false; - showEditor(options, resolve, reject); - }); - } - }; -}); + showEditor(options, resolve, reject); + }); + } + +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index 81c84b6a23..492b27e2cb 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -1,44 +1,61 @@ -define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) { - 'use strict'; +/* eslint-disable indent */ + +/** + * Module for display media info. + * @module components/itemMediaInfo/itemMediaInfo + */ + +import dialogHelper from 'dialogHelper'; +import layoutManager from 'layoutManager'; +import globalize from 'globalize'; +import connectionManager from 'connectionManager'; +import loading from 'loading'; +import 'emby-select'; +import 'listViewStyle'; +import 'paper-icon-button-light'; +import 'css!./../formdialog'; +import 'material-icons'; +import 'emby-button'; +import 'flexStyles'; function setMediaInfo(user, page, item) { - var html = item.MediaSources.map(function (version) { + let html = item.MediaSources.map(version => { return getMediaSourceHtml(user, item, version); }).join('
'); if (item.MediaSources.length > 1) { - html = '
' + html; + html = `
${html}`; } - var mediaInfoContent = page.querySelector('#mediaInfoContent'); + const mediaInfoContent = page.querySelector('#mediaInfoContent'); mediaInfoContent.innerHTML = html; } function getMediaSourceHtml(user, item, version) { - var html = ''; + let html = ''; if (version.Name) { - html += '

' + version.Name + '

'; + html += `

${version.Name}

`; } if (version.Container) { - html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; } if (version.Formats && version.Formats.length) { - html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; } if (version.Path && user && user.Policy.IsAdministrator) { - html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}
`; } if (version.Size) { - var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; - html += createAttribute(globalize.translate('MediaInfoSize'), size) + '
'; + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; } - for (var i = 0, length = version.MediaStreams.length; i < length; i++) { - var stream = version.MediaStreams[i]; + for (let i = 0, length = version.MediaStreams.length; i < length; i++) { + const stream = version.MediaStreams[i]; if (stream.Type === 'Data') { continue; } html += '
'; - var displayType = globalize.translate('MediaInfoStreamType' + stream.Type); - html += '

' + displayType + '

'; - var attributes = []; + const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`); + html += `

${displayType}

`; + const attributes = []; if (stream.DisplayTitle) { attributes.push(createAttribute('Title', stream.DisplayTitle)); } @@ -61,7 +78,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); } if (stream.Width || stream.Height) { - attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), stream.Width + 'x' + stream.Height)); + attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`)); } if (stream.AspectRatio && stream.Codec !== 'mjpeg') { attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); @@ -79,16 +96,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout)); } if (stream.Channels) { - attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), stream.Channels + ' ch')); + attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`)); } if (stream.BitRate && stream.Codec !== 'mjpeg') { - attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), (parseInt(stream.BitRate / 1000)) + ' kbps')); + attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000)} kbps`)); } if (stream.SampleRate) { - attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz')); + attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`)); } if (stream.BitDepth) { - attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit')); + attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`)); } if (stream.PixelFormat) { attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); @@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', } function createAttribute(label, value) { - return '' + label + '' + value + ''; + return `${label}${value}`; } - function showMediaInfoMore(itemId, serverId, template) { - var apiClient = connectionManager.getApiClient(serverId); - return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { - var dialogOptions = { + function loadMediaInfo(itemId, serverId, template) { + const apiClient = connectionManager.getApiClient(serverId); + return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { + const dialogOptions = { size: 'small', removeOnClose: true, scrollY: false @@ -130,35 +147,36 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); - var html = ''; + let html = ''; html += globalize.translateDocument(template, 'core'); dlg.innerHTML = html; if (layoutManager.tv) { dlg.querySelector('.formDialogContent'); } dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', function (e) { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); - apiClient.getCurrentUser().then(function (user) { + apiClient.getCurrentUser().then(user => { setMediaInfo(user, dlg, item); }); loading.hide(); }); } - function showMediaInfo(itemId, serverId) { + export function show(itemId, serverId) { loading.show(); - return new Promise(function (resolve, reject) { - require(['text!./itemMediaInfo.template.html'], function (template) { - showMediaInfoMore(itemId, serverId, template).then(resolve, reject); + return new Promise((resolve, reject) => { + // TODO: remove require + require(['text!./components/itemMediaInfo/itemMediaInfo.template.html'], template => { + loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); }); } - return { - show: showMediaInfo - }; -}); +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index b335d1dfd3..a1520928c2 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -1,15 +1,34 @@ -define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) { - 'use strict'; +/* eslint-disable indent */ - var enableFocusTransform = !browser.slow && !browser.edge; +/** + * Module for itemidentifier media item. + * @module components/itemidentifier/itemidentifier + */ - var currentItem; - var currentItemType; - var currentServerId; - var currentResolve; - var currentReject; - var hasChanges = false; - var currentSearchResult; +import dialogHelper from 'dialogHelper'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import scrollHelper from 'scrollHelper'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import browser from 'browser'; +import 'emby-input'; +import 'emby-checkbox'; +import 'paper-icon-button-light'; +import 'css!./../formdialog'; +import 'material-icons'; +import 'cardStyle'; + + const enableFocusTransform = !browser.slow && !browser.edge; + + let currentItem; + let currentItemType; + let currentServerId; + let currentResolve; + let currentReject; + let hasChanges = false; + let currentSearchResult; function getApiClient() { return connectionManager.getApiClient(currentServerId); @@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function searchForIdentificationResults(page) { - var lookupInfo = { + let lookupInfo = { ProviderIds: {} }; - var i; - var length; - var identifyField = page.querySelectorAll('.identifyField'); - var value; + let i; + let length; + const identifyField = page.querySelectorAll('.identifyField'); + let value; for (i = 0, length = identifyField.length; i < length; i++) { value = identifyField[i].value; @@ -39,9 +58,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } } - var hasId = false; + let hasId = false; - var txtLookupId = page.querySelectorAll('.txtLookupId'); + const txtLookupId = page.querySelectorAll('.txtLookupId'); for (i = 0, length = txtLookupId.length; i < length; i++) { value = txtLookupId[i].value; @@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } if (!hasId && !lookupInfo.Name) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('PleaseEnterNameOrId')); }); return; @@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', loading.show(); - var apiClient = getApiClient(); + const apiClient = getApiClient(); apiClient.ajax({ type: 'POST', - url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), + url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`), data: JSON.stringify(lookupInfo), contentType: 'application/json', dataType: 'json' - }).then(function (results) { + }).then(results => { loading.hide(); showIdentificationSearchResults(page, results); @@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function showIdentificationSearchResults(page, results) { - var identificationSearchResults = page.querySelector('.identificationSearchResults'); + const identificationSearchResults = page.querySelector('.identificationSearchResults'); page.querySelector('.popupIdentifyForm').classList.add('hide'); identificationSearchResults.classList.remove('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); - var html = ''; - var i; - var length; + let html = ''; + let i; + let length; for (i = 0, length = results.length; i < length; i++) { - var result = results[i]; + const result = results[i]; html += getSearchResultHtml(result, i); } - var elem = page.querySelector('.identificationSearchResultList'); + const elem = page.querySelector('.identificationSearchResultList'); elem.innerHTML = html; function onSearchImageClick() { - var index = parseInt(this.getAttribute('data-index')); + const index = parseInt(this.getAttribute('data-index')); - var currentResult = results[index]; + const currentResult = results[index]; if (currentItem != null) { @@ -122,7 +141,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } } - var searchImages = elem.querySelectorAll('.card'); + const searchImages = elem.querySelectorAll('.card'); for (i = 0, length = searchImages.length; i < length; i++) { searchImages[i].addEventListener('click', onSearchImageClick); @@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function showIdentifyOptions(page, identifyResult) { - var identifyOptionsForm = page.querySelector('.identifyOptionsForm'); + const identifyOptionsForm = page.querySelector('.identifyOptionsForm'); page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide'); @@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', currentSearchResult = identifyResult; - var lines = []; + const lines = []; lines.push(identifyResult.Name); if (identifyResult.ProductionYear) { lines.push(identifyResult.ProductionYear); } - var resultHtml = lines.join('
'); + let resultHtml = lines.join('
'); if (identifyResult.ImageUrl) { - var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); + const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); - resultHtml = '
' + resultHtml + '
'; + resultHtml = `
${resultHtml}
`; } page.querySelector('.selectedSearchResult').innerHTML = resultHtml; @@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', // TODO move card creation code to Card component - var html = ''; - var cssClass = 'card scalableCard'; - var cardBoxCssClass = 'cardBox'; - var padderClass; + let html = ''; + let cssClass = 'card scalableCard'; + let cardBoxCssClass = 'cardBox'; + let padderClass; if (currentItemType === 'Episode') { cssClass += ' backdropCard backdropCard-scalable'; @@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', cardBoxCssClass += ' cardBox-bottompadded'; - html += ''; + return ``; } function mapLetters(letters, vertical) { - return letters.map(function (l) { + return letters.map(l => { return getLetterButton(l, vertical); }); } @@ -48,26 +59,26 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b element.classList.add('alphaPicker-tv'); } - var vertical = element.classList.contains('alphaPicker-vertical'); + const vertical = element.classList.contains('alphaPicker-vertical'); if (!vertical) { element.classList.add('focuscontainer-x'); } - var html = ''; - var letters; + let html = ''; + let letters; - var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); + const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); - var rowClassName = 'alphaPickerRow'; + let rowClassName = 'alphaPickerRow'; if (vertical) { rowClassName += ' alphaPickerRow-vertical'; } - html += '
'; + html += `
`; if (options.mode === 'keyboard') { - html += ''; + html += ``; } else { letters = ['#']; html += mapLetters(letters, vertical).join(''); @@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b html += mapLetters(letters, vertical).join(''); if (options.mode === 'keyboard') { - html += ''; + html += ``; html += '
'; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; - html += '
'; + html += `
`; html += '
'; html += mapLetters(letters, vertical).join(''); html += '
'; @@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b element.focus = focus; } - function AlphaPicker(options) { + export class AlphaPicker { + constructor(options) { - var self = this; - this.options = options; + this.options = options; - var element = options.element; - var itemsContainer = options.itemsContainer; - var itemClass = options.itemClass; + const element = options.element; + const itemsContainer = options.itemsContainer; + const itemClass = options.itemClass; - var itemFocusValue; - var itemFocusTimeout; + let itemFocusValue; + let 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 onItemFocusTimeout() { + itemFocusTimeout = null; + this.value(itemFocusValue); } - } - function onAlphaPickerInKeyboardModeClick(e) { + let alphaFocusedElement; + let alphaFocusTimeout; - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + function onAlphaFocusTimeout() { - if (alphaPickerButton) { - var value = alphaPickerButton.getAttribute('data-value'); - - element.dispatchEvent(new CustomEvent('alphavalueclicked', { - cancelable: false, - detail: { - value: value - } - })); - } - } - - function onAlphaPickerClick(e) { - - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); - - if (alphaPickerButton) { - var value = alphaPickerButton.getAttribute('data-value'); - if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { - self.value(null, true); - } else { - self.value(value, true); - } - } - } - - function onAlphaPickerFocusIn(e) { - - if (alphaFocusTimeout) { - clearTimeout(alphaFocusTimeout); alphaFocusTimeout = null; + + if (document.activeElement === alphaFocusedElement) { + const value = alphaFocusedElement.getAttribute('data-value'); + this.value(value, true); + } } - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + function onAlphaPickerInKeyboardModeClick(e) { - if (alphaPickerButton) { - alphaFocusedElement = alphaPickerButton; - alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600); + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + const value = alphaPickerButton.getAttribute('data-value'); + + element.dispatchEvent(new CustomEvent('alphavalueclicked', { + cancelable: false, + detail: { + value + } + })); + } } - } - function onItemsFocusIn(e) { + function onAlphaPickerClick(e) { - var item = dom.parentWithClass(e.target, itemClass); + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); - if (item) { - var prefix = item.getAttribute('data-prefix'); - if (prefix && prefix.length) { - - itemFocusValue = prefix[0]; - if (itemFocusTimeout) { - clearTimeout(itemFocusTimeout); + if (alphaPickerButton) { + const value = alphaPickerButton.getAttribute('data-value'); + if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { + this.value(null, true); + } else { + this.value(value, true); } - itemFocusTimeout = setTimeout(onItemFocusTimeout, 100); } } - } - self.enabled = function (enabled) { + function onAlphaPickerFocusIn(e) { - if (enabled) { - - if (itemsContainer) { - itemsContainer.addEventListener('focus', onItemsFocusIn, true); + if (alphaFocusTimeout) { + clearTimeout(alphaFocusTimeout); + alphaFocusTimeout = null; } - if (options.mode === 'keyboard') { - element.addEventListener('click', onAlphaPickerInKeyboardModeClick); - } + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + alphaFocusedElement = alphaPickerButton; + alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600); + } + } + + function onItemsFocusIn(e) { + + const item = dom.parentWithClass(e.target, itemClass); + + if (item) { + const prefix = item.getAttribute('data-prefix'); + if (prefix && prefix.length) { + + itemFocusValue = prefix[0]; + if (itemFocusTimeout) { + clearTimeout(itemFocusTimeout); + } + itemFocusTimeout = setTimeout(onItemFocusTimeout, 100); + } + } + } + + this.enabled = function (enabled) { + + if (enabled) { + + if (itemsContainer) { + itemsContainer.addEventListener('focus', onItemsFocusIn, true); + } + + if (options.mode === 'keyboard') { + element.addEventListener('click', onAlphaPickerInKeyboardModeClick); + } + + if (options.valueChangeEvent !== 'click') { + element.addEventListener('focus', onAlphaPickerFocusIn, true); + } else { + element.addEventListener('click', onAlphaPickerClick.bind(this)); + } - if (options.valueChangeEvent !== 'click') { - element.addEventListener('focus', onAlphaPickerFocusIn, true); } else { - element.addEventListener('click', onAlphaPickerClick.bind(this)); - } - } else { - - if (itemsContainer) { - itemsContainer.removeEventListener('focus', onItemsFocusIn, true); - } - - element.removeEventListener('click', onAlphaPickerInKeyboardModeClick); - element.removeEventListener('focus', onAlphaPickerFocusIn, true); - element.removeEventListener('click', onAlphaPickerClick.bind(this)); - } - }; - - render(element, options); - - this.enabled(true); - this.visible(true); - } - - AlphaPicker.prototype.value = function (value, applyValue) { - - var element = this.options.element; - var btn; - var selected; - - if (value !== undefined) { - if (value != null) { - - value = value.toUpperCase(); - this._currentValue = value; - - if (this.options.mode !== 'keyboard') { - selected = element.querySelector('.' + selectedButtonClass); - - try { - btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); - } catch (err) { - console.error('error in querySelector: ' + err); + if (itemsContainer) { + itemsContainer.removeEventListener('focus', onItemsFocusIn, true); } - if (btn && btn !== selected) { - btn.classList.add(selectedButtonClass); + element.removeEventListener('click', onAlphaPickerInKeyboardModeClick); + element.removeEventListener('focus', onAlphaPickerFocusIn, true); + element.removeEventListener('click', onAlphaPickerClick.bind(this)); + } + }; + + render(element, options); + + this.enabled(true); + this.visible(true); + } + + value(value, applyValue) { + + const element = this.options.element; + let btn; + let selected; + + if (value !== undefined) { + if (value != null) { + + value = value.toUpperCase(); + this._currentValue = value; + + if (this.options.mode !== 'keyboard') { + selected = element.querySelector(`.${selectedButtonClass}`); + + try { + btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`); + } catch (err) { + console.error(`error in querySelector: ${err}`); + } + + if (btn && btn !== selected) { + btn.classList.add(selectedButtonClass); + } + if (selected && selected !== btn) { + selected.classList.remove(selectedButtonClass); + } } - if (selected && selected !== btn) { + } else { + this._currentValue = value; + + selected = element.querySelector(`.${selectedButtonClass}`); + if (selected) { selected.classList.remove(selectedButtonClass); } } - } else { - this._currentValue = value; - - selected = element.querySelector('.' + selectedButtonClass); - if (selected) { - selected.classList.remove(selectedButtonClass); - } } + + if (applyValue) { + element.dispatchEvent(new CustomEvent('alphavaluechanged', { + cancelable: false, + detail: { + value + } + })); + } + + return this._currentValue; } - if (applyValue) { - element.dispatchEvent(new CustomEvent('alphavaluechanged', { - cancelable: false, - detail: { - value: value - } - })); + on(name, fn) { + const element = this.options.element; + element.addEventListener(name, fn); } - return this._currentValue; - }; - - AlphaPicker.prototype.on = function (name, fn) { - var element = this.options.element; - element.addEventListener(name, fn); - }; - - AlphaPicker.prototype.off = function (name, fn) { - var element = this.options.element; - element.removeEventListener(name, fn); - }; - - AlphaPicker.prototype.visible = function (visible) { - - var element = this.options.element; - element.style.visibility = visible ? 'visible' : 'hidden'; - }; - - AlphaPicker.prototype.values = function () { - - var element = this.options.element; - var elems = element.querySelectorAll('.alphaPickerButton'); - var values = []; - for (var i = 0, length = elems.length; i < length; i++) { - - values.push(elems[i].getAttribute('data-value')); - + off(name, fn) { + const element = this.options.element; + element.removeEventListener(name, fn); } - return values; - }; + visible(visible) { - AlphaPicker.prototype.focus = function () { + const element = this.options.element; + element.style.visibility = visible ? 'visible' : 'hidden'; + } - var element = this.options.element; - focusManager.autoFocus(element, true); - }; + values() { - AlphaPicker.prototype.destroy = function () { + const element = this.options.element; + const elems = element.querySelectorAll('.alphaPickerButton'); + const values = []; + for (let i = 0, length = elems.length; i < length; i++) { - var element = this.options.element; - this.enabled(false); - element.classList.remove('focuscontainer-x'); - this.options = null; - }; + values.push(elems[i].getAttribute('data-value')); - return AlphaPicker; -}); + } + + return values; + } + + focus() { + + const element = this.options.element; + focusManager.autoFocus(element, true); + } + + destroy() { + + const element = this.options.element; + this.enabled(false); + element.classList.remove('focuscontainer-x'); + this.options = null; + } + } + +/* eslint-enable indent */ +export default AlphaPicker; diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js index 53ab187a81..7e77814772 100644 --- a/src/components/search/searchfields.js +++ b/src/components/search/searchfields.js @@ -43,7 +43,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick function initAlphaPicker(alphaPickerElement, instance) { - instance.alphaPicker = new AlphaPicker({ + instance.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, mode: 'keyboard' }); diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js index 884cfa2015..4aac2f747d 100644 --- a/src/components/tabbedview/itemstab.js +++ b/src/components/tabbedview/itemstab.js @@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts instance.itemsContainer = view.querySelector('.itemsContainer'); - instance.alphaPicker = new AlphaPicker({ + instance.alphaPicker = new AlphaPicker.default({ element: instance.alphaPickerElement, itemsContainer: instance.itemsContainer, itemClass: 'card' diff --git a/src/controllers/list.js b/src/controllers/list.js index d05616ec9d..fafbd1b419 100644 --- a/src/controllers/list.js +++ b/src/controllers/list.js @@ -1,4 +1,4 @@ -define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, alphaPicker) { +define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) { 'use strict'; function getInitialLiveTvQuery(instance, params) { @@ -544,7 +544,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' alphaPickerElement.classList.add('focuscontainer-right'); self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker'); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, itemsContainer: layoutManager.tv ? self.itemsContainer : null, itemClass: 'card', diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 89bcc215e6..55947e6a9c 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -1,4 +1,4 @@ -define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) { +define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) { 'use strict'; return function (view, params, tabContent, options) { @@ -168,7 +168,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', query.StartIndex = 0; itemsContainer.refreshItems(); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index 25d41d4fba..9a7d4c0099 100644 --- a/src/controllers/movies/movietrailers.js +++ b/src/controllers/movies/movietrailers.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { +define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) { 'use strict'; return function (view, params, tabContent) { @@ -208,7 +208,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' query.StartIndex = 0; reloadItems(); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index ecb51f9dc3..b9f1333e61 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { +define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) { 'use strict'; return function (view, params, tabContent) { @@ -215,7 +215,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index bd9341be6d..4341250f83 100644 --- a/src/controllers/music/musicartists.js +++ b/src/controllers/music/musicartists.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) { +define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) { 'use strict'; return function (view, params, tabContent) { @@ -199,7 +199,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index 753516f902..0aa2dd4448 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) { +define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, AlphaPicker, userSettings, globalize) { 'use strict'; return function (view, params, tabContent) { @@ -226,7 +226,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); From 09fe6b4d3b3c07941d01d733d137b68b090f3440 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sat, 13 Jun 2020 17:44:54 +0300 Subject: [PATCH 05/15] apply suggestion --- src/components/imageUploader/imageUploader.js | 2 +- src/components/itemMediaInfo/itemMediaInfo.js | 4 ++-- src/components/itemidentifier/itemidentifier.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index fec5363886..345475b53d 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -141,7 +141,7 @@ import 'css!./style'; options = options || {}; - import('text!./imageUploader.template.html').then(({default: template}) => { + return import('text!./imageUploader.template.html').then(({default: template}) => { currentItemId = options.itemId; currentServerId = options.serverId; diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index dcfaf3864a..9c2c8c9664 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -168,8 +168,8 @@ import 'flexStyles'; export function show(itemId, serverId) { loading.show(); - return new Promise((resolve, reject) => { - import('text!./itemMediaInfo.template.html').then(({default: template}) => { + return import('text!./itemMediaInfo.template.html').then(({default: template}) => { + return new Promise((resolve, reject) => { loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); }); diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 10655b1279..9b3afcde2e 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -357,7 +357,7 @@ import 'cardStyle'; loading.show(); - import('text!./itemidentifier.template.html').then(({default: template}) => { + return import('text!./itemidentifier.template.html').then(({default: template}) => { const apiClient = getApiClient(); @@ -446,7 +446,7 @@ import 'cardStyle'; currentItem = null; currentItemType = itemType; - import('text!./itemidentifier.template.html').then(({default: template}) => { + return import('text!./itemidentifier.template.html').then(({default: template}) => { const dialogOptions = { size: 'small', From 58205e11bbecc1a0d1b5cd06faaf98584c09f9ce Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 19 Jun 2020 18:56:12 +0300 Subject: [PATCH 06/15] Migration directorybrowser to ES6 modules --- package.json | 1 + .../directorybrowser/directorybrowser.js | 214 +++++++++--------- src/components/tvproviders/xmltv.js | 2 +- src/controllers/dashboard/encodingsettings.js | 4 +- src/controllers/dashboard/general.js | 4 +- src/controllers/dashboard/networking.js | 2 +- src/controllers/livetvsettings.js | 8 +- src/controllers/livetvtuner.js | 2 +- 8 files changed, 125 insertions(+), 112 deletions(-) diff --git a/package.json b/package.json index 29aa2f82a7..675e7a6b35 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js", + "src/components/directorybrowser/directorybrowser.js", "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index e08fcc8336..fbe99154f5 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -1,9 +1,19 @@ -define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) { - 'use strict'; +import loading from 'loading'; +import dialogHelper from 'dialogHelper'; +import dom from 'dom'; +import globalize from 'globalize'; +import 'listViewStyle'; +import 'emby-input'; +import 'paper-icon-button-light'; +import 'css!./directorybrowser'; +import 'formDialogStyle'; +import 'emby-button'; + +/* eslint-disable indent */ function getSystemInfo() { return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then( - function(info) { + info => { systemInfo = info; return info; } @@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in loading.show(); - var promises = []; + const promises = []; - if ('Network' === path) { + if (path === 'Network') { promises.push(ApiClient.getNetworkDevices()); } else { if (path) { @@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } Promise.all(promises).then( - function(responses) { - var folders = responses[0]; - var parentPath = responses[1] || ''; - var html = ''; + responses => { + const folders = responses[0]; + const parentPath = responses[1] || ''; + let html = ''; page.querySelector('.results').scrollTop = 0; page.querySelector('#txtDirectoryPickerPath').value = path || ''; @@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in if (path) { html += getItem('lnkPath lnkDirectory', '', parentPath, '...'); } - for (var i = 0, length = folders.length; i < length; i++) { - var folder = folders[i]; - var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; + for (let i = 0, length = folders.length; i < length; i++) { + const folder = folders[i]; + const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; html += getItem(cssClass, folder.Type, folder.Path, folder.Name); } @@ -58,7 +68,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in page.querySelector('.results').innerHTML = html; loading.hide(); - }, function() { + }, () => { if (updatePathOnError) { page.querySelector('#txtDirectoryPickerPath').value = ''; page.querySelector('.results').innerHTML = ''; @@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function getItem(cssClass, type, path, name) { - var html = ''; - html += '
'; + let html = ''; + html += `
`; html += '
'; html += '
'; html += name; @@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function getEditorHtml(options, systemInfo) { - var html = ''; + let html = ''; html += '
'; html += '
'; if (!options.pathReadOnly) { - var instruction = options.instruction ? options.instruction + '

' : ''; + const instruction = options.instruction ? `${options.instruction}

` : ''; html += '
'; html += instruction; - if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) { + if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += '
'; - } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { + } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); @@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in html += '
'; html += '
'; html += '
'; - var labelKey; + let labelKey; if (options.includeFiles !== true) { labelKey = 'LabelFolder'; } else { labelKey = 'LabelPath'; } - var readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; - html += ''; + const readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; + html += ``; html += '
'; if (!readOnlyAttribute) { - html += ''; + html += ``; } html += '
'; if (!readOnlyAttribute) { @@ -123,14 +133,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } if (options.enableNetworkSharePath) { html += '
'; - html += ''; + html += ``; html += '
'; html += globalize.translate('LabelOptionalNetworkPathHelp', '\\\\server', '\\\\192.168.1.101'); html += '
'; html += '
'; } html += '
'; - html += ''; + html += ``; html += '
'; html += '
'; html += '
'; @@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function alertTextWithOptions(options) { - require(['alert'], function(alert) { + require(['alert'], alert => { alert(options); }); } @@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in ValidateWriteable: validateWriteable, Path: path } - }).catch(function(response) { + }).catch(response => { if (response) { if (response.status === 404) { alertText(globalize.translate('PathNotFound')); @@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function initEditor(content, options, fileOptions) { - content.addEventListener('click', function(e) { - var lnkPath = dom.parentWithClass(e.target, 'lnkPath'); + content.addEventListener('click', e => { + const lnkPath = dom.parentWithClass(e.target, 'lnkPath'); if (lnkPath) { - var path = lnkPath.getAttribute('data-path'); + const path = lnkPath.getAttribute('data-path'); if (lnkPath.classList.contains('lnkFile')) { content.querySelector('#txtDirectoryPickerPath').value = path; } else { @@ -192,25 +202,25 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } }); - content.addEventListener('click', function(e) { + content.addEventListener('click', e => { if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) { - var path = content.querySelector('#txtDirectoryPickerPath').value; + const path = content.querySelector('#txtDirectoryPickerPath').value; refreshDirectoryBrowser(content, path, fileOptions); } }); - content.addEventListener('change', function(e) { - var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); - if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) { + content.addEventListener('change', e => { + const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); + if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') { refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions); } }); content.querySelector('form').addEventListener('submit', function(e) { if (options.callback) { - var networkSharePath = this.querySelector('#txtNetworkPath'); + let networkSharePath = this.querySelector('#txtNetworkPath'); networkSharePath = networkSharePath ? networkSharePath.value : null; - var path = this.querySelector('#txtDirectoryPickerPath').value; + const path = this.querySelector('#txtDirectoryPickerPath').value; validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath)); } e.preventDefault(); @@ -224,77 +234,79 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in return Promise.resolve(options.path); } else { return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then( - function(result) { + result => { return result.Path || ''; - }, function() { + }, () => { return ''; } ); } } - function directoryBrowser() { - var currentDialog; - var self = this; - self.show = function(options) { - options = options || {}; - var fileOptions = { - includeDirectories: true - }; - if (options.includeDirectories != null) { - fileOptions.includeDirectories = options.includeDirectories; - } - if (options.includeFiles != null) { - fileOptions.includeFiles = options.includeFiles; - } - Promise.all([getSystemInfo(), getDefaultPath(options)]).then( - function(responses) { - var systemInfo = responses[0]; - var initialPath = responses[1]; - var dlg = dialogHelper.createDialog({ - size: 'small', - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('directoryPicker'); - dlg.classList.add('formDialog'); - - var html = ''; - html += '
'; - html += ''; - html += '

'; - html += options.header || globalize.translate('HeaderSelectPath'); - html += '

'; - html += '
'; - html += getEditorHtml(options, systemInfo); - dlg.innerHTML = html; - initEditor(dlg, options, fileOptions); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCloseDialog').addEventListener('click', function() { - dialogHelper.close(dlg); - }); - currentDialog = dlg; - dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; - var txtNetworkPath = dlg.querySelector('#txtNetworkPath'); - if (txtNetworkPath) { - txtNetworkPath.value = options.networkSharePath || ''; - } - if (!options.pathReadOnly) { - refreshDirectoryBrowser(dlg, initialPath, fileOptions, true); - } + class directoryBrowser { + constructor() { + let currentDialog; + this.show = options => { + options = options || {}; + const fileOptions = { + includeDirectories: true + }; + if (options.includeDirectories != null) { + fileOptions.includeDirectories = options.includeDirectories; } - ); - }; - self.close = function() { - if (currentDialog) { - dialogHelper.close(currentDialog); - } - }; + if (options.includeFiles != null) { + fileOptions.includeFiles = options.includeFiles; + } + Promise.all([getSystemInfo(), getDefaultPath(options)]).then( + responses => { + const systemInfo = responses[0]; + const initialPath = responses[1]; + const dlg = dialogHelper.createDialog({ + size: 'small', + removeOnClose: true, + scrollY: false + }); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('directoryPicker'); + dlg.classList.add('formDialog'); + + let html = ''; + html += '
'; + html += ''; + html += '

'; + html += options.header || globalize.translate('HeaderSelectPath'); + html += '

'; + html += '
'; + html += getEditorHtml(options, systemInfo); + dlg.innerHTML = html; + initEditor(dlg, options, fileOptions); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCloseDialog').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + currentDialog = dlg; + dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; + const txtNetworkPath = dlg.querySelector('#txtNetworkPath'); + if (txtNetworkPath) { + txtNetworkPath.value = options.networkSharePath || ''; + } + if (!options.pathReadOnly) { + refreshDirectoryBrowser(dlg, initialPath, fileOptions, true); + } + } + ); + }; + this.close = () => { + if (currentDialog) { + dialogHelper.close(currentDialog); + } + }; + } } - var systemInfo; - return directoryBrowser; -}); + let systemInfo; + +/* eslint-enable indent */ +export default directoryBrowser; diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js index 4c39b14430..054c5b640d 100644 --- a/src/components/tvproviders/xmltv.js +++ b/src/components/tvproviders/xmltv.js @@ -139,7 +139,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi var page = $(e.target).parents('.xmltvForm')[0]; require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 0f54f9d70f..b8cdd66651 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -151,7 +151,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo }); $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { @@ -166,7 +166,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo }); $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js index f215ace28b..eb0f7edfa4 100644 --- a/src/controllers/dashboard/general.js +++ b/src/controllers/dashboard/general.js @@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb return function (view, params) { $('#btnSelectCachePath', view).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -76,7 +76,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb }); $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ path: $('#txtMetadataPath', view).val(), networkSharePath: $('#txtMetadataNetworkPath', view).val(), diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index 4ddde7f24c..33fc75b484 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -136,7 +136,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], }); view.querySelector('#btnSelectCertPath').addEventListener('click', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, includeDirectories: true, diff --git a/src/controllers/livetvsettings.js b/src/controllers/livetvsettings.js index 4c5fdc60de..715eb06214 100644 --- a/src/controllers/livetvsettings.js +++ b/src/controllers/livetvsettings.js @@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit); $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -74,7 +74,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -89,7 +89,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -104,7 +104,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { diff --git a/src/controllers/livetvtuner.js b/src/controllers/livetvtuner.js index d7a4d92db2..92f705c02f 100644 --- a/src/controllers/livetvtuner.js +++ b/src/controllers/livetvtuner.js @@ -215,7 +215,7 @@ define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button }); view.querySelector('.btnSelectPath').addEventListener('click', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { From fc2c19d827d3add763de5b7be00b64eadd728191 Mon Sep 17 00:00:00 2001 From: dkanada Date: Thu, 2 Jul 2020 12:57:29 +0900 Subject: [PATCH 07/15] update error message --- src/components/alphaPicker/alphaPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/alphaPicker/alphaPicker.js b/src/components/alphaPicker/alphaPicker.js index 576e35cb42..bd11afc7f1 100644 --- a/src/components/alphaPicker/alphaPicker.js +++ b/src/components/alphaPicker/alphaPicker.js @@ -252,7 +252,7 @@ import 'material-icons'; try { btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`); } catch (err) { - console.error(`error in querySelector: ${err}`); + console.error('error in querySelector:', err); } if (btn && btn !== selected) { From 69507a0bd99f403d34531241fe1c9de4a25092f6 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 16:32:57 +0100 Subject: [PATCH 08/15] 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 09/15] 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 10/15] 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 c5b7ce973fe336a12e74f8e011db3b31cd3a4c63 Mon Sep 17 00:00:00 2001 From: dkanada Date: Fri, 10 Jul 2020 01:56:47 +0900 Subject: [PATCH 11/15] update comment --- src/components/itemidentifier/itemidentifier.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 9b3afcde2e..6f638dc271 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -440,7 +440,7 @@ import 'cardStyle'; } } - //TODO investigate where was used this? + // TODO investigate where this was used function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { currentItem = null; @@ -547,4 +547,3 @@ export default { show: show, showFindNew: showFindNew }; - From 85b86712949ddb999678e044aef1f6c98add38f6 Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 10 Jul 2020 20:05:00 +0100 Subject: [PATCH 12/15] 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 13/15] 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 14/15] 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 15/15] 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');