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

update image editor

This commit is contained in:
Luke Pulverenti 2016-08-30 13:39:15 -04:00
parent 32434416d7
commit d5577ab04d
9 changed files with 130 additions and 67 deletions

View file

@ -31,12 +31,14 @@
}
}
function addListeners(elems, eventName, fn) {
function addListeners(container, className, eventName, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener(eventName, fn);
}
container.addEventListener(eventName, function (e) {
var elem = dom.parentWithClass(e.target, className);
if (elem) {
fn.call(elem, e);
}
});
}
function reloadItem(page, item, apiClient) {
@ -84,24 +86,31 @@
// For search hints
return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
}
function getCardHtml(image, index, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
var html = '';
var cssClass = "card scalableCard";
cssClass += " midBackdropCard midBackdropCard-scalable";
var cardBoxCssClass = 'cardBox visualCardBox';
cssClass += " backdropCard backdropCard-scalable";
if (tagName == 'button') {
html += '<button type="button" class="' + cssClass + '">';
cssClass += ' card-focusscale btnImageCard';
cardBoxCssClass += ' cardBox-focustransform cardBox-focustransform-transition';
html += '<button type="button" class="' + cssClass + '"';
} else {
html += '<div class="' + cssClass + '">';
html += '<div class="' + cssClass + '"';
}
html += '<div class="cardBox visualCardBox">';
html += ' data-id="' + currentItem.Id + '" data-serverid="' + apiClient.serverId() + '" data-index="' + index + '" data-imagetype="' + image.ImageType + '" data-providers="' + imageProviders.length + '"';
html += '>';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable" style="background-color:transparent;">';
html += '<div class="cardPadder-backdrop"></div>';
@ -161,6 +170,28 @@
return html;
}
function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
var afterConfirm = function () {
apiClient.deleteItemImage(itemId, type, index).then(function () {
hasChanges = true;
reload(context);
});
};
if (!enableConfirmation) {
afterConfirm();
return;
}
require(['confirm'], function (confirm) {
confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(afterConfirm);
});
}
function renderImages(page, item, apiClient, images, imageProviders, elem) {
var html = '';
@ -184,30 +215,19 @@
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
addListeners(elem.querySelectorAll('.btnSearchImages'), 'click', function () {
addListeners(elem, 'btnSearchImages', 'click', function () {
showImageDownloader(page, this.getAttribute('data-imagetype'));
});
addListeners(elem.querySelectorAll('.btnDeleteImage'), 'click', function () {
addListeners(elem, 'btnDeleteImage', 'click', function () {
var type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index');
index = index == "null" ? null : parseInt(index);
require(['confirm'], function (confirm) {
confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(function () {
apiClient.deleteItemImage(currentItem.Id, type, index).then(function () {
hasChanges = true;
reload(page);
});
});
});
deleteImage(page, currentItem.Id, type, index, apiClient, true);
});
addListeners(elem.querySelectorAll('.btnMoveImage'), 'click', function () {
addListeners(elem, 'btnMoveImage', 'click', function () {
var type = this.getAttribute('data-imagetype');
var index = parseInt(this.getAttribute('data-index'));
var newIndex = parseInt(this.getAttribute('data-newindex'));
@ -274,9 +294,58 @@
});
}
function showActionSheet(context, imageCard) {
var itemId = imageCard.getAttribute('data-id');
var serverId = imageCard.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId);
var type = imageCard.getAttribute('data-imagetype');
var index = parseInt(imageCard.getAttribute('data-index'));
var providerCount = parseInt(imageCard.getAttribute('data-providers'));
require(['actionsheet'], function (actionSheet) {
var commands = [];
commands.push({
name: globalize.translate('sharedcomponents#Delete'),
id: 'delete'
});
if (providerCount) {
commands.push({
name: globalize.translate('sharedcomponents#Search'),
id: 'search'
});
}
actionSheet.show({
items: commands,
positionTo: imageCard
}).then(function (id) {
switch (id) {
case 'delete':
deleteImage(context, itemId, type, index, apiClient, false);
break;
case 'search':
showImageDownloader(context, type);
break;
default:
break;
}
});
});
}
function initEditor(page, options) {
addListeners(page.querySelectorAll('.btnOpenUploadMenu'), 'click', function () {
addListeners(page, 'btnOpenUploadMenu', 'click', function () {
var imageType = this.getAttribute('data-imagetype');
require(['components/imageuploader/imageuploader'], function (imageUploader) {
@ -296,9 +365,13 @@
});
});
addListeners(page.querySelectorAll('.btnBrowseAllImages'), 'click', function () {
addListeners(page, 'btnBrowseAllImages', 'click', function () {
showImageDownloader(page, this.getAttribute('data-imagetype') || 'Primary');
});
addListeners(page, 'btnImageCard', 'click', function () {
showActionSheet(page, this);
});
}
function showEditor(options, resolve, reject) {
@ -327,7 +400,6 @@
dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
dlg.querySelector('.formDialogHeaderTitle').innerHTML = item.Name;
document.body.appendChild(dlg);