moved the directory picker to a separate file

dashboard-ui/scripts/directorybrowser.js

@@ -0,0 +1,155 @@
+(function (window, document, $) {
+
+    function refreshDirectoryBrowser(page, path) {
+        
+        Dashboard.showLoadingMsg();
+
+        var promise;
+
+        if (path === "Network") {
+            promise = ApiClient.getNetworkDevices();
+        }
+        else if (path) {
+            promise = ApiClient.getDirectoryContents(path, { includeDirectories: true });
+        } else {
+            promise = ApiClient.getDrives();
+        }
+
+        promise.done(function (folders) {
+
+            $('#txtDirectoryPickerPath', page).val(path || "");
+
+            var html = '';
+
+            if (path) {
+
+                var parentPath = path;
+
+                if (parentPath.endsWith('\\')) {
+                    parentPath = parentPath.substring(0, parentPath.length - 1);
+                }
+
+                var lastIndex = parentPath.lastIndexOf('\\');
+                parentPath = lastIndex == -1 ? "" : parentPath.substring(0, lastIndex);
+
+                if (parentPath.endsWith(':')) {
+                    parentPath += "\\";
+                }
+
+                if (parentPath == '\\') {
+                    parentPath = "Network";
+                }
+
+                html += '<li><a class="lnkDirectory" data-path="' + parentPath + '" href="#">..</a></li>';
+            }
+
+            for (var i = 0, length = folders.length; i < length; i++) {
+
+                var folder = folders[i];
+
+                html += '<li><a class="lnkDirectory" data-path="' + folder.Path + '" href="#">' + folder.Name + '</a></li>';
+            }
+
+            if (!path) {
+                html += '<li><a class="lnkDirectory" data-path="Network" href="#">Network</a></li>';
+            }
+
+            $('#ulDirectoryPickerList', page).html(html).listview('refresh');
+
+            Dashboard.hideLoadingMsg();
+
+        }).fail(function () {
+
+            $('#txtDirectoryPickerPath', page).val("");
+            $('#ulDirectoryPickerList', page).html('').listview('refresh');
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+    
+    window.DirectoryBrowser = function(page) {
+
+        var self = this;
+
+        self.show = function (options) {
+
+            options = options || {};
+
+            options.header = options.header || "Select Media Path";
+            options.instruction = options.instruction || "Any path will do, but for optimal playback of bluray, dvd folders, and games, <b>network paths (UNC)</b> are recommended.";
+
+            var html = '<div data-role="popup" id="popupDirectoryPicker" class="ui-corner-all popup" style="min-width:65%;">';
+
+            html += '<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">';
+            html += '<h3>' + options.header + '</h3>';
+            html += '</div>';
+
+            html += '<div data-role="content" class="ui-corner-bottom ui-content">';
+            html += '<form>';
+            html += '<p class="directoryPickerHeadline">' + options.instruction + '</p>';
+
+            html += '<div data-role="fieldcontain" style="margin:0;">';
+            html += '<label for="txtDirectoryPickerPath" class="lblDirectoryPickerPath">Current Folder:</label>';
+            html += '<input id="txtDirectoryPickerPath" name="txtDirectoryPickerPath" type="text" required="required" style="font-weight:bold;" />';
+            html += '</div>';
+
+            html += '<div style="height: 320px; 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="ok">OK</button>';
+            html += '<button type="button" data-icon="delete" onclick="$(this).parents(\'.popup\').popup(\'close\');">Cancel</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", ".lnkDirectory", function () {
+
+                var path = this.getAttribute('data-path');
+
+                refreshDirectoryBrowser(page, path);
+                
+            }).on("change", "#txtDirectoryPickerPath", function () {
+
+                refreshDirectoryBrowser(page, this.value);
+            });
+
+            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());
+
+        };
+
+        self.close = function() {
+            $('#popupDirectoryPicker', page).popup("close");
+        };
+    };
+
+})(window, document, jQuery);

dashboard-ui/scripts/librarysettings.js

@@ -28,14 +28,16 @@
 
         $('#btnSelectIBNPath', page).on("click.selectDirectory", function () {
 
-            Dashboard.selectDirectory({
+            var picker = new DirectoryBrowser(page);
+
+            picker.show({
 
                 callback: function (path) {
 
                     if (path) {
                         $('#txtItemsByNamePath', page).val(path);
                     }
-                    $('#popupDirectoryPicker', page).popup("close");
+                    picker.close();
                 },
 
                 header: "Select Items By Name Path",

dashboard-ui/scripts/medialibrarypage.js

@@ -3,7 +3,7 @@
     onPageShow: function () {
 
         MediaLibraryPage.lastVirtualFolderName = "";
-        
+
         MediaLibraryPage.reloadLibrary(this);
     },
 
@@ -30,7 +30,7 @@
                     ApiClient.getVirtualFolders(userId).done(function (result) {
                         MediaLibraryPage.reloadVirtualFolders(page, result);
                     });
-                    
+
                     $(".editing_default", page).hide();
                     $('#divMediaLibrary', page).show();
                 } else {
@@ -68,7 +68,7 @@
         for (var i = 0, length = virtualFolders.length; i < length; i++) {
 
             var virtualFolder = virtualFolders[i];
-            
+
             var isCollapsed = MediaLibraryPage.lastVirtualFolderName != virtualFolder.Name;
 
             html += MediaLibraryPage.getVirtualFolderHtml(virtualFolder, isCollapsed, i);
@@ -123,7 +123,7 @@
 
             user.Configuration.UseCustomLibrary = !useDefaultLibrary;
 
-            ApiClient.updateUser(user).done(function() {
+            ApiClient.updateUser(user).done(function () {
                 MediaLibraryPage.reloadLibrary(page);
             });
 
@@ -138,7 +138,7 @@
             var userId = getParameterByName("userId");
 
             MediaLibraryPage.lastVirtualFolderName = name;
-            
+
             ApiClient.addVirtualFolder(name, userId).done(MediaLibraryPage.processOperationResult);
 
         });
@@ -164,7 +164,11 @@
 
     selectDirectory: function (callback) {
 
-        Dashboard.selectDirectory({callback: callback});
+        var picker = new DirectoryBrowser($.mobile.activePage);
+
+        picker.show({ callback: callback });
+
+        MediaLibraryPage.directoryPicker = picker;
     },
 
     getTextValue: function (header, label, initialValue, callback) {
@@ -177,7 +181,7 @@
         $('label', popup).html(label);
         $('#txtValue', popup).val(initialValue);
 
-        popup.on("popupafteropen",function() {
+        popup.on("popupafteropen", function () {
             $('#textEntryForm input:first', this).focus();
         }).on("popupafterclose", function () {
             $(this).off("popupafterclose").off("click");
@@ -200,7 +204,7 @@
         var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
 
         MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
-        
+
         MediaLibraryPage.getTextValue(virtualFolder.Name, "Rename " + virtualFolder.Name, virtualFolder.Name, function (newName) {
 
             if (virtualFolder.Name != newName) {
@@ -218,20 +222,20 @@
         var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
 
         var parent = $(button).parents('.collapsibleVirtualFolder');
-        
+
         var locations = $('.lnkMediaLocation', parent).map(function () {
             return this.innerHTML;
         }).get();
 
         var msg = "Are you sure you wish to remove " + virtualFolder.Name + "?";
-        
+
         if (locations.length) {
             msg += "<br/><br/>The following media locations will be removed from your library:<br/><br/>";
             msg += locations.join("<br/>");
         }
-        
+
         MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
-        
+
         Dashboard.confirm(msg, "Remove Media Folder", function (confirmResult) {
 
             if (confirmResult) {
@@ -272,7 +276,12 @@
         var page = $.mobile.activePage;
 
         $('#popupEnterText', page).popup("close");
-        $('#popupDirectoryPicker', page).popup("close");
+        
+        if (MediaLibraryPage.directoryPicker) {
+            MediaLibraryPage.directoryPicker.close();
+            MediaLibraryPage.directoryPicker = null;
+        }
+
         MediaLibraryPage.reloadLibrary(page);
     }
 };

dashboard-ui/scripts/site.js

@@ -478,142 +478,6 @@ var Dashboard = {
         });
     },
 
-    selectDirectory: function (options) {
-
-        options = options || {};
-
-        options.header = options.header || "Select Media Path";
-        options.instruction = options.instruction || "Any path will do, but for optimal playback of bluray, dvd folders, and games, <b>network paths (UNC)</b> are recommended.";
-
-        var html = '<div data-role="popup" id="popupDirectoryPicker" class="ui-corner-all popup" style="min-width:65%;">';
-
-        html += '<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">';
-        html += '<h3>' + options.header + '</h3>';
-        html += '</div>';
-
-        html += '<div data-role="content" class="ui-corner-bottom ui-content">';
-        html += '<form>';
-        html += '<p class="directoryPickerHeadline">' + options.instruction + '</p>';
-
-        html += '<div data-role="fieldcontain" style="margin:0;">';
-        html += '<label for="txtDirectoryPickerPath" class="lblDirectoryPickerPath">Current Folder:</label>';
-        html += '<input id="txtDirectoryPickerPath" name="txtDirectoryPickerPath" type="text" onchange="Dashboard.refreshDirectoryBrowser(this.value);" required="required" style="font-weight:bold;" />';
-        html += '</div>';
-
-        html += '<div style="height: 320px; 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="ok">OK</button>';
-        html += '<button type="button" data-icon="delete" onclick="$(this).parents(\'.popup\').popup(\'close\');">Cancel</button>';
-        html += '</p>';
-        html += '</form>';
-        html += '</div>';
-        html += '</div>';
-
-        $($.mobile.activePage).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("popupafterclose").remove();
-
-        }).on("click", ".lnkDirectory", function () {
-
-            var path = this.getAttribute('data-path');
-
-            Dashboard.refreshDirectoryBrowser(path);
-        });
-
-        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;
-        });
-
-        Dashboard.refreshDirectoryBrowser(txtCurrentPath.val());
-    },
-
-    refreshDirectoryBrowser: function (path) {
-        var page = $.mobile.activePage;
-
-        Dashboard.showLoadingMsg();
-
-        var promise;
-
-        if (path === "Network") {
-            promise = ApiClient.getNetworkDevices();
-        }
-        else if (path) {
-            promise = ApiClient.getDirectoryContents(path, { includeDirectories: true });
-        } else {
-            promise = ApiClient.getDrives();
-        }
-
-        promise.done(function (folders) {
-
-            $('#txtDirectoryPickerPath', page).val(path || "");
-
-            var html = '';
-
-            if (path) {
-
-                var parentPath = path;
-
-                if (parentPath.endsWith('\\')) {
-                    parentPath = parentPath.substring(0, parentPath.length - 1);
-                }
-
-                var lastIndex = parentPath.lastIndexOf('\\');
-                parentPath = lastIndex == -1 ? "" : parentPath.substring(0, lastIndex);
-
-                if (parentPath.endsWith(':')) {
-                    parentPath += "\\";
-                }
-
-                if (parentPath == '\\') {
-                    parentPath = "Network";
-                }
-
-                html += '<li><a class="lnkDirectory" data-path="' + parentPath + '" href="#">..</a></li>';
-            }
-
-            for (var i = 0, length = folders.length; i < length; i++) {
-
-                var folder = folders[i];
-
-                html += '<li><a class="lnkDirectory" data-path="' + folder.Path + '" href="#">' + folder.Name + '</a></li>';
-            }
-
-            if (!path) {
-                html += '<li><a class="lnkDirectory" data-path="Network" href="#">Network</a></li>';
-            }
-
-            $('#ulDirectoryPickerList', page).html(html).listview('refresh');
-
-            Dashboard.hideLoadingMsg();
-
-        }).fail(function () {
-
-            $('#txtDirectoryPickerPath', page).val("");
-            $('#ulDirectoryPickerList', page).html('').listview('refresh');
-
-            Dashboard.hideLoadingMsg();
-        });
-    },
-
     getPluginSecurityInfo: function () {
 
         if (!Dashboard.getPluginSecurityInfoPromise) {