Explorar Implementa / extiende en MooTools

Question

Estoy trabajando en algunos efectos y cosas para conseguir una manija en Clases / Instrumental / Extiende. Los ejemplos aquí son para las clases base (MooSlidesFx, MooSlidesFx.Elements) desde el que crear muchos efectos con un proyecto que estoy trabajando, y dos clase hija (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade) que realmente haga algo.

http://paste.mootools.net/m6afc7746

La primera clase, MooSlidesFx, prepara las cosas para los demás, diseñado para ser implementado solo.

La segunda clase, MooSlidesFx.Elements, se extiende MooSlidesFx a implementarse del mismo modo, pero en vez de animar el elemento aprobada en, va a animar de los niños en orden (no en busca de una cadena lección en este momento, pero es siguiente en mi lista!), y por lo que algunos de los métodos que se redefinen.

La tercera clase, MooSlidesFx.Fade funciona muy bien. Implementa MooSlidesFx, define dos métodos poco, y nos vamos a las carreras.

Entonces el problema. Es parece como acabo posible realizar ambas MooSlidesFx.Elements y MooSlidesFx.Fade y Pow !! Tengo un nuevo efecto que no desaparece en el elemento, sino que se desvanece en ella de los niños escalonada.

No es así, gracias por cualquier ayuda!

Aquí viene una madre carga de código:

var MooSlidesFx = new Class({

    Implements: Options,

        options: {
            delay: 0,
            duration: 500,
            how: 'in',
            transition: 'sine:in:out'
        },

    initialize: function(el,options){
        this.setOptions(options);
        this.el=$(el);
        this.animation = this.setAnimation(el);
    },

    animate: function(){

        this.animation.set($clear);
        var calculations = this.calculate(this.el);
        this.animation.set(calculations[0]);

        var delayed = function(){ 
            this.animation.start(calculations[1]) 
        }.bind(this).delay(this.options.delay);

    },

    getDuration: function(){
        return this.options.delay+this.options.duration
    }

});

MooSlidesFx.Elements = new Class({

    Extends: MooSlidesFx,

        options: {
            selector: false,
            elementDelay: 200,
            order: 'normal'
        },

    animations: [],

    initialize: function(el,options){
        console.log('Elements initialize');
        this.parent(options);

        this.elements=this.el.getElements(this.options.selector);

        this.elements.each(function(el,index){
            this.animations.include(this.setAnimation(el,index));
        }.bind(this));

    },

    animate: function(){

        var eachDelay = this.options.elementDelay;
        var calculations=[];

        this.animations.each(function(animation,index){
            animation.set($clear);
            calculations.include(this.calculate(index));
            animation.set(calculations[0]);
        }.bind(this));

        var delayed = function(){
            this.elements.each(function(el,i){
                var go = function(){
                    console.log('going '+i)
                    this.animations[i].start(calculations[i][1]);
                }.bind(this).delay(d);
                eachDelay = eachDelay + this.options.elementDelay;
            }.bind(this));
        }.bind(this).delay(this.options.delay);

    },

    getDuration: function(){
        return this.options.delay+this.options.duration+((this.elements.length-1)*this.options.elementDelay);
    }

});

MooSlidesFx.Fade = new Class({

    Implements: MooSlidesFx,

    setAnimation: function(el){
        var animation = new Fx.Tween(el,{ 
            property: 'opacity',
            duration: this.options.duration,
            transition: this.options.transition,
        });
        return animation;
    },

    calculate: function(el){
        return (this.options.how=='in') ? [0,1] : [1,0];
    }

});

MooSlidesFx.Elements.Fade = new Class({

    Implements: [MooSlidesFx.Fade,MooSlidesFx.Elements]

    // TypeError: Result of expression 'this.caller._owner.parent' [undefined] is not an object.
    // mootools-core.js (line 1173) 
});


MooSlidesFx.Elements.Fade = new Class({

    Implements: MooSlidesFx.Fade,
    Extends: MooSlidesFx.Elements

    // TypeError: Result of expression 'this.setAnimation' [undefined] is not a function.
    // MooSlides.Fx.js (line 15)
});


MooSlidesFx.Elements.Fade = new Class({

    Implements: [MooSlides.Fx.Fade, MooSlidesFx.Elements]

    // line 49 is never logged, so Elements isn't ever initialized, acts just like MooSlidesFx.Fade
});


/***** usage *****/

var fx = new MooSlidesFx.Elements.Fade('test',{ selector: 'li'}).animate();


/* 

HTML

<ul id="test">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

*/

Answer 1

El problema fue que cuando MooSlidesFx.Elements trató de extender MooSlidesFx. Todavía no sé por qué, pero no me importa ahora.

Me di cuenta me ampliado MooSlidesFx en MooSlidesFx.Elements y re-escribió cada uno de los métodos. La única reutilización Salí de que era this.el y algunas opciones.

Así que ... los separó en MooSlidesFx.Element y MooSlidesFx.Elements.

Entonces creó una biblioteca MooSlidesFx.lib y se almacena la clase de fundido allí (MooSlidesFx.lib.Fade).

Ahora puede simplemente:

MooSlidesFx.Fade = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Element]
});

MooSlidesFx.Fade.Elements = new Class({
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Elements]
});

Y es sorprendente. I <3 MooTools. Ahora es el momento de construir la biblioteca con más clases de efecto!