From f355d797ff1dc5f92d09acbee48f3d6ff9fb4ecc Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Thu, 16 May 2013 00:23:05 +0200
Subject: [PATCH 01/11] Port OC.dialogs to use octemplate except for prompt()
 and form(). Also load octemplate per default.

---
 core/css/styles.css            |   3 +
 core/js/oc-dialogs.js          | 340 +++++++++++++++++++--------------
 core/templates/filepicker.html |  11 ++
 core/templates/message.html    |   3 +
 lib/base.php                   |   1 +
 5 files changed, 217 insertions(+), 141 deletions(-)
 create mode 100644 core/templates/filepicker.html
 create mode 100644 core/templates/message.html

diff --git a/core/css/styles.css b/core/css/styles.css
index 93f2cecbfe..ee00196d66 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -385,10 +385,13 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 #dirup {width:4%;}
 #dirtree {width:92%;}
 #filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
+#filelist img { margin: 2px 1em 0 4px; }
+#filelist .date { float:right;margin-right:1em; }
 .filepicker_element_selected { background-color:lightblue;}
 .filepicker_loader {height:170px; width:100%; background-color:#333; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3; visibility:visible; position:absolute; top:0; left:0; text-align:center; padding-top:150px;}
 .ui-dialog {position:fixed !important;}
 span.ui-icon {float: left; margin: 3px 7px 30px 0;}
+.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
 
 /* ---- CATEGORIES ---- */
 #categoryform .scrollarea { position:absolute; left:10px; top:10px; right:10px; bottom:50px; overflow:auto; border:1px solid #ddd; background:#f8f8f8; }
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 990c3f8bf3..c0c035bafd 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -1,7 +1,7 @@
 /**
  * ownCloud
  *
- * @author Bartek Przybylski
+ * @author Bartek Przybylski,Christopher Schäpers, Thomas Tanghus
  * @copyright 2012 Bartek Przybylski bartek@alefzero.eu
  *
  * This library is free software; you can redistribute it and/or
@@ -31,8 +31,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	alert:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-alert"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays info dialog
@@ -42,8 +41,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	info:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-info"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays confirmation dialog
@@ -53,8 +51,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	confirm:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-notice"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.YES_NO_BUTTONS, callback, modal);
+		OCdialogs.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
 	},
 	/**
 	* prompt for user input
@@ -66,7 +63,7 @@ var OCdialogs = {
 	prompt:function(text, title, default_value, callback, modal) {
 		var input = '<input type="text" id="oc-dialog-prompt-input" value="' + escapeHTML(default_value) + '" style="width:90%">';
 		var content = '<p><span class="ui-icon ui-icon-pencil"></span>' + escapeHTML(text) + ':<br/>' + input + '</p>';
-		OCdialogs.message(content, title, OCdialogs.PROMPT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(content, title, 'prompt', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* prompt user for input with custom form
@@ -130,6 +127,39 @@ var OCdialogs = {
 		});
 		OCdialogs.dialogs_counter++;
 	},
+	_getFilePickerTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$filePickerTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
+				self.$filePickerTemplate = $(tmpl);
+				self.$listTmpl = self.$filePickerTemplate.find('#filelist li:first-child').detach();
+				defer.resolve(self.$filePickerTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$filePickerTemplate);
+		}
+		return defer.promise();
+	},
+	_getMessageTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$messageTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'message.html'), function(tmpl) {
+				self.$messageTemplate = $(tmpl);
+				defer.resolve(self.$messageTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$messageTemplate);
+		}
+		return defer.promise();
+	},
 	/**
 	 * show a file picker to pick a file from
 	 * @param title dialog title
@@ -139,132 +169,146 @@ var OCdialogs = {
 	 * @param modal make the dialog modal
 	*/
 	filepicker:function(title, callback, multiselect, mimetype_filter, modal) {
-		var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_id = '#' + dialog_name;
-		var dialog_content = '<button id="dirup">↑</button><select id="dirtree"></select><div id="filelist"></div>';
-		var dialog_loader = '<div class="filepicker_loader"><img src="' + OC.filePath('gallery','img','loading.gif') + '"></div>';
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + dialog_content + dialog_loader + '</div>';
-		if (modal === undefined) { modal = false };
-		if (multiselect === undefined) { multiselect = false };
-		if (mimetype_filter === undefined) { mimetype_filter = '' };
+		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
+			var dialog_id = '#' + dialog_name;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialog_name,
+				title: title
+			}).data('path', '/');
 
-		$('body').append(dialog_div);
+			if (modal === undefined) { modal = false };
+			if (multiselect === undefined) { multiselect = false };
+			if (mimetype_filter === undefined) { mimetype_filter = '' };
 
-		$(dialog_id).data('path', '/');
+			$('body').append($dlg);
 
-		$(dialog_id + ' #dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
-		$(dialog_id + ' #dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
+			$dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
+			$dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
 
-		$(dialog_id).ready(function(){
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: mimetype_filter } ,function(request) {
-				OCdialogs.fillFilePicker(request, dialog_id);
-			});
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: "httpd/unix-directory" }, function(request) {
-				OCdialogs.fillTreeList(request, dialog_id);
-			});
-		}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
+			$dlg.find('#filelist').empty().addClass('loading');
+			$dlg.ready(function(){
+				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
+					{mimetype: mimetype_filter},
+					function(response) {
+					OCdialogs.fillFilePicker(response, dialog_id);
+				});
+				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
+					{mimetype: 'httpd/unix-directory'},
+					function(response) {
+					OCdialogs.fillTreeList(response, dialog_id);
+				});
+			}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
 
-		// build buttons
-		var functionToCall = function() {
-			if (callback !== undefined) {
-				var datapath;
-				if (multiselect === true) {
-					datapath = [];
-					$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
-						datapath.push( $(dialog_id).data('path') + $(element).text() );
-					});
-				} else {
-					var datapath = $(dialog_id).data('path');
-					datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+			// build buttons
+			var functionToCall = function() {
+				if (callback !== undefined) {
+					var datapath;
+					if (multiselect === true) {
+						datapath = [];
+						$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
+							datapath.push( $(dialog_id).data('path') + $(element).text() );
+						});
+					} else {
+						var datapath = $(dialog_id).data('path');
+						datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+					}
+					callback(datapath);
+					$(dialog_id).dialog('close');
 				}
-				callback(datapath);
-				$(dialog_id).dialog('close');
-			}
-		};
-		var buttonlist = [{
-			text: t('core', 'Choose'), 
-			click: functionToCall
-			},
-			{
-			text: t('core', 'Cancel'), 
-			click: function(){$(dialog_id).dialog('close'); }
-		}];
+			};
+			var buttonlist = [{
+				text: t('core', 'Choose'),
+				click: functionToCall
+				},
+				{
+				text: t('core', 'Cancel'),
+				click: function(){$(dialog_id).dialog('close'); }
+			}];
 
-		$(dialog_id).dialog({
-			width: (4/9)*$(document).width(),
-			height: 420,
-			modal: modal,
-			buttons: buttonlist
+			$(dialog_id).dialog({
+				width: (4/9)*$(document).width(),
+				height: 420,
+				modal: modal,
+				buttons: buttonlist
+			});
+			OCdialogs.dialogs_counter++;
+		})
+		.fail(function() {
+			alert(t('core', 'Error loading file picker template'));
 		});
-		OCdialogs.dialogs_counter++;
 	},
 	/**
 	 * Displays raw dialog
 	 * You better use a wrapper instead ...
 	*/
 	message:function(content, title, dialog_type, buttons, callback, modal) {
-		var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_id = '#' + dialog_name;
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + content + '</div>';
-		if (modal === undefined) { modal = false };
-		$('body').append(dialog_div);
-		var buttonlist = [];
-		switch (buttons) {
-			case OCdialogs.YES_NO_BUTTONS:
-				buttonlist = [{
-					text: t('core', 'Yes'),
-					click: function(){
-						if (callback !== undefined) { callback(true) };
-						$(dialog_id).dialog('close');
-					}
-				},
-				{
-					text: t('core', 'No'),
-					click: function(){
-						if (callback !== undefined) { callback(false) };
-						$(dialog_id).dialog('close');
-					}
-				}];
-			break;
-			case OCdialogs.OK_BUTTON:
-				var functionToCall;
-				switch(dialog_type) {
-					case OCdialogs.ALERT_DIALOG:
-						functionToCall = function() {
+		$.when(this._getMessageTemplate()).then(function($tmpl) {
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
+			var dialog_id = '#' + dialog_name;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialog_name,
+				title: title,
+				message: content,
+				type: dialog_type
+			});
+			if (modal === undefined) { modal = false };
+			$('body').append($dlg);
+			var buttonlist = [];
+			switch (buttons) {
+				case OCdialogs.YES_NO_BUTTONS:
+					buttonlist = [{
+						text: t('core', 'Yes'),
+						click: function(){
+							if (callback !== undefined) { callback(true) };
 							$(dialog_id).dialog('close');
-							if(callback !== undefined) { callback() };
-						};
-					break;
-					case OCdialogs.PROMPT_DIALOG:
-						buttonlist[1] = {
-							text: t('core', 'Cancel'),
-							click: function() { $(dialog_id).dialog('close'); }
-						};
-						functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
-					break;
-				}
-				buttonlist[0] = {
-					text: t('core', 'Ok'),
-					click: functionToCall
-				};
-			break;
-		};
+						}
+					},
+					{
+						text: t('core', 'No'),
+						click: function(){
+							if (callback !== undefined) { callback(false) };
+							$(dialog_id).dialog('close');
+						}
+					}];
+				break;
+				case OCdialogs.OK_BUTTON:
+					var functionToCall;
+					switch(dialog_type) {
+						case 'prompt':
+							buttonlist[1] = {
+								text: t('core', 'Cancel'),
+								click: function() { $(dialog_id).dialog('close'); }
+							};
+							functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
+						break;
+						default:
+							functionToCall = function() {
+								$(dialog_id).dialog('close');
+								if(callback !== undefined) { callback() };
+							};
+						break;
+					}
+					buttonlist[0] = {
+						text: t('core', 'Ok'),
+						click: functionToCall
+					};
+				break;
+			};
 
-		$(dialog_id).dialog({
-			width: (4/9) * $(document).width(),
-			height: 180,
-			modal: modal,
-			buttons: buttonlist
+			$(dialog_id).dialog({
+				modal: modal,
+				buttons: buttonlist
+			});
+			OCdialogs.dialogs_counter++;
+		})
+		.fail(function() {
+			alert(t('core', 'Error loading file picker template'));
 		});
-		OCdialogs.dialogs_counter++;
 	},
 	// dialog button types
 	YES_NO_BUTTONS:		70,
 	OK_BUTTONS:		71,
-	// dialogs types
-	ALERT_DIALOG:	80,
-	INFO_DIALOG:	81,
-	FORM_DIALOG:	82,
 	// used to name each dialog
 	dialogs_counter: 0,
 
@@ -278,7 +322,7 @@ var OCdialogs = {
 
 	prompt_ok_handler: function(callback, dialog_id) {
 		$(dialog_id).dialog('close');
-		if (callback !== undefined) { callback($(dialog_id + " input#oc-dialog-prompt-input").val()) };
+		if (callback !== undefined) { callback($(dialog_id + ' input#oc-dialog-prompt-input').val()) };
 	},
 
 	form_ok_handler: function(callback, dialog_id) {
@@ -297,8 +341,7 @@ var OCdialogs = {
 	 * fills the filepicker with files
 	*/
 	fillFilePicker:function(request, dialog_content_id) {
-		var template_content = '<img src="*MIMETYPEICON*" style="margin: 2px 1em 0 4px;"><span class="filename">*NAME*</span><div style="float:right;margin-right:1em;">*LASTMODDATE*</div>';
-		var template = '<div data-entryname="*ENTRYNAME*" data-dcid="' + escapeHTML(dialog_content_id) + '" data="*ENTRYTYPE*">*CONTENT*</div>';
+		var $filelist = $(dialog_content_id + ' #filelist').empty();
 		var files = '';
 		var dirs = [];
 		var others = [];
@@ -309,14 +352,24 @@ var OCdialogs = {
 				others.push(file);
 			}
 		});
-		var sorted = dirs.concat(others);
-		for (var i = 0; i < sorted.length; i++) {
-			files_content = template_content.replace('*LASTMODDATE*', OC.mtime2date(sorted[i].mtime)).replace('*NAME*', escapeHTML(sorted[i].name)).replace('*MIMETYPEICON*', sorted[i].mimetype_icon);
-			files += template.replace('*ENTRYNAME*', escapeHTML(sorted[i].name)).replace('*ENTRYTYPE*', escapeHTML(sorted[i].type)).replace('*CONTENT*', files_content);
-		}
 
-		$(dialog_content_id + ' #filelist').html(files);
-		$('#filelist div').click(function() {
+		var sorted = dirs.concat(others);
+
+		var self = this;
+		$.each(sorted, function(idx, entry) {
+			$li = self.$listTmpl.octemplate({
+				type: entry.type,
+				dcid: dialog_content_id,
+				imgsrc: entry.mimetype_icon,
+				filename: entry.name,
+				date: OC.mtime2date(entry.mtime)
+			});
+			$filelist.append($li);
+		});
+
+		$filelist.removeClass('loading');
+
+		$filelist.on('click', 'li', function() {
 			OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id);
 		});
 
@@ -326,24 +379,29 @@ var OCdialogs = {
 	 * fills the tree list with directories
 	*/
 	fillTreeList: function(request, dialog_id) {
-		var template = '<option value="*COUNT*">*NAME*</option>';
-		var paths = '<option value="0">' + escapeHTML($(dialog_id).data('path')) + '</option>';
+		var $dirtree = $(dialog_id + ' #dirtree').empty();
+		var $template = $('<option value="{count}">{name}</option>');
+		$dirtree.append($template.octemplate({
+			count: 0,
+			name: $(dialog_id).data('path')
+		}));
 		$.each(request.data, function(index, file) {
-			paths += template.replace('*COUNT*', index).replace('*NAME*', escapeHTML(file.name));
+			$dirtree.append($template.octemplate({
+				count: index,
+				name: file.name
+			}));
 		});
-
-		$(dialog_id + ' #dirtree').html(paths);
 	},
 	/**
 	 * handle selection made in the tree list
 	*/
 	handleTreeListSelect:function(event) {
-		if ($("option:selected", this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
-			$(event.data.dcid).data('path', $("option:selected", this).html());
+		if ($('option:selected', this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
+			$(event.data.dcid).data('path', $('option:selected', this).html());
 		} else {
-			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $("option:selected", this).html() + '/');
+			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $('option:selected', this).html() + '/');
 		}
-		$(event.data.dcid + ' .filepicker_loader').css('visibility', 'visible');
+		$(event.data.dcid).find('#filelist').addClass('loading');
 		$.getJSON(
 			OC.filePath('files', 'ajax', 'rawlist.php'),
 			{
@@ -356,7 +414,7 @@ var OCdialogs = {
 			OC.filePath('files', 'ajax', 'rawlist.php'),
 			{
 				dir: $(event.data.dcid).data('path'),
-				mimetype: "httpd/unix-directory"
+				mimetype: 'httpd/unix-directory'
 			},
 			function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
 		);
@@ -366,13 +424,13 @@ var OCdialogs = {
 	*/
 	filepickerDirUp:function(event) {
 		var old_path = $(event.data.dcid).data('path');
-		if ( old_path !== "/") {
+		if ( old_path !== '/') {
 			var splitted_path = old_path.split("/");
 			var new_path = ""
 			for (var i = 0; i < splitted_path.length - 2; i++) {
-				new_path += splitted_path[i] + "/"
+				new_path += splitted_path[i] + '/'
 			}
-			$(event.data.dcid).data('path', new_path);
+			$(event.data.dcid).data('path', new_path).find('#filelist').empty().addClass('loading');;
 			$.getJSON(
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
@@ -385,7 +443,7 @@ var OCdialogs = {
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
 					dir: $(event.data.dcid).data('path'),
-					mimetype: "httpd/unix-directory"
+					mimetype: 'httpd/unix-directory'
 				},
 				function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
 			);
@@ -395,16 +453,16 @@ var OCdialogs = {
 	 * handle clicks made in the filepicker
 	*/
 	handlePickerClick:function(element, name, dialog_content_id) {
-		if ( $(element).attr('data') === 'file' ){
+		if ( $(element).data('type') === 'file' ){
 			if ( $(dialog_content_id).data('multiselect') !== true) {
 				$(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected');
 			}
 			$(element).toggleClass('filepicker_element_selected');
 			return;
-		} else if ( $(element).attr('data') === 'dir' ) {
+		} else if ( $(element).data('type') === 'dir' ) {
 			var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' );
 			$(dialog_content_id).data('path', datapath);
-			$(dialog_content_id + ' .filepicker_loader').css('visibility', 'visible');
+			$(dialog_content_id).find('#filelist').empty().addClass('loading');
 			$.getJSON(
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
@@ -417,7 +475,7 @@ var OCdialogs = {
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
 					dir: datapath,
-					mimetype: "httpd/unix-directory"
+					mimetype: 'httpd/unix-directory'
 				},
 				function(request) { OCdialogs.fillTreeList(request, dialog_content_id) }
 			);
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
new file mode 100644
index 0000000000..f29de390ef
--- /dev/null
+++ b/core/templates/filepicker.html
@@ -0,0 +1,11 @@
+<div id="{dialog_name}" title="{title}">
+	<button id="dirup">↑</button>
+	<select id="dirtree"></select>
+	<ul id="filelist">
+		<li data-entryname="{filename}" data-type="{type}" data-dcid="{dcid}">
+			<img src="{imgsrc}" />
+			<span class="filename">{filename}</span>
+			<span class="date">{date}</span>
+		</li>
+	</ul>
+</div>
diff --git a/core/templates/message.html b/core/templates/message.html
new file mode 100644
index 0000000000..59048100f3
--- /dev/null
+++ b/core/templates/message.html
@@ -0,0 +1,3 @@
+<div id="{dialog_name}" title="{title}">
+	<p><span class="ui-icon ui-icon-{type}"></span>{message}</p>
+</div>
diff --git a/lib/base.php b/lib/base.php
index 667202d3ae..2e2cee97eb 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -260,6 +260,7 @@ class OC {
 		OC_Util::addScript("jquery-tipsy");
 		OC_Util::addScript("compatibility");
 		OC_Util::addScript("oc-dialogs");
+		OC_Util::addScript("octemplate");
 		OC_Util::addScript("js");
 		OC_Util::addScript("eventsource");
 		OC_Util::addScript("config");

From c8bbf90feb5a874b9988198747b79c4f43708740 Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Thu, 16 May 2013 00:23:05 +0200
Subject: [PATCH 02/11] Port OC.dialogs to use octemplate except for prompt()
 and form(). Also load octemplate per default.

---
 core/css/styles.css            |   3 +
 core/js/oc-dialogs.js          | 340 +++++++++++++++++++--------------
 core/templates/filepicker.html |  11 ++
 core/templates/message.html    |   3 +
 lib/base.php                   |   1 +
 5 files changed, 217 insertions(+), 141 deletions(-)
 create mode 100644 core/templates/filepicker.html
 create mode 100644 core/templates/message.html

diff --git a/core/css/styles.css b/core/css/styles.css
index 93f2cecbfe..ee00196d66 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -385,10 +385,13 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 #dirup {width:4%;}
 #dirtree {width:92%;}
 #filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
+#filelist img { margin: 2px 1em 0 4px; }
+#filelist .date { float:right;margin-right:1em; }
 .filepicker_element_selected { background-color:lightblue;}
 .filepicker_loader {height:170px; width:100%; background-color:#333; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3; visibility:visible; position:absolute; top:0; left:0; text-align:center; padding-top:150px;}
 .ui-dialog {position:fixed !important;}
 span.ui-icon {float: left; margin: 3px 7px 30px 0;}
+.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
 
 /* ---- CATEGORIES ---- */
 #categoryform .scrollarea { position:absolute; left:10px; top:10px; right:10px; bottom:50px; overflow:auto; border:1px solid #ddd; background:#f8f8f8; }
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 990c3f8bf3..c0c035bafd 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -1,7 +1,7 @@
 /**
  * ownCloud
  *
- * @author Bartek Przybylski
+ * @author Bartek Przybylski,Christopher Schäpers, Thomas Tanghus
  * @copyright 2012 Bartek Przybylski bartek@alefzero.eu
  *
  * This library is free software; you can redistribute it and/or
@@ -31,8 +31,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	alert:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-alert"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays info dialog
@@ -42,8 +41,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	info:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-info"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays confirmation dialog
@@ -53,8 +51,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	confirm:function(text, title, callback, modal) {
-		var content = '<p><span class="ui-icon ui-icon-notice"></span>' + escapeHTML(text) + '</p>';
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.YES_NO_BUTTONS, callback, modal);
+		OCdialogs.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
 	},
 	/**
 	* prompt for user input
@@ -66,7 +63,7 @@ var OCdialogs = {
 	prompt:function(text, title, default_value, callback, modal) {
 		var input = '<input type="text" id="oc-dialog-prompt-input" value="' + escapeHTML(default_value) + '" style="width:90%">';
 		var content = '<p><span class="ui-icon ui-icon-pencil"></span>' + escapeHTML(text) + ':<br/>' + input + '</p>';
-		OCdialogs.message(content, title, OCdialogs.PROMPT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
+		OCdialogs.message(content, title, 'prompt', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* prompt user for input with custom form
@@ -130,6 +127,39 @@ var OCdialogs = {
 		});
 		OCdialogs.dialogs_counter++;
 	},
+	_getFilePickerTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$filePickerTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
+				self.$filePickerTemplate = $(tmpl);
+				self.$listTmpl = self.$filePickerTemplate.find('#filelist li:first-child').detach();
+				defer.resolve(self.$filePickerTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$filePickerTemplate);
+		}
+		return defer.promise();
+	},
+	_getMessageTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$messageTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'message.html'), function(tmpl) {
+				self.$messageTemplate = $(tmpl);
+				defer.resolve(self.$messageTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$messageTemplate);
+		}
+		return defer.promise();
+	},
 	/**
 	 * show a file picker to pick a file from
 	 * @param title dialog title
@@ -139,132 +169,146 @@ var OCdialogs = {
 	 * @param modal make the dialog modal
 	*/
 	filepicker:function(title, callback, multiselect, mimetype_filter, modal) {
-		var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_id = '#' + dialog_name;
-		var dialog_content = '<button id="dirup">↑</button><select id="dirtree"></select><div id="filelist"></div>';
-		var dialog_loader = '<div class="filepicker_loader"><img src="' + OC.filePath('gallery','img','loading.gif') + '"></div>';
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + dialog_content + dialog_loader + '</div>';
-		if (modal === undefined) { modal = false };
-		if (multiselect === undefined) { multiselect = false };
-		if (mimetype_filter === undefined) { mimetype_filter = '' };
+		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
+			var dialog_id = '#' + dialog_name;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialog_name,
+				title: title
+			}).data('path', '/');
 
-		$('body').append(dialog_div);
+			if (modal === undefined) { modal = false };
+			if (multiselect === undefined) { multiselect = false };
+			if (mimetype_filter === undefined) { mimetype_filter = '' };
 
-		$(dialog_id).data('path', '/');
+			$('body').append($dlg);
 
-		$(dialog_id + ' #dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
-		$(dialog_id + ' #dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
+			$dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
+			$dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
 
-		$(dialog_id).ready(function(){
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: mimetype_filter } ,function(request) {
-				OCdialogs.fillFilePicker(request, dialog_id);
-			});
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: "httpd/unix-directory" }, function(request) {
-				OCdialogs.fillTreeList(request, dialog_id);
-			});
-		}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
+			$dlg.find('#filelist').empty().addClass('loading');
+			$dlg.ready(function(){
+				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
+					{mimetype: mimetype_filter},
+					function(response) {
+					OCdialogs.fillFilePicker(response, dialog_id);
+				});
+				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
+					{mimetype: 'httpd/unix-directory'},
+					function(response) {
+					OCdialogs.fillTreeList(response, dialog_id);
+				});
+			}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
 
-		// build buttons
-		var functionToCall = function() {
-			if (callback !== undefined) {
-				var datapath;
-				if (multiselect === true) {
-					datapath = [];
-					$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
-						datapath.push( $(dialog_id).data('path') + $(element).text() );
-					});
-				} else {
-					var datapath = $(dialog_id).data('path');
-					datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+			// build buttons
+			var functionToCall = function() {
+				if (callback !== undefined) {
+					var datapath;
+					if (multiselect === true) {
+						datapath = [];
+						$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
+							datapath.push( $(dialog_id).data('path') + $(element).text() );
+						});
+					} else {
+						var datapath = $(dialog_id).data('path');
+						datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+					}
+					callback(datapath);
+					$(dialog_id).dialog('close');
 				}
-				callback(datapath);
-				$(dialog_id).dialog('close');
-			}
-		};
-		var buttonlist = [{
-			text: t('core', 'Choose'), 
-			click: functionToCall
-			},
-			{
-			text: t('core', 'Cancel'), 
-			click: function(){$(dialog_id).dialog('close'); }
-		}];
+			};
+			var buttonlist = [{
+				text: t('core', 'Choose'),
+				click: functionToCall
+				},
+				{
+				text: t('core', 'Cancel'),
+				click: function(){$(dialog_id).dialog('close'); }
+			}];
 
-		$(dialog_id).dialog({
-			width: (4/9)*$(document).width(),
-			height: 420,
-			modal: modal,
-			buttons: buttonlist
+			$(dialog_id).dialog({
+				width: (4/9)*$(document).width(),
+				height: 420,
+				modal: modal,
+				buttons: buttonlist
+			});
+			OCdialogs.dialogs_counter++;
+		})
+		.fail(function() {
+			alert(t('core', 'Error loading file picker template'));
 		});
-		OCdialogs.dialogs_counter++;
 	},
 	/**
 	 * Displays raw dialog
 	 * You better use a wrapper instead ...
 	*/
 	message:function(content, title, dialog_type, buttons, callback, modal) {
-		var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_id = '#' + dialog_name;
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + content + '</div>';
-		if (modal === undefined) { modal = false };
-		$('body').append(dialog_div);
-		var buttonlist = [];
-		switch (buttons) {
-			case OCdialogs.YES_NO_BUTTONS:
-				buttonlist = [{
-					text: t('core', 'Yes'),
-					click: function(){
-						if (callback !== undefined) { callback(true) };
-						$(dialog_id).dialog('close');
-					}
-				},
-				{
-					text: t('core', 'No'),
-					click: function(){
-						if (callback !== undefined) { callback(false) };
-						$(dialog_id).dialog('close');
-					}
-				}];
-			break;
-			case OCdialogs.OK_BUTTON:
-				var functionToCall;
-				switch(dialog_type) {
-					case OCdialogs.ALERT_DIALOG:
-						functionToCall = function() {
+		$.when(this._getMessageTemplate()).then(function($tmpl) {
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
+			var dialog_id = '#' + dialog_name;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialog_name,
+				title: title,
+				message: content,
+				type: dialog_type
+			});
+			if (modal === undefined) { modal = false };
+			$('body').append($dlg);
+			var buttonlist = [];
+			switch (buttons) {
+				case OCdialogs.YES_NO_BUTTONS:
+					buttonlist = [{
+						text: t('core', 'Yes'),
+						click: function(){
+							if (callback !== undefined) { callback(true) };
 							$(dialog_id).dialog('close');
-							if(callback !== undefined) { callback() };
-						};
-					break;
-					case OCdialogs.PROMPT_DIALOG:
-						buttonlist[1] = {
-							text: t('core', 'Cancel'),
-							click: function() { $(dialog_id).dialog('close'); }
-						};
-						functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
-					break;
-				}
-				buttonlist[0] = {
-					text: t('core', 'Ok'),
-					click: functionToCall
-				};
-			break;
-		};
+						}
+					},
+					{
+						text: t('core', 'No'),
+						click: function(){
+							if (callback !== undefined) { callback(false) };
+							$(dialog_id).dialog('close');
+						}
+					}];
+				break;
+				case OCdialogs.OK_BUTTON:
+					var functionToCall;
+					switch(dialog_type) {
+						case 'prompt':
+							buttonlist[1] = {
+								text: t('core', 'Cancel'),
+								click: function() { $(dialog_id).dialog('close'); }
+							};
+							functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
+						break;
+						default:
+							functionToCall = function() {
+								$(dialog_id).dialog('close');
+								if(callback !== undefined) { callback() };
+							};
+						break;
+					}
+					buttonlist[0] = {
+						text: t('core', 'Ok'),
+						click: functionToCall
+					};
+				break;
+			};
 
-		$(dialog_id).dialog({
-			width: (4/9) * $(document).width(),
-			height: 180,
-			modal: modal,
-			buttons: buttonlist
+			$(dialog_id).dialog({
+				modal: modal,
+				buttons: buttonlist
+			});
+			OCdialogs.dialogs_counter++;
+		})
+		.fail(function() {
+			alert(t('core', 'Error loading file picker template'));
 		});
-		OCdialogs.dialogs_counter++;
 	},
 	// dialog button types
 	YES_NO_BUTTONS:		70,
 	OK_BUTTONS:		71,
-	// dialogs types
-	ALERT_DIALOG:	80,
-	INFO_DIALOG:	81,
-	FORM_DIALOG:	82,
 	// used to name each dialog
 	dialogs_counter: 0,
 
@@ -278,7 +322,7 @@ var OCdialogs = {
 
 	prompt_ok_handler: function(callback, dialog_id) {
 		$(dialog_id).dialog('close');
-		if (callback !== undefined) { callback($(dialog_id + " input#oc-dialog-prompt-input").val()) };
+		if (callback !== undefined) { callback($(dialog_id + ' input#oc-dialog-prompt-input').val()) };
 	},
 
 	form_ok_handler: function(callback, dialog_id) {
@@ -297,8 +341,7 @@ var OCdialogs = {
 	 * fills the filepicker with files
 	*/
 	fillFilePicker:function(request, dialog_content_id) {
-		var template_content = '<img src="*MIMETYPEICON*" style="margin: 2px 1em 0 4px;"><span class="filename">*NAME*</span><div style="float:right;margin-right:1em;">*LASTMODDATE*</div>';
-		var template = '<div data-entryname="*ENTRYNAME*" data-dcid="' + escapeHTML(dialog_content_id) + '" data="*ENTRYTYPE*">*CONTENT*</div>';
+		var $filelist = $(dialog_content_id + ' #filelist').empty();
 		var files = '';
 		var dirs = [];
 		var others = [];
@@ -309,14 +352,24 @@ var OCdialogs = {
 				others.push(file);
 			}
 		});
-		var sorted = dirs.concat(others);
-		for (var i = 0; i < sorted.length; i++) {
-			files_content = template_content.replace('*LASTMODDATE*', OC.mtime2date(sorted[i].mtime)).replace('*NAME*', escapeHTML(sorted[i].name)).replace('*MIMETYPEICON*', sorted[i].mimetype_icon);
-			files += template.replace('*ENTRYNAME*', escapeHTML(sorted[i].name)).replace('*ENTRYTYPE*', escapeHTML(sorted[i].type)).replace('*CONTENT*', files_content);
-		}
 
-		$(dialog_content_id + ' #filelist').html(files);
-		$('#filelist div').click(function() {
+		var sorted = dirs.concat(others);
+
+		var self = this;
+		$.each(sorted, function(idx, entry) {
+			$li = self.$listTmpl.octemplate({
+				type: entry.type,
+				dcid: dialog_content_id,
+				imgsrc: entry.mimetype_icon,
+				filename: entry.name,
+				date: OC.mtime2date(entry.mtime)
+			});
+			$filelist.append($li);
+		});
+
+		$filelist.removeClass('loading');
+
+		$filelist.on('click', 'li', function() {
 			OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id);
 		});
 
@@ -326,24 +379,29 @@ var OCdialogs = {
 	 * fills the tree list with directories
 	*/
 	fillTreeList: function(request, dialog_id) {
-		var template = '<option value="*COUNT*">*NAME*</option>';
-		var paths = '<option value="0">' + escapeHTML($(dialog_id).data('path')) + '</option>';
+		var $dirtree = $(dialog_id + ' #dirtree').empty();
+		var $template = $('<option value="{count}">{name}</option>');
+		$dirtree.append($template.octemplate({
+			count: 0,
+			name: $(dialog_id).data('path')
+		}));
 		$.each(request.data, function(index, file) {
-			paths += template.replace('*COUNT*', index).replace('*NAME*', escapeHTML(file.name));
+			$dirtree.append($template.octemplate({
+				count: index,
+				name: file.name
+			}));
 		});
-
-		$(dialog_id + ' #dirtree').html(paths);
 	},
 	/**
 	 * handle selection made in the tree list
 	*/
 	handleTreeListSelect:function(event) {
-		if ($("option:selected", this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
-			$(event.data.dcid).data('path', $("option:selected", this).html());
+		if ($('option:selected', this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
+			$(event.data.dcid).data('path', $('option:selected', this).html());
 		} else {
-			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $("option:selected", this).html() + '/');
+			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $('option:selected', this).html() + '/');
 		}
-		$(event.data.dcid + ' .filepicker_loader').css('visibility', 'visible');
+		$(event.data.dcid).find('#filelist').addClass('loading');
 		$.getJSON(
 			OC.filePath('files', 'ajax', 'rawlist.php'),
 			{
@@ -356,7 +414,7 @@ var OCdialogs = {
 			OC.filePath('files', 'ajax', 'rawlist.php'),
 			{
 				dir: $(event.data.dcid).data('path'),
-				mimetype: "httpd/unix-directory"
+				mimetype: 'httpd/unix-directory'
 			},
 			function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
 		);
@@ -366,13 +424,13 @@ var OCdialogs = {
 	*/
 	filepickerDirUp:function(event) {
 		var old_path = $(event.data.dcid).data('path');
-		if ( old_path !== "/") {
+		if ( old_path !== '/') {
 			var splitted_path = old_path.split("/");
 			var new_path = ""
 			for (var i = 0; i < splitted_path.length - 2; i++) {
-				new_path += splitted_path[i] + "/"
+				new_path += splitted_path[i] + '/'
 			}
-			$(event.data.dcid).data('path', new_path);
+			$(event.data.dcid).data('path', new_path).find('#filelist').empty().addClass('loading');;
 			$.getJSON(
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
@@ -385,7 +443,7 @@ var OCdialogs = {
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
 					dir: $(event.data.dcid).data('path'),
-					mimetype: "httpd/unix-directory"
+					mimetype: 'httpd/unix-directory'
 				},
 				function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
 			);
@@ -395,16 +453,16 @@ var OCdialogs = {
 	 * handle clicks made in the filepicker
 	*/
 	handlePickerClick:function(element, name, dialog_content_id) {
-		if ( $(element).attr('data') === 'file' ){
+		if ( $(element).data('type') === 'file' ){
 			if ( $(dialog_content_id).data('multiselect') !== true) {
 				$(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected');
 			}
 			$(element).toggleClass('filepicker_element_selected');
 			return;
-		} else if ( $(element).attr('data') === 'dir' ) {
+		} else if ( $(element).data('type') === 'dir' ) {
 			var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' );
 			$(dialog_content_id).data('path', datapath);
-			$(dialog_content_id + ' .filepicker_loader').css('visibility', 'visible');
+			$(dialog_content_id).find('#filelist').empty().addClass('loading');
 			$.getJSON(
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
@@ -417,7 +475,7 @@ var OCdialogs = {
 				OC.filePath('files', 'ajax', 'rawlist.php'),
 				{
 					dir: datapath,
-					mimetype: "httpd/unix-directory"
+					mimetype: 'httpd/unix-directory'
 				},
 				function(request) { OCdialogs.fillTreeList(request, dialog_content_id) }
 			);
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
new file mode 100644
index 0000000000..f29de390ef
--- /dev/null
+++ b/core/templates/filepicker.html
@@ -0,0 +1,11 @@
+<div id="{dialog_name}" title="{title}">
+	<button id="dirup">↑</button>
+	<select id="dirtree"></select>
+	<ul id="filelist">
+		<li data-entryname="{filename}" data-type="{type}" data-dcid="{dcid}">
+			<img src="{imgsrc}" />
+			<span class="filename">{filename}</span>
+			<span class="date">{date}</span>
+		</li>
+	</ul>
+</div>
diff --git a/core/templates/message.html b/core/templates/message.html
new file mode 100644
index 0000000000..59048100f3
--- /dev/null
+++ b/core/templates/message.html
@@ -0,0 +1,3 @@
+<div id="{dialog_name}" title="{title}">
+	<p><span class="ui-icon ui-icon-{type}"></span>{message}</p>
+</div>
diff --git a/lib/base.php b/lib/base.php
index 667202d3ae..2e2cee97eb 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -260,6 +260,7 @@ class OC {
 		OC_Util::addScript("jquery-tipsy");
 		OC_Util::addScript("compatibility");
 		OC_Util::addScript("oc-dialogs");
+		OC_Util::addScript("octemplate");
 		OC_Util::addScript("js");
 		OC_Util::addScript("eventsource");
 		OC_Util::addScript("config");

From 913941d894579ed332169a7573654fd6b0ca9eca Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Thu, 16 May 2013 18:19:28 +0200
Subject: [PATCH 03/11] Line length etc.

---
 core/js/oc-dialogs.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index c0c035bafd..8989738287 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -1,7 +1,7 @@
 /**
  * ownCloud
  *
- * @author Bartek Przybylski,Christopher Schäpers, Thomas Tanghus
+ * @author Bartek Przybylski, Christopher Schäpers, Thomas Tanghus
  * @copyright 2012 Bartek Przybylski bartek@alefzero.eu
  *
  * This library is free software; you can redistribute it and/or
@@ -396,7 +396,8 @@ var OCdialogs = {
 	 * handle selection made in the tree list
 	*/
 	handleTreeListSelect:function(event) {
-		if ($('option:selected', this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
+		// if there's a slash in the selected path, don't append it
+		if ($('option:selected', this).html().indexOf('/') !== -1) {
 			$(event.data.dcid).data('path', $('option:selected', this).html());
 		} else {
 			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $('option:selected', this).html() + '/');

From 152e275c8a780c220c5022ef059dd7b12adc7cf1 Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 04:54:08 +0200
Subject: [PATCH 04/11] Various cleanups in OC.dialogs

---
 apps/files/ajax/rawlist.php    |   8 ++
 core/css/styles.css            |  15 ++-
 core/js/oc-dialogs.js          | 239 ++++++++++++++-------------------
 core/templates/filepicker.html |   8 +-
 4 files changed, 120 insertions(+), 150 deletions(-)

diff --git a/apps/files/ajax/rawlist.php b/apps/files/ajax/rawlist.php
index 1cd2944483..f568afad4d 100644
--- a/apps/files/ajax/rawlist.php
+++ b/apps/files/ajax/rawlist.php
@@ -15,6 +15,14 @@ $mimetype = isset($_GET['mimetype']) ? $_GET['mimetype'] : '';
 
 // make filelist
 $files = array();
+// If a type other than directory is requested first load them.
+if($mimetype && strpos($mimetype, 'httpd/unix-directory') === false) {
+	foreach( \OC\Files\Filesystem::getDirectoryContent( $dir, 'httpd/unix-directory' ) as $i ) {
+		$i["date"] = OCP\Util::formatDate($i["mtime"] );
+		$i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']);
+		$files[] = $i;
+	}
+}
 foreach( \OC\Files\Filesystem::getDirectoryContent( $dir, $mimetype ) as $i ) {
 	$i["date"] = OCP\Util::formatDate($i["mtime"] );
 	$i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']);
diff --git a/core/css/styles.css b/core/css/styles.css
index ee00196d66..2038417685 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -382,13 +382,14 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
 
 /* ---- DIALOGS ---- */
-#dirup {width:4%;}
-#dirtree {width:92%;}
-#filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
-#filelist img { margin: 2px 1em 0 4px; }
-#filelist .date { float:right;margin-right:1em; }
-.filepicker_element_selected { background-color:lightblue;}
-.filepicker_loader {height:170px; width:100%; background-color:#333; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3; visibility:visible; position:absolute; top:0; left:0; text-align:center; padding-top:150px;}
+#oc-dialog-filepicker-content .dirup {width:4%; font-weight: bold;}
+#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; font-weight: bold; }
+#oc-dialog-filepicker-content .dirtree span { cursor: pointer; }
+#oc-dialog-filepicker-content .dirtree span:not(last-child)::after { content: '>'; padding: 3px;}
+#oc-dialog-filepicker-content .filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
+#oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
+#oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; }
+#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
 .ui-dialog {position:fixed !important;}
 span.ui-icon {float: left; margin: 3px 7px 30px 0;}
 .loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 8989738287..4da9623c0a 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -133,7 +133,7 @@ var OCdialogs = {
 			var self = this;
 			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
 				self.$filePickerTemplate = $(tmpl);
-				self.$listTmpl = self.$filePickerTemplate.find('#filelist li:first-child').detach();
+				self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach();
 				defer.resolve(self.$filePickerTemplate);
 			})
 			.fail(function() {
@@ -160,6 +160,12 @@ var OCdialogs = {
 		}
 		return defer.promise();
 	},
+	_getFileList: function(dir, mimeType) {
+		return $.getJSON(
+			OC.filePath('files', 'ajax', 'rawlist.php'),
+			{dir: dir, mimetype: mimeType}
+		);
+	},
 	/**
 	 * show a file picker to pick a file from
 	 * @param title dialog title
@@ -169,35 +175,35 @@ var OCdialogs = {
 	 * @param modal make the dialog modal
 	*/
 	filepicker:function(title, callback, multiselect, mimetype_filter, modal) {
+		var self = this;
 		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
-			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
+			var dialog_name = 'oc-dialog-filepicker-content';
 			var dialog_id = '#' + dialog_name;
-			var $dlg = $tmpl.octemplate({
+			if(self.$filePicker) {
+				self.$filePicker.dialog('close');
+			}
+			self.$filePicker = $tmpl.octemplate({
 				dialog_name: dialog_name,
 				title: title
-			}).data('path', '/');
+			}).data('path', '');
 
 			if (modal === undefined) { modal = false };
 			if (multiselect === undefined) { multiselect = false };
 			if (mimetype_filter === undefined) { mimetype_filter = '' };
 
-			$('body').append($dlg);
+			$('body').append(self.$filePicker);
 
-			$dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
-			$dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
 
-			$dlg.find('#filelist').empty().addClass('loading');
-			$dlg.ready(function(){
-				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
-					{mimetype: mimetype_filter},
-					function(response) {
-					OCdialogs.fillFilePicker(response, dialog_id);
-				});
-				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
-					{mimetype: 'httpd/unix-directory'},
-					function(response) {
-					OCdialogs.fillTreeList(response, dialog_id);
+			self.$filePicker.ready(function() {
+				self.$filelist = self.$filePicker.find('.filelist');
+				self.$dirUp = self.$filePicker.find('.dirup');
+				self.$dirTree = self.$filePicker.find('.dirtree');
+				self.$dirTree.on('click', 'span', self, self.handleTreeListSelect);
+				self.$dirUp.click(self, self.filepickerDirUp);
+				self.$filelist.on('click', 'li', function(event) {
+					self.handlePickerClick(event, $(this));
 				});
+				self.fillFilePicker('');
 			}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
 
 			// build buttons
@@ -206,15 +212,15 @@ var OCdialogs = {
 					var datapath;
 					if (multiselect === true) {
 						datapath = [];
-						$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
-							datapath.push( $(dialog_id).data('path') + $(element).text() );
+						self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) {
+							datapath.push(self.$filePicker.data('path') + '/' + $(element).text());
 						});
 					} else {
-						var datapath = $(dialog_id).data('path');
-						datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+						var datapath = self.$filePicker.data('path');
+						datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
 					}
 					callback(datapath);
-					$(dialog_id).dialog('close');
+					self.$filePicker.dialog('close');
 				}
 			};
 			var buttonlist = [{
@@ -223,16 +229,19 @@ var OCdialogs = {
 				},
 				{
 				text: t('core', 'Cancel'),
-				click: function(){$(dialog_id).dialog('close'); }
+				click: function(){self.$filePicker.dialog('close'); }
 			}];
 
-			$(dialog_id).dialog({
+			self.$filePicker.dialog({
 				width: (4/9)*$(document).width(),
 				height: 420,
 				modal: modal,
-				buttons: buttonlist
+				buttons: buttonlist,
+				close: function(event, ui) {
+					self.$filePicker.dialog('destroy').remove();
+					self.$filePicker = null;
+				}
 			});
-			OCdialogs.dialogs_counter++;
 		})
 		.fail(function() {
 			alert(t('core', 'Error loading file picker template'));
@@ -340,146 +349,98 @@ var OCdialogs = {
 	/**
 	 * fills the filepicker with files
 	*/
-	fillFilePicker:function(request, dialog_content_id) {
-		var $filelist = $(dialog_content_id + ' #filelist').empty();
-		var files = '';
+	fillFilePicker:function(dir) {
 		var dirs = [];
 		var others = [];
-		$.each(request.data, function(index, file) {
-			if (file.type === 'dir') {
-				dirs.push(file);
-			} else {
-				others.push(file);
-			}
-		});
-
-		var sorted = dirs.concat(others);
-
 		var self = this;
-		$.each(sorted, function(idx, entry) {
-			$li = self.$listTmpl.octemplate({
-				type: entry.type,
-				dcid: dialog_content_id,
-				imgsrc: entry.mimetype_icon,
-				filename: entry.name,
-				date: OC.mtime2date(entry.mtime)
+		this.$filelist.empty().addClass('loading');
+		this.$filePicker.data('path', dir);
+		$.when(this._getFileList(dir, this.$filePicker.data('mimetype'))).then(function(response) {
+			$.each(response.data, function(index, file) {
+				if (file.type === 'dir') {
+					dirs.push(file);
+				} else {
+					others.push(file);
+				}
 			});
-			$filelist.append($li);
+
+			self.fillTreeList();
+			var sorted = dirs.concat(others);
+
+			$.each(sorted, function(idx, entry) {
+				$li = self.$listTmpl.octemplate({
+					type: entry.type,
+					dir: dir,
+					imgsrc: entry.mimetype_icon,
+					filename: entry.name,
+					date: OC.mtime2date(entry.mtime)
+				});
+				self.$filelist.append($li);
+			});
+
+			self.$filelist.removeClass('loading');
 		});
-
-		$filelist.removeClass('loading');
-
-		$filelist.on('click', 'li', function() {
-			OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id);
-		});
-
-		$(dialog_content_id + ' .filepicker_loader').css('visibility', 'hidden');
 	},
 	/**
 	 * fills the tree list with directories
 	*/
-	fillTreeList: function(request, dialog_id) {
-		var $dirtree = $(dialog_id + ' #dirtree').empty();
-		var $template = $('<option value="{count}">{name}</option>');
-		$dirtree.append($template.octemplate({
-			count: 0,
-			name: $(dialog_id).data('path')
-		}));
-		$.each(request.data, function(index, file) {
-			$dirtree.append($template.octemplate({
-				count: index,
-				name: file.name
+	fillTreeList: function() {
+		this.$dirTree.empty();
+		var self = this
+		var path = this.$filePicker.data('path');
+		if(!path) {
+			return;
+		}
+		var $template = $('<span data-dir="{dir}">{name}</span>');
+		var paths = path.split('/');
+		paths.pop();
+		$.each(paths, function(index, dir) {
+			var dir = paths.pop();
+			if(dir === '') {
+				return false;
+			}
+			self.$dirTree.prepend($template.octemplate({
+				dir: paths.join('/') + '/' + dir,
+				name: dir
 			}));
 		});
+		self.$dirTree.prepend($template.octemplate({
+			dir: '',
+			name: '/'
+		}));
 	},
 	/**
 	 * handle selection made in the tree list
 	*/
 	handleTreeListSelect:function(event) {
-		// if there's a slash in the selected path, don't append it
-		if ($('option:selected', this).html().indexOf('/') !== -1) {
-			$(event.data.dcid).data('path', $('option:selected', this).html());
-		} else {
-			$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $('option:selected', this).html() + '/');
-		}
-		$(event.data.dcid).find('#filelist').addClass('loading');
-		$.getJSON(
-			OC.filePath('files', 'ajax', 'rawlist.php'),
-			{
-				dir: $(event.data.dcid).data('path'),
-				mimetype: $(event.data.dcid).data('mimetype')
-			},
-			function(request) { OCdialogs.fillFilePicker(request, event.data.dcid) }
-		);
-		$.getJSON(
-			OC.filePath('files', 'ajax', 'rawlist.php'),
-			{
-				dir: $(event.data.dcid).data('path'),
-				mimetype: 'httpd/unix-directory'
-			},
-			function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
-		);
+		var self = event.data;
+		var dir = $(event.target).data('dir');
+		self.fillFilePicker(dir);
 	},
 	/**
 	 * go one directory up
 	*/
 	filepickerDirUp:function(event) {
-		var old_path = $(event.data.dcid).data('path');
-		if ( old_path !== '/') {
-			var splitted_path = old_path.split("/");
-			var new_path = ""
-			for (var i = 0; i < splitted_path.length - 2; i++) {
-				new_path += splitted_path[i] + '/'
-			}
-			$(event.data.dcid).data('path', new_path).find('#filelist').empty().addClass('loading');;
-			$.getJSON(
-				OC.filePath('files', 'ajax', 'rawlist.php'),
-				{
-					dir: $(event.data.dcid).data('path'),
-					mimetype: $(event.data.dcid).data('mimetype')
-				},
-				function(request) { OCdialogs.fillFilePicker(request, event.data.dcid) }
-			);
-			$.getJSON(
-				OC.filePath('files', 'ajax', 'rawlist.php'),
-				{
-					dir: $(event.data.dcid).data('path'),
-					mimetype: 'httpd/unix-directory'
-				},
-				function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
-			);
+		var self = event.data;
+		var old_path = self.$filePicker.data('path');
+		if (old_path !== '') {
+			var splitted_path = old_path.split('/');
+			splitted_path.pop();
+			self.fillFilePicker(splitted_path.join('/'));
 		}
 	},
 	/**
 	 * handle clicks made in the filepicker
 	*/
-	handlePickerClick:function(element, name, dialog_content_id) {
-		if ( $(element).data('type') === 'file' ){
-			if ( $(dialog_content_id).data('multiselect') !== true) {
-				$(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected');
+	handlePickerClick:function(event, $element) {
+		if ($element.data('type') === 'file') {
+			if (this.$filePicker.data('multiselect') !== true || !event.ctrlKey) {
+				this.$filelist.find('.filepicker_element_selected').removeClass('filepicker_element_selected');
 			}
-			$(element).toggleClass('filepicker_element_selected');
+			$element.toggleClass('filepicker_element_selected');
 			return;
-		} else if ( $(element).data('type') === 'dir' ) {
-			var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' );
-			$(dialog_content_id).data('path', datapath);
-			$(dialog_content_id).find('#filelist').empty().addClass('loading');
-			$.getJSON(
-				OC.filePath('files', 'ajax', 'rawlist.php'),
-				{
-					dir: datapath,
-					mimetype: $(dialog_content_id).data('mimetype')
-				},
-				function(request){ OCdialogs.fillFilePicker(request, dialog_content_id) }
-			);
-			$.getJSON(
-				OC.filePath('files', 'ajax', 'rawlist.php'),
-				{
-					dir: datapath,
-					mimetype: 'httpd/unix-directory'
-				},
-				function(request) { OCdialogs.fillTreeList(request, dialog_content_id) }
-			);
+		} else if ( $element.data('type') === 'dir' ) {
+			this.fillFilePicker(this.$filePicker.data('path') + '/' + $element.data('entryname'))
 		}
 	}
 };
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index f29de390ef..e7aa77a732 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,8 +1,8 @@
 <div id="{dialog_name}" title="{title}">
-	<button id="dirup">↑</button>
-	<select id="dirtree"></select>
-	<ul id="filelist">
-		<li data-entryname="{filename}" data-type="{type}" data-dcid="{dcid}">
+	<button class="dirup">↑</button>
+	<span class="dirtree"></span>
+	<ul class="filelist">
+		<li data-entryname="{filename}" data-type="{type}">
 			<img src="{imgsrc}" />
 			<span class="filename">{filename}</span>
 			<span class="date">{date}</span>

From e60d86bdd1b45e29bf09bacf48bab8d847c54a72 Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 06:16:51 +0200
Subject: [PATCH 05/11] Dialogs: Make slug show last dir emphasized.

---
 core/css/styles.css   | 7 ++++---
 core/js/oc-dialogs.js | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/core/css/styles.css b/core/css/styles.css
index 2038417685..eab4e226a1 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -383,9 +383,10 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 
 /* ---- DIALOGS ---- */
 #oc-dialog-filepicker-content .dirup {width:4%; font-weight: bold;}
-#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; font-weight: bold; }
-#oc-dialog-filepicker-content .dirtree span { cursor: pointer; }
-#oc-dialog-filepicker-content .dirtree span:not(last-child)::after { content: '>'; padding: 3px;}
+#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
+#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
+#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
+#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
 #oc-dialog-filepicker-content .filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
 #oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
 #oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; }
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 4da9623c0a..8f127bfb62 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -198,7 +198,7 @@ var OCdialogs = {
 				self.$filelist = self.$filePicker.find('.filelist');
 				self.$dirUp = self.$filePicker.find('.dirup');
 				self.$dirTree = self.$filePicker.find('.dirtree');
-				self.$dirTree.on('click', 'span', self, self.handleTreeListSelect);
+				self.$dirTree.on('click', 'span:not(:last-child)', self, self.handleTreeListSelect);
 				self.$dirUp.click(self, self.filepickerDirUp);
 				self.$filelist.on('click', 'li', function(event) {
 					self.handlePickerClick(event, $(this));
@@ -393,7 +393,7 @@ var OCdialogs = {
 		}
 		var $template = $('<span data-dir="{dir}">{name}</span>');
 		var paths = path.split('/');
-		paths.pop();
+		//paths.pop();
 		$.each(paths, function(index, dir) {
 			var dir = paths.pop();
 			if(dir === '') {

From a0b79f564944479beb497a75bb45cf02fcaf38ca Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 06:48:24 +0200
Subject: [PATCH 06/11] Dialogs: Loose up-button.

---
 core/css/styles.css            |  1 -
 core/js/oc-dialogs.js          | 14 --------------
 core/templates/filepicker.html |  1 -
 3 files changed, 16 deletions(-)

diff --git a/core/css/styles.css b/core/css/styles.css
index eab4e226a1..71b1c1fab8 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -382,7 +382,6 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
 
 /* ---- DIALOGS ---- */
-#oc-dialog-filepicker-content .dirup {width:4%; font-weight: bold;}
 #oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
 #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
 #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 8f127bfb62..43b698df68 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -196,10 +196,8 @@ var OCdialogs = {
 
 			self.$filePicker.ready(function() {
 				self.$filelist = self.$filePicker.find('.filelist');
-				self.$dirUp = self.$filePicker.find('.dirup');
 				self.$dirTree = self.$filePicker.find('.dirtree');
 				self.$dirTree.on('click', 'span:not(:last-child)', self, self.handleTreeListSelect);
-				self.$dirUp.click(self, self.filepickerDirUp);
 				self.$filelist.on('click', 'li', function(event) {
 					self.handlePickerClick(event, $(this));
 				});
@@ -417,18 +415,6 @@ var OCdialogs = {
 		var dir = $(event.target).data('dir');
 		self.fillFilePicker(dir);
 	},
-	/**
-	 * go one directory up
-	*/
-	filepickerDirUp:function(event) {
-		var self = event.data;
-		var old_path = self.$filePicker.data('path');
-		if (old_path !== '') {
-			var splitted_path = old_path.split('/');
-			splitted_path.pop();
-			self.fillFilePicker(splitted_path.join('/'));
-		}
-	},
 	/**
 	 * handle clicks made in the filepicker
 	*/
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index e7aa77a732..2b7942bd46 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,5 +1,4 @@
 <div id="{dialog_name}" title="{title}">
-	<button class="dirup">↑</button>
 	<span class="dirtree"></span>
 	<ul class="filelist">
 		<li data-entryname="{filename}" data-type="{type}">

From 2f91606e35fb8c64e7b4c6b9eadd97813818195f Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 07:14:43 +0200
Subject: [PATCH 07/11] Dialogs: Cleanup.

---
 core/js/oc-dialogs.js | 127 +++++++++---------------------------------
 1 file changed, 26 insertions(+), 101 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 43b698df68..074d3656f9 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -23,6 +23,11 @@
  * this class to ease the usage of jquery dialogs
  */
 var OCdialogs = {
+	// dialog button types
+	YES_NO_BUTTONS:		70,
+	OK_BUTTONS:		71,
+	// used to name each dialog
+	dialogs_counter: 0,
 	/**
 	* displays alert dialog
 	* @param text content of dialog
@@ -31,7 +36,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	alert:function(text, title, callback, modal) {
-		OCdialogs.message(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
+		this.message(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays info dialog
@@ -41,7 +46,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	info:function(text, title, callback, modal) {
-		OCdialogs.message(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
+		this.message(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
 	},
 	/**
 	* displays confirmation dialog
@@ -51,81 +56,7 @@ var OCdialogs = {
 	* @param modal make the dialog modal
 	*/
 	confirm:function(text, title, callback, modal) {
-		OCdialogs.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
-	},
-	/**
-	* prompt for user input
-	* @param text content of dialog
-	* @param title dialog title
-	* @param callback which will be triggered when user presses OK (input text will be passed to callback)
-	* @param modal make the dialog modal
-	*/
-	prompt:function(text, title, default_value, callback, modal) {
-		var input = '<input type="text" id="oc-dialog-prompt-input" value="' + escapeHTML(default_value) + '" style="width:90%">';
-		var content = '<p><span class="ui-icon ui-icon-pencil"></span>' + escapeHTML(text) + ':<br/>' + input + '</p>';
-		OCdialogs.message(content, title, 'prompt', OCdialogs.OK_BUTTON, callback, modal);
-	},
-	/**
-	* prompt user for input with custom form
-	* fields should be passed in following format: [{text:'prompt text', name:'return name', type:'input type', value: 'default value'},...]
-	* example:
-	* var fields=[{text:'Test', name:'test', type:'select', options:[{text:'hello1',value:1},{text:'hello2',value:2}] }];
-	* @param fields to display 
-	* @param title dialog title
-	* @param callback which will be triggered when user presses OK (user answers will be passed to callback in following format: [{name:'return name', value: 'user value'},...])
-	* @param modal make the dialog modal
-	*/
-	form:function(fields, title, callback, modal) {
-		var content = '<table>';
-		$.each(fields, function(index, field){
-			content += '<tr><td>' + escapeHTML(field.text) + '</td><td>';
-			var type = field.type;
-			
-			if (type === 'text' || type === 'checkbox' || type === 'password') {
-				content += '<input type="' + type + '" name="' + field.name + '"';
-				if (type === 'checkbox' && field.value === true) {
-					content += ' checked="checked"';
-				} else if (type === 'text' || type === 'password' && val.value) {
-					content += ' value="' + escapeHTML(field.value) + '"';
-				}
-				content += '>';
-			} else if (type === 'select') {
-				content += '<select name="' + escapeHTML(field.name) + '"';
-				if (field.value !== undefined) {
-					content += ' value="' + escapeHTML(field.value) + '"';
-				}
-				content += '>';
-				$.each(field.options, function(index, field_option){
-					content += '<option value="' + escapeHTML(field_option.value) + '">' + escapeHTML(field_option.text) + '</option>';
-				});
-				content += '</select>';
-			}
-			content += '</td></tr>';
-
-		});
-		content += '</table>';
-
-		var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_id = '#' + dialog_name;
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + content + '</div>';
-		if (modal === undefined) { modal = false };
-		$('body').append(dialog_div);
-		var buttonlist = [{
-			text: t('core', 'Ok'),
-			click: function(){ OCdialogs.form_ok_handler(callback, dialog_id); }
-		},
-		{
-			text: t('core', 'Cancel'),
-			click: function(){ $(dialog_id).dialog('close'); }
-		}];
-		var dialog_height = ( $('tr', dialog_div).length + 1 ) * 30 + 120;
-		$(dialog_id).dialog({
-			width: (4/9) * $(document).width(),
-			height: dialog_height,
-			modal: modal,
-			buttons: buttonlist
-		});
-		OCdialogs.dialogs_counter++;
+		this.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
 	},
 	_getFilePickerTemplate: function() {
 		var defer = $.Deferred();
@@ -231,6 +162,7 @@ var OCdialogs = {
 			}];
 
 			self.$filePicker.dialog({
+				closeOnEscape: true,
 				width: (4/9)*$(document).width(),
 				height: 420,
 				modal: modal,
@@ -304,6 +236,7 @@ var OCdialogs = {
 			};
 
 			$(dialog_id).dialog({
+				closeOnEscape: true,
 				modal: modal,
 				buttons: buttonlist
 			});
@@ -313,12 +246,6 @@ var OCdialogs = {
 			alert(t('core', 'Error loading file picker template'));
 		});
 	},
-	// dialog button types
-	YES_NO_BUTTONS:		70,
-	OK_BUTTONS:		71,
-	// used to name each dialog
-	dialogs_counter: 0,
-
 	determineValue: function(element) {
 		if ( $(element).attr('type') === 'checkbox' ) {
 			return element.checked;
@@ -362,7 +289,7 @@ var OCdialogs = {
 				}
 			});
 
-			self.fillTreeList();
+			self.fillSlug();
 			var sorted = dirs.concat(others);
 
 			$.each(sorted, function(idx, entry) {
@@ -382,27 +309,25 @@ var OCdialogs = {
 	/**
 	 * fills the tree list with directories
 	*/
-	fillTreeList: function() {
+	fillSlug: function() {
 		this.$dirTree.empty();
 		var self = this
 		var path = this.$filePicker.data('path');
-		if(!path) {
-			return;
-		}
 		var $template = $('<span data-dir="{dir}">{name}</span>');
-		var paths = path.split('/');
-		//paths.pop();
-		$.each(paths, function(index, dir) {
-			var dir = paths.pop();
-			if(dir === '') {
-				return false;
-			}
-			self.$dirTree.prepend($template.octemplate({
-				dir: paths.join('/') + '/' + dir,
-				name: dir
-			}));
-		});
-		self.$dirTree.prepend($template.octemplate({
+		if(path) {
+			var paths = path.split('/');
+			$.each(paths, function(index, dir) {
+				var dir = paths.pop();
+				if(dir === '') {
+					return false;
+				}
+				self.$dirTree.prepend($template.octemplate({
+					dir: paths.join('/') + '/' + dir,
+					name: dir
+				}));
+			});
+		}
+		this.$dirTree.prepend($template.octemplate({
 			dir: '',
 			name: '/'
 		}));

From ba9849a1aa158f1d5ab371db88d76e492bf476ec Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 08:42:15 +0200
Subject: [PATCH 08/11] Dialogs: Fix method names.

---
 core/js/oc-dialogs.js | 117 +++++++++++++++++++-----------------------
 1 file changed, 52 insertions(+), 65 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 074d3656f9..674df05635 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -58,45 +58,6 @@ var OCdialogs = {
 	confirm:function(text, title, callback, modal) {
 		this.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
 	},
-	_getFilePickerTemplate: function() {
-		var defer = $.Deferred();
-		if(!this.$filePickerTemplate) {
-			var self = this;
-			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
-				self.$filePickerTemplate = $(tmpl);
-				self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach();
-				defer.resolve(self.$filePickerTemplate);
-			})
-			.fail(function() {
-				defer.reject();
-			});
-		} else {
-			defer.resolve(this.$filePickerTemplate);
-		}
-		return defer.promise();
-	},
-	_getMessageTemplate: function() {
-		var defer = $.Deferred();
-		if(!this.$messageTemplate) {
-			var self = this;
-			$.get(OC.filePath('core', 'templates', 'message.html'), function(tmpl) {
-				self.$messageTemplate = $(tmpl);
-				defer.resolve(self.$messageTemplate);
-			})
-			.fail(function() {
-				defer.reject();
-			});
-		} else {
-			defer.resolve(this.$messageTemplate);
-		}
-		return defer.promise();
-	},
-	_getFileList: function(dir, mimeType) {
-		return $.getJSON(
-			OC.filePath('files', 'ajax', 'rawlist.php'),
-			{dir: dir, mimetype: mimeType}
-		);
-	},
 	/**
 	 * show a file picker to pick a file from
 	 * @param title dialog title
@@ -128,11 +89,11 @@ var OCdialogs = {
 			self.$filePicker.ready(function() {
 				self.$filelist = self.$filePicker.find('.filelist');
 				self.$dirTree = self.$filePicker.find('.dirtree');
-				self.$dirTree.on('click', 'span:not(:last-child)', self, self.handleTreeListSelect);
+				self.$dirTree.on('click', 'span:not(:last-child)', self, self._handleTreeListSelect);
 				self.$filelist.on('click', 'li', function(event) {
-					self.handlePickerClick(event, $(this));
+					self._handlePickerClick(event, $(this));
 				});
-				self.fillFilePicker('');
+				self._fillFilePicker('');
 			}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
 
 			// build buttons
@@ -219,7 +180,7 @@ var OCdialogs = {
 								text: t('core', 'Cancel'),
 								click: function() { $(dialog_id).dialog('close'); }
 							};
-							functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
+							functionToCall = function() { OCdialogs._promptOkHandler(callback, dialog_id); };
 						break;
 						default:
 							functionToCall = function() {
@@ -246,7 +207,46 @@ var OCdialogs = {
 			alert(t('core', 'Error loading file picker template'));
 		});
 	},
-	determineValue: function(element) {
+	_getFilePickerTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$filePickerTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
+				self.$filePickerTemplate = $(tmpl);
+				self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach();
+				defer.resolve(self.$filePickerTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$filePickerTemplate);
+		}
+		return defer.promise();
+	},
+	_getMessageTemplate: function() {
+		var defer = $.Deferred();
+		if(!this.$messageTemplate) {
+			var self = this;
+			$.get(OC.filePath('core', 'templates', 'message.html'), function(tmpl) {
+				self.$messageTemplate = $(tmpl);
+				defer.resolve(self.$messageTemplate);
+			})
+			.fail(function() {
+				defer.reject();
+			});
+		} else {
+			defer.resolve(this.$messageTemplate);
+		}
+		return defer.promise();
+	},
+	_getFileList: function(dir, mimeType) {
+		return $.getJSON(
+			OC.filePath('files', 'ajax', 'rawlist.php'),
+			{dir: dir, mimetype: mimeType}
+		);
+	},
+	_determineValue: function(element) {
 		if ( $(element).attr('type') === 'checkbox' ) {
 			return element.checked;
 		} else {
@@ -254,27 +254,14 @@ var OCdialogs = {
 		}
 	},
 
-	prompt_ok_handler: function(callback, dialog_id) {
+	_promptOkHandler: function(callback, dialog_id) {
 		$(dialog_id).dialog('close');
 		if (callback !== undefined) { callback($(dialog_id + ' input#oc-dialog-prompt-input').val()) };
 	},
-
-	form_ok_handler: function(callback, dialog_id) {
-		if (callback !== undefined) {
-			var valuelist = [];
-			$(dialog_id + ' input, ' + dialog_id + ' select').each(function(index, element) {
-				valuelist[index] = { name: $(element).attr('name'), value: OCdialogs.determineValue(element) };
-			});
-			$(dialog_id).dialog('close');
-			callback(valuelist);
-		} else {
-			$(dialog_id).dialog('close');
-		}
-	},
 	/**
 	 * fills the filepicker with files
 	*/
-	fillFilePicker:function(dir) {
+	_fillFilePicker:function(dir) {
 		var dirs = [];
 		var others = [];
 		var self = this;
@@ -289,7 +276,7 @@ var OCdialogs = {
 				}
 			});
 
-			self.fillSlug();
+			self._fillSlug();
 			var sorted = dirs.concat(others);
 
 			$.each(sorted, function(idx, entry) {
@@ -309,7 +296,7 @@ var OCdialogs = {
 	/**
 	 * fills the tree list with directories
 	*/
-	fillSlug: function() {
+	_fillSlug: function() {
 		this.$dirTree.empty();
 		var self = this
 		var path = this.$filePicker.data('path');
@@ -335,15 +322,15 @@ var OCdialogs = {
 	/**
 	 * handle selection made in the tree list
 	*/
-	handleTreeListSelect:function(event) {
+	_handleTreeListSelect:function(event) {
 		var self = event.data;
 		var dir = $(event.target).data('dir');
-		self.fillFilePicker(dir);
+		self._fillFilePicker(dir);
 	},
 	/**
 	 * handle clicks made in the filepicker
 	*/
-	handlePickerClick:function(event, $element) {
+	_handlePickerClick:function(event, $element) {
 		if ($element.data('type') === 'file') {
 			if (this.$filePicker.data('multiselect') !== true || !event.ctrlKey) {
 				this.$filelist.find('.filepicker_element_selected').removeClass('filepicker_element_selected');
@@ -351,7 +338,7 @@ var OCdialogs = {
 			$element.toggleClass('filepicker_element_selected');
 			return;
 		} else if ( $element.data('type') === 'dir' ) {
-			this.fillFilePicker(this.$filePicker.data('path') + '/' + $element.data('entryname'))
+			this._fillFilePicker(this.$filePicker.data('path') + '/' + $element.data('entryname'))
 		}
 	}
 };

From c3779555aa38940cb16790407c71bc852b9bd742 Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Fri, 17 May 2013 16:18:40 +0200
Subject: [PATCH 09/11] Dialogs: Home folder icon instead of '/'.

---
 core/css/styles.css   | 5 +++++
 core/js/oc-dialogs.js | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/css/styles.css b/core/css/styles.css
index 71b1c1fab8..70a840d689 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -383,6 +383,11 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
 
 /* ---- DIALOGS ---- */
 #oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
+#oc-dialog-filepicker-content .dirtree .home {
+	background-image:url('../img/places/home.svg');
+	background-repeat:no-repeat;
+	background-position: left center;
+}
 #oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
 #oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
 #oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 674df05635..e05b3b0207 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -314,10 +314,10 @@ var OCdialogs = {
 				}));
 			});
 		}
-		this.$dirTree.prepend($template.octemplate({
+		$template.octemplate({
 			dir: '',
-			name: '/'
-		}));
+			name: '&nbsp;&nbsp;&nbsp;&nbsp;' // Ugly but works ;)
+		}, {escapeFunction: null}).addClass('home svg').prependTo(this.$dirTree);
 	},
 	/**
 	 * handle selection made in the tree list

From 27a5132b46df56dae81799e05bfeeaff27f2e4bb Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Mon, 20 May 2013 09:44:31 +0200
Subject: [PATCH 10/11] Don't set image path in template.

---
 core/js/oc-dialogs.js          | 2 +-
 core/templates/filepicker.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index e05b3b0207..316a99592f 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -283,10 +283,10 @@ var OCdialogs = {
 				$li = self.$listTmpl.octemplate({
 					type: entry.type,
 					dir: dir,
-					imgsrc: entry.mimetype_icon,
 					filename: entry.name,
 					date: OC.mtime2date(entry.mtime)
 				});
+				$li.find('img').attr('src', entry.mimetype_icon);
 				self.$filelist.append($li);
 			});
 
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 2b7942bd46..e761fbdb56 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -2,7 +2,7 @@
 	<span class="dirtree"></span>
 	<ul class="filelist">
 		<li data-entryname="{filename}" data-type="{type}">
-			<img src="{imgsrc}" />
+			<img />
 			<span class="filename">{filename}</span>
 			<span class="date">{date}</span>
 		</li>

From 38b2d0a8229439ea4641e39fcd9275cbf82680ee Mon Sep 17 00:00:00 2001
From: Thomas Tanghus <thomas@tanghus.net>
Date: Mon, 20 May 2013 09:54:43 +0200
Subject: [PATCH 11/11] Remove more obsolete code.

---
 core/js/oc-dialogs.js | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index 316a99592f..e1d3657724 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -173,22 +173,10 @@ var OCdialogs = {
 					}];
 				break;
 				case OCdialogs.OK_BUTTON:
-					var functionToCall;
-					switch(dialog_type) {
-						case 'prompt':
-							buttonlist[1] = {
-								text: t('core', 'Cancel'),
-								click: function() { $(dialog_id).dialog('close'); }
-							};
-							functionToCall = function() { OCdialogs._promptOkHandler(callback, dialog_id); };
-						break;
-						default:
-							functionToCall = function() {
-								$(dialog_id).dialog('close');
-								if(callback !== undefined) { callback() };
-							};
-						break;
-					}
+					var functionToCall = function() {
+						$(dialog_id).dialog('close');
+						if(callback !== undefined) { callback() };
+					};
 					buttonlist[0] = {
 						text: t('core', 'Ok'),
 						click: functionToCall
@@ -254,10 +242,6 @@ var OCdialogs = {
 		}
 	},
 
-	_promptOkHandler: function(callback, dialog_id) {
-		$(dialog_id).dialog('close');
-		if (callback !== undefined) { callback($(dialog_id + ' input#oc-dialog-prompt-input').val()) };
-	},
 	/**
 	 * fills the filepicker with files
 	*/