jQuery / eventos personalizados

Bienvenidos sean a este post, hoy les traigo un tema particular con nuestros eventos.

Hasta ahora todos los eventos que hemos estado utilizando han sido mas relacionados a los que tenemos disponibles mediante DOM pero estos no son los unicos disponibles dado que podemos personalizar los nuestros y agregarlos al repertorio, aunque ya vimos un poco sobre esto en este post al momento de ver como disparar otros eventos, si bien en esa ocasion rozamos algo muy superficial hoy intentaremos ir mas profundamente.

Los eventos personalizados deben ser iniciados manualmente por el codigo, se pueden considerar como funciones normales que definimos, como consecuencia podemos ejecutar un bloque de codigo desde cualquier otra parte del script, para esto tenemos al metodo on que nos permite ser la definicion de la funcion y el metodo trigger el encargado de invocarlo, pero los manejadores de eventos estan desacoplados del codigo lo cual nos permite manerjarlo en cualquier momento y sin necesidad de saber que pueden hacer, ya que a diferencia de las funciones normales un evento personalizado puede no tener manejadores, uno o muchos mas vinculados a el, y mas alla de la cantidad se ejecutaran al momento de disparar el evento.

Para entender este concepto vamos a utilizar el codigo que vimos en el post anterior, si no lo tienen les dejo un link para descargarlo:

Extraigan todos los archivos en un directorio y listo, recuerden que este codigo utiliza Ajax por lo tento necesitaran un servidor web porque de lo contrario el codigo no funcionara, con todo esto comentado vamos al archivo codigo.js y agregaremos el siguiente codigo:

$(document).ready(function() {
	$('#mas-fotos').click(function(ev) {
		ev.preventDefault();
		$(this).trigger('proxPag');
	});
});

En este caso asociamos el evento click al enlace identificado como mas-fotos, desactivamos la conducta predeterminada para este elemento y luego a traves de trigger lo identificaremos como proxPag, es decir que en lugar de click usaremos a proxPag, para entenderlo tomemos el siguiente bloque de codigo:

$(document).ready(function() {
	var numPag = 1;
	$('#mas-fotos').click(function(ev) {
		ev.preventDefault();
		var $link = $(this);
		var url = $link.attr('href');
		if (url) {
			$.get(url, function(datos) {
				$('#galeria').append(datos);
			});
			numPag++;
			if (numPag < 5) {
				$link.attr('href','pages/' + numPag + '.html');
			}
			else {
				$link.remove();
			}
		}
	});
});

Y modifiquenlo de la siguuiente manera:

$(document).ready(function() {
	$(document).on('proxPag', function() {
		var url = $('#mas-fotos').attr('href');
		if (url) {
			$.get(url, function(datos) {
				$('#galeria').append(datos);
			});
		}
	});

	var numPag = 1;
	$(document).on('proxPag', function() {
		numPag++;
		if (numPag < 5) {
			$('#mas-fotos').attr('href','pages/' + numPag + '.html');
		} else {
			$('#mas-fotos').remove();
		}
	});
});

La primera modificacion es que ahora de usar un solo evento por medio de on, utilizamos dos con el metodo on, el siguiente cambio es que no pasamos click sino el nuevo «evento», hablemos sobre el primero:

$(document).on('proxPag', function() {
	var url = $('#mas-fotos').attr('href');
	if (url) {
		$.get(url, function(datos) {
			$('#galeria').append(datos);
		});
	}
});

En este caso sera el encargado de obtener la siguiente pagina que esta en el link, y la agregara al div identificado como galeria, como usamos a document para interceptarlo debimos usar al selector con el id del link en lugar de this, con esto comentado veamos el siguiente evento:

var numPag = 1;
$(document).on('proxPag', function() {
	numPag++;
	if (numPag < 5) {
		$('#mas-fotos').attr('href','pages/' + numPag + '.html');
	} else {
		$('#mas-fotos').remove();
	}
});

Al igual que antes tenemos una variable para cada pagina, de vuelta usamos al nuevo evento en lugar de click, y esto es similar a como era antes, incrementamos la variable y este nuevo valor se lo asignamos al atributo href del link, de vuelta debemos usar al selector con el nombre del link, y mientras sea menor a cinco podemos seguir agregando mas paginas salvo cuando ya no se cumpla esa condicion donde debemos remover el enlace, si lo prueban funcionara de la siguiente forma

Como mencionamos anteriormente un evento de este estilo puede estar vinculado a mas de un manejador, para esto vamos a crear un nuevo evento al cual relacionaremos con el anterior, este monitoreara el tema del scrroll para agregar las nuevas paginas a medida que bajemos, para ello en el archivo codigo.js agregaremos el siguiente bloque de codigo:

(function($) {
	function checkScrollPos() {
		var dist = $(window).scrollTop() + $(window).height();
		if ($('#contenedor').height() <= dist) {
			$(document).trigger('proxPag');
		}
	}

	$(document).ready(function() {
		$(window).scroll(checkScrollPos).trigger('scroll');
	});

})(jQuery);

En este caso primero definiremos una funcion que chequea la posicion del scroll, primero definiremos una variable con el valor del top de scroll de la ventana mas la altura de la ventana, despues con un condicional chequeamos si la altura del div contenedor sea menor o igual al valor de la variable anterior y en caso de ser verdadero dispara al evento proxPag que establecimos anteriormente, en el siguiente bloque de codigo unimos al metodo scroll a window e inmediatamente disparamos el scroll para que vaya agregando las distintas paginas, veamos como funciona ahora nuestra pagina

Observen como bien entramos a la pagina ya tenemos algunas imagenes cargadas pero a medida que nos movemos se siguen agregando y cuando llegamos al ffinal no existe mas el link para agregar mas paginas porque en cada llamado sigue trabajando el chequeo anterior, asi que en la «teoria» tenemos dos eventos con el mismo nombre pero distintos manejadores, pero esto podemos fusionarlo y lograr un trabajo en conjunto pero para ello tomaremos este bloque:

$(document).ready(function() {
	$(document).on('proxPag', function() {
		var url = $('#mas-fotos').attr('href');
		if (url) {
			$.get(url, function(datos) {
				$('#galeria').append(datos);
			});
		}
	});

	var numPag = 1;
	$(document).on('proxPag', function() {
		numPag++;
		if (numPag < 5) {
			$('#mas-fotos').attr('href','pages/' + numPag + '.html');
		} else {
			$('#mas-fotos').remove();
		}
	});
});

Y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$(document).on('proxPag', function(ev, scrollVisible) {
		var url = $('#mas-fotos').attr('href');
		if (url) {
			$.get(url, function(datos) {
				var $datos = $(datos).appendTo('#galeria');
				if (scrollVisible) {
					var nuevoTop = $datos.offset().top;
					$(window).scrollTop(nuevoTop);
				}
				checkScrollPos();
			});
		}
	});

	var numPag = 1;
	$(document).on('proxPag', function() {
		numPag++;
		if (numPag < 5) {
			$('#mas-fotos').attr('href','pages/' + numPag + '.html');
		} else {
			$('#mas-fotos').remove();
		}
	});
});

En este caso solo modificamos el primer evento, el segundo se mantiene igual, pero ahora a la funcion de callback le pasamos dos argumentos, el segundo sera pra efectuar el scroll, pero esto lo veremos al final, despues seguimos definiendo el objeto que contendra la direccion donde sacaremos los datos para agregar a galeria, el condicional es el mismo y lo usamos para verificar que posea algun valor, aqui tenemos la otra diferencia, en lugar de solo agregar los datos ahora definiremos un objeto con el resultado de agregar los datos de la pagina a galeria, despues chequeamos si el nuevo argumento es verdadero y en caso de serlo define un nuevo top que sera el valor limite de galeria y de ahi tomaremos el top, para despues desplazar a la ventana a ese nuevo lugar, por ultimo llamamos a checkScrollPos para que efectue el chequeo de estos cambios y actualice sus parametros, nuestro siguiente paso sera comentar o eliminar el siguiente bloque:

$(document).ready(function() {
	$(window).scroll(checkScrollPos).trigger('scroll');
});

Porque esta misma linea la aplicaremos en la proxima modificacion y no la necesitamos en este momento, con esto realizado tomaremos el siguiente bloque de codigo:

$(document).ready(function() {
	$('#mas-fotos').click(function(ev) {
		ev.preventDefault();
		$(this).trigger('proxPag');
	});
});

Y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('#mas-fotos').click(function(ev) {
		ev.preventDefault();
		$(this).trigger('proxPag', [true]);
	});

	$(window).scroll(checkScrollPos).trigger('scroll');
});

Como pueden ver son muy similares pero con dos sutiles diferencias, la primera es el valor true que pasamos para poder cumplir el nuevo condicional que agregamos y segundo agregamos la linea eliminada anteriormente para que haga la misma tarea, probemos a ver como funciona la pagina ahora

En el video podemos ver como ahora los dos manejadores actuan con el mismo evento, proxPag, y asi como lo hicimos en este caso podemos agregar muchos mas, antes de finalizar les recuerdo que para poder ver en accion estos ejemplos necesitan un servidor web, en caso de no tenerlo les recomiendo dos posts:

En este les comento como instalar un pc virtual con un linux debian, en este otro post:

Y en este les comento como instalar un Aparche en un debian, y de manera opcional pueden instalar PHP y mariadb, les recomiendo hacerlo de esta forma porque solo necesita 1 GB de RAM y muy poco espacio en el disco, y cuando no lo necesiten mas simplemente lo borran y se evitan muchos dolores de cabeza, y ahora antes de finalizar les dejo todos los archivps del proyecto y los codigos finales de este post:

En resumen, hoy hemos visto crear eventos propios, mas alla de que puedan servirnos para identificar un evento mejor a lo que esta relacionado, sino tambien tendremos la posibilidad de que este evento pueda estar asociado a mas un manejador, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.