MooShell

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

// ### Run...
window.addEvents({
    'domready': function() {
var CoviNewsTicker = new Class({
    Implements: Options,

    options: {
        autostart:         true, 
        animation:         'fade', 
        mode:            'vertical', // Para slide
        transition:        'sine:out', // TODO slide con transición expo da error pues no crea el div vacío.
        speed:             1000, 
        periodical:     5000, 
        padding:        0, 
        fixedHeight:    true
    }, 

    /**
     * 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 item 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 CoviNewsTicker(item, {
                periodical:        5000, 
                animation:        'slide', 
                transition:        'bounce:out', 
                mode:            'vertical', 
                fixedHeight:     false
            });
        });
    }
});

<ul class="newsticker">
    <li>(Boolean) <strong>Autostart</strong> (true): <em>true|false</em>. Comenzar o no automáticamente, obvio.</li>
    <li>(Integer) <strong>Padding</strong> (0): <em>Número</em>. Espaciado a aplicar al item.<br />
Me gustaría hacer de esto una opción para aplicar un estilo completo si se decide, daría más control sobre la visualización y corregiría posibles fallos que pudiera haber.</li>
    <li>(String) <strong>Animation</strong> ('fade'): <em>fade|slide</em> por el momento. Tipo de animación (efecto) a usar en las transiciones de ítems.</li>
    <li>(String) <strong>Transition</strong> ('bounce:out'): <em><a href="http://mootools.net/docs/core/Fx/Fx.Transitions" title="MooTools Docs Fx.Transitions">Fx.Transitions</a> (sine|bounce|bounce:in|...)</em>. Tipo de transición para el efecto.</li>
    <li>(Integer) <strong>Speed</strong> (1000): <em>Número</em>. Velocidad de la transición (opción anterior) del efecto.</li>
    <li>(Integer) <strong>Periodical</strong> (5000): <em>Número</em>. Lapso de tiempo entre el intercambio de ítems.</li>
</ul>