diff --git a/dashboard-ui/scripts/edititemimages.js b/dashboard-ui/components/imageeditor/imageeditor.js
similarity index 75%
rename from dashboard-ui/scripts/edititemimages.js
rename to dashboard-ui/components/imageeditor/imageeditor.js
index 21038b5a6b..6d7293f50c 100644
--- a/dashboard-ui/scripts/edititemimages.js
+++ b/dashboard-ui/components/imageeditor/imageeditor.js
@@ -1,7 +1,6 @@
(function ($, document, window, FileReader, escape) {
var currentItem;
- var currentFile;
var browsableImagePageSize = 10;
var browsableImageStartIndex = 0;
@@ -221,7 +220,7 @@
return html;
}
- function reload(page) {
+ function reload(page, item) {
Dashboard.showLoadingMsg();
@@ -229,27 +228,34 @@
browsableImageType = 'Primary';
selectedProvider = null;
- MetadataEditor.getItemPromise().done(function (item) {
+ if (item) {
+ reloadItem(page, item);
+ }
+ else {
+ ApiClient.getItem(Dashboard.getCurrentUserId(), currentItem.Id).done(function (item) {
+ reloadItem(page, item);
+ });
+ }
+ }
- currentItem = item;
+ function reloadItem(page, item) {
- LibraryBrowser.renderName(item, $('.itemName', page), true);
+ currentItem = item;
- ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
+ ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
- if (providers.length) {
- $('.lnkBrowseAllImages', page).removeClass('hide');
- } else {
- $('.lnkBrowseAllImages', page).addClass('hide');
- }
+ if (providers.length) {
+ $('.lnkBrowseAllImages', page).removeClass('hide');
+ } else {
+ $('.lnkBrowseAllImages', page).addClass('hide');
+ }
- ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
+ ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
- renderStandardImages(page, item, imageInfos, providers);
- renderBackdrops(page, item, imageInfos, providers);
- renderScreenshots(page, item, imageInfos, providers);
- Dashboard.hideLoadingMsg();
- });
+ renderStandardImages(page, item, imageInfos, providers);
+ renderBackdrops(page, item, imageInfos, providers);
+ renderScreenshots(page, item, imageInfos, providers);
+ Dashboard.hideLoadingMsg();
});
});
}
@@ -280,7 +286,7 @@
html += '
';
}
- html += '';
+ html += '
';
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
@@ -303,7 +309,7 @@
html += '
';
- html += '';
+ html += '
';
html += '';
@@ -319,12 +325,7 @@
return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter";
});
- if (images.length) {
- $('#imagesContainer', page).show();
- renderImages(page, item, images, imageProviders, $('#images', page));
- } else {
- $('#imagesContainer', page).hide();
- }
+ renderImages(page, item, images, imageProviders, $('#images', page));
}
function renderBackdrops(page, item, imageInfos, imageProviders) {
@@ -361,95 +362,6 @@
}
}
- 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 = ['
'].join('');
-
- $('#imageOutput', page).html(html);
- $('#fldUpload', page).show();
- };
- })(file);
-
- // Read in the image file as a data URL.
- reader.readAsDataURL(file);
- }
-
- function processImageChangeResult(page) {
-
- reload(page);
- }
-
- 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 = $.mobile.activePage;
-
- var imageType = $('#selectImageType', page).val();
-
- ApiClient.uploadItemImage(currentItem.Id, imageType, file).done(function () {
-
- $('#uploadImage', page).val('').trigger('change');
- $('#popupUpload', page).popup("close");
- processImageChangeResult(page);
-
- });
-
- return false;
- }
-
function editItemImages() {
var self = this;
@@ -463,14 +375,12 @@
if (result) {
ApiClient.deleteItemImage(currentItem.Id, type, index).done(function () {
- processImageChangeResult(page);
+ reload(page);
});
}
});
-
-
};
self.moveImage = function (type, index, newIndex) {
@@ -479,7 +389,7 @@
ApiClient.updateItemImageIndex(currentItem.Id, type, index, newIndex).done(function () {
- processImageChangeResult(page);
+ reload(page);
});
@@ -500,9 +410,7 @@
window.EditItemImagesPage = new editItemImages();
- $(document).on('pageinit', "#editItemMetadataPage", function () {
-
- var page = this;
+ function initEditor(page) {
$('#selectBrowsableImageType', page).on('change', function () {
@@ -528,11 +436,17 @@
reloadBrowsableImages(page);
});
- $('.uploadItemImageForm').off('submit', onSubmit).on('submit', onSubmit);
-
$('.btnOpenUploadMenu', page).on('click', function () {
- $('#popupUpload', page).popup('open');
+ require(['components/imageuploader/imageuploader'], function () {
+
+ ImageUploader.show(currentItem.Id).done(function (hasChanges) {
+
+ if (hasChanges) {
+ reload(page);
+ }
+ });
+ });
});
$('.btnBrowseAllImages', page).on('click', function () {
@@ -542,36 +456,80 @@
$('.popupDownload', page).popup('open');
reloadBrowsableImages(page);
});
+ }
- $('#uploadImage', page).on("change", function () {
- setFiles(page, this.files);
+ 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 += '';
+
+ html += '';
+ html += Globalize.translateDocument(template);
+ html += '
';
+
+ 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);
+ });
});
+ }
- $("#imageDropZone", page).on('dragover', function (e) {
+ function closeDialog() {
- e.preventDefault();
+ history.back();
+ }
- e.originalEvent.dataTransfer.dropEffect = 'Copy';
+ function onDialogClosed() {
- return false;
+ document.body.classList.remove('bodyWithPopupOpen');
+ $(this).remove();
+ Dashboard.hideLoadingMsg();
+ }
- }).on('drop', function (e) {
+ window.ImageEditor = {
+ show: function (itemId) {
- e.preventDefault();
+ require(['components/paperdialoghelper', 'jqmpopup'], function () {
- setFiles(page, e.originalEvent.dataTransfer.files);
-
- return false;
- });
-
- $(page.querySelector('paper-tabs')).on('tabchange', function () {
-
- if (parseInt(this.selected) == 1) {
- var tabContent = page.querySelector('.imageEditorTab');
-
- reload(tabContent);
- }
- });
- });
+ Dashboard.importCss('css/metadataeditor.css');
+ showEditor(itemId);
+ });
+ }
+ };
})(jQuery, document, window, window.FileReader, escape);
\ No newline at end of file
diff --git a/dashboard-ui/components/imageeditor/imageeditor.template.html b/dashboard-ui/components/imageeditor/imageeditor.template.html
new file mode 100644
index 0000000000..54186ddf33
--- /dev/null
+++ b/dashboard-ui/components/imageeditor/imageeditor.template.html
@@ -0,0 +1,74 @@
+
+
+
+
+
${HeaderBackdrops}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dashboard-ui/components/imageuploader/imageuploader.js b/dashboard-ui/components/imageuploader/imageuploader.js
new file mode 100644
index 0000000000..a1bf190ee2
--- /dev/null
+++ b/dashboard-ui/components/imageuploader/imageuploader.js
@@ -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 = ['
'].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 += '';
+
+ html += '';
+ html += Globalize.translateDocument(template);
+ html += '
';
+
+ 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);
\ No newline at end of file
diff --git a/dashboard-ui/components/imageuploader/imageuploader.template.html b/dashboard-ui/components/imageuploader/imageuploader.template.html
new file mode 100644
index 0000000000..4070f8ca3b
--- /dev/null
+++ b/dashboard-ui/components/imageuploader/imageuploader.template.html
@@ -0,0 +1,35 @@
+
\ No newline at end of file
diff --git a/dashboard-ui/components/paperdialoghelper.js b/dashboard-ui/components/paperdialoghelper.js
new file mode 100644
index 0000000000..a272358c9b
--- /dev/null
+++ b/dashboard-ui/components/paperdialoghelper.js
@@ -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);
\ No newline at end of file
diff --git a/dashboard-ui/subtitleeditor/subtitleeditor.js b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
similarity index 88%
rename from dashboard-ui/subtitleeditor/subtitleeditor.js
rename to dashboard-ui/components/subtitleeditor/subtitleeditor.js
index 8b3acd2259..94aff393a0 100644
--- a/dashboard-ui/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
@@ -1,7 +1,6 @@
(function ($, window, document) {
var currentItem;
- var currentDialog;
function showLocalSubtitles(page, index) {
@@ -151,9 +150,6 @@
html += '';
}
- else {
- html += '
';
- }
var elem = $('.subtitleList', page).html(html).trigger('create');
@@ -182,14 +178,21 @@
}));
- Dashboard.getCurrentUser().done(function (user) {
+ var lastLanguage = appStorage.getItem('subtitleeditor-language');
+ if (lastLanguage) {
+ $('#selectLanguage', page).val(lastLanguage);
+ }
+ else {
- var lang = user.Configuration.SubtitleLanguagePreference;
+ Dashboard.getCurrentUser().done(function (user) {
- if (lang) {
- $('#selectLanguage', page).val(lang);
- }
- });
+ var lang = user.Configuration.SubtitleLanguagePreference;
+
+ if (lang) {
+ $('#selectLanguage', page).val(lang);
+ }
+ });
+ }
}
function renderSearchResults(page, results) {
@@ -277,6 +280,8 @@
function searchForSubtitles(page, language) {
+ appStorage.setItem('subtitleeditor-language', language);
+
Dashboard.showLoadingMsg();
var url = ApiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
@@ -324,7 +329,7 @@
ApiClient.ajax({
type: 'GET',
- url: 'subtitleeditor/subtitleeditor.template.html'
+ url: 'components/subtitleeditor/subtitleeditor.template.html'
}).done(function (template) {
@@ -358,13 +363,7 @@
$(dlg).on('iron-overlay-closed', onDialogClosed);
document.body.classList.add('bodyWithPopupOpen');
- dlg.open();
-
- window.location.hash = getHash(itemId);
-
- window.addEventListener('hashchange', onHashChange);
-
- currentDialog = dlg;
+ PaperDialogHelper.openWithHash(dlg, 'subtitleeditor');
var editorContent = dlg.querySelector('.editorContent');
reload(editorContent, item);
@@ -379,45 +378,26 @@
});
}
- function getHash(itemId) {
- return 'subtitleeditor?id=' + itemId;
- }
-
- function onHashChange() {
-
- // In some browsers this will fire immediately after opening the dialog, despite the fact that we bound the event after setting the hash
- if (currentItem && window.location.hash == '#' + getHash(currentItem.Id)) {
- return;
- }
-
- if (currentDialog) {
- closeDialog();
- }
- }
-
function closeDialog() {
- window.removeEventListener('hashchange', onHashChange);
-
- if (currentDialog) {
- currentDialog.close();
- }
+ history.back();
}
function onDialogClosed() {
- currentDialog = null;
- window.removeEventListener('hashchange', onHashChange);
document.body.classList.remove('bodyWithPopupOpen');
$(this).remove();
Dashboard.hideLoadingMsg();
- if ((window.location.hash || '').length > 1) {
- history.back();
- }
}
window.SubtitleEditor = {
- show: showEditor
+ show: function (itemId) {
+
+ require(['components/paperdialoghelper'], function () {
+
+ showEditor(itemId);
+ });
+ }
};
})(jQuery, window, document);
\ No newline at end of file
diff --git a/dashboard-ui/subtitleeditor/subtitleeditor.template.html b/dashboard-ui/components/subtitleeditor/subtitleeditor.template.html
similarity index 63%
rename from dashboard-ui/subtitleeditor/subtitleeditor.template.html
rename to dashboard-ui/components/subtitleeditor/subtitleeditor.template.html
index cd01295780..453c2e78ff 100644
--- a/dashboard-ui/subtitleeditor/subtitleeditor.template.html
+++ b/dashboard-ui/components/subtitleeditor/subtitleeditor.template.html
@@ -1,11 +1,11 @@
-
+
${HeaderSearchForSubtitles}
-