rework directory picker

dashboard-ui/components/directorybrowser/directorybrowser.js

@@ -0,0 +1,271 @@
+define([], function () {
+
+    var systemInfo;
+    function getSystemInfo() {
+
+        var deferred = DeferredBuilder.Deferred();
+
+        if (systemInfo) {
+            deferred.resolveWith(null, [systemInfo]);
+        } else {
+            ApiClient.getPublicSystemInfo().done(function (info) {
+                systemInfo = info;
+                deferred.resolveWith(null, [systemInfo]);
+            });
+        }
+
+        return deferred.promise();
+    }
+
+    function onDialogClosed() {
+
+        $(this).remove();
+        Dashboard.hideLoadingMsg();
+    }
+
+    function refreshDirectoryBrowser(page, path, fileOptions) {
+
+        Dashboard.showLoadingMsg();
+
+        if (path) {
+            $('.networkHeadline').hide();
+        } else {
+            $('.networkHeadline').show();
+        }
+
+        var promise;
+
+        var parentPathPromise = null;
+
+        if (path === "Network") {
+            promise = ApiClient.getNetworkDevices();
+        }
+        else if (path) {
+            promise = ApiClient.getDirectoryContents(path, fileOptions);
+            parentPathPromise = ApiClient.getParentPath(path);
+        } else {
+            promise = ApiClient.getDrives();
+        }
+
+        if (!parentPathPromise) {
+            parentPathPromise = $.Deferred();
+            parentPathPromise.resolveWith(null, []);
+            parentPathPromise = parentPathPromise.promise();
+        }
+
+        $.when(promise, parentPathPromise).done(function (response1, response2) {
+
+            var folders = response1[0];
+            var parentPath = response2 && response2.length ? response2[0] || '' : '';
+
+            $('#txtDirectoryPickerPath', page).val(path || "");
+
+            var html = '';
+
+            if (path) {
+
+                html += '<paper-item role="menuitem" class="lnkPath lnkDirectory" data-path="' + parentPath + '">';
+                html += '<paper-item-body>';
+                html += '...';
+                html += '</paper-item-body>';
+                html += '<iron-icon icon="arrow-forward"></iron-icon>';
+                html += '</paper-item>';
+            }
+
+            for (var i = 0, length = folders.length; i < length; i++) {
+
+                var folder = folders[i];
+
+                var cssClass = folder.Type == "File" ? "lnkPath lnkFile" : "lnkPath lnkDirectory";
+
+                html += '<paper-item role="menuitem" class="' + cssClass + '" data-type="' + folder.Type + '" data-path="' + folder.Path + '">';
+                html += '<paper-item-body>';
+                html += folder.Name;
+                html += '</paper-item-body>';
+                html += '<iron-icon icon="arrow-forward"></iron-icon>';
+                html += '</paper-item>';
+            }
+
+            if (!path) {
+                html += '<paper-item role="menuitem" class="lnkPath lnkDirectory" data-path="Network">';
+                html += '<paper-item-body>';
+                html += Globalize.translate('ButtonNetwork');
+                html += '</paper-item-body>';
+                html += '<iron-icon icon="arrow-forward"></iron-icon>';
+                html += '</paper-item>';
+            }
+
+            $('.results', page).html(html);
+
+            Dashboard.hideLoadingMsg();
+
+        }).fail(function () {
+
+            $('#txtDirectoryPickerPath', page).val("");
+            $('.results', page).html('');
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function getEditorHtml(options, systemInfo) {
+
+        var html = '';
+
+        var instruction = options.instruction ? options.instruction + '<br/><br/>' : '';
+
+        html += '<p class="directoryPickerHeadline">';
+        html += instruction;
+        html += Globalize.translate('MessageDirectoryPickerInstruction')
+            .replace('{0}', '<b>\\\\server</b>')
+            .replace('{1}', '<b>\\\\192.168.1.101</b>');
+
+        if (systemInfo.OperatingSystem.toLowerCase() == 'bsd') {
+
+            html += '<br/>';
+            html += '<br/>';
+            html += Globalize.translate('MessageDirectoryPickerBSDInstruction');
+            html += '<br/>';
+            html += '<a href="http://doc.freenas.org/9.3/freenas_jails.html#add-storage" target="_blank">' + Globalize.translate('ButtonMoreInformation') + '</a>';
+        }
+
+        html += '</p>';
+
+        html += '<form style="max-width:100%;">';
+        html += '<div>';
+        html += '<paper-input id="txtDirectoryPickerPath" type="text" required="required" style="width:82%;display:inline-block;" label="' + Globalize.translate('LabelCurrentPath') + '"></paper-input>';
+
+        html += '<paper-icon-button icon="refresh" class="btnRefreshDirectories" title="' + Globalize.translate('ButtonRefresh') + '"></paper-icon-button>';
+        html += '</div>';
+
+        html += '<div class="results paperList" style="height: 180px; overflow-y: auto;"></div>';
+
+        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 += '</form>';
+        html += '</div>';
+
+        return html;
+    }
+
+    function initEditor(content, options, fileOptions) {
+
+        $(content).on("click", ".lnkPath", function () {
+
+            var path = this.getAttribute('data-path');
+
+            if ($(this).hasClass('lnkFile')) {
+                $('#txtDirectoryPickerPath', content).val(path);
+            } else {
+                refreshDirectoryBrowser(content, path, fileOptions);
+            }
+
+
+        }).on("click", ".btnRefreshDirectories", function () {
+
+            var path = $('#txtDirectoryPickerPath', content).val();
+
+            refreshDirectoryBrowser(content, path, fileOptions);
+
+        }).on("change", "#txtDirectoryPickerPath", function () {
+
+            refreshDirectoryBrowser(content, this.value, fileOptions);
+        });
+
+        $('form', content).on('submit', function () {
+
+            if (options.callback) {
+                options.callback(this.querySelector('#txtDirectoryPickerPath').value);
+            }
+
+            return false;
+        });
+    }
+
+    function directoryBrowser() {
+
+        var self = this;
+        var currentDialog;
+
+        self.show = function (options) {
+
+            options = options || {};
+
+            var fileOptions = {
+                includeDirectories: true
+            };
+
+            if (options.includeDirectories != null) {
+                fileOptions.includeDirectories = options.includeDirectories;
+            }
+
+            if (options.includeFiles != null) {
+                fileOptions.includeFiles = options.includeFiles;
+            }
+
+            getSystemInfo().done(function (systemInfo) {
+
+                require(['components/paperdialoghelper'], function () {
+
+                    var dlg = PaperDialogHelper.createDialog({
+                        theme: 'a',
+                        size: 'medium'
+                    });
+
+                    dlg.classList.add('directoryPicker');
+
+                    var html = '';
+                    html += '<h2 class="dialogHeader">';
+                    html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
+                    html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + (options.header || Globalize.translate('HeaderSelectPath')) + '</div>';
+                    html += '</h2>';
+
+                    html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
+                    html += getEditorHtml(options, systemInfo);
+                    html += '</div>';
+
+                    dlg.innerHTML = html;
+                    document.body.appendChild(dlg);
+
+                    var editorContent = dlg.querySelector('.editorContent');
+                    initEditor(editorContent, options, fileOptions);
+
+                    // Has to be assigned a z-index after the call to .open() 
+                    $(dlg).on('iron-overlay-opened', function () {
+                        this.querySelector('#txtDirectoryPickerPath input').focus();
+                    });
+                    $(dlg).on('iron-overlay-closed', onDialogClosed);
+
+                    PaperDialogHelper.openWithHash(dlg, 'directorybrowser');
+
+                    $('.btnCloseDialog', dlg).on('click', function () {
+
+                        PaperDialogHelper.close(dlg);
+                    });
+
+                    currentDialog = dlg;
+
+                    var txtCurrentPath = $('#txtDirectoryPickerPath', editorContent);
+
+                    if (options.path) {
+                        txtCurrentPath.val(options.path);
+                    }
+
+                    refreshDirectoryBrowser(editorContent, txtCurrentPath.val());
+                });
+
+            });
+        };
+
+        self.close = function () {
+            if (currentDialog) {
+                PaperDialogHelper.close(currentDialog);
+            }
+        };
+
+    }
+
+    return directoryBrowser;
+});

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

@@ -0,0 +1,22 @@
+<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/imagedownloader/imagedownloader.js

@@ -259,7 +259,7 @@
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/imagedownloader/imagedownloader.template.html'

dashboard-ui/components/imageeditor/imageeditor.js

@@ -221,7 +221,7 @@
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/imageeditor/imageeditor.template.html'

dashboard-ui/components/imageuploader/imageuploader.js

@@ -123,7 +123,7 @@
 
     function showEditor(itemId) {
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/imageuploader/imageuploader.template.html'

dashboard-ui/components/itemidentifier/itemidentifier.js

@@ -281,7 +281,7 @@
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/itemidentifier/itemidentifier.template.html'

dashboard-ui/components/metadataeditor/metadataeditor.js

@@ -39,7 +39,7 @@
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/metadataeditor/metadataeditor.template.html'
@@ -58,8 +58,6 @@
                 dlg.setAttribute('noAutoFocus', 'noAutoFocus');
                 dlg.entryAnimation = 'scale-up-animation';
                 dlg.exitAnimation = 'fade-out-animation';
-                dlg.classList.add('fullscreen-editor-paper-dialog');
-                dlg.classList.add('ui-body-b');
                 dlg.classList.add('smoothScrollY');
 
                 var html = '';

dashboard-ui/components/paperdialoghelper.js

@@ -76,7 +76,10 @@
         }
     }
 
-    function createDialog() {
+    function createDialog(options) {
+
+        options = options || {};
+
         var dlg = document.createElement('paper-dialog');
 
         dlg.setAttribute('with-backdrop', 'with-backdrop');
@@ -90,9 +93,19 @@
         dlg.setAttribute('noAutoFocus', 'noAutoFocus');
         dlg.entryAnimation = 'scale-up-animation';
         dlg.exitAnimation = 'fade-out-animation';
-        dlg.classList.add('fullscreen-editor-paper-dialog');
+
-        dlg.classList.add('ui-body-b');
+        dlg.classList.add('popupEditor');
-        dlg.classList.add('background-theme-b');
+
+        if (options.size == 'medium') {
+            dlg.classList.add('medium-paper-dialog');
+        } else {
+            dlg.classList.add('fullscreen-paper-dialog');
+        }
+
+        var theme = options.theme || 'b';
+
+        dlg.classList.add('ui-body-' + theme);
+        dlg.classList.add('background-theme-' + theme);
         dlg.classList.add('smoothScrollY');
 
         return dlg;

dashboard-ui/components/subtitleeditor/subtitleeditor.js

@@ -326,7 +326,7 @@
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/subtitleeditor/subtitleeditor.template.html'

dashboard-ui/components/tvguide/tvguide.js

@@ -471,7 +471,7 @@
             });
         }
 
-        ApiClient.ajax({
+        HttpClient.send({
 
             type: 'GET',
             url: 'components/tvguide/tvguide.template.html'

dashboard-ui/css/site.css

@@ -894,7 +894,7 @@ paper-input + .fieldDescription {
     box-shadow: -3px 0 10px 0 #555;*/
 }
 
-.background-theme-a {
+.background-theme-a, paper-dialog.background-theme-a {
     background-color: #f7f7f7;
 }
 
@@ -1061,6 +1061,14 @@ paper-input + .fieldDescription {
     background: #fff3a5;
     padding: 1em;
     border-radius: 5px;
+    margin-top: 2em;
+}
+
+.directoryPicker paper-item {
+    min-height: 36px;
+    border-bottom: 1px solid #eee;
+    outline: none;
+    cursor: pointer;
 }
 
 .premiumBanner img {

dashboard-ui/scripts/advancedconfigurationpage.js

@@ -102,7 +102,9 @@
 
         $('#btnSelectDashboardSourcePath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -115,6 +117,7 @@
                     }
                 });
             });
+        });
 
         $('.advancedConfigurationForm').off('submit', onSubmit).on('submit', onSubmit);
     });

dashboard-ui/scripts/autoorganizetv.js

@@ -133,7 +133,9 @@
 
         $('#btnSelectWatchFolder', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -150,6 +152,7 @@
                     instruction: Globalize.translate('HeaderSelectWatchFolderHelp')
                 });
             });
+        });
 
         $('.libraryFileOrganizerForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/cinemamodeconfiguration.js

@@ -57,7 +57,9 @@
 
         $('#btnSelectCustomIntrosPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -72,6 +74,7 @@
                     header: Globalize.translate('HeaderSelectCustomIntrosPath')
                 });
             });
+        });
 
         $('.cinemaModeConfigurationForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/dashboardgeneral.js

@@ -83,7 +83,9 @@
 
         $('#btnSelectCachePath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -100,6 +102,7 @@
                     instruction: Globalize.translate('HeaderSelectServerCachePathHelp')
                 });
             });
+        });
 
         $('.dashboardGeneralForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/dashboardhosting.js

@@ -58,7 +58,9 @@
 
         $('#btnSelectCertPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -76,6 +78,7 @@
                     header: Globalize.translate('HeaderSelectCertificatePath')
                 });
             });
+        });
 
         $('.dashboardHostingForm').off('submit', onSubmit).on('submit', onSubmit);
     });

dashboard-ui/scripts/device.js

@@ -64,7 +64,9 @@
 
         $('#btnSelectUploadPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -79,6 +81,7 @@
                     header: Globalize.translate('HeaderSelectUploadPath')
                 });
             });
+        });
 
         $('.deviceForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/devicesupload.js

@@ -117,7 +117,9 @@
 
         $('#btnSelectUploadPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -132,6 +134,7 @@
                     header: Globalize.translate('HeaderSelectUploadPath')
                 });
             });
+        });
 
         $('.devicesUploadForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/directorybrowser.js

@@ -1,232 +0,0 @@
-(function (window, document, $) {
-
-    function refreshDirectoryBrowser(page, path, fileOptions) {
-
-        Dashboard.showLoadingMsg();
-
-        if (path) {
-            $('.networkHeadline').hide();
-        } else {
-            $('.networkHeadline').show();
-        }
-
-        var promise;
-
-        var parentPathPromise = null;
-
-        if (path === "Network") {
-            promise = ApiClient.getNetworkDevices();
-        }
-        else if (path) {
-            promise = ApiClient.getDirectoryContents(path, fileOptions);
-            parentPathPromise = ApiClient.getParentPath(path);
-        } else {
-            promise = ApiClient.getDrives();
-        }
-
-        if (!parentPathPromise) {
-            parentPathPromise = $.Deferred();
-            parentPathPromise.resolveWith(null, []);
-            parentPathPromise = parentPathPromise.promise();
-        }
-
-        $.when(promise, parentPathPromise).done(function (response1, response2) {
-
-            var folders = response1[0];
-            var parentPath = response2 && response2.length ? response2[0] || '' : '';
-
-            $('#txtDirectoryPickerPath', page).val(path || "");
-
-            var html = '';
-
-            if (path) {
-
-                html += '<li><a class="lnkPath lnkDirectory" data-path="' + parentPath + '" href="#">..</a></li>';
-            }
-
-            for (var i = 0, length = folders.length; i < length; i++) {
-
-                var folder = folders[i];
-
-                var cssClass = folder.Type == "File" ? "lnkPath lnkFile" : "lnkPath lnkDirectory";
-
-                html += '<li><a class="' + cssClass + '" data-type="' + folder.Type + '" data-path="' + folder.Path + '" href="#">' + folder.Name + '</a></li>';
-            }
-
-            if (!path) {
-                html += '<li><a class="lnkPath lnkDirectory" data-path="Network" href="#">' + Globalize.translate('ButtonNetwork') + '</a></li>';
-            }
-
-            $('#ulDirectoryPickerList', page).html(html).listview('refresh');
-
-            Dashboard.hideLoadingMsg();
-
-        }).fail(function () {
-
-            $('#txtDirectoryPickerPath', page).val("");
-            $('#ulDirectoryPickerList', page).html('').listview('refresh');
-
-            Dashboard.hideLoadingMsg();
-        });
-    }
-
-    var systemInfo;
-    function getSystemInfo() {
-
-        var deferred = DeferredBuilder.Deferred();
-
-        if (systemInfo) {
-            deferred.resolveWith(null, [systemInfo]);
-        } else {
-            ApiClient.getPublicSystemInfo().done(function (info) {
-                systemInfo = info;
-                deferred.resolveWith(null, [systemInfo]);
-            });
-        }
-
-        return deferred.promise();
-    }
-
-    function show(directoryBrowser, page, options, systemInfo) {
-
-        options = options || {};
-
-        var fileOptions = {
-            includeDirectories: true
-        };
-
-        if (options.includeDirectories != null) {
-            fileOptions.includeDirectories = options.includeDirectories;
-        }
-
-        if (options.includeFiles != null) {
-            fileOptions.includeFiles = options.includeFiles;
-        }
-
-        options.header = options.header || Globalize.translate('HeaderSelectPath');
-        options.instruction = options.instruction || "";
-
-        var html = '<div data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
-
-        html += '<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">';
-        html += '<h3>' + options.header + '</h3>';
-        html += '</div>';
-
-        html += '<div data-role="content" class="ui-content">';
-        html += '<form>';
-
-        var instruction = options.instruction ? options.instruction + '<br/><br/>' : '';
-
-        html += '<p class="directoryPickerHeadline">';
-        html += instruction;
-        html += Globalize.translate('MessageDirectoryPickerInstruction')
-            .replace('{0}', '<b>\\\\server</b>')
-            .replace('{1}', '<b>\\\\192.168.1.101</b>');
-
-        if (systemInfo.OperatingSystem.toLowerCase() == 'bsd') {
-
-            html += '<br/>';
-            html += '<br/>';
-            html += Globalize.translate('MessageDirectoryPickerBSDInstruction');
-            html += '<br/>';
-            html += '<a href="http://doc.freenas.org/9.3/freenas_jails.html#add-storage" target="_blank">' + Globalize.translate('ButtonMoreInformation') + '</a>';
-        }
-
-        html += '</p>';
-
-        html += '<div style="margin:20px 0 0;">';
-        html += '<label for="txtDirectoryPickerPath" class="lblDirectoryPickerPath">' + Globalize.translate('LabelCurrentPath') + '</label>';
-
-        html += '<div><input id="txtDirectoryPickerPath" name="txtDirectoryPickerPath" type="text" required="required" style="font-weight:bold;width:82%;display:inline-block;" />';
-        html += '<paper-icon-button icon="refresh" class="btnRefreshDirectories" title="' + Globalize.translate('ButtonRefresh') + '"></paper-icon-button>';
-        html += '</div>';
-
-        html += '</div>';
-
-        html += '<div style="height: 180px; overflow-y: auto;">';
-        html += '<ul id="ulDirectoryPickerList" data-role="listview" data-inset="true" data-auto-enhanced="false"></ul>';
-
-
-        html += '</div>';
-
-
-        html += '<p>';
-        html += '<button type="submit" data-theme="b" data-icon="check" data-mini="true">' + Globalize.translate('ButtonOk') + '</button>';
-        html += '<button type="button" data-icon="delete" onclick="$(this).parents(\'.popup\').popup(\'close\');" data-mini="true">' + Globalize.translate('ButtonCancel') + '</button>';
-        html += '</p>';
-        html += '</form>';
-        html += '</div>';
-        html += '</div>';
-
-        $(page).append(html);
-
-        var popup = $('#popupDirectoryPicker').popup().trigger('create').on("popupafteropen", function () {
-
-            $('#popupDirectoryPicker input:first', this).focus();
-
-        }).popup("open").on("popupafterclose", function () {
-
-            $('form', this).off("submit");
-
-            $(this).off("click").off("change").off("popupafterclose").remove();
-
-        }).on("click", ".lnkPath", function () {
-
-            var path = this.getAttribute('data-path');
-
-            if ($(this).hasClass('lnkFile')) {
-                $('#txtDirectoryPickerPath', page).val(path);
-            } else {
-                refreshDirectoryBrowser(page, path, fileOptions);
-            }
-
-
-        }).on("click", ".btnRefreshDirectories", function () {
-
-            var path = $('#txtDirectoryPickerPath', page).val();
-
-            refreshDirectoryBrowser(page, path, fileOptions);
-
-        }).on("change", "#txtDirectoryPickerPath", function () {
-
-            refreshDirectoryBrowser(page, this.value, fileOptions);
-        });
-
-        var txtCurrentPath = $('#txtDirectoryPickerPath', popup);
-
-        if (options.path) {
-            txtCurrentPath.val(options.path);
-        }
-
-        $('form', popup).on('submit', function () {
-
-            if (options.callback) {
-                options.callback($('#txtDirectoryPickerPath', this).val());
-            }
-
-            return false;
-        });
-
-        refreshDirectoryBrowser(page, txtCurrentPath.val());
-    }
-
-    window.DirectoryBrowser = function (page) {
-
-        var self = this;
-
-        self.show = function (options) {
-
-            getSystemInfo().done(function (systemInfo) {
-
-                require(['jqmpopup'], function() {
-                    show(self, page, options, systemInfo);
-                });
-            });
-        };
-
-        self.close = function () {
-            $('#popupDirectoryPicker', page).popup("close");
-        };
-    };
-
-})(window, document, jQuery);

dashboard-ui/scripts/encodingsettings.js

@@ -47,7 +47,9 @@
 
         $('#btnSelectTranscodingTempPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -64,6 +66,7 @@
                     instruction: Globalize.translate('HeaderSelectTranscodingPathHelp')
                 });
             });
+        });
 
         $('.encodingSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/livetvsettings.js

@@ -49,7 +49,9 @@
 
         $('#btnSelectRecordingPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -62,6 +64,7 @@
                     }
                 });
             });
+        });
 
     }).on('pageshow', "#liveTvSettingsPage", function () {
 

dashboard-ui/scripts/medialibrarypage.js

@@ -170,11 +170,17 @@
 
     selectDirectory: function (callback) {
 
-        var picker = new DirectoryBrowser($.mobile.activePage);
+        require(['directorybrowser'], function (directoryBrowser) {
 
-        picker.show({ callback: callback });
+            var picker = new directoryBrowser();
+
+            picker.show({
+
+                callback: callback
+            });
 
             MediaLibraryPage.directoryPicker = picker;
+        });
     },
 
     getTextValue: function (header, label, initialValue, showCollectionType, callback) {

dashboard-ui/scripts/metadataadvanced.js

@@ -73,12 +73,13 @@
 
         $('#btnSelectMetadataPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
                 
                 picker.show({
 
                     callback: function (path) {
-
                         if (path) {
                             $('#txtMetadataPath', page).val(path);
                         }
@@ -91,6 +92,8 @@
                 });
             });
 
+        });
+
         $('.advancedMetadataConfigurationForm').on('submit', onSubmit).on('submit', onSubmit);
 
 

dashboard-ui/scripts/site.js

@@ -1944,7 +1944,10 @@ var AppInfo = {};
         }
 
         var date = new Date();
-        if (date.getMonth() == 9 && date.getDate() == 31) {
+        var month = date.getMonth();
+        var day = date.getDate();
+
+        if (month == 9 && day >= 30) {
             require(['themes/halloween/theme']);
             return;
         }
@@ -2041,7 +2044,8 @@ var AppInfo = {};
 
         var paths = {
             velocity: "bower_components/velocity/velocity.min",
-            tvguide: 'components/tvguide/tvguide'
+            tvguide: 'components/tvguide/tvguide',
+            directorybrowser: 'components/directorybrowser/directorybrowser'
         };
 
         if (Dashboard.isRunningInCordova()) {
@@ -2214,7 +2218,7 @@ var AppInfo = {};
             define("fileupload", ["apiclient/fileupload"]);
         }
 
-        var deps =[];
+        var deps = [];
 
         if (!deviceId) {
             deps.push('cryptojs-sha1');

dashboard-ui/scripts/streamingsettings.js

@@ -29,7 +29,9 @@
 
         $('#btnSelectTranscodingTempPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
@@ -46,6 +48,7 @@
                     instruction: Globalize.translate('HeaderSelectTranscodingPathHelp')
                 });
             });
+        });
 
         $('.streamingSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/syncsettings.js

@@ -35,12 +35,13 @@
 
         $('#btnSelectSyncTempPath', page).on("click.selectDirectory", function () {
 
-            var picker = new DirectoryBrowser(page);
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
 
                 picker.show({
 
                     callback: function (path) {
-
                         if (path) {
                             $('#txtSyncTempPath', page).val(path);
                         }
@@ -48,6 +49,7 @@
                     }
                 });
             });
+        });
 
         $('.syncSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/usernew.js

@@ -106,6 +106,11 @@
             ApiClient.updateUserPolicy(user.Id, user.Policy).done(function () {
                 Dashboard.navigate("useredit.html?userId=" + user.Id);
             });
+
+        }).fail(function() {
+
+            Dashboard.showError(Globalize.translate('DefaultErrorMessage'));
+            Dashboard.hideLoadingMsg();
         });
     }
 

dashboard-ui/themes/halloween/style.css

@@ -2,10 +2,13 @@
     color: #FF9100;
 }
 
-.viewMenuBar, .barsMenuButton {
+.viewMenuBar {
     color: #FF9100 !important;
 }
 
+.barsMenuButton {
+    color: #FF9100 !important;
+}
 
 .libraryViewNav .ui-btn-active {
     border-bottom-color: #FF9100 !important;

dashboard-ui/thirdparty/paper-button-style.css

@@ -511,7 +511,7 @@ paper-dialog paper-radio-group paper-radio-button {
     display: block;
 }
 
-.fullscreen-editor-paper-dialog {
+.fullscreen-paper-dialog, .medium-paper-dialog {
     position: fixed !important;
     top: 0 !important;
     bottom: 0 !important;
@@ -519,14 +519,23 @@ paper-dialog paper-radio-group paper-radio-button {
     right: 0 !important;
     margin: 0 !important;
     border-radius: 0 !important;
-    background-color: #222 !important;
     max-height: none !important;
     max-width: none !important;
 }
 
 @media all and (min-width: 1280px) and (min-height: 720px) {
 
-    .fullscreen-editor-paper-dialog {
+    .medium-paper-dialog {
+        top: 10% !important;
+        bottom: 10% !important;
+        left: 10% !important;
+        right: 10% !important;
+    }
+}
+
+@media all and (min-width: 1280px) and (min-height: 720px) {
+
+    .fullscreen-paper-dialog {
         top: 5% !important;
         bottom: 5% !important;
         left: 5% !important;
@@ -534,12 +543,11 @@ paper-dialog paper-radio-group paper-radio-button {
     }
 }
 
-.fullscreen-editor-paper-dialog .dialogHeader {
+paper-dialog.popupEditor .dialogHeader {
     font-weight: inherit !important;
-    line-height: 1 !important;
+    line-height: 36px;
-    line-height: initial !important;
     padding: 0 1em;
-    margin-top: 1em;
+    margin-top: .7em;
 }
 
 .paperToggleContainer {

dashboard-ui/vulcanize-in.html

@@ -20,6 +20,7 @@
 <link rel="import" href="bower_components/paper-input/paper-input.html">
 <link rel="import" href="bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="bower_components/paper-item/paper-item.html">
 <link rel="import" href="bower_components/paper-item/paper-icon-item.html">
 <link rel="import" href="bower_components/paper-item/paper-item-body.html">
 <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">

dashboard-ui/vulcanize-out.html

@@ -13244,6 +13244,8 @@ is separate from validation, and `allowed-pattern` does not affect how the input
 
 
 
+
+
 </head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
   <style>
     :host {
@@ -19072,6 +19074,38 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
     </style>
   </template>
 </dom-module>
+<dom-module id="paper-item" assetpath="bower_components/paper-item/">
+  <template>
+    <style include="paper-item-shared-styles"></style>
+    <style>
+      :host {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+        @apply(--paper-font-subhead);
+
+        @apply(--paper-item);
+      }
+    </style>
+
+    <content></content>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-item',
+
+      hostAttributes: {
+        role: 'listitem',
+        tabindex: '0'
+      },
+
+      behaviors: [
+        Polymer.IronControlState,
+        Polymer.IronButtonState
+      ]
+    });
+  </script>
+</dom-module>
 <dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
   <template>
     <style include="paper-item-shared-styles"></style>