Port OC.dialogs to use octemplate except for prompt() and form().

Also load octemplate per default.

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

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(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, 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(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, 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(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
-		OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, 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';
+		$.when(this._getFilePickerTemplate()).then(function($tmpl) {
-		var dialog_id = '#' + dialog_name;
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_content = '<button id="dirup">↑</button><select id="dirtree"></select><div id="filelist"></div>';
+			var dialog_id = '#' + dialog_name;
-		var dialog_loader = '<div class="filepicker_loader"><img src="' + OC.filePath('gallery','img','loading.gif') + '"></div>';
+			var $dlg = $tmpl.octemplate({
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + dialog_content + dialog_loader + '</div>';
+				dialog_name: dialog_name,
-		if (modal === undefined) { modal = false };
+				title: title
-		if (multiselect === undefined) { multiselect = false };
+			}).data('path', '/');
-		if (mimetype_filter === undefined) { mimetype_filter = '' };
 
-		$('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 );
+			$dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
-		$(dialog_id + ' #dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
+			$dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
 
-		$(dialog_id).ready(function(){
+			$dlg.find('#filelist').empty().addClass('loading');
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: mimetype_filter } ,function(request) {
+			$dlg.ready(function(){
-				OCdialogs.fillFilePicker(request, dialog_id);
+				$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
-			});
+					{mimetype: mimetype_filter},
-			$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: "httpd/unix-directory" }, function(request) {
+					function(response) {
-				OCdialogs.fillTreeList(request, dialog_id);
+					OCdialogs.fillFilePicker(response, dialog_id);
-			});
+				});
-		}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
+				$.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
+			// build buttons
-		var functionToCall = function() {
+			var functionToCall = function() {
-			if (callback !== undefined) {
+				if (callback !== undefined) {
-				var datapath;
+					var datapath;
-				if (multiselect === true) {
+					if (multiselect === true) {
-					datapath = [];
+						datapath = [];
-					$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
+						$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) {
-						datapath.push( $(dialog_id).data('path') + $(element).text() );
+							datapath.push( $(dialog_id).data('path') + $(element).text() );
-					});
+						});
-				} else {
+					} else {
-					var datapath = $(dialog_id).data('path');
+						var datapath = $(dialog_id).data('path');
-					datapath += $(dialog_id+' .filepicker_element_selected .filename').text();
+						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
-		var buttonlist = [{
+				},
-			text: t('core', 'Choose'), 
+				{
-			click: functionToCall
+				text: t('core', 'Cancel'),
-			},
+				click: function(){$(dialog_id).dialog('close'); }
-			{
+			}];
-			text: t('core', 'Cancel'), 
-			click: function(){$(dialog_id).dialog('close'); }
-		}];
 
-		$(dialog_id).dialog({
+			$(dialog_id).dialog({
-			width: (4/9)*$(document).width(),
+				width: (4/9)*$(document).width(),
-			height: 420,
+				height: 420,
-			modal: modal,
+				modal: modal,
-			buttons: buttonlist
+				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';
+		$.when(this._getMessageTemplate()).then(function($tmpl) {
-		var dialog_id = '#' + dialog_name;
+			var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
-		var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + content + '</div>';
+			var dialog_id = '#' + dialog_name;
-		if (modal === undefined) { modal = false };
+			var $dlg = $tmpl.octemplate({
-		$('body').append(dialog_div);
+				dialog_name: dialog_name,
-		var buttonlist = [];
+				title: title,
-		switch (buttons) {
+				message: content,
-			case OCdialogs.YES_NO_BUTTONS:
+				type: dialog_type
-				buttonlist = [{
+			});
-					text: t('core', 'Yes'),
+			if (modal === undefined) { modal = false };
-					click: function(){
+			$('body').append($dlg);
-						if (callback !== undefined) { callback(true) };
+			var buttonlist = [];
-						$(dialog_id).dialog('close');
+			switch (buttons) {
-					}
+				case OCdialogs.YES_NO_BUTTONS:
-				},
+					buttonlist = [{
-				{
+						text: t('core', 'Yes'),
-					text: t('core', 'No'),
+						click: function(){
-					click: function(){
+							if (callback !== undefined) { callback(true) };
-						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() {
 							$(dialog_id).dialog('close');
-							if(callback !== undefined) { callback() };
+						}
-						};
+					},
-					break;
+					{
-					case OCdialogs.PROMPT_DIALOG:
+						text: t('core', 'No'),
-						buttonlist[1] = {
+						click: function(){
-							text: t('core', 'Cancel'),
+							if (callback !== undefined) { callback(false) };
-							click: function() { $(dialog_id).dialog('close'); }
+							$(dialog_id).dialog('close');
-						};
+						}
-						functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
+					}];
-					break;
+				break;
-				}
+				case OCdialogs.OK_BUTTON:
-				buttonlist[0] = {
+					var functionToCall;
-					text: t('core', 'Ok'),
+					switch(dialog_type) {
-					click: functionToCall
+						case 'prompt':
-				};
+							buttonlist[1] = {
-			break;
+								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({
+			$(dialog_id).dialog({
-			width: (4/9) * $(document).width(),
+				modal: modal,
-			height: 180,
+				buttons: buttonlist
-			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 $filelist = $(dialog_content_id + ' #filelist').empty();
-		var template = '<div data-entryname="*ENTRYNAME*" data-dcid="' + escapeHTML(dialog_content_id) + '" data="*ENTRYTYPE*">*CONTENT*</div>';
 		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);
+		var sorted = dirs.concat(others);
-		$('#filelist div').click(function() {
+
+		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 $dirtree = $(dialog_id + ' #dirtree').empty();
-		var paths = '<option value="0">' + escapeHTML($(dialog_id).data('path')) + '</option>';
+		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
+		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());
+			$(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) }
 			);

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>

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>

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