diff --git a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js new file mode 100644 index 0000000000..3a0db0f930 --- /dev/null +++ b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js @@ -0,0 +1,191 @@ +define([], function () { + + var currentDeferred; + var hasChanges; + var currentOptions; + + function addMediaLocation(page, path) { + + var virtualFolder = currentOptions.library; + + var refreshAfterChange = currentOptions.refresh; + + ApiClient.addMediaPath(virtualFolder.Name, path, refreshAfterChange).done(function () { + + refreshLibraryFromServer(page); + + }).fail(function () { + + Dashboard.showError(Globalize.translate('DefaultErrorMessage')); + }) + } + + function onRemoveClick() { + + var button = this; + var index = parseInt(button.getAttribute('data-index')); + + var virtualFolder = currentOptions.library; + + var location = virtualFolder.Locations[index]; + + Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) { + + if (confirmResult) { + + var refreshAfterChange = currentOptions.refresh; + + ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(function () { + + refreshLibraryFromServer($(button).parents('.editorContent')[0]); + + }).fail(function () { + + Dashboard.showError(Globalize.translate('DefaultErrorMessage')); + }); + } + }); + } + + function getFolderHtml(path, index) { + + var html = ''; + + html += ''; + + html += ''; + + html += ''; + html += path; + html += ''; + + html += ''; + + html += ''; + + return html; + } + + function refreshLibraryFromServer(page) { + + ApiClient.getVirtualFolders().done(function (result) { + + var library = result.filter(function (f) { + + return f.Name == currentOptions.library.Name; + + })[0]; + + if (library) { + currentOptions.library = library; + renderLibrary(page, currentOptions); + } + }); + } + + function renderLibrary(page, options) { + var foldersHtml = options.library.Locations.map(getFolderHtml).join(''); + + page.querySelector('.folderList').innerHTML = foldersHtml; + + $(page.querySelectorAll('.btnRemovePath')).on('click', onRemoveClick); + } + + function onAddButtonClick() { + + var page = $(this).parents('.editorContent')[0]; + + require(['directorybrowser'], function (directoryBrowser) { + + var picker = new directoryBrowser(); + + picker.show({ + + callback: function (path) { + + if (path) { + addMediaLocation(page, path); + } + picker.close(); + } + + }); + }); + } + + function initEditor(page, options) { + renderLibrary(page, options); + + $('.btnAddFolder', page).on('click', onAddButtonClick); + } + + function onDialogClosed() { + + $(this).remove(); + Dashboard.hideLoadingMsg(); + currentDeferred.resolveWith(null, [hasChanges]); + } + + function editor() { + + var self = this; + + self.show = function (options) { + + var deferred = DeferredBuilder.Deferred(); + + currentOptions = options; + currentDeferred = deferred; + hasChanges = false; + + require(['components/paperdialoghelper'], function () { + + HttpClient.send({ + + type: 'GET', + url: 'components/medialibraryeditor/medialibraryeditor.template.html' + + }).done(function (template) { + + var dlg = PaperDialogHelper.createDialog({ + size: 'small', + theme: 'a' + }); + + var html = ''; + html += '

'; + html += ''; + + html += '
' + options.library.Name + '
'; + html += '

'; + + html += '
'; + html += Globalize.translateDocument(template); + html += '
'; + + dlg.innerHTML = html; + document.body.appendChild(dlg); + + var editorContent = dlg.querySelector('.editorContent'); + initEditor(editorContent, options); + + $(dlg).on('iron-overlay-closed', onDialogClosed); + + PaperDialogHelper.openWithHash(dlg, 'medialibraryeditor'); + + $('.btnCloseDialog', dlg).on('click', function () { + + PaperDialogHelper.close(dlg); + }); + + refreshLibraryFromServer(editorContent); + }); + + }); + + return deferred.promise(); + }; + } + + return editor; +}); \ No newline at end of file diff --git a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.template.html b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.template.html new file mode 100644 index 0000000000..a86b0e9d72 --- /dev/null +++ b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.template.html @@ -0,0 +1,8 @@ +
+

${HeadersFolders}

+ + + ${ButtonAdd} + +
+
\ No newline at end of file diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js index 683f630da7..2f9c958b70 100644 --- a/dashboard-ui/scripts/medialibrarypage.js +++ b/dashboard-ui/scripts/medialibrarypage.js @@ -1,63 +1,4 @@ -var MediaLibraryPage = { - - addMediaLocation: function (virtualFolderIndex) { - - MediaLibraryPage.selectDirectory(function (path) { - - if (path) { - - var virtualFolder = MediaLibraryPage.virtualFolders[virtualFolderIndex]; - - MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name; - - var refreshAfterChange = shouldRefreshLibraryAfterChanges(); - - ApiClient.addMediaPath(virtualFolder.Name, path, refreshAfterChange).done(MediaLibraryPage.processOperationResult); - } - - }); - }, - - selectDirectory: function (callback) { - - require(['directorybrowser'], function (directoryBrowser) { - - var picker = new directoryBrowser(); - - picker.show({ - - callback: callback - }); - - MediaLibraryPage.directoryPicker = picker; - }); - }, - - deleteMediaLocation: function (button) { - - var folderIndex = button.getAttribute('data-folderindex'); - var index = parseInt(button.getAttribute('data-index')); - - var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex]; - - MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name; - - var location = virtualFolder.Locations[index]; - - Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) { - - if (confirmResult) { - - var refreshAfterChange = shouldRefreshLibraryAfterChanges(); - - ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(MediaLibraryPage.processOperationResult); - } - }); - } - -}; - -(function () { +(function () { function changeCollectionType(page, virtualFolder) { @@ -92,6 +33,24 @@ }); } + function editVirtualFolder(page, virtualFolder) { + + require(['medialibraryeditor'], function (medialibraryeditor) { + + new medialibraryeditor().show({ + + refresh: shouldRefreshLibraryAfterChanges(), + library: virtualFolder + + }).done(function (hasChanges) { + + if (hasChanges) { + reloadLibrary(page); + } + }); + }); + } + function deleteVirtualFolder(page, virtualFolder) { var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder'); @@ -233,6 +192,13 @@ addVirtualFolder(page); }); + $('.editLibrary', divVirtualFolders).on('click', function () { + var card = $(this).parents('.card')[0]; + var index = parseInt(card.getAttribute('data-index')); + var virtualFolder = virtualFolders[index]; + editVirtualFolder(page, virtualFolder); + }); + Dashboard.hideLoadingMsg(); } @@ -290,7 +256,13 @@ var html = ''; - html += '
'; + var style = ""; + + if ($($.mobile.activePage)[0].classList.contains('wizardPage')) { + style += "min-width:33.3%;"; + } + + html += '
'; html += '
'; html += '
'; @@ -307,9 +279,9 @@ } if (imgUrl) { - html += '
'; + html += '
'; } else if (!virtualFolder.showNameWithIcon) { - html += '
'; + html += '
'; html += '
'; html += ''; html += "
"; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 1c1e48fd25..f3edafa87a 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2063,6 +2063,7 @@ var AppInfo = {}; collectioneditor: 'components/collectioneditor/collectioneditor', playlisteditor: 'components/playlisteditor/playlisteditor', medialibrarycreator: 'components/medialibrarycreator/medialibrarycreator', + medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor', howler: 'bower_components/howler.js/howler.min', dragula: 'bower_components/dragula.js/dist/dragula.min' }; diff --git a/dashboard-ui/strings/html/en-US.json b/dashboard-ui/strings/html/en-US.json index 8a2cd4c820..6b7344175c 100644 --- a/dashboard-ui/strings/html/en-US.json +++ b/dashboard-ui/strings/html/en-US.json @@ -1523,5 +1523,6 @@ "ButtonClear": "Clear", "ButtonEditImages": "Edit Images", "LabelFolder": "Folder:", - "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up." + "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up.", + "HeadersFolders": "Folders" } \ No newline at end of file diff --git a/dashboard-ui/strings/html/server.json b/dashboard-ui/strings/html/server.json index da9050418c..9cc8909df0 100644 --- a/dashboard-ui/strings/html/server.json +++ b/dashboard-ui/strings/html/server.json @@ -1539,5 +1539,6 @@ "ButtonClear": "Clear", "ButtonEditImages": "Edit Images", "LabelFolder": "Folder:", - "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up." + "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up.", + "HeadersFolders": "Folders" }