diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index 67988d89b20..154915cb68e 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -43,8 +43,8 @@ function onAddLibrary(e) { isCreating = true; loading.show(); const dlg = dom.parentWithClass(this, 'dlg-librarycreator'); - const name = $('#txtValue', dlg).val(); - let type = $('#selectCollectionType', dlg).val(); + const name = dlg.querySelector('#txtValue').value; + let type = dlg.querySelector('#selectCollectionType').value; if (type == 'mixed') { type = null; @@ -72,9 +72,12 @@ function getCollectionTypeOptionsHtml(collectionTypeOptions) { } function initEditor(page, collectionTypeOptions) { - $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () { + const selectCollectionType = page.querySelector('#selectCollectionType'); + selectCollectionType.innerHTML = getCollectionTypeOptionsHtml(collectionTypeOptions); + selectCollectionType.value = ''; + selectCollectionType.addEventListener('change', function () { const value = this.value; - const dlg = $(this).parents('.dialog')[0]; + const dlg = dom.parentWithClass(this, 'dialog'); libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value); if (value) { @@ -90,12 +93,12 @@ function initEditor(page, collectionTypeOptions) { const name = this.options[index].innerHTML .replaceAll('*', '') .replaceAll('&', '&'); - $('#txtValue', dlg).val(name); + dlg.querySelector('#txtValue').value = name; } } const folderOption = collectionTypeOptions.find(i => i.value === value); - $('.collectionTypeFieldDescription', dlg).html(folderOption?.message || ''); + dlg.querySelector('.collectionTypeFieldDescription').innerHTML = folderOption?.message || ''; }); page.querySelector('.btnAddFolder').addEventListener('click', onAddButtonClick); page.querySelector('.addLibraryForm').addEventListener('submit', onAddLibrary); @@ -184,7 +187,7 @@ function onDialogClosed() { function initLibraryOptions(dlg) { libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(() => { - $('#selectCollectionType', dlg).trigger('change'); + dlg.querySelector('#selectCollectionType').dispatchEvent(new Event('change')); }); } diff --git a/src/components/tvproviders/schedulesdirect.js b/src/components/tvproviders/schedulesdirect.js index ec1c6e86edb..8536f93c1f1 100644 --- a/src/components/tvproviders/schedulesdirect.js +++ b/src/components/tvproviders/schedulesdirect.js @@ -57,7 +57,7 @@ export default function (page, providerId, options) { return i.Id === providerId; })[0] || {}; listingsId = info.ListingsId; - $('#selectListing', page).val(info.ListingsId || ''); + page.querySelector('#selectListing').value = info.ListingsId || ''; page.querySelector('.txtUser').value = info.Username || ''; page.querySelector('.txtPass').value = ''; page.querySelector('.txtZipCode').value = info.ZipCode || ''; @@ -114,7 +114,7 @@ export default function (page, providerId, options) { $('#selectCountry', page).html(countryList.map(function (c) { return ''; }).join('')).val(info.Country || ''); - $(page.querySelector('.txtZipCode')).trigger('change'); + page.querySelector('.txtZipCode').dispatchEvent(new Event('change')); }, function () { // ApiClient.getJSON() error handler Dashboard.alert({ message: globalize.translate('ErrorGettingTvLineups') @@ -157,7 +157,7 @@ export default function (page, providerId, options) { } function submitListingsForm() { - const selectedListingsId = $('#selectListing', page).val(); + const selectedListingsId = page.querySelector('#selectListing').value; if (!selectedListingsId) { Dashboard.alert({ @@ -173,7 +173,7 @@ export default function (page, providerId, options) { return i.Id === id; })[0]; info.ZipCode = page.querySelector('.txtZipCode').value; - info.Country = $('#selectCountry', page).val(); + info.Country = page.querySelector('#selectCountry').value; info.ListingsId = selectedListingsId; info.EnableAllTuners = page.querySelector('.chkAllTuners').checked; info.EnabledTuners = info.EnableAllTuners ? [] : $('.chkTuner', page).get().filter(function (i) { @@ -207,7 +207,7 @@ export default function (page, providerId, options) { function refreshListings(value) { if (!value) { - $('#selectListing', page).html(''); + page.querySelector('#selectListing').innerHTML = ''; return; } @@ -217,16 +217,16 @@ export default function (page, providerId, options) { url: ApiClient.getUrl('LiveTv/ListingProviders/Lineups', { Id: providerId, Location: value, - Country: $('#selectCountry', page).val() + Country: page.querySelector('#selectCountry').value }), dataType: 'json' }).then(function (result) { - $('#selectListing', page).html(result.map(function (o) { + page.querySelector('#selectListing').innerHTML = result.map(function (o) { return ''; - })); + }).join(''); if (listingsId) { - $('#selectListing', page).val(listingsId); + page.querySelector('#selectListing').value = listingsId; } loading.hide(); @@ -257,15 +257,17 @@ export default function (page, providerId, options) { const hideSubmitButton = options.showSubmitButton === false; page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton); - $('.formLogin', page).on('submit', function () { + page.querySelector('.formLogin').addEventListener('submit', function (e) { + e.preventDefault(); submitLoginForm(); - return false; }); - $('.formListings', page).on('submit', function () { + + page.querySelector('.formListings').addEventListener('submit', function (e) { + e.preventDefault(); submitListingsForm(); - return false; }); - $('.txtZipCode', page).on('change', function () { + + page.querySelector('.txtZipCode').addEventListener('change', function () { refreshListings(this.value); }); page.querySelector('.chkAllTuners').addEventListener('change', function (e) { diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js index ff565700bf1..77a9105a12f 100644 --- a/src/components/tvproviders/xmltv.js +++ b/src/components/tvproviders/xmltv.js @@ -7,6 +7,7 @@ import '../listview/listview.scss'; import '../../elements/emby-button/paper-icon-button-light'; import Dashboard from '../../utils/dashboard'; import Events from '../../utils/events.ts'; +import dom from 'scripts/dom'; function getTunerName(providerId) { switch (providerId.toLowerCase()) { @@ -46,7 +47,7 @@ function refreshTunerDevices(page, providerInfo, devices) { } function onSelectPathClick(e) { - const page = $(e.target).parents('.xmltvForm')[0]; + const page = dom.parentWithClass(e.target, 'xmltvForm'); import('../directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => { const picker = new DirectoryBrowser(); diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 6552c90fb05..04598306763 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -20,17 +20,17 @@ function loadPage(page, config, systemInfo) { page.querySelector('#chkHardwareEncoding').checked = config.EnableHardwareEncoding; page.querySelector('#chkAllowHevcEncoding').checked = config.AllowHevcEncoding; page.querySelector('#chkAllowAv1Encoding').checked = config.AllowAv1Encoding; - $('#selectVideoDecoder', page).val(config.HardwareAccelerationType || 'none'); - $('#selectThreadCount', page).val(config.EncodingThreadCount); + page.querySelector('#selectVideoDecoder').value = config.HardwareAccelerationType || 'none'; + page.querySelector('#selectThreadCount').value = config.EncodingThreadCount; page.querySelector('#chkEnableAudioVbr').checked = config.EnableAudioVbr; - $('#txtDownMixAudioBoost', page).val(config.DownMixAudioBoost); - $('#selectStereoDownmixAlgorithm').val(config.DownMixStereoAlgorithm || 'None'); + page.querySelector('#txtDownMixAudioBoost').value = config.DownMixAudioBoost; + page.querySelector('#selectStereoDownmixAlgorithm').value = config.DownMixStereoAlgorithm || 'None'; page.querySelector('#txtMaxMuxingQueueSize').value = config.MaxMuxingQueueSize || ''; page.querySelector('.txtEncoderPath').value = config.EncoderAppPathDisplay || ''; - $('#txtTranscodingTempPath', page).val(systemInfo.TranscodingTempPath || ''); + page.querySelector('#txtTranscodingTempPath').value = systemInfo.TranscodingTempPath || ''; page.querySelector('#txtFallbackFontPath').value = config.FallbackFontPath || ''; page.querySelector('#chkEnableFallbackFont').checked = config.EnableFallbackFont; - $('#txtVaapiDevice', page).val(config.VaapiDevice || ''); + page.querySelector('#txtVaapiDevice').value = config.VaapiDevice || ''; page.querySelector('#txtQsvDevice').value = config.QsvDevice || ''; page.querySelector('#chkTonemapping').checked = config.EnableTonemapping; page.querySelector('#chkVppTonemapping').checked = config.EnableVppTonemapping; @@ -85,15 +85,15 @@ function onSubmit() { loading.show(); ApiClient.getNamedConfiguration('encoding').then(function (config) { config.EnableAudioVbr = form.querySelector('#chkEnableAudioVbr').checked; - config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); - config.DownMixStereoAlgorithm = $('#selectStereoDownmixAlgorithm', form).val() || 'None'; + config.DownMixAudioBoost = form.querySelector('#txtDownMixAudioBoost').value; + config.DownMixStereoAlgorithm = form.querySelector('#selectStereoDownmixAlgorithm').value || 'None'; config.MaxMuxingQueueSize = form.querySelector('#txtMaxMuxingQueueSize').value; - config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val(); + config.TranscodingTempPath = form.querySelector('#txtTranscodingTempPath').value; config.FallbackFontPath = form.querySelector('#txtFallbackFontPath').value; config.EnableFallbackFont = form.querySelector('#txtFallbackFontPath').value ? form.querySelector('#chkEnableFallbackFont').checked : false; - config.EncodingThreadCount = $('#selectThreadCount', form).val(); - config.HardwareAccelerationType = $('#selectVideoDecoder', form).val(); - config.VaapiDevice = $('#txtVaapiDevice', form).val(); + config.EncodingThreadCount = form.querySelector('#selectThreadCount').value; + config.HardwareAccelerationType = form.querySelector('#selectVideoDecoder').value; + config.VaapiDevice = form.querySelector('#txtVaapiDevice').value; config.QsvDevice = form.querySelector('#txtQsvDevice').value; config.EnableTonemapping = form.querySelector('#chkTonemapping').checked; config.EnableVppTonemapping = form.querySelector('#chkVppTonemapping').checked; @@ -141,7 +141,7 @@ function onSubmit() { }); }; - if ($('#selectVideoDecoder', form).val() !== 'none') { + if (form.querySelector('#selectVideoDecoder').value !== 'none') { alert({ title: globalize.translate('TitleHardwareAcceleration'), text: globalize.translate('HardwareAccelerationWarning') @@ -263,7 +263,7 @@ $(document).on('pageinit', '#encodingSettingsPage', function () { picker.show({ callback: function (path) { if (path) { - $('#txtTranscodingTempPath', page).val(path); + page.querySelector('#txtTranscodingTempPath').value = path; } picker.close(); diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js index 141a671a797..e39c32681d2 100644 --- a/src/controllers/dashboard/general.js +++ b/src/controllers/dashboard/general.js @@ -14,11 +14,13 @@ function loadPage(page, config, languageOptions, systemInfo) { page.querySelector('#txtServerName').value = systemInfo.ServerName; page.querySelector('#txtCachePath').value = systemInfo.CachePath || ''; page.querySelector('#chkQuickConnectAvailable').checked = config.QuickConnectAvailable === true; - $('#txtMetadataPath', page).val(systemInfo.InternalMetadataPath || ''); - $('#txtMetadataNetworkPath', page).val(systemInfo.MetadataNetworkPath || ''); - $('#selectLocalizationLanguage', page).html(languageOptions.map(function (language) { + page.querySelector('#txtMetadataPath').value = systemInfo.InternalMetadataPath || ''; + page.querySelector('#txtMetadataNetworkPath').value = systemInfo.MetadataNetworkPath || ''; + const localizationLanguageElem = page.querySelector('#selectLocalizationLanguage'); + localizationLanguageElem.innerHTML = languageOptions.map(function (language) { return ''; - })).val(config.UICulture); + }).join(''); + localizationLanguageElem.value = config.UICulture; page.querySelector('#txtLibraryScanFanoutConcurrency').value = config.LibraryScanFanoutConcurrency || ''; page.querySelector('#txtParallelImageEncodingLimit').value = config.ParallelImageEncodingLimit || ''; @@ -28,13 +30,12 @@ function loadPage(page, config, languageOptions, systemInfo) { function onSubmit() { loading.show(); const form = this; - $(form).parents('.page'); ApiClient.getServerConfiguration().then(function (config) { - config.ServerName = $('#txtServerName', form).val(); - config.UICulture = $('#selectLocalizationLanguage', form).val(); + config.ServerName = form.querySelector('#txtServerName').value; + config.UICulture = form.querySelector('#selectLocalizationLanguage').value; config.CachePath = form.querySelector('#txtCachePath').value; - config.MetadataPath = $('#txtMetadataPath', form).val(); - config.MetadataNetworkPath = $('#txtMetadataNetworkPath', form).val(); + config.MetadataPath = form.querySelector('#txtMetadataPath').value; + config.MetadataNetworkPath = form.querySelector('#txtMetadataNetworkPath').value; config.QuickConnectAvailable = form.querySelector('#chkQuickConnectAvailable').checked; config.LibraryScanFanoutConcurrency = parseInt(form.querySelector('#txtLibraryScanFanoutConcurrency').value || '0', 10); config.ParallelImageEncodingLimit = parseInt(form.querySelector('#txtParallelImageEncodingLimit').value || '0', 10); @@ -80,15 +81,15 @@ export default function (view) { import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => { const picker = new DirectoryBrowser(); picker.show({ - path: $('#txtMetadataPath', view).val(), - networkSharePath: $('#txtMetadataNetworkPath', view).val(), + path: view.querySelector('#txtMetadataPath').value, + networkSharePath: view.querySelector('#txtMetadataNetworkPath').value, callback: function (path, networkPath) { if (path) { - $('#txtMetadataPath', view).val(path); + view.querySelector('#txtMetadataPath').value = path; } if (networkPath) { - $('#txtMetadataNetworkPath', view).val(networkPath); + view.querySelector('#txtMetadataNetworkPath').value = networkPath; } picker.close(); diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index 7d5d9133115..944818f96b5 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -181,20 +181,27 @@ function reloadVirtualFolders(page, virtualFolders) { divVirtualFolders.innerHTML = html; divVirtualFolders.classList.add('itemsContainer'); divVirtualFolders.classList.add('vertical-wrap'); - $('.btnCardMenu', divVirtualFolders).on('click', function () { - showCardMenu(page, this, virtualFolders); + const btnCardMenuElements = divVirtualFolders.querySelectorAll('.btnCardMenu'); + btnCardMenuElements.forEach(function (btn) { + btn.addEventListener('click', function () { + showCardMenu(page, btn, virtualFolders); + }); }); divVirtualFolders.querySelector('#addLibrary').addEventListener('click', function () { addVirtualFolder(page); }); - $('.editLibrary', divVirtualFolders).on('click', function () { - const card = $(this).parents('.card')[0]; - const index = parseInt(card.getAttribute('data-index'), 10); - const virtualFolder = virtualFolders[index]; - if (virtualFolder.ItemId) { - editVirtualFolder(page, virtualFolder); - } + const libraryEditElements = divVirtualFolders.querySelectorAll('.editLibrary'); + libraryEditElements.forEach(function (btn) { + btn.addEventListener('click', function () { + const card = dom.parentWithClass(btn, 'card'); + const index = parseInt(card.getAttribute('data-index'), 10); + const virtualFolder = virtualFolders[index]; + + if (virtualFolder.ItemId) { + editVirtualFolder(page, virtualFolder); + } + }); }); loading.hide(); } diff --git a/src/controllers/dashboard/librarydisplay.js b/src/controllers/dashboard/librarydisplay.js index bae62009da7..236f1515c67 100644 --- a/src/controllers/dashboard/librarydisplay.js +++ b/src/controllers/dashboard/librarydisplay.js @@ -29,7 +29,7 @@ export default function(view) { ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult); }); ApiClient.getNamedConfiguration('metadata').then(function(config) { - config.UseFileCreationTimeForDateAdded = $('#selectDateAdded', form).val() === '1'; + config.UseFileCreationTimeForDateAdded = form.querySelector('#selectDateAdded').value === '1'; ApiClient.updateNamedConfiguration('metadata', config); }); diff --git a/src/controllers/dashboard/metadatanfo.js b/src/controllers/dashboard/metadatanfo.js index 53dec9778a5..6d8c62a642f 100644 --- a/src/controllers/dashboard/metadatanfo.js +++ b/src/controllers/dashboard/metadatanfo.js @@ -10,8 +10,10 @@ function loadPage(page, config, users) { html += users.map(function (user) { return ''; }).join(''); - $('#selectUser', page).html(html).val(config.UserId || ''); - $('#selectReleaseDateFormat', page).val(config.ReleaseDateFormat); + const elem = page.querySelector('#selectUser'); + elem.innerHTML = html; + elem.value = config.UserId || ''; + page.querySelector('#selectReleaseDateFormat').value = config.ReleaseDateFormat; page.querySelector('#chkSaveImagePaths').checked = config.SaveImagePathsInNfo; page.querySelector('#chkEnablePathSubstitution').checked = config.EnablePathSubstitution; page.querySelector('#chkEnableExtraThumbs').checked = config.EnableExtraThumbsDuplication; @@ -22,8 +24,8 @@ function onSubmit() { loading.show(); const form = this; ApiClient.getNamedConfiguration(metadataKey).then(function (config) { - config.UserId = $('#selectUser', form).val() || null; - config.ReleaseDateFormat = $('#selectReleaseDateFormat', form).val(); + config.UserId = form.querySelector('#selectUser').value || null; + config.ReleaseDateFormat = form.querySelector('#selectReleaseDateFormat').value; config.SaveImagePathsInNfo = form.querySelector('#chkSaveImagePaths').checked; config.EnablePathSubstitution = form.querySelector('#chkEnablePathSubstitution').checked; config.EnableExtraThumbsDuplication = form.querySelector('#chkEnableExtraThumbs').checked; diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js index e9812ab3666..86787f29685 100644 --- a/src/controllers/dashboard/playback.js +++ b/src/controllers/dashboard/playback.js @@ -3,11 +3,11 @@ import loading from '../../components/loading/loading'; import Dashboard from '../../utils/dashboard'; function loadPage(page, config) { - $('#txtMinResumePct', page).val(config.MinResumePct); - $('#txtMaxResumePct', page).val(config.MaxResumePct); - $('#txtMinAudiobookResume', page).val(config.MinAudiobookResume); - $('#txtMaxAudiobookResume', page).val(config.MaxAudiobookResume); - $('#txtMinResumeDuration', page).val(config.MinResumeDurationSeconds); + page.querySelector('#txtMinResumePct').value = config.MinResumePct; + page.querySelector('#txtMaxResumePct').value = config.MaxResumePct; + page.querySelector('#txtMinAudiobookResume').value = config.MinAudiobookResume; + page.querySelector('#txtMaxAudiobookResume').value = config.MaxAudiobookResume; + page.querySelector('#txtMinResumeDuration').value = config.MinResumeDurationSeconds; loading.hide(); } @@ -15,11 +15,11 @@ function onSubmit() { loading.show(); const form = this; ApiClient.getServerConfiguration().then(function (config) { - config.MinResumePct = $('#txtMinResumePct', form).val(); - config.MaxResumePct = $('#txtMaxResumePct', form).val(); - config.MinAudiobookResume = $('#txtMinAudiobookResume', form).val(); - config.MaxAudiobookResume = $('#txtMaxAudiobookResume', form).val(); - config.MinResumeDurationSeconds = $('#txtMinResumeDuration', form).val(); + config.MinResumePct = form.querySelector('#txtMinResumePct').value; + config.MaxResumePct = form.querySelector('#txtMaxResumePct').value; + config.MinAudiobookResume = form.querySelector('#txtMinAudiobookResume').value; + config.MaxAudiobookResume = form.querySelector('#txtMaxAudiobookResume').value; + config.MinResumeDurationSeconds = form.querySelector('#txtMinResumeDuration').value; ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult); }); diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js index 578fc2cb80f..34a6034dcb1 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js @@ -33,8 +33,8 @@ const ScheduledTaskPage = { }); }, loadScheduledTask: function (view, task) { - $('.taskName', view).html(task.Name); - $('#pTaskDescription', view).html(task.Description); + view.querySelector('.taskName').innerHTML = task.Name; + view.querySelector('#pTaskDescription').innerHTML = task.Description; import('../../../components/listview/listview.scss').then(() => { ScheduledTaskPage.loadTaskTriggers(view, task); @@ -124,9 +124,9 @@ const ScheduledTaskPage = { return datetime.getDisplayTime(now); }, showAddTriggerPopup: function (view) { - $('#selectTriggerType', view).val('DailyTrigger'); + view.querySelector('#selectTriggerType').value = 'DailyTrigger'; view.querySelector('#selectTriggerType').dispatchEvent(new CustomEvent('change', {})); - $('#popupAddTrigger', view).removeClass('hide'); + view.querySelector('#popupAddTrigger').classList.remove('hide'); }, confirmDeleteTrigger: function (view, index) { confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { @@ -145,54 +145,54 @@ const ScheduledTaskPage = { }, refreshTriggerFields: function (page, triggerType) { if (triggerType == 'DailyTrigger') { - $('#fldTimeOfDay', page).show(); - $('#fldDayOfWeek', page).hide(); - $('#fldSelectSystemEvent', page).hide(); - $('#fldSelectInterval', page).hide(); - $('#selectTimeOfDay', page).attr('required', 'required'); + page.querySelector('#fldTimeOfDay').classList.remove('hide'); + page.querySelector('#fldDayOfWeek').classList.add('hide'); + page.querySelector('#fldSelectSystemEvent').classList.add('hide'); + page.querySelector('#fldSelectInterval').classList.add('hide'); + page.querySelector('#selectTimeOfDay').setAttribute('required', 'required'); } else if (triggerType == 'WeeklyTrigger') { - $('#fldTimeOfDay', page).show(); - $('#fldDayOfWeek', page).show(); - $('#fldSelectSystemEvent', page).hide(); - $('#fldSelectInterval', page).hide(); - $('#selectTimeOfDay', page).attr('required', 'required'); + page.querySelector('#fldTimeOfDay').classList.remove('hide'); + page.querySelector('#fldDayOfWeek').classList.remove('hide'); + page.querySelector('#fldSelectSystemEvent').classList.add('hide'); + page.querySelector('#fldSelectInterval').classList.add('hide'); + page.querySelector('#selectTimeOfDay').setAttribute('required', 'required'); } else if (triggerType == 'SystemEventTrigger') { - $('#fldTimeOfDay', page).hide(); - $('#fldDayOfWeek', page).hide(); - $('#fldSelectSystemEvent', page).show(); - $('#fldSelectInterval', page).hide(); - $('#selectTimeOfDay', page).removeAttr('required'); + page.querySelector('#fldTimeOfDay').classList.add('hide'); + page.querySelector('#fldDayOfWeek').classList.add('hide'); + page.querySelector('#fldSelectSystemEvent').classList.remove('hide'); + page.querySelector('#fldSelectInterval').classList.add('hide'); + page.querySelector('#selectTimeOfDay').removeAttribute('required'); } else if (triggerType == 'IntervalTrigger') { - $('#fldTimeOfDay', page).hide(); - $('#fldDayOfWeek', page).hide(); - $('#fldSelectSystemEvent', page).hide(); - $('#fldSelectInterval', page).show(); - $('#selectTimeOfDay', page).removeAttr('required'); + page.querySelector('#fldTimeOfDay').classList.add('hide'); + page.querySelector('#fldDayOfWeek').classList.add('hide'); + page.querySelector('#fldSelectSystemEvent').classList.add('hide'); + page.querySelector('#fldSelectInterval').classList.remove('hide'); + page.querySelector('#selectTimeOfDay').removeAttribute('required'); } else if (triggerType == 'StartupTrigger') { - $('#fldTimeOfDay', page).hide(); - $('#fldDayOfWeek', page).hide(); - $('#fldSelectSystemEvent', page).hide(); - $('#fldSelectInterval', page).hide(); - $('#selectTimeOfDay', page).removeAttr('required'); + page.querySelector('#fldTimeOfDay').classList.add('hide'); + page.querySelector('#fldDayOfWeek').classList.add('hide'); + page.querySelector('#fldSelectSystemEvent').classList.add('hide'); + page.querySelector('#fldSelectInterval').classList.add('hide'); + page.querySelector('#selectTimeOfDay').removeAttribute('required'); } }, getTriggerToAdd: function (page) { const trigger = { - Type: $('#selectTriggerType', page).val() + Type: page.querySelector('#selectTriggerType').value }; if (trigger.Type == 'DailyTrigger') { - trigger.TimeOfDayTicks = $('#selectTimeOfDay', page).val(); + trigger.TimeOfDayTicks = page.querySelector('#selectTimeOfDay').value; } else if (trigger.Type == 'WeeklyTrigger') { - trigger.DayOfWeek = $('#selectDayOfWeek', page).val(); - trigger.TimeOfDayTicks = $('#selectTimeOfDay', page).val(); + trigger.DayOfWeek = page.querySelector('#selectDayOfWeek').value; + trigger.TimeOfDayTicks = page.querySelector('#selectTimeOfDay').value; } else if (trigger.Type == 'SystemEventTrigger') { - trigger.SystemEvent = $('#selectSystemEvent', page).val(); + trigger.SystemEvent = page.querySelector('#selectSystemEvent').value; } else if (trigger.Type == 'IntervalTrigger') { - trigger.IntervalTicks = $('#selectInterval', page).val(); + trigger.IntervalTicks = page.querySelector('#selectInterval').value; } - let timeLimit = $('#txtTimeLimit', page).val() || '0'; + let timeLimit = page.querySelector('#txtTimeLimit').value || '0'; timeLimit = parseFloat(timeLimit) * 3600000; trigger.MaxRuntimeTicks = timeLimit * 1e4 || null; @@ -207,7 +207,7 @@ export default function (view) { ApiClient.getScheduledTask(id).then(function (task) { task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view)); ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () { - $('#popupAddTrigger').addClass('hide'); + document.querySelector('#popupAddTrigger').classList.add('hide'); ScheduledTaskPage.refreshScheduledTask(view); }); }); @@ -216,7 +216,7 @@ export default function (view) { view.querySelector('.addTriggerForm').addEventListener('submit', onSubmit); fillTimeOfDay(view.querySelector('#selectTimeOfDay')); - $(view.querySelector('#popupAddTrigger').parentNode).trigger('create'); + view.querySelector('#popupAddTrigger').parentNode.trigger(new Event('create')); view.querySelector('.selectTriggerType').addEventListener('change', function () { ScheduledTaskPage.refreshTriggerFields(view, this.value); }); diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index db5f9255beb..9fcd590134b 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -8,6 +8,7 @@ import Events from '../../../utils/events.ts'; import '../../../components/listview/listview.scss'; import '../../../elements/emby-button/emby-button'; +import dom from 'scripts/dom'; function reloadList(page) { ApiClient.getScheduledTasks({ @@ -126,7 +127,7 @@ function updateTaskButton(elem, state) { setTaskButtonIcon(elem, 'play_arrow'); elem.title = globalize.translate('ButtonStart'); } - $(elem).parents('.listItem')[0].setAttribute('data-status', state); + dom.parentWithClass(elem, 'listItem').setAttribute('data-status', state); } export default function(view) { diff --git a/src/controllers/dashboard/streaming.js b/src/controllers/dashboard/streaming.js index 79fd0d28f3f..9dab432cba4 100644 --- a/src/controllers/dashboard/streaming.js +++ b/src/controllers/dashboard/streaming.js @@ -3,7 +3,7 @@ import loading from '../../components/loading/loading'; import Dashboard from '../../utils/dashboard'; function loadPage(page, config) { - $('#txtRemoteClientBitrateLimit', page).val(config.RemoteClientBitrateLimit / 1e6 || ''); + page.querySelector('#txtRemoteClientBitrateLimit').value = config.RemoteClientBitrateLimit / 1e6 || ''; loading.hide(); } @@ -11,7 +11,7 @@ function onSubmit() { loading.show(); const form = this; ApiClient.getServerConfiguration().then(function (config) { - config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', form).val() || '0'), 10); + config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat(form.querySelector('#txtRemoteClientBitrateLimit').value || '0'), 10); ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult); }); diff --git a/src/controllers/livetvsettings.js b/src/controllers/livetvsettings.js index 6ad9c0f58b7..1016c409f61 100644 --- a/src/controllers/livetvsettings.js +++ b/src/controllers/livetvsettings.js @@ -6,11 +6,13 @@ import Dashboard from '../utils/dashboard'; import alert from '../components/alert'; function loadPage(page, config) { - $('.liveTvSettingsForm', page).show(); - $('.noLiveTvServices', page).hide(); - $('#selectGuideDays', page).val(config.GuideDays || ''); - $('#txtPrePaddingMinutes', page).val(config.PrePaddingSeconds / 60); - $('#txtPostPaddingMinutes', page).val(config.PostPaddingSeconds / 60); + page.querySelector('.liveTvSettingsForm').classList.remove('hide'); + if (page.querySelector('.noLiveTvServices')) { + page.querySelector('.noLiveTvServices').classList.add('hide'); + } + page.querySelector('#selectGuideDays').value = config.GuideDays || ''; + page.querySelector('#txtPrePaddingMinutes').value = config.PrePaddingSeconds / 60; + page.querySelector('#txtPostPaddingMinutes').value = config.PostPaddingSeconds / 60; page.querySelector('#txtRecordingPath').value = config.RecordingPath || ''; page.querySelector('#txtMovieRecordingPath').value = config.MovieRecordingPath || ''; page.querySelector('#txtSeriesRecordingPath').value = config.SeriesRecordingPath || ''; @@ -25,7 +27,7 @@ function onSubmit() { loading.show(); const form = this; ApiClient.getNamedConfiguration('livetv').then(function (config) { - config.GuideDays = $('#selectGuideDays', form).val() || null; + config.GuideDays = form.querySelector('#selectGuideDays').value || null; const recordingPath = form.querySelector('#txtRecordingPath').value || null; const movieRecordingPath = form.querySelector('#txtMovieRecordingPath').value || null; const seriesRecordingPath = form.querySelector('#txtSeriesRecordingPath').value || null; @@ -34,10 +36,10 @@ function onSubmit() { config.MovieRecordingPath = movieRecordingPath; config.SeriesRecordingPath = seriesRecordingPath; config.RecordingEncodingFormat = 'mkv'; - config.PrePaddingSeconds = 60 * $('#txtPrePaddingMinutes', form).val(); - config.PostPaddingSeconds = 60 * $('#txtPostPaddingMinutes', form).val(); - config.RecordingPostProcessor = $('#txtPostProcessor', form).val(); - config.RecordingPostProcessorArguments = $('#txtPostProcessorArguments', form).val(); + config.PrePaddingSeconds = 60 * form.querySelector('#txtPrePaddingMinutes').value; + config.PostPaddingSeconds = 60 * form.querySelector('#txtPostPaddingMinutes').value; + config.RecordingPostProcessor = form.querySelector('#txtPostProcessor').value; + config.RecordingPostProcessorArguments = form.querySelector('#txtPostProcessorArguments').value; config.SaveRecordingNFO = form.querySelector('#chkSaveRecordingNFO').checked; config.SaveRecordingImages = form.querySelector('#chkSaveRecordingImages').checked; ApiClient.updateNamedConfiguration('livetv', config).then(function () { @@ -69,7 +71,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () { picker.show({ callback: function (path) { if (path) { - $('#txtRecordingPath', page).val(path); + page.querySelector('#txtRecordingPath').value = path; } picker.close(); @@ -84,7 +86,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () { picker.show({ callback: function (path) { if (path) { - $('#txtMovieRecordingPath', page).val(path); + page.querySelector('#txtMovieRecordingPath').value = path; } picker.close(); @@ -99,7 +101,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () { picker.show({ callback: function (path) { if (path) { - $('#txtSeriesRecordingPath', page).val(path); + page.querySelector('#txtSeriesRecordingPath').value = path; } picker.close(); @@ -115,7 +117,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () { includeFiles: true, callback: function (path) { if (path) { - $('#txtPostProcessor', page).val(path); + page.querySelector('#txtPostProcessor').value = path; } picker.close(); diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js index b0d13f33450..cdcd84ee8bd 100644 --- a/src/controllers/livetvstatus.js +++ b/src/controllers/livetvstatus.js @@ -89,8 +89,8 @@ function submitAddDeviceForm(page) { type: 'POST', url: ApiClient.getUrl('LiveTv/TunerHosts'), data: JSON.stringify({ - Type: $('#selectTunerDeviceType', page).val(), - Url: $('#txtDevicePath', page).val() + Type: page.querySelector('#selectTunerDeviceType').value, + Url: page.querySelector('#txtDevicePath').value }), contentType: 'application/json' }).then(function () { @@ -129,11 +129,17 @@ function renderProviders(page, providers) { html += ''; } - const elem = $('.providerList', page).html(html); - $('.btnOptions', elem).on('click', function () { - const id = this.getAttribute('data-id'); - showProviderOptions(page, id, this); - }); + const elem = page.querySelector('.providerList'); + elem.innerHTML = html; + if (elem.querySelector('.btnOptions')) { + const btnOptionElements = elem.querySelectorAll('.btnOptions'); + btnOptionElements.forEach(function (btn) { + btn.addEventListener('click', function () { + const id = this.getAttribute('data-id'); + showProviderOptions(page, id, btn); + }); + }); + } } function showProviderOptions(page, providerId, button) { @@ -297,14 +303,17 @@ function onDevicesListClick(e) { $(document).on('pageinit', '#liveTvStatusPage', function () { const page = this; - $('.btnAddDevice', page).on('click', function () { + page.querySelector('.btnAddDevice').addEventListener('click', function () { addDevice(); }); - $('.formAddDevice', page).on('submit', function () { - submitAddDeviceForm(page); - return false; - }); - $('.btnAddProvider', page).on('click', function () { + if (page.querySelector('.formAddDevice')) { + // unused? + page.querySelector('.formAddDevice').addEventListener('submit', function (e) { + e.preventDefault(); + submitAddDeviceForm(page); + }); + } + page.querySelector('.btnAddProvider').addEventListener('click', function () { addProvider(this); }); page.querySelector('.devicesList').addEventListener('click', onDevicesListClick); diff --git a/src/controllers/wizard/start/index.js b/src/controllers/wizard/start/index.js index 222e017952f..4eb6423b645 100644 --- a/src/controllers/wizard/start/index.js +++ b/src/controllers/wizard/start/index.js @@ -3,11 +3,14 @@ import loading from '../../../components/loading/loading'; import '../../../elements/emby-button/emby-button'; import '../../../elements/emby-select/emby-select'; import Dashboard from '../../../utils/dashboard'; +import dom from 'scripts/dom'; function loadPage(page, config, languageOptions) { - $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { + const elem = page.querySelector('#selectLocalizationLanguage'); + elem.innerHTML = languageOptions.map(function (l) { return ''; - })).val(config.UICulture); + }).join(''); + elem.value = config.UICulture; loading.hide(); } @@ -15,7 +18,7 @@ function save(page) { loading.show(); const apiClient = ApiClient; apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { - config.UICulture = $('#selectLocalizationLanguage', page).val(); + config.UICulture = page.querySelector('#selectLocalizationLanguage').value; apiClient.ajax({ type: 'POST', data: JSON.stringify(config), @@ -27,13 +30,13 @@ function save(page) { }); } -function onSubmit() { - save($(this).parents('.page')); - return false; +function onSubmit(e) { + e.preventDefault(); + save(dom.parentWithClass(this, 'page')); } export default function (view) { - $('.wizardStartForm', view).on('submit', onSubmit); + view.querySelector('.wizardStartForm').addEventListener('submit', onSubmit); view.addEventListener('viewshow', function () { document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); loading.show();