collection fixes

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 += '<option value="">' + Globalize.translate('OptionNewCollection') + '</option>';
+
+            html += result.Items.map(function (i) {
+
+                return '<option value="' + i.Id + '">' + i.Name + '</option>';
+            });
+
+            select.html(html).val('').trigger('change');
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function getEditorHtml() {
+
+        var html = '';
+
+        html += '<form class="newCollectionForm" style="max-width:100%;">';
+
+        html += '<br />';
+
+        html += '<div class="fldSelectCollection">';
+        html += '<br />';
+        html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
+        html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
+        html += '</div>';
+
+        html += '<div class="newCollectionInfo">';
+
+        html += '<div>';
+        html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + Globalize.translate('LabelName') + '"></paper-input>';
+        html += '<div class="fieldDescription">' + Globalize.translate('NewCollectionNameExample') + '</div>';
+        html += '</div>';
+
+        html += '<br />';
+        html += '<br />';
+
+        html += '<div>';
+        html += '<paper-checkbox id="chkEnableInternetMetadata">' + Globalize.translate('OptionSearchForInternetMetadata') + '</paper-checkbox>';
+        html += '</div>';
+
+        // newCollectionInfo
+        html += '</div>';
+
+        html += '<br />';
+        html += '<div>';
+        html += '<button type="submit" class="clearButton" data-role="none"><paper-button raised class="submit block">' + Globalize.translate('ButtonOk') + '</paper-button></button>';
+        html += '</div>';
+
+        html += '<input type="hidden" class="fldSelectedItemIds" />';
+
+        html += '</form>';
+
+        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 += '<h2 class="dialogHeader">';
+                html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
+
+                var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
+
+                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + title + '</div>';
+                html += '</h2>';
+
+                html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
+                html += getEditorHtml();
+                html += '</div>';
+
+                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;
+});

dashboard-ui/components/directorybrowser/directorybrowser.template.html

@@ -1,22 +0,0 @@
-<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>

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');

dashboard-ui/scripts/collectioneditor.js

@@ -1,221 +0,0 @@
-(function ($, document) {
-
-    function getNewCollectionPanel(createIfNeeded) {
-
-        var panel = $('.newCollectionPanel');
-
-        if (createIfNeeded && !panel.length) {
-
-            var html = '';
-
-            html += '<div>';
-            html += '<div data-role="panel" class="newCollectionPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="a">';
-            html += '<form class="newCollectionForm">';
-
-            html += '<h3>' + Globalize.translate('HeaderAddToCollection') + '</h3>';
-
-            html += '<div class="fldSelectCollection">';
-            html += '<br />';
-            html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
-            html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
-            html += '</div>';
-
-            html += '<div class="newCollectionInfo">';
-            html += '<br />';
-
-            html += '<div>';
-            html += '<label for="txtNewCollectionName">' + Globalize.translate('LabelName') + '</label>';
-            html += '<input type="text" id="txtNewCollectionName" required="required" />';
-            html += '<div class="fieldDescription">' + Globalize.translate('NewCollectionNameExample') + '</div>';
-            html += '</div>';
-
-            html += '<br />';
-
-            html += '<div>';
-            html += '<label for="chkEnableInternetMetadata">' + Globalize.translate('OptionSearchForInternetMetadata') + '</label>';
-            html += '<input type="checkbox" id="chkEnableInternetMetadata" data-mini="true" />';
-            html += '</div>';
-
-            // newCollectionInfo
-            html += '</div>';
-
-            html += '<br />';
-            html += '<p>';
-            html += '<input class="fldSelectedItemIds" type="hidden" />';
-            html += '<button type="submit" data-icon="plus" data-mini="true" data-theme="b">' + Globalize.translate('ButtonSubmit') + '</button>';
-            html += '</p>';
-
-            html += '</form>';
-            html += '</div>';
-            html += '</div>';
-
-            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 += '<option value="">' + Globalize.translate('OptionNewCollection') + '</option>';
-
-            html += result.Items.map(function (i) {
-
-                return '<option value="' + i.Id + '">' + i.Name + '</option>';
-            });
-
-            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);

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');
                 }
             }

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;

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;
+            require(['collectioneditor'], function (collectioneditor) {
-            getPageData().view = newView;
 
-            reloadItems(tabContent);
+                new collectioneditor().show();
 
-            LibraryBrowser.saveViewSetting(getSavedQueryKey(), newView);
+            });
         });
     }
 

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()) {

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:",

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) {