begin rework of image editor
This commit is contained in:
Luke Pulverenti
parent
7ea4d0b4c9
commit
5bccc1840e
53 changed files with 965 additions and 787 deletions
535
dashboard-ui/components/imageeditor/imageeditor.js
Normal file
535
dashboard-ui/components/imageeditor/imageeditor.js
Normal file
|
|
@ -0,0 +1,535 @@
|
|||
(function ($, document, window, FileReader, escape) {
|
||||
|
||||
var currentItem;
|
||||
|
||||
var browsableImagePageSize = 10;
|
||||
var browsableImageStartIndex = 0;
|
||||
var browsableImageType = 'Primary';
|
||||
var selectedProvider;
|
||||
|
||||
function getBaseRemoteOptions() {
|
||||
|
||||
var options = {};
|
||||
|
||||
options.itemId = currentItem.Id;
|
||||
|
||||
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);
|
||||
}
|
||||
else {
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), currentItem.Id).done(function (item) {
|
||||
reloadItem(page, item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reloadItem(page, item) {
|
||||
|
||||
currentItem = item;
|
||||
|
||||
ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
|
||||
|
||||
if (providers.length) {
|
||||
$('.lnkBrowseAllImages', page).removeClass('hide');
|
||||
} else {
|
||||
$('.lnkBrowseAllImages', page).addClass('hide');
|
||||
}
|
||||
|
||||
ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
|
||||
|
||||
renderStandardImages(page, item, imageInfos, providers);
|
||||
renderBackdrops(page, item, imageInfos, providers);
|
||||
renderScreenshots(page, item, imageInfos, providers);
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderImages(page, item, images, imageProviders, elem) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = images.length; i < length; i++) {
|
||||
|
||||
var image = images[i];
|
||||
|
||||
html += '<div class="editorTile imageEditorTile">';
|
||||
|
||||
if (image.ImageType !== "Backdrop" && image.ImageType !== "Screenshot") {
|
||||
html += '<h3>' + image.ImageType + '</h3>';
|
||||
}
|
||||
|
||||
var height = 150;
|
||||
|
||||
html += '<div style="height:' + height + 'px;vertical-align:top;background-repeat:no-repeat;background-position:center center;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { height: height }) + '\');"></div>';
|
||||
|
||||
html += '<div class="editorTileInner">';
|
||||
|
||||
if (image.Width && image.Height) {
|
||||
html += '<p>' + image.Width + ' X ' + image.Height + '</p>';
|
||||
} else {
|
||||
html += '<p> </p>';
|
||||
}
|
||||
|
||||
html += '<div>';
|
||||
|
||||
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>';
|
||||
} 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>';
|
||||
} 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="delete" onclick="EditItemImagesPage.deleteImage(\'' + image.ImageType + '\', ' + (image.ImageIndex != null ? image.ImageIndex : "null") + ');" title="' + Globalize.translate('Delete') + '"></paper-icon-button>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.html(html).trigger('create');
|
||||
}
|
||||
|
||||
function renderStandardImages(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter";
|
||||
});
|
||||
|
||||
renderImages(page, item, images, imageProviders, $('#images', page));
|
||||
}
|
||||
|
||||
function renderBackdrops(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType == "Backdrop";
|
||||
|
||||
}).sort(function (a, b) {
|
||||
return a.ImageIndex - b.ImageIndex;
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#backdropsContainer', page).show();
|
||||
renderImages(page, item, images, imageProviders, $('#backdrops', page));
|
||||
} else {
|
||||
$('#backdropsContainer', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function renderScreenshots(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType == "Screenshot";
|
||||
|
||||
}).sort(function (a, b) {
|
||||
return a.ImageIndex - b.ImageIndex;
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#screenshotsContainer', page).show();
|
||||
renderImages(page, item, images, imageProviders, $('#screenshots', page));
|
||||
} else {
|
||||
$('#screenshotsContainer', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function editItemImages() {
|
||||
|
||||
var self = this;
|
||||
|
||||
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);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
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 () {
|
||||
|
||||
ImageUploader.show(currentItem.Id).done(function (hasChanges) {
|
||||
|
||||
if (hasChanges) {
|
||||
reload(page);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('.btnBrowseAllImages', page).on('click', function () {
|
||||
|
||||
selectedProvider = null;
|
||||
browsableImageType = 'Primary';
|
||||
$('.popupDownload', page).popup('open');
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: 'GET',
|
||||
url: 'components/imageeditor/imageeditor.template.html'
|
||||
|
||||
}).done(function (template) {
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
|
||||
|
||||
var dlg = document.createElement('paper-dialog');
|
||||
|
||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
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;">' + item.Name + '</div>';
|
||||
html += '</h2>';
|
||||
|
||||
html += '<div class="editorContent">';
|
||||
html += Globalize.translateDocument(template);
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
initEditor(dlg);
|
||||
|
||||
// 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');
|
||||
reload(editorContent, item);
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', closeDialog);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
||||
history.back();
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
window.ImageEditor = {
|
||||
show: function (itemId) {
|
||||
|
||||
require(['components/paperdialoghelper', 'jqmpopup'], function () {
|
||||
|
||||
Dashboard.importCss('css/metadataeditor.css');
|
||||
showEditor(itemId);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, document, window, window.FileReader, escape);
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<div id="imagesContainer">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${HeaderImages}</h1>
|
||||
<paper-fab icon="search" class="btnBrowseAllImages mini subdued" style="vertical-align:middle;margin-left:1em;"></paper-fab>
|
||||
<paper-fab icon="add" class="btnOpenUploadMenu mini subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab>
|
||||
</div>
|
||||
<div id="images">
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="backdropsContainer" style="display: none;">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${HeaderBackdrops}</h1>
|
||||
<paper-fab icon="search" class="btnBrowseAllImages mini subdued" style="vertical-align:middle;margin-left:1em;"></paper-fab>
|
||||
<paper-fab icon="add" class="btnOpenUploadMenu mini subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab>
|
||||
</div>
|
||||
<div id="backdrops">
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="screenshotsContainer" style="display: none;">
|
||||
<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>
|
||||
200
dashboard-ui/components/imageuploader/imageuploader.js
Normal file
200
dashboard-ui/components/imageuploader/imageuploader.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
(function ($, window, document) {
|
||||
|
||||
var currentItemId;
|
||||
var currentFile;
|
||||
var currentDeferred;
|
||||
var hasChanges = false;
|
||||
|
||||
function onFileReaderError(evt) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
switch (evt.target.error.code) {
|
||||
case evt.target.error.NOT_FOUND_ERR:
|
||||
Dashboard.showError(Globalize.translate('MessageFileNotFound'));
|
||||
break;
|
||||
case evt.target.error.ABORT_ERR:
|
||||
break; // noop
|
||||
default:
|
||||
Dashboard.showError(Globalize.translate('MessageFileReadError'));
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
function setFiles(page, files) {
|
||||
|
||||
var file = files[0];
|
||||
|
||||
if (!file || !file.type.match('image.*')) {
|
||||
$('#imageOutput', page).html('');
|
||||
$('#fldUpload', page).hide();
|
||||
currentFile = null;
|
||||
return;
|
||||
}
|
||||
|
||||
currentFile = file;
|
||||
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onerror = onFileReaderError;
|
||||
reader.onloadstart = function () {
|
||||
$('#fldUpload', page).hide();
|
||||
};
|
||||
reader.onabort = function () {
|
||||
Dashboard.hideLoadingMsg();
|
||||
Logger.log('File read cancelled');
|
||||
};
|
||||
|
||||
// Closure to capture the file information.
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
|
||||
// Render thumbnail.
|
||||
var html = ['<img style="max-width:300px;max-height:100px;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
|
||||
|
||||
$('#imageOutput', page).html(html);
|
||||
$('#fldUpload', page).show();
|
||||
};
|
||||
})(file);
|
||||
|
||||
// Read in the image file as a data URL.
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function processImageChangeResult(page) {
|
||||
|
||||
hasChanges = true;
|
||||
history.back();
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
|
||||
var file = currentFile;
|
||||
|
||||
if (!file) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/jpeg") {
|
||||
return false;
|
||||
}
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $(this).parents('paper-dialog');
|
||||
|
||||
var imageType = $('#selectImageType', page).val();
|
||||
|
||||
ApiClient.uploadItemImage(currentItemId, imageType, file).done(function () {
|
||||
|
||||
$('#uploadImage', page).val('').trigger('change');
|
||||
$('#popupUpload', page).popup("close");
|
||||
Dashboard.hideLoadingMsg();
|
||||
processImageChangeResult(page);
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function initEditor(page) {
|
||||
|
||||
$('form', page).off('submit', onSubmit).on('submit', onSubmit);
|
||||
|
||||
$('#uploadImage', page).on("change", function () {
|
||||
setFiles(page, this.files);
|
||||
});
|
||||
|
||||
$("#imageDropZone", page).on('dragover', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
e.originalEvent.dataTransfer.dropEffect = 'Copy';
|
||||
|
||||
return false;
|
||||
|
||||
}).on('drop', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
setFiles(page, e.originalEvent.dataTransfer.files);
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId) {
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: 'GET',
|
||||
url: 'components/imageuploader/imageuploader.template.html'
|
||||
|
||||
}).done(function (template) {
|
||||
|
||||
currentItemId = itemId;
|
||||
|
||||
var dlg = document.createElement('paper-dialog');
|
||||
|
||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
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('HeaderUploadImage') + '</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);
|
||||
|
||||
document.body.classList.add('bodyWithPopupOpen');
|
||||
PaperDialogHelper.openWithHash(dlg, 'imageuploader');
|
||||
|
||||
var editorContent = dlg.querySelector('.editorContent');
|
||||
initEditor(editorContent);
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', closeDialog);
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
||||
history.back();
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
currentDeferred.resolveWith(null, [hasChanges]);
|
||||
}
|
||||
|
||||
window.ImageUploader = {
|
||||
show: function (itemId) {
|
||||
|
||||
var deferred = DeferredBuilder.Deferred();
|
||||
|
||||
currentDeferred = deferred;
|
||||
hasChanges = false;
|
||||
|
||||
require(['components/paperdialoghelper'], function () {
|
||||
|
||||
showEditor(itemId);
|
||||
});
|
||||
return deferred.promise();
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<form class="uploadItemImageForm" style="max-width: 100%;">
|
||||
<h2>${HeaderAddUpdateImage}</h2>
|
||||
<div>
|
||||
<p>${LabelJpgPngOnly}</p>
|
||||
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
|
||||
|
||||
<div id="imageDropZone" class="imageDropZone">
|
||||
<h3>${LabelDropImageHere}</h3>
|
||||
<output id="imageOutput"></output>
|
||||
</div>
|
||||
<div id="fldUpload" style="display: none;">
|
||||
<br />
|
||||
<div>
|
||||
<label for="selectImageType">${LabelImageType}</label>
|
||||
<select id="selectImageType" name="selectImageType">
|
||||
<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>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonUpload}</span></paper-button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
48
dashboard-ui/components/paperdialoghelper.js
Normal file
48
dashboard-ui/components/paperdialoghelper.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
(function (globalScope) {
|
||||
|
||||
function paperDialogHashHandler(dlg, hash) {
|
||||
|
||||
function onHashChange(e, data) {
|
||||
|
||||
data = data.state;
|
||||
|
||||
if (data.direction == 'back') {
|
||||
if (dlg) {
|
||||
if (data.hash != '#' + hash) {
|
||||
dlg.close();
|
||||
dlg = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
dlg = null;
|
||||
$(window).off('navigate', onHashChange);
|
||||
|
||||
if (window.location.hash == '#' + hash) {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||
dlg.open();
|
||||
|
||||
window.location.hash = hash;
|
||||
|
||||
$(window).on('navigate', onHashChange);
|
||||
}
|
||||
|
||||
function openWithHash(dlg, hash) {
|
||||
|
||||
new paperDialogHashHandler(dlg, hash);
|
||||
}
|
||||
|
||||
globalScope.PaperDialogHelper = {
|
||||
openWithHash: openWithHash
|
||||
};
|
||||
|
||||
})(this);
|
||||
403
dashboard-ui/components/subtitleeditor/subtitleeditor.js
Normal file
403
dashboard-ui/components/subtitleeditor/subtitleeditor.js
Normal file
|
|
@ -0,0 +1,403 @@
|
|||
(function ($, window, document) {
|
||||
|
||||
var currentItem;
|
||||
|
||||
function showLocalSubtitles(page, index) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var popup = $('.popupSubtitleViewer', page).popup('open');
|
||||
$('.subtitleContent', page).html('');
|
||||
|
||||
var url = 'Videos/' + currentItem.Id + '/Subtitles/' + index;
|
||||
|
||||
$.get(ApiClient.getUrl(url)).done(function (result) {
|
||||
|
||||
$('.subtitleContent', page).html(result);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
popup.popup('reposition', {});
|
||||
});
|
||||
}
|
||||
|
||||
function showRemoteSubtitles(page, id) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var popup = $('.popupSubtitleViewer', page).popup('open');
|
||||
$('.subtitleContent', page).html('\nLoading...\n\n\n');
|
||||
|
||||
var url = 'Providers/Subtitles/Subtitles/' + id;
|
||||
|
||||
ApiClient.get(ApiClient.getUrl(url)).done(function (result) {
|
||||
|
||||
$('.subtitleContent', page).html(result);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
popup.popup('reposition', {});
|
||||
});
|
||||
}
|
||||
|
||||
function downloadRemoteSubtitles(page, id) {
|
||||
|
||||
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: "POST",
|
||||
url: ApiClient.getUrl(url)
|
||||
|
||||
}).done(function () {
|
||||
|
||||
Dashboard.alert(Globalize.translate('MessageDownloadQueued'));
|
||||
});
|
||||
}
|
||||
|
||||
function deleteLocalSubtitle(page, index) {
|
||||
|
||||
var msg = Globalize.translate('MessageAreYouSureDeleteSubtitles');
|
||||
|
||||
Dashboard.confirm(msg, Globalize.translate('HeaderConfirmDeletion'), function (result) {
|
||||
|
||||
if (result) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var itemId = currentItem.Id;
|
||||
var url = 'Videos/' + itemId + '/Subtitles/' + index;
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: "DELETE",
|
||||
url: ApiClient.getUrl(url)
|
||||
|
||||
}).done(function () {
|
||||
|
||||
reload(page, itemId);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fillSubtitleList(page, item) {
|
||||
|
||||
var streams = item.MediaStreams || [];
|
||||
|
||||
var subs = streams.filter(function (s) {
|
||||
|
||||
return s.Type == 'Subtitle';
|
||||
});
|
||||
|
||||
var html = '';
|
||||
|
||||
if (subs.length) {
|
||||
|
||||
html += '<h1 style="margin-top:1.5em;">' + Globalize.translate('HeaderCurrentSubtitles') + '</h1>';
|
||||
html += '<div class="paperList">';
|
||||
|
||||
html += subs.map(function (s) {
|
||||
|
||||
var itemHtml = '';
|
||||
|
||||
itemHtml += '<paper-icon-item>';
|
||||
|
||||
itemHtml += '<paper-fab class="listAvatar blue" icon="closed-caption" item-icon></paper-fab>';
|
||||
|
||||
var atts = [];
|
||||
|
||||
atts.push(s.Codec);
|
||||
if (s.IsDefault) {
|
||||
|
||||
atts.push('Default');
|
||||
}
|
||||
if (s.IsForced) {
|
||||
|
||||
atts.push('Forced');
|
||||
}
|
||||
|
||||
if (atts.length == 3) {
|
||||
itemHtml += '<paper-item-body three-line>';
|
||||
}
|
||||
else {
|
||||
itemHtml += '<paper-item-body two-line>';
|
||||
}
|
||||
|
||||
itemHtml += '<div>';
|
||||
itemHtml += (s.Language || Globalize.translate('LabelUnknownLanaguage'));
|
||||
itemHtml += '</div>';
|
||||
|
||||
itemHtml += '<div secondary>' + atts.join(' - ') + '</div>';
|
||||
|
||||
if (s.Path) {
|
||||
itemHtml += '<div secondary>' + (s.Path) + '</div>';
|
||||
}
|
||||
|
||||
html += '</a>';
|
||||
itemHtml += '</paper-item-body>';
|
||||
|
||||
if (s.Path) {
|
||||
itemHtml += '<paper-icon-button icon="delete" data-index="' + s.Index + '" title="' + Globalize.translate('Delete') + '" class="btnDelete"></paper-icon-button>';
|
||||
}
|
||||
|
||||
itemHtml += '</paper-icon-item>';
|
||||
|
||||
return itemHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
var elem = $('.subtitleList', page).html(html).trigger('create');
|
||||
|
||||
$('.btnViewSubtitles', elem).on('click', function () {
|
||||
|
||||
var index = this.getAttribute('data-index');
|
||||
|
||||
showLocalSubtitles(page, index);
|
||||
|
||||
});
|
||||
|
||||
$('.btnDelete', elem).on('click', function () {
|
||||
|
||||
var index = this.getAttribute('data-index');
|
||||
|
||||
deleteLocalSubtitle(page, index);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function fillLanguages(page, languages) {
|
||||
|
||||
$('#selectLanguage', page).html(languages.map(function (l) {
|
||||
|
||||
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
|
||||
|
||||
}));
|
||||
|
||||
var lastLanguage = appStorage.getItem('subtitleeditor-language');
|
||||
if (lastLanguage) {
|
||||
$('#selectLanguage', page).val(lastLanguage);
|
||||
}
|
||||
else {
|
||||
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
|
||||
var lang = user.Configuration.SubtitleLanguagePreference;
|
||||
|
||||
if (lang) {
|
||||
$('#selectLanguage', page).val(lang);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderSearchResults(page, results) {
|
||||
|
||||
var lastProvider = '';
|
||||
var html = '';
|
||||
|
||||
if (!results.length) {
|
||||
|
||||
$('.noSearchResults', page).show();
|
||||
$('.subtitleResults', page).html('');
|
||||
Dashboard.hideLoadingMsg();
|
||||
return;
|
||||
}
|
||||
|
||||
$('.noSearchResults', page).hide();
|
||||
|
||||
for (var i = 0, length = results.length; i < length; i++) {
|
||||
|
||||
var result = results[i];
|
||||
|
||||
var provider = result.ProviderName;
|
||||
|
||||
if (provider != lastProvider) {
|
||||
|
||||
if (i > 0) {
|
||||
html += '</div>';
|
||||
}
|
||||
html += '<h1>' + provider + '</h1>';
|
||||
html += '<div class="paperList">';
|
||||
lastProvider = provider;
|
||||
}
|
||||
|
||||
html += '<paper-icon-item>';
|
||||
|
||||
html += '<paper-fab class="listAvatar blue" icon="closed-caption" item-icon></paper-fab>';
|
||||
|
||||
if (result.Comment) {
|
||||
html += '<paper-item-body three-line>';
|
||||
}
|
||||
else {
|
||||
html += '<paper-item-body two-line>';
|
||||
}
|
||||
|
||||
//html += '<a class="btnViewSubtitle" href="#" data-subid="' + result.Id + '">';
|
||||
|
||||
html += '<div>' + (result.Name) + '</div>';
|
||||
html += '<div secondary>' + (result.Format) + '</div>';
|
||||
|
||||
if (result.Comment) {
|
||||
html += '<div secondary>' + (result.Comment) + '</div>';
|
||||
}
|
||||
|
||||
//html += '</a>';
|
||||
|
||||
html += '</paper-item-body>';
|
||||
|
||||
html += '<div style="font-size:86%;opacity:.7;">' + /*(result.CommunityRating || 0) + ' / ' +*/ (result.DownloadCount || 0) + '</div>';
|
||||
|
||||
html += '<paper-icon-button icon="cloud-download" data-subid="' + result.Id + '" title="' + Globalize.translate('ButtonDownload') + '" class="btnDownload"></paper-icon-button>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
}
|
||||
|
||||
if (results.length) {
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
var elem = $('.subtitleResults', page).html(html).trigger('create');
|
||||
|
||||
$('.btnViewSubtitle', elem).on('click', function () {
|
||||
|
||||
var id = this.getAttribute('data-subid');
|
||||
showRemoteSubtitles(page, id);
|
||||
});
|
||||
|
||||
$('.btnDownload', elem).on('click', function () {
|
||||
|
||||
var id = this.getAttribute('data-subid');
|
||||
downloadRemoteSubtitles(page, id);
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function searchForSubtitles(page, language) {
|
||||
|
||||
appStorage.setItem('subtitleeditor-language', language);
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var url = ApiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
|
||||
|
||||
ApiClient.getJSON(url).done(function (results) {
|
||||
|
||||
renderSearchResults(page, results);
|
||||
});
|
||||
}
|
||||
|
||||
function reload(page, itemId) {
|
||||
|
||||
$('.noSearchResults', page).hide();
|
||||
|
||||
function onGetItem(item) {
|
||||
currentItem = item;
|
||||
|
||||
fillSubtitleList(page, item);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
if (typeof itemId == 'string') {
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(onGetItem);
|
||||
}
|
||||
else {
|
||||
onGetItem(itemId);
|
||||
}
|
||||
}
|
||||
|
||||
function onSearchSubmit() {
|
||||
var form = this;
|
||||
|
||||
var lang = $('#selectLanguage', form).val();
|
||||
|
||||
searchForSubtitles($(form).parents('.editorContent'), lang);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function showEditor(itemId) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: 'GET',
|
||||
url: 'components/subtitleeditor/subtitleeditor.template.html'
|
||||
|
||||
}).done(function (template) {
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
|
||||
|
||||
var dlg = document.createElement('paper-dialog');
|
||||
|
||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
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;">' + item.Name + '</div>';
|
||||
html += '</h2>';
|
||||
|
||||
html += '<div class="editorContent">';
|
||||
html += Globalize.translateDocument(template);
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
$('.subtitleSearchForm', dlg).off('submit', onSearchSubmit).on('submit', onSearchSubmit);
|
||||
|
||||
// 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');
|
||||
reload(editorContent, item);
|
||||
|
||||
ApiClient.getCultures().done(function (languages) {
|
||||
|
||||
fillLanguages(editorContent, languages);
|
||||
});
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', closeDialog);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
||||
history.back();
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
document.body.classList.remove('bodyWithPopupOpen');
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
window.SubtitleEditor = {
|
||||
show: function (itemId) {
|
||||
|
||||
require(['components/paperdialoghelper'], function () {
|
||||
|
||||
showEditor(itemId);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="readOnlyContent" style="max-width: 800px;margin:auto;">
|
||||
<div>
|
||||
<div class="subtitleList"></div>
|
||||
</div>
|
||||
<br />
|
||||
<h1>${HeaderSearchForSubtitles}</h1>
|
||||
|
||||
<form class="subtitleSearchForm" style="max-width:none;">
|
||||
<div style="display: inline-block; width: 85%;">
|
||||
<label for="selectLanguage">${LabelLanguage}</label>
|
||||
<select id="selectLanguage" required="required" data-mini="true"></select>
|
||||
</div>
|
||||
<button type="submit" class="clearButton btnSearchSubtitles" style="width:auto;">
|
||||
<paper-icon-button icon="search" title="${ButtonSearch}"></paper-icon-button>
|
||||
</button>
|
||||
</form>
|
||||
<br />
|
||||
<div class="subtitleResults"></div>
|
||||
<div class="noSearchResults" style="display: none;">
|
||||
${MessageNoSubtitleSearchResultsFound}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue