mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #1655 from Camc314/migrate-to-ES6-43

Browse source 
Migration of imageEditor and imageDownloader to ES6 modules
This commit is contained in:
Anthony Lavado 2020-07-28 16:38:45 -07:00 • committed by GitHub
commit 63bd2ef908
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 159 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -114,6 +114,8 @@
"src/components/htmlMediaHelper.js", "src/components/htmlMediaHelper.js",
"src/components/imageOptionsEditor/imageOptionsEditor.js", "src/components/imageOptionsEditor/imageOptionsEditor.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageDownloader/imageDownloader.js",
"src/components/imageeditor/imageeditor.js",
"src/components/imageUploader/imageUploader.js", "src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemContextMenu.js", "src/components/itemContextMenu.js",

110
src/components/imageDownloader/imageDownloader.js
View file

@ -1,23 +1,39 @@
define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (dom, loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) { import dom from 'dom';
'use strict'; import loading from 'loading';
import appHost from 'apphost';
import dialogHelper from 'dialogHelper';
import connectionManager from 'connectionManager';
import imageLoader from 'imageLoader';
import browser from 'browser';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import globalize from 'globalize';
import require from 'require';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'emby-button';
import 'formDialogStyle';
import 'cardStyle';
var enableFocusTransform = !browser.slow && !browser.edge; /* eslint-disable indent */
var currentItemId; const enableFocusTransform = !browser.slow && !browser.edge;
var currentItemType;
var currentResolve; let currentItemId;
var currentReject; let currentItemType;
var hasChanges = false; let currentResolve;
let currentReject;
let hasChanges = false;
// These images can be large and we're seeing memory problems in safari // These images can be large and we're seeing memory problems in safari
var browsableImagePageSize = browser.slow ? 6 : 30; const browsableImagePageSize = browser.slow ? 6 : 30;
var browsableImageStartIndex = 0; let browsableImageStartIndex = 0;
var browsableImageType = 'Primary'; let browsableImageType = 'Primary';
var selectedProvider; let selectedProvider;
function getBaseRemoteOptions() { function getBaseRemoteOptions() {
var options = {}; const options = {};
options.itemId = currentItemId; options.itemId = currentItemId;
@ -27,14 +43,14 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
function reloadBrowsableImages(page, apiClient) { function reloadBrowsableImages(page, apiClient) {
loading.show(); loading.show();
var options = getBaseRemoteOptions(); const options = getBaseRemoteOptions();
options.type = browsableImageType; options.type = browsableImageType;
options.startIndex = browsableImageStartIndex; options.startIndex = browsableImageStartIndex;
options.limit = browsableImagePageSize; options.limit = browsableImagePageSize;
options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked; options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked;
var provider = selectedProvider || ''; const provider = selectedProvider || '';
if (provider) { if (provider) {
options.ProviderName = provider; options.ProviderName = provider;
@ -45,11 +61,11 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
page.querySelector('#selectBrowsableImageType').value = browsableImageType; page.querySelector('#selectBrowsableImageType').value = browsableImageType;
var providersHtml = result.Providers.map(function (p) { const providersHtml = result.Providers.map(function (p) {
return '<option value="' + p + '">' + p + '</option>'; return '<option value="' + p + '">' + p + '</option>';
}); });
var selectImageProvider = page.querySelector('#selectImageProvider'); const selectImageProvider = page.querySelector('#selectImageProvider');
selectImageProvider.innerHTML = '<option value="">' + globalize.translate('All') + '</option>' + providersHtml; selectImageProvider.innerHTML = '<option value="">' + globalize.translate('All') + '</option>' + providersHtml;
selectImageProvider.value = provider; selectImageProvider.value = provider;
@ -60,18 +76,18 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) { function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) {
page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount); page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount);
var html = ''; let html = '';
for (var i = 0, length = imagesResult.Images.length; i < length; i++) { for (let i = 0, length = imagesResult.Images.length; i < length; i++) {
html += getRemoteImageHtml(imagesResult.Images[i], imageType, apiClient); html += getRemoteImageHtml(imagesResult.Images[i], imageType, apiClient);
} }
var availableImagesList = page.querySelector('.availableImagesList'); const availableImagesList = page.querySelector('.availableImagesList');
availableImagesList.innerHTML = html; availableImagesList.innerHTML = html;
imageLoader.lazyChildren(availableImagesList); imageLoader.lazyChildren(availableImagesList);
var btnNextPage = page.querySelector('.btnNextPage'); const btnNextPage = page.querySelector('.btnNextPage');
var btnPreviousPage = page.querySelector('.btnPreviousPage'); const btnPreviousPage = page.querySelector('.btnPreviousPage');
if (btnNextPage) { if (btnNextPage) {
btnNextPage.addEventListener('click', function () { btnNextPage.addEventListener('click', function () {
@ -89,18 +105,18 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function getPagingHtml(startIndex, limit, totalRecordCount) { function getPagingHtml(startIndex, limit, totalRecordCount) {
var html = ''; let html = '';
var recordsEnd = Math.min(startIndex + limit, totalRecordCount); const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
// 20 is the minimum page size // 20 is the minimum page size
var showControls = totalRecordCount > limit; const showControls = totalRecordCount > limit;
html += '<div class="listPaging">'; html += '<div class="listPaging">';
html += '<span style="margin-right: 10px;">'; html += '<span style="margin-right: 10px;">';
var startAtDisplay = totalRecordCount ? startIndex + 1 : 0; const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount); html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
html += '</span>'; html += '</span>';
@ -119,7 +135,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function downloadRemoteImage(page, apiClient, url, type, provider) { function downloadRemoteImage(page, apiClient, url, type, provider) {
var options = getBaseRemoteOptions(); const options = getBaseRemoteOptions();
options.Type = type; options.Type = type;
options.ImageUrl = url; options.ImageUrl = url;
@ -129,7 +145,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
apiClient.downloadRemoteImage(options).then(function () { apiClient.downloadRemoteImage(options).then(function () {
hasChanges = true; hasChanges = true;
var dlg = dom.parentWithClass(page, 'dialog'); const dlg = dom.parentWithClass(page, 'dialog');
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
} }
@ -139,17 +155,17 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function getRemoteImageHtml(image, imageType, apiClient) { function getRemoteImageHtml(image, imageType, apiClient) {
var tagName = layoutManager.tv ? 'button' : 'div'; const tagName = layoutManager.tv ? 'button' : 'div';
var enableFooterButtons = !layoutManager.tv; const enableFooterButtons = !layoutManager.tv;
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard imageEditorCard'; let cssClass = 'card scalableCard imageEditorCard';
var cardBoxCssClass = 'cardBox visualCardBox'; const cardBoxCssClass = 'cardBox visualCardBox';
var shape = 'backdrop'; let shape;
if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') { if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
shape = 'backdrop'; shape = 'backdrop';
} else if (imageType === 'Banner') { } else if (imageType === 'Banner') {
@ -284,14 +300,14 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
}); });
page.addEventListener('click', function (e) { page.addEventListener('click', function (e) {
var btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage'); const btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
if (btnDownloadRemoteImage) { if (btnDownloadRemoteImage) {
var card = dom.parentWithClass(btnDownloadRemoteImage, 'card'); const card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider')); downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
return; return;
} }
var btnImageCard = dom.parentWithClass(e.target, 'btnImageCard'); const btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
if (btnImageCard) { if (btnImageCard) {
downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider')); downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
} }
@ -302,12 +318,12 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
loading.show(); loading.show();
require(['text!./imageDownloader.template.html'], function (template) { require(['text!./imageDownloader.template.html'], function (template) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
currentItemId = itemId; currentItemId = itemId;
currentItemType = itemType; currentItemType = itemType;
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -317,7 +333,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
@ -330,7 +346,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
dialogHelper.open(dlg); dialogHelper.open(dlg);
var editorContent = dlg.querySelector('.formDialogContent'); const editorContent = dlg.querySelector('.formDialogContent');
initEditor(editorContent, apiClient); initEditor(editorContent, apiClient);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
@ -342,7 +358,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function onDialogClosed() { function onDialogClosed() {
var dlg = this; const dlg = this;
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
@ -356,8 +372,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
} }
return { export function show(itemId, serverId, itemType, imageType) {
show: function (itemId, serverId, itemType, imageType) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
@ -365,9 +380,12 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
browsableImageStartIndex = 0; browsableImageStartIndex = 0;
browsableImageType = imageType || 'Primary'; browsableImageType = imageType || 'Primary';
selectedProvider = null; selectedProvider = null;
showEditor(itemId, serverId, itemType); showEditor(itemId, serverId, itemType);
}); });
} }
export default {
show: show
}; };
});
/* eslint-enable indent */

139
src/components/imageeditor/imageeditor.js
View file

@ -1,13 +1,29 @@
define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) { import dialogHelper from 'dialogHelper';
'use strict'; import connectionManager from 'connectionManager';
import loading from 'loading';
import dom from 'dom';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import globalize from 'globalize';
import scrollHelper from 'scrollHelper';
import imageLoader from 'imageLoader';
import browser from 'browser';
import appHost from 'apphost';
import 'cardStyle';
import 'formDialogStyle';
import 'emby-button';
import 'paper-icon-button-light';
import 'css!./imageeditor';
var enableFocusTransform = !browser.slow && !browser.edge; /* eslint-disable indent */
var currentItem; const enableFocusTransform = !browser.slow && !browser.edge;
var hasChanges = false;
let currentItem;
let hasChanges = false;
function getBaseRemoteOptions() { function getBaseRemoteOptions() {
var options = {}; const options = {};
options.itemId = currentItem.Id; options.itemId = currentItem.Id;
@ -17,7 +33,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
function reload(page, item, focusContext) { function reload(page, item, focusContext) {
loading.show(); loading.show();
var apiClient; let apiClient;
if (item) { if (item) {
apiClient = connectionManager.getApiClient(item.ServerId); apiClient = connectionManager.getApiClient(item.ServerId);
@ -32,7 +48,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
function addListeners(container, className, eventName, fn) { function addListeners(container, className, eventName, fn) {
container.addEventListener(eventName, function (e) { container.addEventListener(eventName, function (e) {
var elem = dom.parentWithClass(e.target, className); const elem = dom.parentWithClass(e.target, className);
if (elem) { if (elem) {
fn.call(elem, e); fn.call(elem, e);
} }
@ -43,8 +59,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
currentItem = item; currentItem = item;
apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) { apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages'); const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) { for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
if (providers.length) { if (providers.length) {
btnBrowseAllImages[i].classList.remove('hide'); btnBrowseAllImages[i].classList.remove('hide');
} else { } else {
@ -87,10 +103,10 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) { function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard imageEditorCard'; let cssClass = 'card scalableCard imageEditorCard';
var cardBoxCssClass = 'cardBox visualCardBox'; const cardBoxCssClass = 'cardBox visualCardBox';
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -120,7 +136,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
html += '<div class="cardContent">'; html += '<div class="cardContent">';
var imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize }); const imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center center;background-size:contain;"></div>'; html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center center;background-size:contain;"></div>';
@ -172,7 +188,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) { function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
var afterConfirm = function () { const afterConfirm = function () {
apiClient.deleteItemImage(itemId, type, index).then(function () { apiClient.deleteItemImage(itemId, type, index).then(function () {
hasChanges = true; hasChanges = true;
reload(context); reload(context);
@ -184,8 +200,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
return; return;
} }
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm.default({ confirm({
text: globalize.translate('ConfirmDeleteImage'), text: globalize.translate('ConfirmDeleteImage'),
confirmText: globalize.translate('Delete'), confirmText: globalize.translate('Delete'),
@ -200,27 +216,26 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
hasChanges = true; hasChanges = true;
reload(context, null, focusContext); reload(context, null, focusContext);
}, function () { }, function () {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(globalize.translate('DefaultErrorMessage')); alert(globalize.translate('DefaultErrorMessage'));
}); });
}); });
} }
function renderImages(page, item, apiClient, images, imageProviders, elem) { function renderImages(page, item, apiClient, images, imageProviders, elem) {
var html = ''; let html = '';
var imageSize = 300; let imageSize = 300;
var windowSize = dom.getWindowSize(); const windowSize = dom.getWindowSize();
if (windowSize.innerWidth >= 1280) { if (windowSize.innerWidth >= 1280) {
imageSize = Math.round(windowSize.innerWidth / 4); imageSize = Math.round(windowSize.innerWidth / 4);
} }
var tagName = layoutManager.tv ? 'button' : 'div'; const tagName = layoutManager.tv ? 'button' : 'div';
var enableFooterButtons = !layoutManager.tv; const enableFooterButtons = !layoutManager.tv;
for (var i = 0, length = images.length; i < length; i++) {
var image = images[i];
for (let i = 0, length = images.length; i < length; i++) {
const image = images[i];
html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons); html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
} }
@ -229,7 +244,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) { function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
var images = imageInfos.filter(function (i) { const images = imageInfos.filter(function (i) {
return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter'; return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
}); });
@ -237,7 +252,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) { function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
var images = imageInfos.filter(function (i) { const images = imageInfos.filter(function (i) {
return i.ImageType === 'Backdrop'; return i.ImageType === 'Backdrop';
}).sort(function (a, b) { }).sort(function (a, b) {
return a.ImageIndex - b.ImageIndex; return a.ImageIndex - b.ImageIndex;
@ -252,7 +267,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) { function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) {
var images = imageInfos.filter(function (i) { const images = imageInfos.filter(function (i) {
return i.ImageType === 'Screenshot'; return i.ImageType === 'Screenshot';
}).sort(function (a, b) { }).sort(function (a, b) {
return a.ImageIndex - b.ImageIndex; return a.ImageIndex - b.ImageIndex;
@ -267,7 +282,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function showImageDownloader(page, imageType) { function showImageDownloader(page, imageType) {
require(['imageDownloader'], function (ImageDownloader) { import('imageDownloader').then(({default: ImageDownloader}) => {
ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () { ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () {
hasChanges = true; hasChanges = true;
reload(page); reload(page);
@ -276,17 +291,17 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function showActionSheet(context, imageCard) { function showActionSheet(context, imageCard) {
var itemId = imageCard.getAttribute('data-id'); const itemId = imageCard.getAttribute('data-id');
var serverId = imageCard.getAttribute('data-serverid'); const serverId = imageCard.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var type = imageCard.getAttribute('data-imagetype'); const type = imageCard.getAttribute('data-imagetype');
var index = parseInt(imageCard.getAttribute('data-index')); const index = parseInt(imageCard.getAttribute('data-index'));
var providerCount = parseInt(imageCard.getAttribute('data-providers')); const providerCount = parseInt(imageCard.getAttribute('data-providers'));
var numImages = parseInt(imageCard.getAttribute('data-numimages')); const numImages = parseInt(imageCard.getAttribute('data-numimages'));
require(['actionsheet'], function (actionSheet) { import('actionsheet').then(({default: actionSheet}) => {
var commands = []; const commands = [];
commands.push({ commands.push({
name: globalize.translate('Delete'), name: globalize.translate('Delete'),
@ -343,9 +358,9 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function initEditor(context, options) { function initEditor(context, options) {
var uploadButtons = context.querySelectorAll('.btnOpenUploadMenu'); const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
var isFileInputSupported = appHost.supports('fileinput'); const isFileInputSupported = appHost.supports('fileinput');
for (var i = 0, length = uploadButtons.length; i < length; i++) { for (let i = 0, length = uploadButtons.length; i < length; i++) {
if (isFileInputSupported) { if (isFileInputSupported) {
uploadButtons[i].classList.remove('hide'); uploadButtons[i].classList.remove('hide');
} else { } else {
@ -354,9 +369,9 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
addListeners(context, 'btnOpenUploadMenu', 'click', function () { addListeners(context, 'btnOpenUploadMenu', 'click', function () {
var imageType = this.getAttribute('data-imagetype'); const imageType = this.getAttribute('data-imagetype');
require(['imageUploader'], function (imageUploader) { import('imageUploader').then(({default: imageUploader}) => {
imageUploader.show({ imageUploader.show({
theme: options.theme, theme: options.theme,
@ -386,32 +401,32 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
}); });
addListeners(context, 'btnDeleteImage', 'click', function () { addListeners(context, 'btnDeleteImage', 'click', function () {
var type = this.getAttribute('data-imagetype'); const type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index'); let index = this.getAttribute('data-index');
index = index === 'null' ? null : parseInt(index); index = index === 'null' ? null : parseInt(index);
var apiClient = connectionManager.getApiClient(currentItem.ServerId); const apiClient = connectionManager.getApiClient(currentItem.ServerId);
deleteImage(context, currentItem.Id, type, index, apiClient, true); deleteImage(context, currentItem.Id, type, index, apiClient, true);
}); });
addListeners(context, 'btnMoveImage', 'click', function () { addListeners(context, 'btnMoveImage', 'click', function () {
var type = this.getAttribute('data-imagetype'); const type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index'); const index = this.getAttribute('data-index');
var newIndex = this.getAttribute('data-newindex'); const newIndex = this.getAttribute('data-newindex');
var apiClient = connectionManager.getApiClient(currentItem.ServerId); const apiClient = connectionManager.getApiClient(currentItem.ServerId);
moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer')); moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
}); });
} }
function showEditor(options, resolve, reject) { function showEditor(options, resolve, reject) {
var itemId = options.itemId; const itemId = options.itemId;
var serverId = options.serverId; const serverId = options.serverId;
loading.show(); loading.show();
require(['text!./imageeditor.template.html'], function (template) { import('text!./imageeditor.template.html').then(({default: template}) => {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -421,7 +436,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -459,13 +474,15 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
}); });
} }
return { export function show (options) {
show: function (options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
hasChanges = false; hasChanges = false;
showEditor(options, resolve, reject); showEditor(options, resolve, reject);
}); });
} }
export default {
show
}; };
});
/* eslint-enable indent */