continue jquery removal

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 '<option value="' + p + '">' + p + '</option>';
             });
 
-            $('#selectImageProvider', page).html('<option value="">' + Globalize.translate('LabelAll') + '</option>' + providersHtml).val(provider);
+            var selectImageProvider = page.querySelector('#selectImageProvider');
+            selectImageProvider.innerHTML = '<option value="">' + Globalize.translate('LabelAll') + '</option>' + 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 () {
+        var btnNextPage = page.querySelector('.btnNextPage');
-            browsableImageStartIndex += browsableImagePageSize;
+        var btnPreviousPage = page.querySelector('.btnPreviousPage');
-            reloadBrowsableImages(page);
-        });
 
-        $('.btnPreviousPage', page).on('click', function () {
+        if (btnNextPage) {
-            browsableImageStartIndex -= browsableImagePageSize;
+            btnNextPage.addEventListener('click', function () {
-            reloadBrowsableImages(page);
+                browsableImageStartIndex += browsableImagePageSize;
-        });
+                reloadBrowsableImages(page);
+            });
+        }
 
-        $('.btnDownloadRemoteImage', page).on('click', function () {
+        if (btnPreviousPage) {
-
+            btnPreviousPage.addEventListener('click', function () {
-            downloadRemoteImage(page, this.getAttribute('data-imageurl'), this.getAttribute('data-imagetype'), this.getAttribute('data-imageprovider'));
+                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;
+                currentResolve = resolve;
-            hasChanges = false;
+                currentReject = reject;
-            browsableImageStartIndex = 0;
+                hasChanges = false;
-            browsableImageType = imageType || 'Primary';
+                browsableImageStartIndex = 0;
-            selectedProvider = null;
+                browsableImageType = imageType || 'Primary';
+                selectedProvider = null;
 
-            showEditor(itemId, itemType);
+                showEditor(itemId, itemType);
-            return deferred.promise();
+            });
         }
     };
 });

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;
-                    hasChanges = true;
+                reload(page);
-                    reload(page);
-                }
             });
         });
     }