Cultura Digital#Blog

/**
 * MooTools NewsTicker by Covi.
 * 
 * Inspirado en la idea de Antonio Lupetti 
 * (http://woork.blogspot.com/2009/05/how-to-implement-news-ticker-with.html)
 *
 * @author Covi
 * @copyright 2010 J.A.Cobo (Covi)
 * @version 0.1beta
 * @todo Interfaz y extender para ticker pequeño, slideshow...
 *
 * @license MIT License http://www.opensource.org/licenses/mit-license.php
Copyright (c) 2010 J. A. Cobo Ruz (Covi), inspired by Antonio Lupetti cycle idea.
 
Permission is hereby granted, free of charge, to any
person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the
Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the
Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice
shall be included in all copies or substantial portions of
the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
var NewsTicker = new Class({
	Implements: Options,
 
	options: {
		autostart: 		true, 		// Comenzar automático o no.
		animation: 		'fade', 	// Tipo de animación, por el momento: fade, slide (mode:horizontal|vertical).
		mode:			'vertical', // Para animación slide.
		transition:		'sine:out', // TODO slide con transición expo da error pues no crea el div vacío.
		speed: 			1000, 		// Velocidad de la transición en efectos.
		periodical: 	5000, 		// Periocidad de la iteración sobre los ítems.
		padding:		0, 			// Aplicar espaciado a cada ítem si se desea (en un futuro será estilo completo).
		fixedHeight:	true		// Alto fijo o flexible para adaptarse al alto de cada ítem.
	}, 
 
	/**
	 * Constructor
	 */
	initialize: function(el, options)
	{
		this.timer 		= null;
		this.container 	= el;
		this.setOptions(options);
		if ( null === this.container ) 
			throw new Error('El contenedor de la lista no se encontró.');
 
		// # Setup container: Establecer el alto al primer hijo del container:
		this.container.setStyles({
			'height':	this.container.getFirst().getComputedSize().totalHeight + this.options.padding.toInt(), 
			'overflow':	'hidden'
		});
 
		// Eventos y run...
		if ( true === this.options.autostart ) {
			this.run();
		}
	}, 
 
	/**
	 * Efecto.
	 * @access private
	 */
	_animate: function()
	{
		var item 		= this.container.getFirst();	// Primer elemento del listado
		var first 		= item.clone(); 				// Clonar el ITEM ORIGINAL para situarlo al final
 
		// Eliminar y efecto:
		switch ( this.options.animation ) {
			// # FADE:
			default:
			case 'fade':
				item.set('tween', {
					duration: 	this.options.speed, 
					transition: this.options.transition, 
					onComplete: function() {
						this._cycleItem(item, first);
					}.bind(this)
				}).tween('opacity', 0);
			break;
 
			// # SLIDE:
			case 'slide':
				item.set('slide', {
					duration: 	this.options.speed, 
					transition: this.options.transition, 
					mode: 		this.options.mode, 
					onComplete: function() {
						this._cycleItem(item, first);
					}.bind(this)
				}).slide('out');
			break;
		}
	}, 
 
	/**
	 * Ciclo: Eliminar el ítem y pasarlo al final.
	 * @access private
	 */
	_cycleItem: function(item, first)
	{
		if ( !$chk(item) || !$chk(first) ) 
			return;
		var itemHeight 	= item.getComputedSize().totalHeight; 	// Alto del ítem para ajustar el container
		// Eliminar y copiarlo al final:
		item.dispose();
		this.container.grab(first, 'bottom');
 
		// FIXME Eliminar el div vacío que deja slide (para MooTools 1.2.6)
		// @see https://mootools.lighthouseapp.com/projects/24057/tickets/194-fxslide-sometimes-clips-the-contents-of-divs
		if ( 'slide' === this.options.animation ) {
			var wrongDivSlide = this.container.getFirst();
			if ( 'div' == wrongDivSlide.get('tag') ) {
				wrongDivSlide.dispose();
				var nextItem 	= this.container.getFirst();
				// Para el ajustar el alto del container, volvemos a coger el ítem superior.
				itemHeight 		= nextItem.getComputedSize().totalHeight;
				if ( 'horizontal' == this.options.mode ) {
					var myFx = new Fx.Slide(nextItem, {
						duration: 	this.options.speed,
						transition: this.options.transition, 
						mode:		this.options.mode
					});
					myFx.hide().slideIn();
				}
			}
		}
 
		// Si no se establece como alto fijo, ajustamos el alto del container:
		if ( false === this.options.fixedHeight ) {
			this.container.setStyle('height', itemHeight);
		}
	}, 
 
	/**
	 * Inicia el bucle para iterar sobre los ítems.
	 */
	start: function()
	{
		this.timer = this._animate.periodical(this.options.periodical, this);
	}, 
 
	/**
	 * Detiene el bucle.
	 */
	stop: function()
	{
		$clear(this.timer);
	}, 
 
	/**
	 * Lanza todo el proceso: establece, si procede, el bucle y los eventos.
	 */
	run: function()
	{
		this.container.addEvents({
			"mouseover": 	function()	{ this.stop(); 	}.bind(this),
			"mouseout": 	function() 	{ this.start(); }.bind(this)
		});
		this.start();
	}
});

$$('.newsticker').each(function(item){
	var myTicker = new NewsTicker(item, {
		periodical:		5000, 
		animation:		'slide'
	});
});

options: {
		autostart: 		true, 		// Comenzar automático o no.
		animation: 		'fade', 	// Tipo de animación, por el momento: fade, slide (mode:horizontal|vertical).
		mode:			'vertical', // Para animación slide.
		transition:		'sine:out', // TODO slide con transición expo da error pues no crea el div vacío.
		speed: 			1000, 		// Velocidad de la transición en efectos.
		periodical: 	5000, 		// Periocidad de la iteración sobre los ítems.
		padding:		0, 			// Aplicar espaciado a cada ítem si se desea (en un futuro será estilo completo).
		fixedHeight:	true		// Alto fijo o flexible para adaptarse al alto de cada ítem.
	}