cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

rework image editor

Browse Source
This commit is contained in:
Luke Pulverenti 2015-09-17 13:24:23 -04:00
parent 5bccc1840e
commit 1bb7d85b87
9 changed files with 458 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

338
dashboard-ui/components/imagedownloader/imagedownloader.js Normal file
View File

@ -0,0 +1,338 @@
(function ($, window, document) {
var currentItemId;
var currentDeferred;
var hasChanges = false;
var browsableImagePageSize = 10;
var browsableImageStartIndex = 0;
var browsableImageType = 'Primary';
var selectedProvider;
function getBaseRemoteOptions() {
var options = {};
options.itemId = currentItemId;
return options;
}
function reloadBrowsableImages(page) {
Dashboard.showLoadingMsg();
var options = getBaseRemoteOptions();
options.type = browsableImageType;
options.startIndex = browsableImageStartIndex;
options.limit = browsableImagePageSize;
options.IncludeAllLanguages = $('#chkAllLanguages', page).checked();
var provider = selectedProvider || '';
if (provider) {
options.ProviderName = provider;
}
ApiClient.getAvailableRemoteImages(options).done(function (result) {
renderRemoteImages(page, result, browsableImageType, options.startIndex, options.limit);
$('#selectBrowsableImageType', page).val(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);
Dashboard.hideLoadingMsg();
});
}
function renderRemoteImages(page, imagesResult, imageType, startIndex, limit) {
$('.availableImagesPaging', page).html(getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount)).trigger('create');
var html = '';
for (var i = 0, length = imagesResult.Images.length; i < length; i++) {
html += getRemoteImageHtml(imagesResult.Images[i], imageType);
}
$('.availableImagesList', page).html(html).trigger('create');
$('.btnNextPage', page).on('click', function () {
browsableImageStartIndex += browsableImagePageSize;
reloadBrowsableImages(page);
});
$('.btnPreviousPage', page).on('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'));
});
}
function getPagingHtml(startIndex, limit, totalRecordCount) {
var html = '';
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
// 20 is the minimum page size
var showControls = totalRecordCount > limit;
html += '<div class="listPaging">';
html += '<span style="margin-right: 10px;">';
var startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount;
html += '</span>';
if (showControls) {
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
html += '<paper-icon-button icon="arrow-back" title="' + Globalize.translate('ButtonPreviousPage') + '" class="btnPreviousPage" ' + (startIndex ? '' : 'disabled') + '></paper-icon-button>';
html += '<paper-icon-button icon="arrow-forward" title="' + Globalize.translate('ButtonNextPage') + '" class="btnNextPage" ' + (startIndex + limit > totalRecordCount ? 'disabled' : '') + '></paper-icon-button>';
html += '</div>';
}
html += '</div>';
return html;
}
function downloadRemoteImage(page, url, type, provider) {
var options = getBaseRemoteOptions();
options.Type = type;
options.ImageUrl = url;
options.ProviderName = provider;
Dashboard.showLoadingMsg();
ApiClient.downloadRemoteImage(options).done(function () {
hasChanges = true;
history.back();
});
}
function getDisplayUrl(url) {
return ApiClient.getUrl("Images/Remote", { imageUrl: url });
}
function getRemoteImageHtml(image, imageType) {
var html = '';
html += '<div class="remoteImageContainer">';
var cssClass = "remoteImage";
if (imageType == "Backdrop" || imageType == "Art" || imageType == "Thumb" || imageType == "Logo") {
cssClass += " remoteBackdropImage";
}
else if (imageType == "Banner") {
cssClass += " remoteBannerImage";
}
else if (imageType == "Disc") {
cssClass += " remoteDiscImage";
}
else {
if (currentItem.Type == "Episode") {
cssClass += " remoteBackdropImage";
}
else if (currentItem.Type == "MusicAlbum" || currentItem.Type == "MusicArtist") {
cssClass += " remoteDiscImage";
}
else {
cssClass += " remotePosterImage";
}
}
var displayUrl = getDisplayUrl(image.ThumbnailUrl || image.Url);
html += '<a target="_blank" href="' + getDisplayUrl(image.Url) + '" class="' + cssClass + '" style="background-image:url(\'' + displayUrl + '\');">';
html += '</a>';
html += '<div class="remoteImageDetails">';
html += '<div class="remoteImageDetailText">';
html += image.ProviderName;
html += '</div>';
if (image.Width || image.Height || image.Language) {
html += '<div class="remoteImageDetailText">';
if (image.Width && image.Height) {
html += image.Width + ' x ' + image.Height;
if (image.Language) {
html += ' • ' + image.Language;
}
} else {
if (image.Language) {
html += image.Language;
}
}
html += '</div>';
}
if (image.CommunityRating != null) {
html += '<div class="remoteImageDetailText">';
if (image.RatingType == "Likes") {
html += image.CommunityRating + (image.CommunityRating == 1 ? " like" : " likes");
} else {
if (image.CommunityRating) {
html += image.CommunityRating.toFixed(1);
if (image.VoteCount) {
html += ' • ' + image.VoteCount + (image.VoteCount == 1 ? " vote" : " votes");
}
} else {
html += "Unrated";
}
}
html += '</div>';
}
html += '<paper-icon-button icon="cloud-download" class="btnDownloadRemoteImage" raised data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" title="' + Globalize.translate('ButtonDownload') + '"></paper-icon-button>';
html += '</div>';
html += '</div>';
return html;
}
function initEditor(page) {
$('#selectBrowsableImageType', page).on('change', function () {
browsableImageType = this.value;
browsableImageStartIndex = 0;
selectedProvider = null;
reloadBrowsableImages(page);
});
$('#selectImageProvider', page).on('change', function () {
browsableImageStartIndex = 0;
selectedProvider = this.value;
reloadBrowsableImages(page);
});
$('#chkAllLanguages', page).on('change', function () {
browsableImageStartIndex = 0;
reloadBrowsableImages(page);
});
}
function showEditor(itemId) {
Dashboard.showLoadingMsg();
ApiClient.ajax({
type: 'GET',
url: 'components/imagedownloader/imagedownloader.template.html'
}).done(function (template) {
currentItemId = itemId;
var dlg = document.createElement('paper-dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
// without this safari will scroll the background instead of the dialog contents
dlg.setAttribute('modal', 'modal');
dlg.entryAnimation = 'scale-up-animation';
dlg.exitAnimation = 'fade-out-animation';
dlg.classList.add('fullscreen-editor-paper-dialog');
dlg.classList.add('ui-body-b');
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
html += '</h2>';
html += '<div class="editorContent">';
html += Globalize.translateDocument(template);
html += '</div>';
dlg.innerHTML = html;
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
PaperDialogHelper.openWithHash(dlg, 'imagedownloader');
var editorContent = dlg.querySelector('.editorContent');
initEditor(editorContent);
$('.btnCloseDialog', dlg).on('click', closeDialog);
reloadBrowsableImages(editorContent);
});
}
function closeDialog() {
history.back();
}
function onDialogClosed() {
$(this).remove();
Dashboard.hideLoadingMsg();
currentDeferred.resolveWith(null, [hasChanges]);
}
window.ImageDownloader = {
show: function (itemId, imageType) {
var deferred = DeferredBuilder.Deferred();
currentDeferred = deferred;
hasChanges = false;
browsableImagePageSize = 10;
browsableImageStartIndex = 0;
browsableImageType = imageType || 'Primary';
selectedProvider = null;
require(['components/paperdialoghelper'], function () {
showEditor(itemId);
});
return deferred.promise();
}
};
})(jQuery, window, document);

36
dashboard-ui/components/imagedownloader/imagedownloader.template.html Normal file
View File

@ -0,0 +1,36 @@
<div style="text-align: center;">
<div style="margin: 0; display: inline-block;">
<label for="selectImageProvider">${LabelSource}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
<option value="">${OptionAll}</option>
</select>
</div>
<div style="margin: 0; display: inline-block;">
<label for="selectBrowsableImageType">${LabelImage}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</div>
<div class="availableImagesPaging" style="display: inline-block;vertical-align: middle;margin-left:1em;"></div>
<div style="display: inline-block; vertical-align: middle; margin-left: 1em;">
<input type="checkbox" id="chkAllLanguages" data-role="none" style="display: inline-block;vertical-align: middle;" />
<label for="chkAllLanguages" style="display: inline-block;vertical-align: middle;">${LabelAllLanguages}</label>
</div>
</div>
<div class="availableImagesList" style="text-align:center;"></div>

344
dashboard-ui/components/imageeditor/imageeditor.js
View File

@ -2,11 +2,6 @@
var currentItem;
var browsableImagePageSize = 10;
var browsableImageStartIndex = 0;
var browsableImageType = 'Primary';
var selectedProvider;
function getBaseRemoteOptions() {
var options = {};
@ -16,218 +11,10 @@
return options;
}
function reloadBrowsableImages(page) {
Dashboard.showLoadingMsg();
var options = getBaseRemoteOptions();
options.type = browsableImageType;
options.startIndex = browsableImageStartIndex;
options.limit = browsableImagePageSize;
options.IncludeAllLanguages = $('#chkAllLanguages', page).checked();
var provider = selectedProvider || '';
if (provider) {
options.ProviderName = provider;
}
ApiClient.getAvailableRemoteImages(options).done(function (result) {
renderRemoteImages(page, currentItem, result, browsableImageType, options.startIndex, options.limit);
$('#selectBrowsableImageType', page).val(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);
Dashboard.hideLoadingMsg();
});
}
function renderRemoteImages(page, item, imagesResult, imageType, startIndex, limit) {
$('.availableImagesPaging', page).html(getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount)).trigger('create');
var html = '';
for (var i = 0, length = imagesResult.Images.length; i < length; i++) {
html += getRemoteImageHtml(imagesResult.Images[i], imageType);
}
$('.availableImagesList', page).html(html).trigger('create');
$('.btnNextPage', page).on('click', function () {
browsableImageStartIndex += browsableImagePageSize;
reloadBrowsableImages(page);
});
$('.btnPreviousPage', page).on('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'));
});
}
function downloadRemoteImage(page, url, type, provider) {
var options = getBaseRemoteOptions();
options.Type = type;
options.ImageUrl = url;
options.ProviderName = provider;
Dashboard.showLoadingMsg();
ApiClient.downloadRemoteImage(options).done(function () {
$('.popupDownload', page).popup("close");
reload(page);
});
}
function getDisplayUrl(url) {
return ApiClient.getUrl("Images/Remote", { imageUrl: url });
}
function getRemoteImageHtml(image, imageType) {
var html = '';
html += '<div class="remoteImageContainer">';
var cssClass = "remoteImage";
if (imageType == "Backdrop" || imageType == "Art" || imageType == "Thumb" || imageType == "Logo") {
cssClass += " remoteBackdropImage";
}
else if (imageType == "Banner") {
cssClass += " remoteBannerImage";
}
else if (imageType == "Disc") {
cssClass += " remoteDiscImage";
}
else {
if (currentItem.Type == "Episode") {
cssClass += " remoteBackdropImage";
}
else if (currentItem.Type == "MusicAlbum" || currentItem.Type == "MusicArtist") {
cssClass += " remoteDiscImage";
}
else {
cssClass += " remotePosterImage";
}
}
var displayUrl = getDisplayUrl(image.ThumbnailUrl || image.Url);
html += '<a target="_blank" href="' + getDisplayUrl(image.Url) + '" class="' + cssClass + '" style="background-image:url(\'' + displayUrl + '\');">';
html += '</a>';
html += '<div class="remoteImageDetails">';
html += image.ProviderName;
html += '</div>';
if (image.Width || image.Height || image.Language) {
html += '<div class="remoteImageDetails">';
if (image.Width && image.Height) {
html += image.Width + ' x ' + image.Height;
if (image.Language) {
html += ' • ' + image.Language;
}
} else {
if (image.Language) {
html += image.Language;
}
}
html += '</div>';
}
if (image.CommunityRating != null) {
html += '<div class="remoteImageDetails">';
if (image.RatingType == "Likes") {
html += image.CommunityRating + (image.CommunityRating == 1 ? " like" : " likes");
} else {
if (image.CommunityRating) {
html += image.CommunityRating.toFixed(1);
if (image.VoteCount) {
html += ' • ' + image.VoteCount + (image.VoteCount == 1 ? " vote" : " votes");
}
} else {
html += "Unrated";
}
}
html += '</div>';
}
html += '<div><button class="btnDownloadRemoteImage" data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" type="button" data-icon="arrow-d" data-mini="true">' + Globalize.translate('ButtonDownload') + '</button></div>';
html += '</div>';
return html;
}
function getPagingHtml(startIndex, limit, totalRecordCount) {
var html = '';
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
// 20 is the minimum page size
var showControls = totalRecordCount > limit;
html += '<div class="listPaging">';
html += '<span style="margin-right: 10px;">';
var startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount;
html += '</span>';
if (showControls) {
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
html += '<paper-icon-button icon="arrow-back" title="' + Globalize.translate('ButtonPreviousPage') + '" class="btnPreviousPage" ' + (startIndex ? '' : 'disabled') + '></paper-icon-button>';
html += '<paper-icon-button icon="arrow-forward" title="' + Globalize.translate('ButtonNextPage') + '" class="btnNextPage" ' + (startIndex + limit > totalRecordCount ? 'disabled' : '') + '></paper-icon-button>';
html += '</div>';
}
html += '</div>';
return html;
}
function reload(page, item) {
Dashboard.showLoadingMsg();
browsableImageStartIndex = 0;
browsableImageType = 'Primary';
selectedProvider = null;
if (item) {
reloadItem(page, item);
}
@ -291,23 +78,23 @@
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
if (i > 0) {
html += '<paper-icon-button icon="chevron-left" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i - 1) + ');" title="' + Globalize.translate('ButtonMoveLeft') + '"></paper-icon-button>';
html += '<paper-icon-button class="btnMoveImage" icon="chevron-left" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + Globalize.translate('ButtonMoveLeft') + '"></paper-icon-button>';
} else {
html += '<paper-icon-button icon="chevron-left" disabled title="' + Globalize.translate('ButtonMoveLeft') + '"></paper-icon-button>';
}
if (i < length - 1) {
html += '<paper-icon-button icon="chevron-right" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i + 1) + ');" title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
html += '<paper-icon-button class="btnMoveImage" icon="chevron-right" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
} else {
html += '<paper-icon-button icon="chevron-right" disabled title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
}
}
if (imageProviders.length) {
html += '<paper-icon-button icon="cloud" onclick="EditItemImagesPage.showDownloadMenu(\'' + image.ImageType + '\');" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"></paper-icon-button>';
html += '<paper-icon-button icon="search" data-imagetype="' + image.ImageType + '" class="btnSearchImages" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"></paper-icon-button>';
}
html += '<paper-icon-button icon="delete" onclick="EditItemImagesPage.deleteImage(\'' + image.ImageType + '\', ' + (image.ImageIndex != null ? image.ImageIndex : "null") + ');" title="' + Globalize.translate('Delete') + '"></paper-icon-button>';
html += '<paper-icon-button icon="delete" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage" title="' + Globalize.translate('Delete') + '"></paper-icon-button>';
html += '</div>';
@ -316,7 +103,40 @@
html += '</div>';
}
elem.html(html).trigger('create');
elem.innerHTML = html;
$('.btnSearchImages', elem).on('click', function () {
showImageDownloader(page, this.getAttribute('data-imagetype'));
});
$('.btnDeleteImage', elem).on('click', function () {
var type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index');
index = index == "null" ? null : parseInt(index);
Dashboard.confirm(Globalize.translate('DeleteImageConfirmation'), Globalize.translate('HeaderDeleteImage'), function (result) {
if (result) {
ApiClient.deleteItemImage(currentItem.Id, type, index).done(function () {
reload(page);
});
}
});
});
$('.btnMoveImage', elem).on('click', function () {
var type = this.getAttribute('data-imagetype');
var index = parseInt(this.getAttribute('data-index'));
var newIndex = parseInt(this.getAttribute('data-newindex'));
ApiClient.updateItemImageIndex(currentItem.Id, type, index, newIndex).done(function () {
reload(page);
});
});
}
function renderStandardImages(page, item, imageInfos, imageProviders) {
@ -325,7 +145,7 @@
return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter";
});
renderImages(page, item, images, imageProviders, $('#images', page));
renderImages(page, item, images, imageProviders, page.querySelector('#images'));
}
function renderBackdrops(page, item, imageInfos, imageProviders) {
@ -339,7 +159,7 @@
if (images.length) {
$('#backdropsContainer', page).show();
renderImages(page, item, images, imageProviders, $('#backdrops', page));
renderImages(page, item, images, imageProviders, page.querySelector('#backdrops'));
} else {
$('#backdropsContainer', page).hide();
}
@ -362,80 +182,20 @@
}
}
function editItemImages() {
function showImageDownloader(page, imageType) {
require(['components/imagedownloader/imagedownloader'], function () {
var self = this;
ImageDownloader.show(currentItem.Id, imageType).done(function (hasChanges) {
self.deleteImage = function (type, index) {
var page = $.mobile.activePage;
Dashboard.confirm(Globalize.translate('DeleteImageConfirmation'), Globalize.translate('HeaderDeleteImage'), function (result) {
if (result) {
ApiClient.deleteItemImage(currentItem.Id, type, index).done(function () {
reload(page);
});
if (hasChanges) {
reload(page);
}
});
};
self.moveImage = function (type, index, newIndex) {
var page = $.mobile.activePage;
ApiClient.updateItemImageIndex(currentItem.Id, type, index, newIndex).done(function () {
reload(page);
});
};
self.showDownloadMenu = function (type) {
browsableImageStartIndex = 0;
browsableImageType = type;
var page = $.mobile.activePage;
selectedProvider = null;
$('.popupDownload', page).popup('open');
reloadBrowsableImages(page);
};
});
}
window.EditItemImagesPage = new editItemImages();
function initEditor(page) {
$('#selectBrowsableImageType', page).on('change', function () {
browsableImageType = this.value;
browsableImageStartIndex = 0;
selectedProvider = null;
reloadBrowsableImages(page);
});
$('#selectImageProvider', page).on('change', function () {
browsableImageStartIndex = 0;
selectedProvider = this.value;
reloadBrowsableImages(page);
});
$('#chkAllLanguages', page).on('change', function () {
browsableImageStartIndex = 0;
reloadBrowsableImages(page);
});
$('.btnOpenUploadMenu', page).on('click', function () {
require(['components/imageuploader/imageuploader'], function () {
@ -450,11 +210,7 @@
});
$('.btnBrowseAllImages', page).on('click', function () {
selectedProvider = null;
browsableImageType = 'Primary';
$('.popupDownload', page).popup('open');
reloadBrowsableImages(page);
showImageDownloader(page, 'Primary');
});
}
@ -475,6 +231,8 @@
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
// without this safari will scroll the background instead of the dialog contents
dlg.setAttribute('modal', 'modal');
dlg.entryAnimation = 'scale-up-animation';
dlg.exitAnimation = 'fade-out-animation';
dlg.classList.add('fullscreen-editor-paper-dialog');
@ -498,7 +256,6 @@
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
document.body.classList.add('bodyWithPopupOpen');
PaperDialogHelper.openWithHash(dlg, 'imageeditor');
var editorContent = dlg.querySelector('.editorContent');
@ -516,7 +273,6 @@
function onDialogClosed() {
document.body.classList.remove('bodyWithPopupOpen');
$(this).remove();
Dashboard.hideLoadingMsg();
}
@ -524,7 +280,7 @@
window.ImageEditor = {
show: function (itemId) {
require(['components/paperdialoghelper', 'jqmpopup'], function () {
require(['components/paperdialoghelper'], function () {
Dashboard.importCss('css/metadataeditor.css');
showEditor(itemId);

47
dashboard-ui/components/imageeditor/imageeditor.template.html
View File

@ -24,51 +24,4 @@
<h1>${Screenshots}</h1>
<div id="screenshots">
</div>
</div>
<div data-role="popup" class="popup popupDownload" data-theme="a">
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderBrowseOnlineImages}</h3>
</div>
<div data-role="content">
<div style="text-align: center;">
<div style="margin: 0; display: inline-block;">
<label for="selectImageProvider">${LabelSource}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
<option value="">${OptionAll}</option>
</select>
</div>
<div style="margin: 0; display: inline-block;">
<label for="selectBrowsableImageType">${LabelImage}</label>
</div>
<div style="margin: 0; display: inline-block;">
<select id="selectBrowsableImageType" name="selectBrowsableImageType" data-mini="true" data-inline="true">
<option value="Primary">${OptionPrimary}</option>
<option value="Art">${OptionArt}</option>
<option value="Backdrop">${OptionBackdrop}</option>
<option value="Banner">${OptionBanner}</option>
<option value="Box">${OptionBox}</option>
<option value="BoxRear">${OptionBoxRear}</option>
<option value="Disc">${OptionDisc}</option>
<option value="Icon">${OptionIcon}</option>
<option value="Logo">${OptionLogo}</option>
<option value="Menu">${OptionMenu}</option>
<option value="Screenshot">${OptionScreenshot}</option>
<option value="Thumb">${OptionThumb}</option>
</select>
</div>
<div class="availableImagesPaging" style="margin: 0; display: inline-block;"></div>
<div style="margin: 0; display: inline-block; vertical-align: middle; margin-left: 10px;">
<label for="chkAllLanguages">${LabelAllLanguages}</label>
<input type="checkbox" id="chkAllLanguages" data-mini="true" />
</div>
</div>
<div class="availableImagesList"></div>
</div>
</div>

4
dashboard-ui/components/imageuploader/imageuploader.js
View File

@ -137,6 +137,8 @@
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
// without this safari will scroll the background instead of the dialog contents
dlg.setAttribute('modal', 'modal');
dlg.entryAnimation = 'scale-up-animation';
dlg.exitAnimation = 'fade-out-animation';
dlg.classList.add('fullscreen-editor-paper-dialog');
@ -158,7 +160,6 @@
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
document.body.classList.add('bodyWithPopupOpen');
PaperDialogHelper.openWithHash(dlg, 'imageuploader');
var editorContent = dlg.querySelector('.editorContent');
@ -175,7 +176,6 @@
function onDialogClosed() {
document.body.classList.remove('bodyWithPopupOpen');
$(this).remove();
Dashboard.hideLoadingMsg();
currentDeferred.resolveWith(null, [hasChanges]);

3
dashboard-ui/components/imageuploader/imageuploader.template.html
View File

@ -3,7 +3,8 @@
<div>
<p>${LabelJpgPngOnly}</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<br />
<br />
<div id="imageDropZone" class="imageDropZone">
<h3>${LabelDropImageHere}</h3>
<output id="imageOutput"></output>

12
dashboard-ui/components/paperdialoghelper.js
View File

@ -2,18 +2,28 @@
function paperDialogHashHandler(dlg, hash) {
var isActive = true;
function onHashChange(e, data) {
data = data.state;
isActive = data.hash == '#' + hash;
if (data.direction == 'back') {
if (dlg) {
if (data.hash != '#' + hash) {
if (!isActive) {
dlg.close();
dlg = null;
}
}
}
if (isActive) {
document.body.classList.add('bodyWithPopupOpen');
}
else {
document.body.classList.remove('bodyWithPopupOpen');
}
}
function onDialogClosed() {

4
dashboard-ui/components/subtitleeditor/subtitleeditor.js
View File

@ -339,6 +339,8 @@
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.setAttribute('role', 'alertdialog');
// without this safari will scroll the background instead of the dialog contents
dlg.setAttribute('modal', 'modal');
dlg.entryAnimation = 'scale-up-animation';
dlg.exitAnimation = 'fade-out-animation';
dlg.classList.add('fullscreen-editor-paper-dialog');
@ -362,7 +364,6 @@
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', onDialogClosed);
document.body.classList.add('bodyWithPopupOpen');
PaperDialogHelper.openWithHash(dlg, 'subtitleeditor');
var editorContent = dlg.querySelector('.editorContent');
@ -385,7 +386,6 @@
function onDialogClosed() {
document.body.classList.remove('bodyWithPopupOpen');
$(this).remove();
Dashboard.hideLoadingMsg();
}

90
dashboard-ui/css/metadataeditor.css
View File

@ -34,13 +34,6 @@
top: -2px;
}
.availableImagesList {
overflow-y: auto;
width: 300px;
height: 400px;
text-align: center;
}
.remoteImageContainer {
display: inline-block;
margin: 8px;
@ -48,10 +41,25 @@
}
.remoteImageDetails {
background: #eee;
padding: 3px 5px;
text-align: center;
background: #282828;
position: relative;
}
.remoteImageDetails paper-icon-button {
position: absolute;
bottom: 0;
right: 5px;
}
.remoteImageDetailText {
padding: 5px 5px;
}
.remoteImageDetailText + .remoteImageDetailText {
color: #ccc;
}
.remoteImage {
background-position: center bottom;
background-repeat: no-repeat;
@ -156,19 +164,8 @@
background: #52B54B !important;
}
@media all and (min-width: 500px) {
.availableImagesList {
width: 400px;
}
}
@media all and (min-width: 600px) {
.availableImagesList {
width: 500px;
height: 450px;
}
.remoteBannerImage {
width: 450px;
@ -277,10 +274,6 @@
@media all and (min-width: 700px) {
.availableImagesList {
width: 600px;
}
.popupIdentify {
width: 500px;
}
@ -292,10 +285,6 @@
@media all and (min-width: 800px) {
.availableImagesList {
width: 700px;
}
.editPageSidebar {
position: fixed;
top: 54px;
@ -318,10 +307,6 @@
@media all and (min-width: 900px) {
.availableImagesList {
width: 800px;
}
.popupIdentify {
width: 700px;
}
@ -329,10 +314,6 @@
@media all and (min-width: 1000px) {
.availableImagesList {
width: 900px;
}
.popupIdentify {
width: 800px;
}
@ -340,10 +321,6 @@
@media all and (min-width: 1100px) {
.availableImagesList {
width: 1000px;
}
.popupIdentify {
width: 900px;
}
@ -351,36 +328,11 @@
@media all and (min-width: 1200px) {
.availableImagesList {
width: 1100px;
}
.popupIdentify {
width: 1000px;
}
}
@media all and (min-width: 1300px) {
.availableImagesList {
width: 1200px;
}
}
@media all and (min-width: 1400px) {
.availableImagesList {
width: 1300px;
}
}
@media all and (min-width: 1500px) {
.availableImagesList {
width: 1400px;
}
}
@media all and (min-width: 1800px) {
.editPageSidebar {
@ -445,10 +397,6 @@
@media all and (min-height: 800px) {
.availableImagesList {
height: 600px;
}
.popupIdentify form, .identificationSearchResults {
height: 600px;
}
@ -460,10 +408,6 @@
@media all and (min-height: 900px) {
.availableImagesList {
height: 700px;
}
.popupIdentify form, .identificationSearchResults {
height: 700px;
}