rework playlist editor

dashboard-ui/bower_components/iron-a11y-keys-behavior/.bower.json

@@ -29,14 +29,14 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
+  "homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
   "_release": "1.0.6",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.6",
     "commit": "af5c98b1cf9b3d180a6326c99ac9c7057eee647f"
   },
-  "_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
+  "_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-a11y-keys-behavior"
+  "_originalSource": "PolymerElements/iron-a11y-keys-behavior"
 }

dashboard-ui/bower_components/iron-flex-layout/.bower.json

@@ -25,14 +25,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-flex-layout",
+  "homepage": "https://github.com/PolymerElements/iron-flex-layout",
   "_release": "1.0.4",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.4",
     "commit": "dcfc54b0d358269bf0c72180b4ab090fc4931ecd"
   },
-  "_source": "git://github.com/polymerelements/iron-flex-layout.git",
+  "_source": "git://github.com/PolymerElements/iron-flex-layout.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-flex-layout"
+  "_originalSource": "PolymerElements/iron-flex-layout"
 }

dashboard-ui/components/collectioneditor/collectioneditor.js

@@ -184,7 +184,7 @@
         }
     }
 
-    function directoryBrowser() {
+    function collectioneditor() {
 
         var self = this;
 
@@ -219,7 +219,7 @@
 
                 $(dlg).on('iron-overlay-closed', onDialogClosed);
 
-                PaperDialogHelper.openWithHash(dlg, 'directorybrowser');
+                PaperDialogHelper.openWithHash(dlg, 'collectioneditor');
 
                 $('.btnCloseDialog', dlg).on('click', function () {
 
@@ -229,5 +229,5 @@
         };
     }
 
-    return directoryBrowser;
+    return collectioneditor;
 });

dashboard-ui/components/playlisteditor/playlisteditor.js

@@ -0,0 +1,238 @@
+define([], function () {
+
+    var lastPlaylistId = '';
+
+    function redirectToPlaylist(id) {
+
+        var context = getParameterByName('context');
+
+        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+            Dashboard.navigate(LibraryBrowser.getHref(item, context));
+
+        });
+    }
+
+    function onAddToPlaylistFormSubmit() {
+
+        Dashboard.showLoadingMsg();
+
+        var panel = $(this).parents('paper-dialog')[0];
+
+        var playlistId = $('#selectPlaylistToAddTo', panel).val();
+
+        if (playlistId) {
+            lastPlaylistId = playlistId;
+            addToPlaylist(panel, playlistId);
+        } else {
+            createPlaylist(panel);
+        }
+
+        return false;
+    }
+
+    function createPlaylist(dlg) {
+
+        var url = ApiClient.getUrl("Playlists", {
+
+            Name: $('#txtNewPlaylistName', dlg).val(),
+            Ids: $('.fldSelectedItemIds', dlg).val() || '',
+            userId: Dashboard.getCurrentUserId()
+
+        });
+
+        ApiClient.ajax({
+            type: "POST",
+            url: url,
+            dataType: "json"
+
+        }).done(function (result) {
+
+            Dashboard.hideLoadingMsg();
+
+            var id = result.Id;
+
+            PaperDialogHelper.close(dlg);
+            redirectToPlaylist(id);
+        });
+    }
+
+    function addToPlaylist(dlg, id) {
+
+        var url = ApiClient.getUrl("Playlists/" + id + "/Items", {
+
+            Ids: $('.fldSelectedItemIds', dlg).val() || '',
+            userId: Dashboard.getCurrentUserId()
+        });
+
+        ApiClient.ajax({
+            type: "POST",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            PaperDialogHelper.close(dlg);
+            Dashboard.alert(Globalize.translate('MessageAddedToPlaylistSuccess'));
+
+        });
+    }
+
+    function onDialogClosed() {
+
+        $(this).remove();
+        Dashboard.hideLoadingMsg();
+    }
+
+    function populatePlaylists(panel) {
+
+        var select = $('#selectPlaylistToAddTo', panel);
+
+        if (!select.length) {
+
+            $('#txtNewPlaylistName', panel).val('').focus();
+            return;
+        }
+
+        Dashboard.showLoadingMsg();
+
+        $('.newPlaylistInfo', panel).hide();
+
+        var options = {
+
+            Recursive: true,
+            IncludeItemTypes: "Playlist",
+            SortBy: 'SortName'
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            var html = '';
+
+            html += '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</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 style="max-width:100%;">';
+
+        html += '<br />';
+
+        html += '<div class="fldSelectPlaylist">';
+        html += '<br />';
+        html += '<label for="selectPlaylistToAddTo">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
+        html += '<select id="selectPlaylistToAddTo" data-mini="true"></select>';
+        html += '</div>';
+
+        html += '<div class="newPlaylistInfo">';
+
+        html += '<div>';
+        html += '<paper-input type="text" id="txtNewPlaylistName" required="required" label="' + Globalize.translate('LabelName') + '"></paper-input>';
+        html += '</div>';
+
+        html += '<br />';
+
+        // newPlaylistInfo
+        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) {
+
+        $('#selectPlaylistToAddTo', content).on('change', function () {
+
+            if (this.value) {
+                $('.newPlaylistInfo', content).hide();
+                $('input', content).removeAttr('required');
+            } else {
+                $('.newPlaylistInfo', content).show();
+                $('input', content).attr('required', 'required');
+            }
+
+        }).trigger('change');
+
+        populatePlaylists(content);
+
+        $('form', content).on('submit', onAddToPlaylistFormSubmit);
+
+        $('.fldSelectedItemIds', content).val(items.join(','));
+
+        if (items.length) {
+            $('.fldSelectPlaylist', content).show();
+            populatePlaylists(content);
+        } else {
+            $('.fldSelectPlaylist', content).hide();
+            $('#selectPlaylistToAddTo', content).html('').val('').trigger('change');
+        }
+    }
+
+    function playlisteditor() {
+
+        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 = Globalize.translate('HeaderAddToPlaylist');
+
+                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, 'playlisteditor');
+
+                $('.btnCloseDialog', dlg).on('click', function () {
+
+                    PaperDialogHelper.close(dlg);
+                });
+            });
+        };
+    }
+
+    return playlisteditor;
+});

dashboard-ui/css/site.css

@@ -430,7 +430,7 @@ fieldset {
     border: none;
 }
 
-input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']) {
+input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']) {
     -webkit-appearance: none;
     -webkit-font-smoothing: antialiased;
     -webkit-rtl-ordering: logical;

dashboard-ui/scripts/playlistmanager.js

@@ -1,215 +1,11 @@
 (function ($, document) {
 
-    var lastPlaylistId = '';
-
-    function redirectToPlaylist(id) {
-
-        var context = getParameterByName('context');
-
-        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
-
-            Dashboard.navigate(LibraryBrowser.getHref(item, context));
-
-        });
-    }
-
-    function onAddToPlaylistFormSubmit() {
-
-        Dashboard.showLoadingMsg();
-
-        var panel = $(this).parents('.newPlaylistPanel');
-
-        var playlistId = $('select.selectPlaylistToAddTo', panel).val();
-
-        if (playlistId) {
-            lastPlaylistId = playlistId;
-            addToPlaylist(panel, playlistId);
-        } else {
-            createPlaylist(panel);
-        }
-
-        return false;
-    }
-
-    function getNewPlaylistPanel() {
-
-        Dashboard.showLoadingMsg();
-        $('.newPlaylistPanel').panel('destroy').remove();
-
-        var html = '<div data-role="panel" data-position="right" data-display="overlay" class="newPlaylistPanel" data-position-fixed="true" data-theme="a">';
-
-        html += '<h3>' + Globalize.translate('HeaderAddToPlaylist') + '</h3>';
-
-        html += '<br />';
-
-        html += '<form class="addToPlaylistForm">';
-
-        var selectId = 'selectPlaylistToAddTo' + new Date().getTime();
-
-        html += '<div>';
-        html += '<label for="' + selectId + '">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
-        html += '<select id="' + selectId + '" class="selectPlaylistToAddTo" data-mini="true">';
-        html += '</select>';
-        html += '</div>';
-
-        html += '<br />';
-
-        html += '<div class="fldNewPlaylist" style="display:none;">';
-        html += '<label for="txtNewPlaylistName">' + Globalize.translate('LabelName') + '</label>';
-        html += '<input type="text" id="txtNewPlaylistName" />';
-        html += '</div>';
-
-        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>';
-
-        $(document.body).append(html);
-
-        var elem = $('.newPlaylistPanel').panel({}).trigger('create').on("panelclose", function () {
-
-            $(this).off("panelclose").remove();
-        });
-
-        var select = $('#' + selectId, elem).on('change', function () {
-
-            if (this.value) {
-                $('.fldNewPlaylist', elem).hide();
-                $('input', elem).removeAttr('required');
-            } else {
-                $('.fldNewPlaylist', elem).show();
-                $('input', elem).attr('required', 'required');
-            }
-
-        }).trigger('change');
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), {
-
-            IncludeItemTypes: 'Playlist',
-            recursive: true,
-            SortBy: 'SortName'
-
-        }).done(function (result) {
-
-            var selectHtml = '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
-            selectHtml += result.Items.map(function (o) {
-
-                return '<option value="' + o.Id + '">' + o.Name + '</option>';
-
-            }).join('');
-
-            select.html(selectHtml);
-
-            select.val(lastPlaylistId || '').trigger('change');
-            Dashboard.hideLoadingMsg();
-        });
-
-        $('form', elem).on('submit', onAddToPlaylistFormSubmit);
-
-        return elem;
-    }
-
-    function showNewPlaylistPanel(items) {
-
-        var panel = getNewPlaylistPanel().panel('toggle');
-
-        $('.fldSelectedItemIds', panel).val(items.join(','));
-
-        populatePlaylists(panel);
-    }
-
-    function populatePlaylists(panel) {
-
-        var select = $('select.selectPlaylistToAddTo', panel);
-
-        if (!select.length) {
-
-            $('#txtNewPlaylistName', panel).val('').focus();
-            return;
-        }
-
-        $('.newPlaylistInfo', panel).hide();
-
-        var options = {
-
-            Recursive: true,
-            IncludeItemTypes: "Playlist",
-            SortBy: 'SortName'
-        };
-
-        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
-
-            var html = '';
-
-            html += '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
-
-            html += result.Items.map(function (i) {
-
-                return '<option value="' + i.Id + '">' + i.Name + '</option>';
-            });
-
-            select.html(html).val('').trigger('change');
-
-        });
-    }
-
-    function createPlaylist(panel) {
-
-        var url = ApiClient.getUrl("Playlists", {
-
-            Name: $('#txtNewPlaylistName', panel).val(),
-            Ids: $('.fldSelectedItemIds', panel).val() || '',
-            userId: Dashboard.getCurrentUserId()
-
-        });
-
-        ApiClient.ajax({
-            type: "POST",
-            url: url,
-            dataType: "json"
-
-        }).done(function (result) {
-
-            Dashboard.hideLoadingMsg();
-
-            var id = result.Id;
-
-            panel.panel('toggle');
-            redirectToPlaylist(id);
-        });
-    }
-
-    function addToPlaylist(panel, id) {
-
-        var url = ApiClient.getUrl("Playlists/" + id + "/Items", {
-
-            Ids: $('.fldSelectedItemIds', panel).val() || '',
-            userId: Dashboard.getCurrentUserId()
-        });
-
-        ApiClient.ajax({
-            type: "POST",
-            url: url
-
-        }).done(function () {
-
-            Dashboard.hideLoadingMsg();
-
-            panel.panel('toggle');
-            Dashboard.alert(Globalize.translate('MessageAddedToPlaylistSuccess'));
-
-        });
-    }
-
     window.PlaylistManager = {
 
         showPanel: function (items) {
 
-            require(['jqmpanel'], function() {
+            require(['playlisteditor'], function (playlisteditor) {
-                showNewPlaylistPanel(items);
+                new playlisteditor().show(items);
             });
         },
 

dashboard-ui/scripts/site.js

@@ -2049,7 +2049,8 @@ var AppInfo = {};
             velocity: "bower_components/velocity/velocity.min",
             tvguide: 'components/tvguide/tvguide',
             directorybrowser: 'components/directorybrowser/directorybrowser',
-            collectioneditor: 'components/collectioneditor/collectioneditor'
+            collectioneditor: 'components/collectioneditor/collectioneditor',
+            playlisteditor: 'components/playlisteditor/playlisteditor'
         };
 
         if (Dashboard.isRunningInCordova()) {

dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.css

@@ -83,7 +83,7 @@ div.ui-slider:after {
 	clear: both;
 }
 input.ui-slider-input {
-	display: block;
+	display: none;
 	float: left;
 	font-size: 14px;
 	font-weight: bold;
@@ -115,7 +115,7 @@ input.ui-slider-input {
 	border-width: 1px;
 	border-style: solid;
 	height: 15px;
-	margin: 0 15px 0 68px;
+	margin: 0 15px 0 0;
 	top: 6px;
 }
 .ui-slider-track.ui-mini {

dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.js

@@ -160,7 +160,7 @@
 
             this.handle.bind("click", false);
 
-            this._handleFormReset();
+            //this._handleFormReset();
 
             this.refresh(undefined, undefined, true);
         },