moved the directory picker to a separate file

This commit is contained in:
Luke Pulverenti 2013-07-06 13:20:53 -04:00
parent a6ae6b7c2d
commit 95a8a246b9
4 changed files with 181 additions and 151 deletions

View File

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

View File

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

View File

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

View File

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