diff Agendas/trunk/src/Agendas.Web/Scripts/subpanels-0.9.js @ 219:b9850b647a4e

Agregando alta de ponente durante la carga del evento
author nelopauselli
date Thu, 08 Sep 2011 11:22:10 -0300
parents
children 42a1068e73c8
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Agendas/trunk/src/Agendas.Web/Scripts/subpanels-0.9.js	Thu Sep 08 11:22:10 2011 -0300
@@ -0,0 +1,149 @@
+jQuery.fn.subpanel = function () {
+	var panel = $(this[0]);
+	var settings = arguments[0] || {};
+
+	var closeLink = null;
+	var openLink = null;
+	var main = null;
+	var loading = null;
+
+	this.create = function () {
+		// botón para abrir el panel
+		openLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').click(this.open).appendTo(panel);
+		var openSpan = $('<span></span>').addClass('ui-icon ui-icon-plusthick').appendTo(openLink);
+
+		closeLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').css('display', 'none').click(this.close).appendTo(panel);
+		var closeSpan = $('<span></span>').addClass('ui-icon ui-icon-minusthick').appendTo(closeLink);
+
+		// panel principal
+		main = $('<div></div>')
+			.addClass('ui-widget')
+			.addClass('ui-widget-content')
+			.addClass('ui-corner-all')
+			.width(settings.width || '400px')
+			.css('display', 'none')
+			.appendTo(panel);
+	};
+
+	this.close = function () {
+		if (loading !== undefined && loading !== null) {
+			loading.abort();
+			settings.aborting();
+		}
+
+		$(this).hide();
+		openLink.show();
+		main.hide();
+		main.html('');
+	};
+
+	this.open = function () {
+		$(this).hide();
+		closeLink.show();
+		main.show();
+
+		// si hay título, creamos el header
+		if (settings.title !== undefined) {
+			var header = $('<div></div>')
+				.addClass('sp-header').addClass('ui-widget-header')
+				.appendTo(main);
+
+			var title = $('<span><span>')
+				.html(settings.title)
+				.appendTo(header);
+		}
+
+		// div que contendrá el html del panel
+		var content = $('<div></div>')
+			.appendTo(main);
+
+		var imgdiv = $('<div></div>').css('text-align', 'center').css('padding-top', '10px').appendTo(content);
+		var img = $('<img />').attr('src', '/Content/loader.gif').attr('alt', 'loading...').appendTo(imgdiv);
+
+		// se invoca la acción con un GET para obtener el contenido del panel
+		loading = $.ajax({
+			url: settings.action,
+			cache: false,
+			success: function (data) {
+				loading = null;
+
+				// cuando se recibe el contenido del panel, lo agregamos al div contenedor
+				content.html(data);
+
+				// form dentro del cual se ejecutará el panel, y del que luego se hará el POST
+				var form = $('form', content);
+
+				form.submit(function (event) {
+					// prevenimos que se ejecute el submit ya que lo haremos manualmente.
+					event.preventDefault();
+
+					var self = $(this);
+
+					/* preguntamos si el formulario es validable y válido, con esto tenemos un problema 
+					ya que no se están generando los validadores por un problema entre jquery.validate 
+					y ajax */
+					var valid = self.valid();
+					if (valid === undefined || valid) {
+
+						// tomamos la acción y serializamos el form
+						var action = self.attr("action");
+						var data = self.serialize();
+
+						// ejecutamos el POST
+						$.post(action, data, function (data) {
+							// cuando termina de ejecutarse el POST, ejecutamos la acción configurada
+							var r = settings.successful(data);
+
+							// si esta acción no devuelve false, cerramos el panel
+							if (r === undefined || r)
+								closeLink.click();
+						});
+					}
+				});
+
+				$.validator.unobtrusive.parse(form);
+
+				$('input:submit', form).each(function () { $(this).button(); });
+
+				// y seteamos el foco en el primer input
+				var nextInput = $("input:visible:first", form);
+				nextInput.focus();
+			},
+			error: function (xhr, text) {
+				loading = null;
+
+				if (xhr.status !== 0) {
+					content.html(xhr.responseText)
+					.addClass('ui-state-error');
+				}
+				else {
+					closeLink.click();
+				}
+			}
+		});
+
+		/*
+		var buttons = $('<div></div>')
+		.addClass('sp-buttons')
+		.appendTo(form);
+
+		var confirm = $('<input/>')
+		.attr('type', 'submit')
+		.attr('value', settings.confirmButton || 'Save')
+		.button()
+		.appendTo(buttons);
+
+		var x = $('<a></a>')
+		.html(settings.cancelButton || 'Cancel')
+		.button()
+		.click(function (e) {
+		e.preventDefault();
+		closeLink.click();
+		settings.cancel();
+		})
+		.appendTo(buttons);
+		*/
+	};
+
+	this.create();
+}		
\ No newline at end of file