From 7296dbc28428690386e7f873a7feda70f46d63b1 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 9 Jun 2020 22:40:39 +0300 Subject: [PATCH 01/12] 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/12] 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/12] 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/12] 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/12] 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/12] 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 c5b7ce973fe336a12e74f8e011db3b31cd3a4c63 Mon Sep 17 00:00:00 2001 From: dkanada Date: Fri, 10 Jul 2020 01:56:47 +0900 Subject: [PATCH 10/12] 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 11/12] 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 12/12] 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) {