From 2d86f49653793d1f9d86ed628ec6783698bd4ff0 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sat, 25 Jun 2016 00:22:11 -0400 Subject: [PATCH] continue jquery removal --- .../imagedownloader/imagedownloader.js | 102 ++++++++++++------ .../components/imageeditor/imageeditor.js | 8 +- 2 files changed, 70 insertions(+), 40 deletions(-) diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.js b/dashboard-ui/components/imagedownloader/imagedownloader.js index 88fc60b92e..4456ecb49a 100644 --- a/dashboard-ui/components/imagedownloader/imagedownloader.js +++ b/dashboard-ui/components/imagedownloader/imagedownloader.js @@ -1,8 +1,9 @@ -define(['dialogHelper', 'jQuery', 'emby-checkbox', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, $) { +define(['dialogHelper', 'emby-checkbox', 'emby-button', 'paper-icon-button-light'], function (dialogHelper) { var currentItemId; var currentItemType; - var currentDeferred; + var currentResolve; + var currentReject; var hasChanges = false; // These images can be large and we're seeing memory problems in safari @@ -30,7 +31,7 @@ options.type = browsableImageType; options.startIndex = browsableImageStartIndex; options.limit = browsableImagePageSize; - options.IncludeAllLanguages = $('#chkAllLanguages', page).checked(); + options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked; var provider = selectedProvider || ''; @@ -42,13 +43,15 @@ renderRemoteImages(page, result, browsableImageType, options.startIndex, options.limit); - $('#selectBrowsableImageType', page).val(browsableImageType); + page.querySelector('#selectBrowsableImageType').value = browsableImageType; var providersHtml = result.Providers.map(function (p) { return ''; }); - $('#selectImageProvider', page).html('' + providersHtml).val(provider); + var selectImageProvider = page.querySelector('#selectImageProvider'); + selectImageProvider.innerHTML = '' + providersHtml; + selectImageProvider.value = provider; Dashboard.hideLoadingMsg(); }); @@ -56,7 +59,8 @@ } function renderRemoteImages(page, imagesResult, imageType, startIndex, limit) { - $('.availableImagesPaging', page).html(getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount)); + + page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount); var html = ''; @@ -69,20 +73,22 @@ availableImagesList.innerHTML = html; ImageLoader.lazyChildren(availableImagesList); - $('.btnNextPage', page).on('click', function () { - browsableImageStartIndex += browsableImagePageSize; - reloadBrowsableImages(page); - }); + var btnNextPage = page.querySelector('.btnNextPage'); + var btnPreviousPage = page.querySelector('.btnPreviousPage'); - $('.btnPreviousPage', page).on('click', function () { - browsableImageStartIndex -= browsableImagePageSize; - reloadBrowsableImages(page); - }); + if (btnNextPage) { + btnNextPage.addEventListener('click', function () { + browsableImageStartIndex += browsableImagePageSize; + reloadBrowsableImages(page); + }); + } - $('.btnDownloadRemoteImage', page).on('click', function () { - - downloadRemoteImage(page, this.getAttribute('data-imageurl'), this.getAttribute('data-imagetype'), this.getAttribute('data-imageprovider')); - }); + if (btnPreviousPage) { + btnPreviousPage.addEventListener('click', function () { + browsableImageStartIndex -= browsableImagePageSize; + reloadBrowsableImages(page); + }); + } } @@ -117,6 +123,19 @@ return html; } + function parentWithClass(elem, className) { + + while (!elem.classList || !elem.classList.contains(className)) { + elem = elem.parentNode; + + if (!elem) { + return null; + } + } + + return elem; + } + function downloadRemoteImage(page, url, type, provider) { var options = getBaseRemoteOptions(); @@ -130,7 +149,7 @@ ApiClient.downloadRemoteImage(options).then(function () { hasChanges = true; - var dlg = $(page).parents('.dialog')[0]; + var dlg = parentWithClass(page, 'dialog'); dialogHelper.close(dlg); }); } @@ -233,8 +252,8 @@ function initEditor(page) { - $('#selectBrowsableImageType', page).on('change', function () { + page.querySelector('#selectBrowsableImageType').addEventListener('change', function () { browsableImageType = this.value; browsableImageStartIndex = 0; selectedProvider = null; @@ -242,7 +261,7 @@ reloadBrowsableImages(page); }); - $('#selectImageProvider', page).on('change', function () { + page.querySelector('#selectImageProvider').addEventListener('change', function () { browsableImageStartIndex = 0; selectedProvider = this.value; @@ -250,12 +269,20 @@ reloadBrowsableImages(page); }); - $('#chkAllLanguages', page).on('change', function () { + page.querySelector('#chkAllLanguages').addEventListener('change', function () { browsableImageStartIndex = 0; reloadBrowsableImages(page); }); + + page.addEventListener('click', function(e) { + + var btnDownloadRemoteImage = parentWithClass(e.target, 'btnDownloadRemoteImage'); + if (btnDownloadRemoteImage) { + downloadRemoteImage(page, btnDownloadRemoteImage.getAttribute('data-imageurl'), btnDownloadRemoteImage.getAttribute('data-imagetype'), btnDownloadRemoteImage.getAttribute('data-imageprovider')); + } + }); } function showEditor(itemId, itemType) { @@ -273,7 +300,8 @@ var dlg = dialogHelper.createDialog({ size: 'fullscreen-border', - lockScroll: true + lockScroll: true, + removeOnClose: true }); var theme = 'b'; @@ -296,14 +324,14 @@ document.body.appendChild(dlg); // Has to be assigned a z-index after the call to .open() - $(dlg).on('close', onDialogClosed); + dlg.addEventListener('close', onDialogClosed); dialogHelper.open(dlg); var editorContent = dlg.querySelector('.editorContent'); initEditor(editorContent); - $('.btnCloseDialog', dlg).on('click', function () { + dlg.querySelector('.btnCloseDialog').addEventListener('click', function () { dialogHelper.close(dlg); }); @@ -316,24 +344,28 @@ function onDialogClosed() { - $(this).remove(); Dashboard.hideLoadingMsg(); - currentDeferred.resolveWith(null, [hasChanges]); + if (hasChanges) { + currentResolve(); + } else { + currentReject(); + } } return { show: function (itemId, itemType, imageType) { - var deferred = jQuery.Deferred(); + return new Promise(function (resolve, reject) { - currentDeferred = deferred; - hasChanges = false; - browsableImageStartIndex = 0; - browsableImageType = imageType || 'Primary'; - selectedProvider = null; + currentResolve = resolve; + currentReject = reject; + hasChanges = false; + browsableImageStartIndex = 0; + browsableImageType = imageType || 'Primary'; + selectedProvider = null; - showEditor(itemId, itemType); - return deferred.promise(); + showEditor(itemId, itemType); + }); } }; }); \ No newline at end of file diff --git a/dashboard-ui/components/imageeditor/imageeditor.js b/dashboard-ui/components/imageeditor/imageeditor.js index a17530bfe3..9e1f13e700 100644 --- a/dashboard-ui/components/imageeditor/imageeditor.js +++ b/dashboard-ui/components/imageeditor/imageeditor.js @@ -206,12 +206,10 @@ function showImageDownloader(page, imageType) { require(['components/imagedownloader/imagedownloader'], function (ImageDownloader) { - ImageDownloader.show(currentItem.Id, currentItem.Type, imageType).then(function (hasChanged) { + ImageDownloader.show(currentItem.Id, currentItem.Type, imageType).then(function () { - if (hasChanged) { - hasChanges = true; - reload(page); - } + hasChanges = true; + reload(page); }); }); }