From add9159c97abc73d47cd14974df682e66ea657c6 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Wed, 14 Oct 2015 01:46:11 -0400 Subject: [PATCH] collection fixes --- .../collectioneditor/collectioneditor.js | 233 ++++++++++++++++++ .../directorybrowser.template.html | 22 -- dashboard-ui/components/paperdialoghelper.js | 7 +- dashboard-ui/scripts/collectioneditor.js | 221 ----------------- dashboard-ui/scripts/librarybrowser.js | 16 +- dashboard-ui/scripts/librarylist.js | 52 +--- dashboard-ui/scripts/moviecollections.js | 10 +- dashboard-ui/scripts/site.js | 3 +- .../strings/javascript/javascript.json | 1 + .../thirdparty/paper-button-style.css | 9 +- 10 files changed, 280 insertions(+), 294 deletions(-) create mode 100644 dashboard-ui/components/collectioneditor/collectioneditor.js delete mode 100644 dashboard-ui/components/directorybrowser/directorybrowser.template.html delete mode 100644 dashboard-ui/scripts/collectioneditor.js diff --git a/dashboard-ui/components/collectioneditor/collectioneditor.js b/dashboard-ui/components/collectioneditor/collectioneditor.js new file mode 100644 index 0000000000..cac02c5df9 --- /dev/null +++ b/dashboard-ui/components/collectioneditor/collectioneditor.js @@ -0,0 +1,233 @@ +define([], function () { + + function onSubmit() { + Dashboard.showLoadingMsg(); + + var panel = $(this).parents('paper-dialog')[0]; + + var collectionId = $('#selectCollectionToAddTo', panel).val(); + + if (collectionId) { + addToCollection(panel, collectionId); + } else { + createCollection(panel); + } + + return false; + } + + function createCollection(dlg) { + + var url = ApiClient.getUrl("Collections", { + + Name: $('#txtNewCollectionName', dlg).val(), + IsLocked: !$('#chkEnableInternetMetadata', dlg).checked(), + Ids: $('.fldSelectedItemIds', dlg).val() || '' + + //ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId() + + }); + + ApiClient.ajax({ + type: "POST", + url: url, + dataType: "json" + + }).done(function (result) { + + Dashboard.hideLoadingMsg(); + + var id = result.Id; + + PaperDialogHelper.close(dlg); + redirectToCollection(id); + + }); + } + + function redirectToCollection(id) { + + var context = getParameterByName('context'); + + ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { + + Dashboard.navigate(LibraryBrowser.getHref(item, context)); + + }); + } + + function addToCollection(dlg, id) { + + var url = ApiClient.getUrl("Collections/" + id + "/Items", { + + Ids: $('.fldSelectedItemIds', dlg).val() || '' + }); + + ApiClient.ajax({ + type: "POST", + url: url + + }).done(function () { + + Dashboard.hideLoadingMsg(); + + PaperDialogHelper.close(dlg); + + Dashboard.alert(Globalize.translate('MessageItemsAdded')); + }); + } + + function onDialogClosed() { + + $(this).remove(); + Dashboard.hideLoadingMsg(); + } + + function populateCollections(panel) { + + Dashboard.showLoadingMsg(); + + var select = $('#selectCollectionToAddTo', panel); + + $('.newCollectionInfo', panel).hide(); + + var options = { + + Recursive: true, + IncludeItemTypes: "BoxSet", + SortBy: "SortName" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + var html = ''; + + html += ''; + + html += result.Items.map(function (i) { + + return ''; + }); + + select.html(html).val('').trigger('change'); + + Dashboard.hideLoadingMsg(); + }); + } + + function getEditorHtml() { + + var html = ''; + + html += '
'; + + html += '
'; + + html += '
'; + html += '
'; + html += ''; + html += ''; + html += '
'; + + html += '
'; + + html += '
'; + html += ''; + html += '
' + Globalize.translate('NewCollectionNameExample') + '
'; + html += '
'; + + html += '
'; + html += '
'; + + html += '
'; + html += '' + Globalize.translate('OptionSearchForInternetMetadata') + ''; + html += '
'; + + // newCollectionInfo + html += '
'; + + html += '
'; + html += '
'; + html += ''; + html += '
'; + + html += ''; + + html += '
'; + + return html; + } + + function initEditor(content, items) { + + $('#selectCollectionToAddTo', content).on('change', function () { + + if (this.value) { + $('.newCollectionInfo', content).hide(); + $('#txtNewCollectionName', content).removeAttr('required'); + } else { + $('.newCollectionInfo', content).show(); + $('#txtNewCollectionName', content).attr('required', 'required'); + } + }); + + $('.newCollectionForm', content).off('submit', onSubmit).on('submit', onSubmit); + + $('.fldSelectedItemIds', content).val(items.join(',')); + + if (items.length) { + $('.fldSelectCollection', content).show(); + populateCollections(content); + } else { + $('.fldSelectCollection', content).hide(); + $('#selectCollectionToAddTo', content).html('').val('').trigger('change'); + } + } + + function directoryBrowser() { + + var self = this; + + self.show = function (items) { + + items = items || []; + + require(['components/paperdialoghelper'], function () { + + var dlg = PaperDialogHelper.createDialog({ + size: 'small' + }); + + var html = ''; + html += '

'; + html += ''; + + var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection'); + + html += '
' + title + '
'; + html += '

'; + + html += '
'; + html += getEditorHtml(); + html += '
'; + + dlg.innerHTML = html; + document.body.appendChild(dlg); + + var editorContent = dlg.querySelector('.editorContent'); + initEditor(editorContent, items); + + $(dlg).on('iron-overlay-closed', onDialogClosed); + + PaperDialogHelper.openWithHash(dlg, 'directorybrowser'); + + $('.btnCloseDialog', dlg).on('click', function () { + + PaperDialogHelper.close(dlg); + }); + }); + }; + } + + return directoryBrowser; +}); \ No newline at end of file diff --git a/dashboard-ui/components/directorybrowser/directorybrowser.template.html b/dashboard-ui/components/directorybrowser/directorybrowser.template.html deleted file mode 100644 index 453c2e78ff..0000000000 --- a/dashboard-ui/components/directorybrowser/directorybrowser.template.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
-
-
-

${HeaderSearchForSubtitles}

- -
-
- - -
- -
-
-
- -
diff --git a/dashboard-ui/components/paperdialoghelper.js b/dashboard-ui/components/paperdialoghelper.js index 4efbba21cf..e3eefa4cc8 100644 --- a/dashboard-ui/components/paperdialoghelper.js +++ b/dashboard-ui/components/paperdialoghelper.js @@ -96,7 +96,10 @@ dlg.classList.add('popupEditor'); - if (options.size == 'medium') { + if (options.size == 'small') { + dlg.classList.add('small-paper-dialog'); + } + else if (options.size == 'medium') { dlg.classList.add('medium-paper-dialog'); } else { dlg.classList.add('fullscreen-paper-dialog'); @@ -112,7 +115,7 @@ } function positionTo(dlg, elem) { - + var windowHeight = $(window).height(); // If the window height is under a certain amount, don't bother trying to position diff --git a/dashboard-ui/scripts/collectioneditor.js b/dashboard-ui/scripts/collectioneditor.js deleted file mode 100644 index ad617e9cbf..0000000000 --- a/dashboard-ui/scripts/collectioneditor.js +++ /dev/null @@ -1,221 +0,0 @@ -(function ($, document) { - - function getNewCollectionPanel(createIfNeeded) { - - var panel = $('.newCollectionPanel'); - - if (createIfNeeded && !panel.length) { - - var html = ''; - - html += '
'; - html += '
'; - html += '
'; - - html += '

' + Globalize.translate('HeaderAddToCollection') + '

'; - - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
'; - - html += '
'; - html += '
'; - - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('NewCollectionNameExample') + '
'; - html += '
'; - - html += '
'; - - html += '
'; - html += ''; - html += ''; - html += '
'; - - // newCollectionInfo - html += '
'; - - html += '
'; - html += '

'; - html += ''; - html += ''; - html += '

'; - - html += '
'; - html += '
'; - html += '
'; - - panel = $(html).appendTo(document.body).trigger('create').find('.newCollectionPanel'); - - $('#selectCollectionToAddTo', panel).on('change', function () { - - if (this.value) { - $('.newCollectionInfo', panel).hide(); - $('#txtNewCollectionName', panel).removeAttr('required'); - } else { - $('.newCollectionInfo', panel).show(); - $('#txtNewCollectionName', panel).attr('required', 'required'); - } - }); - - $('.newCollectionForm', panel).off('submit', onSubmit).on('submit', onSubmit); - } - return panel; - } - - function showCollectionPanel(items) { - - var panel = getNewCollectionPanel(true).panel('toggle'); - - $('.fldSelectedItemIds', panel).val(items.join(',')); - - - require(['jqmicons']); - - if (items.length) { - $('.fldSelectCollection', panel).show(); - populateCollections(panel); - } else { - $('.fldSelectCollection', panel).hide(); - $('#selectCollectionToAddTo', panel).html('').val('').trigger('change'); - } - } - - function populateCollections(panel) { - - var select = $('#selectCollectionToAddTo', panel); - - $('.newCollectionInfo', panel).hide(); - - var options = { - - Recursive: true, - IncludeItemTypes: "BoxSet", - SortBy: "SortName" - }; - - ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { - - var html = ''; - - html += ''; - - html += result.Items.map(function (i) { - - return ''; - }); - - select.html(html).val('').trigger('change'); - - }); - } - - function onSubmit() { - Dashboard.showLoadingMsg(); - - var panel = getNewCollectionPanel(false); - - var collectionId = $('#selectCollectionToAddTo', panel).val(); - - if (collectionId) { - addToCollection(panel, collectionId); - } else { - createCollection(panel); - } - - return false; - } - - pageClassOn('pageinit', "collectionEditorPage", function () { - - var page = this; - - // The button is created dynamically - $(page).on('click', '.btnNewCollection', function () { - - BoxSetEditor.showPanel([]); - }); - }); - - function redirectToCollection(id) { - - var context = getParameterByName('context'); - - ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { - - Dashboard.navigate(LibraryBrowser.getHref(item, context)); - - }); - } - - function createCollection(panel) { - - var url = ApiClient.getUrl("Collections", { - - Name: $('#txtNewCollectionName', panel).val(), - IsLocked: !$('#chkEnableInternetMetadata', panel).checked(), - Ids: $('.fldSelectedItemIds', panel).val() || '' - - //ParentId: getParameterByName('parentId') || LibraryMenu.getTopParentId() - - }); - - ApiClient.ajax({ - type: "POST", - url: url, - dataType: "json" - - }).done(function (result) { - - Dashboard.hideLoadingMsg(); - - var id = result.Id; - - panel.panel('toggle'); - redirectToCollection(id); - - }); - } - - function addToCollection(panel, id) { - - var url = ApiClient.getUrl("Collections/" + id + "/Items", { - - Ids: $('.fldSelectedItemIds', panel).val() || '' - }); - - ApiClient.ajax({ - type: "POST", - url: url - - }).done(function () { - - Dashboard.hideLoadingMsg(); - - panel.panel('toggle'); - - Dashboard.alert(Globalize.translate('MessageItemsAdded')); - }); - } - - window.BoxSetEditor = { - - showPanel: function (items) { - require(['jqmpanel'], function () { - showCollectionPanel(items); - }); - }, - - supportsAddingToCollection: function (item) { - - var invalidTypes = ['Person', 'Genre', 'MusicGenre', 'Studio', 'GameGenre', 'BoxSet', 'Playlist', 'UserView', 'CollectionFolder', 'Audio', 'Episode', 'TvChannel', 'Program']; - - return !item.CollectionType && invalidTypes.indexOf(item.Type) == -1 && item.MediaType != 'Photo'; - } - }; - -})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 2ae4044eb6..5f814b44c0 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -679,7 +679,7 @@ var commands = []; - if (BoxSetEditor.supportsAddingToCollection(item)) { + if (LibraryBrowser.supportsAddingToCollection(item)) { commands.push('addtocollection'); } @@ -894,7 +894,10 @@ }); break; case 'addtocollection': - BoxSetEditor.showPanel([itemId]); + require(['collectioneditor'], function (collectioneditor) { + + new collectioneditor().show([itemId]); + }); break; case 'playlist': PlaylistManager.showPanel([itemId]); @@ -1446,6 +1449,13 @@ return html; }, + supportsAddingToCollection: function (item) { + + var invalidTypes = ['Person', 'Genre', 'MusicGenre', 'Studio', 'GameGenre', 'BoxSet', 'Playlist', 'UserView', 'CollectionFolder', 'Audio', 'Episode', 'TvChannel', 'Program']; + + return !item.CollectionType && invalidTypes.indexOf(item.Type) == -1 && item.MediaType != 'Photo'; + }, + getItemCommands: function (item, options) { var itemCommands = []; @@ -1478,7 +1488,7 @@ } if (options.showAddToCollection !== false) { - if (BoxSetEditor.supportsAddingToCollection(item)) { + if (LibraryBrowser.supportsAddingToCollection(item)) { itemCommands.push('addtocollection'); } } diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index 9a7f35b087..1c9f280c0e 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -414,7 +414,10 @@ switch (id) { case 'addtocollection': - BoxSetEditor.showPanel([itemId]); + require(['collectioneditor'], function (collectioneditor) { + + new collectioneditor().show([itemId]); + }); break; case 'playlist': PlaylistManager.showPanel([itemId]); @@ -1236,18 +1239,23 @@ positionTo: e.target, callback: function (id) { + var items = selectedItems.slice(0); + switch (id) { case 'addtocollection': - BoxSetEditor.showPanel(selectedItems); + require(['collectioneditor'], function (collectioneditor) { + + new collectioneditor().show(items); + }); hideSelections(); break; case 'playlist': - PlaylistManager.showPanel(selectedItems); + PlaylistManager.showPanel(items); hideSelections(); break; case 'refresh': - selectedItems.map(function (itemId) { + items.map(function (itemId) { // TODO: Create an endpoint to do this in bulk ApiClient.refreshItem(itemId, { @@ -1264,7 +1272,7 @@ break; case 'sync': SyncManager.showMenu({ - items: selectedItems.map(function (i) { + items: items.map(function (i) { return { Id: i }; @@ -1332,40 +1340,6 @@ }); } - function addToCollection(page) { - - var selection = getSelectedItems(); - - if (selection.length < 1) { - - Dashboard.alert({ - message: Globalize.translate('MessagePleaseSelectOneItem'), - title: Globalize.translate('HeaderError') - }); - - return; - } - - BoxSetEditor.showPanel(selection); - } - - function addToPlaylist(page) { - - var selection = getSelectedItems(); - - if (selection.length < 1) { - - Dashboard.alert({ - message: Globalize.translate('MessagePleaseSelectOneItem'), - title: Globalize.translate('HeaderError') - }); - - return; - } - - PlaylistManager.showPanel(selection); - } - function onItemWithActionClick(e) { var elem = this; diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js index 6ef9e72439..287d378055 100644 --- a/dashboard-ui/scripts/moviecollections.js +++ b/dashboard-ui/scripts/moviecollections.js @@ -191,14 +191,14 @@ function initPage(tabContent) { - $('select.selectView').on('change', function () { + // The button is created dynamically + $('.btnNewCollection', tabContent).on('click', function () { - var newView = this.value; - getPageData().view = newView; + require(['collectioneditor'], function (collectioneditor) { - reloadItems(tabContent); + new collectioneditor().show(); - LibraryBrowser.saveViewSetting(getSavedQueryKey(), newView); + }); }); } diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 47d24115d1..3472b84438 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2048,7 +2048,8 @@ var AppInfo = {}; var paths = { velocity: "bower_components/velocity/velocity.min", tvguide: 'components/tvguide/tvguide', - directorybrowser: 'components/directorybrowser/directorybrowser' + directorybrowser: 'components/directorybrowser/directorybrowser', + collectioneditor: 'components/collectioneditor/collectioneditor' }; if (Dashboard.isRunningInCordova()) { diff --git a/dashboard-ui/strings/javascript/javascript.json b/dashboard-ui/strings/javascript/javascript.json index ed7ddb6910..a40c8a4e5a 100644 --- a/dashboard-ui/strings/javascript/javascript.json +++ b/dashboard-ui/strings/javascript/javascript.json @@ -96,6 +96,7 @@ "SyncJobItemStatusReadyToTransfer": "Ready to Transfer", "LabelCollection": "Collection", "HeaderAddToCollection": "Add to Collection", + "HeaderNewCollection": "New Collection", "NewCollectionNameExample": "Example: Star Wars Collection", "OptionSearchForInternetMetadata": "Search the internet for artwork and metadata", "LabelSelectCollection": "Select collection:", diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css index 478ba784b7..ef7ebf9dbc 100644 --- a/dashboard-ui/thirdparty/paper-button-style.css +++ b/dashboard-ui/thirdparty/paper-button-style.css @@ -511,7 +511,7 @@ paper-dialog paper-radio-group paper-radio-button { display: block; } -.fullscreen-paper-dialog, .medium-paper-dialog { +.fullscreen-paper-dialog, .medium-paper-dialog, .small-paper-dialog { position: fixed !important; top: 0 !important; bottom: 0 !important; @@ -531,6 +531,13 @@ paper-dialog paper-radio-group paper-radio-button { left: 10% !important; right: 10% !important; } + + .small-paper-dialog { + top: 10% !important; + bottom: 10% !important; + left: 20% !important; + right: 20% !important; + } } @media all and (min-width: 1280px) and (min-height: 720px) {